Log in GO PRO NOW
GO PRO NOW
Your workflow could help someone. Share it!

Guides Google

How To Use Google Stitch To Redesign Your Entire Website (For Free)

This guide teaches you how to use Google Stitch to redesign an existing web page by uploading screenshots of the page you already have.

beginner 5 steps

Introduction

This guide teaches you how to use Google Stitch to redesign an existing web page by uploading screenshots of the page you already have. You will generate improved layout options, create variations, and produce a design direction you can hand off to a developer or coding AI. The source describes this as a very fast way to improve weak layouts without starting from a blank canvas.

Try both the screenshot method and the URL method in Stitch to see which gives you the stronger starting point.

Step-by-step 5 steps

Instructions

  1. Step 1 of 5

    Pick one page and define what needs to change

    Start with a single page on your site that you want to improve. Do not try to fix your whole site at once; this works better one page at a time, or even one component at a time.

    Take a screenshot of the page and identify what needs to improve. Look for issues like too much dead space, unclear value, or a layout that makes the page feel empty. The more clearly you can describe the problem, the better Stitch can respond.

    Pro tip: You can also paste a URL into Stitch and ask it to redesign the page that way. Try both the screenshot method and the URL method to see which gives you the better starting point.
  2. Step 2 of 5

    Upload the screenshot and prompt the redesign

    Go to Google Stitch and drop the screenshot into the chat box. Then give Stitch a prompt focused on the design problem you want solved.

    image-2138
    Prompt 
    Improve the layout of this page so the user sees more content and perceives more value. Make the content more accessible and reduce the dead space.

    This works because it tells Stitch the outcome you want, not just the tool you are using. You are giving it design direction.

    Pro tip: Include the reason behind the redesign. Yours might be to increase conversion, make the page feel more valuable, improve readability, or guide the user to the next action more clearly.
  3. Step 3 of 5

    Generate variations until one clicks

    Once Stitch gives you the first redesign, do not assume version one is the final answer. Click into the generated page and go to Generate > Variations > Generate Variations.

    image-2139

    Stitch should generate multiple new versions of the page. Instead of starting over, you can explore different directions from the same visual starting point and quickly see which layout feels strongest.

    In the source test, this was the fastest way to move from “better” to “actually usable.”

  4. Step 4 of 5

    Export the version you want to build

    Once you get a variation you like, click More > Export. From there, you can move the design into Figma or download the code and hand it off to your developer or coding AI.

    Do not treat the exported page like a perfect drop-in replacement every time. Stitch is useful for generating the layout, components, and design direction, but your engineer may still want to rebuild the best parts using your existing styles and structure.

    Pro tip: This is especially useful if you work with coding agents. Let Stitch do the design work first, then tell your coding AI to rebuild the components and layout using your current CSS or component system.
  5. Step 5 of 5

    Reuse the same canvas for more pages

    Repeat the process with more pages inside the same canvas so Stitch keeps working from the same design system as you go.

    Instead of redesigning every page from scratch, you can slowly build a more consistent visual system across your site.

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

  • Marketers and founders who know a page on their site feels weak but do not want to redesign it from scratch in Figma
  • Anyone working with a developer or coding agent who wants a better visual starting point before handing off the build
  • People managing older websites who want to improve one page at a time instead of committing to a full redesign

What You Will Build

You will create a redesigned version of an existing web page using screenshots of the page you already have. From there, you will choose a stronger variation and export it as a prototype, a Figma file, or code for a developer or coding AI.

  • A redesigned page direction based on your existing page
  • Multiple layout variations from the same starting point
  • An exportable prototype, Figma file, or code output
image-2137

What You Need

  • A Google account
  • A web page you want to improve
  • A screenshot of that page, or the page URL if you want to test both approaches

Going Further

  • After generating a redesign, you can export to AI Studio to turn it into a live prototype using Google’s vibe coding workflow. You can also use Stitch’s design system controls to adjust fonts and visual direction before generating more versions, then hand the design direction and components to your developer or coding agent.