Log in GO PRO NOW
GO PRO NOW
Tried GPT Terra? Get featured in The Rundown 🚀

Guides Google

Use Google Stitch to Generate HeatMaps to Design High Performing Websites

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.

beginner 5 steps

Introduction

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.

Once you have a new site design in Google Stitch, try the generate → variations tool. Don’t settle for the first result.

Step-by-step 5 steps

Instructions

  1. Step 1 of 5

    Sign in to Google Stitch

    Sign in to Google Stitch. It’s free to use.

  2. Step 2 of 5

    Get familiar with the Stitch workspace

    Familiarize yourself with the layout and tools in Google Stitch.

    03_google_stitch_toolbar
    • 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 the preview layout between web, mobile, or tablet.
    • Export your designs to AI Studio, a zip file, or your clipboard.
  3. Step 3 of 5

    Capture your hero section

    Grab a screenshot of your site. Focus on the above-the-fold area, especially the hero section.

    04_hero_before

    Pro tip: You can generate a heat map for your entire landing page by right-clicking your site and saving it as a PNG.

  4. Step 4 of 5

    Generate a predictive attention heat map

    Go to Google AI Studio. Drop in your screenshot with the prompt below. Update the CTA text so it matches your site.

    Prompt 
    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.

  5. Step 5 of 5

    Redesign the hero section in Google Stitch

    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.

    Prompt 
    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.
    05_prompting_stitch

    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.

    06_before_after_optimizations

    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.

    06_before_after_optimizations_2

    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.

You're done

That's the whole workflow

Mark it complete to save your progress. Background and answers to common questions follow below.

Keep going

Keep learning with Rundown Pro

A guide shows you one workflow. Pro opens the full course library, so you can learn the whole system behind it.

  • Every on-demand course
  • Certifications on completion
  • Group office hours and member perks

$29/mo, cancel anytime

Overview Back to the steps

Background and context

Who This Is Useful For

  • Anyone with an outdated website
  • Designers looking to improve conversion rate optimization
  • Website owners with low click-through rates or sales

What You Will Build

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.

07_cover_image_hat_heat_map
  • A screenshot-based attention audit of your landing page hero section
  • A generated predictive heat map
  • A redesigned hero section concept in Google Stitch

What You Need

  • A Google Stitch session
  • Google AI Studio
  • A screenshot of your site’s above-the-fold hero section
  • Your primary CTA text, such as “Get Started”
  • Optional: a full-page PNG if you want to generate a heat map for the entire landing page

Going Further

  • Download your selected design from Google Stitch.
  • Use the PNG and HTML file with your AI coding assistant, such as Replit, to redesign your hero section based on the optimized screenshot.
  • If Stitch updates your background hero image, use AI Studio to extract the image from the new design PNG.
  • Use the generate variations tool in Google Stitch to explore more options before settling on a final design.