Guides Google published dec 11, 2025
Learn how to use Google Stitch to create a predictive attention heat map for a webpage, identify where visitors’ eyes are likely to go, and use those insights to optimize a hero section for click-through rate and conversions.
You will create a predictive heat map and use it to generate an optimized hero section design that focuses attention on your primary call to action.
Once you have a new site design in Google Stitch, try the generate → variations tool. Don’t settle for the first result.
Sign in to Google Stitch. It’s free to use.
Familiarize yourself with the layout and tools in Google Stitch.
Grab a screenshot of your site. Focus on the above-the-fold area, especially the hero section.
Pro tip: You can generate a heat map for your entire landing page by right-clicking your site and saving it as a PNG.
Go to Google AI Studio. Drop in your screenshot with the prompt below. Update the CTA text so it matches your site.
Use Nano Banana to generate a predictive attention heat map on top of this landing page. The audit should specifically highlight areas of high visual engagement and identify any elements that are distracting focus away from the primary 'Get Started' CTA.Download the generated heat map image.
Drop the heat map and your original screenshot into a new Google Stitch session. Make sure you start with a new web design, then use the prompt below.
Analyze the provided landing page screenshot alongside its predictive attention heat map. Generate a redesign of the hero section optimized specifically to maximize the click-through rate on the primary 'Get Started' button. The new design should use the heat map insights to eliminate distractions and focus user attention directly on the main conversion goal.
Review the before-and-after versions of your optimized designs. Small visual changes can still have a meaningful impact on click-through rate and conversions.
Look for structural changes that guide attention. In the example, the text width on the left moves from small to medium-wide, steadily drawing the eye from left to right toward the lead form.
Check how the redesign treats buttons and secondary actions. In the example, the heat map showed that the secondary “View Lookbook” button was drawing too much attention, so Stitch changed it into a smaller link underneath the primary button.
Keep going
Pro adds the full on-demand course library, certifications, group office hours, and eligible member perks.
$29/mo, cancel anytime