Google Stitch 2.0: A Step-by-Step Guide to the Free AI Design Tool
How Google Stitch 2.0 turns a text prompt into prototypes, design systems, and code handoff, walked through screen by screen.
What is Google Stitch 2.0?
Google Stitch is a free AI design workspace that turns a written description into a working interface, lets you revise it through chat or voice, and exports the result as HTML, Figma files, or code your development tool can build on. It covers the stretch between “I have an idea for an app” and “I have screens, a design system, and a prototype to hand to a coding agent.” It’s currently free to use with daily generation limits that reset at midnight UTC.
TL;DR
- Stitch generates full interfaces from a text prompt, not just isolated UI components, and lets you choose between web and app project types from the start.
- Revisions work best when targeted, meaning you describe one specific change (a panel size, a button’s prominence) rather than a vague instruction like “make it better.”
- A design system panel locks in colors, fonts, spacing, and component patterns so every new screen you generate stays visually consistent with the first one.
- You can steer the design with images, rough wireframes, or live voice input, not just typed prompts, which gives you more control over structure and style separately.
- Prototyping connects your screens into a clickable flow, so you can test navigation before any code exists.
- Export options include HTML/CSS with Tailwind, Figma with named layers and auto layout, and an MCP integration that lets coding agents read and edit Stitch projects directly.
- The handoff to a coding tool is explicit: you export HTML, images, and a design.md file, then instruct your coding agent to build the real app using those as reference.
How do you start a project in Stitch?
You open Stitch, sign in with a Google account, and land on a prompt box with an attachment option and a choice between “app” and “web.” Templates for things like dashboards and landing pages are available if you’d rather start from an existing direction instead of a blank page.
Before generating, you pick a generation mode. The current interface offers “speed,” for quick collaboration, and “balanced,” which aims for a middle ground between speed and output quality. Starting with balanced is a reasonable default for a first pass.
The prompt itself matters more than its length. A useful brief names the user, the task they’re trying to accomplish, and the general visual direction, things like background tone, accent color, and layout philosophy. A prompt that only describes a vibe (“make it look modern”) gives Stitch much less to work with than one that describes who the app is for and what they need to see first.
How do you revise a design without losing what works?
This is the part most AI design tools handle badly, and it’s where Stitch’s workflow is more deliberate. Once a screen generates, you check its structure first: can you find the primary action immediately, is the main content area legible, does the layout survive longer or messier sample data than the AI’s first guess.
From there, you select the screen, add it to the chat, and describe one specific change. Something like “make the upcoming uploads panel more compact so the main board has more horizontal space, keep the current colors, typography, and navigation” gives Stitch a clear, bounded task. A vague instruction like “make the dashboard better” leaves too much open to interpretation and tends to produce a result that changes more than you wanted.
The practical approach is to change one major thing, inspect the result, then move to the next adjustment. You can still explore larger alternatives, but incremental edits give you more control over how the design evolves, and they make it easier to tell whether a change actually improved the interface or just moved the problem somewhere else.
What tools does Stitch offer for exploring different directions?
Beyond direct chat edits, Stitch includes a few other ways to steer a design:
Theme editing lets you adjust light or dark mode, accent color, font, and corner radius on an existing screen without regenerating the whole layout. This is useful for quick style comparisons, though it’s worth checking that detail elements like status labels or small text stay readable under a new theme.
Variations generate multiple options from the same brief, with a creative range control. A lower range produces smaller refinements; a higher range gives the tool more freedom to restructure the layout. Requesting a few variations (a compact layout, a spacious one, a darker theme) and comparing them side by side helps surface which structure actually supports the task, rather than which one just looks the most polished in a screenshot.
Reference images let you upload a rough wireframe, sketch, or screenshot and ask Stitch to preserve that structure, or to borrow a style’s typography and spacing while keeping your own content. Google also supports importing existing code or design files, so the workflow isn’t limited to brand-new projects.
Live mode lets you talk through a design conversationally while the agent works, giving verbal feedback like “the dashboard feels too crowded, give the main content more room” and asking the agent to critique its own layout choices.
How does the design system feature keep multiple screens consistent?
Once you’ve settled on a direction for one screen, the design system panel is what prevents every subsequent screen from drifting in style. It shows the active colors, fonts, spacing, roundedness, and component patterns Stitch is using, and you can edit these core properties directly instead of re-describing your palette in every prompt.
Setting this as the project default means new screens inherit the same rules automatically, and you can apply it retroactively to bring earlier screens in line. The portable version of this system is a file called design.md, which contains structured design values plus written guidance on how to use them. It travels with the project and can be handed to another tool or coding agent later. If you already have an existing brand, pointing Stitch at a website URL or reference image lets it extract design rules directly, instead of you typing them out by hand.
With that system in place, generating additional screens (a detail view, a calendar, an empty state for new users, a mobile layout) becomes a matter of referencing the existing design system and describing the new screen’s specific job. The sidebar, button styles, and color use should carry over automatically, and any place where they don’t is a clear, targeted thing to fix in the next edit.
How do you turn the screens into a prototype?
Once you have a handful of related screens, selecting one and choosing “prototype” lets you connect them through interaction hotspots, linking a card on a dashboard to its detail page, or a calendar entry back to the screen it represents. A play mode lets you click through the flow as a user would, which makes it much easier to notice an awkward navigation path than staring at static screens side by side. Stitch can also suggest or generate the next screen as you explore the flow, letting you build out a user journey incrementally rather than planning every screen up front.
How do you get a Stitch design into actual code?
For a basic handoff, you select the finished screens and download their HTML and images as a zip file, keeping the exported design.md alongside them. The image shows the intended look, the HTML gives a developer a concrete starting point, and the design file documents the shared rules. Stitch’s generated front-end output uses HTML and CSS with Tailwind support, so if your app is built in React, Vue, or another framework, a coding agent translates that material into real components rather than using the raw output directly.
One coffee. One working app.
You bring the idea. Remy manages the project.
A workable instruction to a coding agent looks like: implement the exported screens as a React app using the provided HTML, images, and design.md, build reusable components for navigation and repeated elements, wire up the screens’ connections, and use placeholder data first. From there you check the rendered app against the Stitch references at both desktop and mobile sizes, fix any layout drift, and then start adding real behavior and data persistence.
Stitch also supports exporting to Figma with editable text, named layers, and auto layout for teams that work there, and it connects to other Google tools for publishing or further implementation.
For people already working through a coding agent, Stitch has an MCP (Model Context Protocol) integration that lets the agent list projects, read screens, request edits, and generate variations directly, without manually exporting and re-importing files each time. Setting it up means creating an API key in Stitch’s settings and configuring it in your coding tool, keeping the key out of any front-end code. Google also publishes a CLI and SDK for teams that want to script parts of this process.
Is Google Stitch worth using for a solo developer or small team?
For a solo builder or small team, the value isn’t really in the first screen Stitch generates, it’s in how quickly you can compare layout directions, fix the weak parts of a chosen design, and carry a consistent design system through an entire app before writing a line of production code. That’s a meaningfully different workflow than asking a coding assistant to “make it look better” and getting vague, inconsistent results. Because it’s free with daily credits, the cost of trying it on a real project is close to zero. Any coding subscriptions or hosting you use downstream are separate costs.
Frequently Asked Questions
Is Google Stitch free to use?
Yes. Stitch is free with daily generation credits that reset at midnight UTC. You can check your remaining allowance in the settings panel. Any coding tools, hosting, or other services you use after exporting your design are billed separately.
Does Stitch produce production-ready code?
It produces HTML and CSS (with Tailwind support) along with image assets and a design.md file documenting your design system. This is meant as a concrete reference for a coding agent or developer to build the real application from, particularly if you’re working in a framework like React or Vue, rather than final application code itself.
Can Stitch work with a design I already have?
Yes. You can import existing code or design files, or point Stitch at a website URL or reference image so it extracts your existing brand’s colors, typography, and spacing instead of you describing them from scratch.
What’s the difference between the “speed” and “balanced” generation modes?
Speed prioritizes faster output for quick back-and-forth collaboration, while balanced aims for a middle ground between generation speed and design quality. Balanced is a reasonable starting point for a first full generation.
How does the MCP integration help coding agents?
MCP lets a coding agent connect directly to your Stitch projects, listing them, reading individual screens, requesting edits, and generating variations through tool calls instead of manual file exports. It requires creating an API key in Stitch’s settings and configuring it in your coding environment.
