Use Google Stitch to Generate HeatMaps to Design High Performing Websites
In this guide you will learn how to use Google Stitch to generate a predictive heat map and instantly see where people’s eyes and attention go on your website.
Required tools
None required
Updated
Jan 30, 2026
The Rundown:
In this guide you will learn how to use Google Stitch to generate a predictive heat map and instantly see where people’s eyes and attention go on your website. You can use this to optimize your site’s design for click-through rate and conversions.
Who is this useful for:
- Anyone with an outdated website
- Designers looking to improve their CRO
- Website owners with low CTR or sales
What You Will Build:
Step 1
Sign into Google Stitch. It’s free to use!
Step 2
Familiarize yourself with the layout and tools.
- Generate variations or a predictive heat map of a page.
- Ask the agent to make edits via chat, change the color scheme or annotate it directly with Nano Banana
- Change preview layout between web, mobile or tablet.
- Export your designs to AI Studio, zip file or your clipboard.
Step 3
Grab a screenshot of your site. Just grab above the fold (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.
Step 4
Go to Google’s AI studio. Drop the screenshot in with the following prompt. Make sure you update the CTA text to match 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.
Step 5
Drop the heat map and your screenshot into a new Google Stitch session along with the following prompt. Make sure you toggle to star with a new Web design.
”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.”
Here’s the before and after of two optimized designs I did. The changes may look small but a 10-20% improvement on your site can add hundreds or thousands of more conversions a year.
The biggest change I noticed was how the text width on the left side goes from small, medium wide so your eyes are steadily drawn from left to right where the lead form is.
Bigger buttons are usually better. The heat map also showed that the secondary “View Lookbook” button was drawing too much attention so Stitch made it a small link underneath the button instead.
Going Further:
- Select your new design in Google Stitch and click more→download
- Throw the png and html file into your AI coding assistant (we’re using Replit) and prompt something like “redesign our hero section to look like the optimized design screenshot I've attached. I've also attached an example html file to give you an idea of layout and style”
- In this instance Stitch updated my background hero image to be more uniform. To extract it for Replit, I simply put the png of my new design into AI Studio and asked it to pull the image out for me.
Pro Tip: Once you have a new site design in Google Stitch, play around with the generate→variations tool. I got a lot of great results playing with this. Don’t settle for the first one.