Google Stitch: Free AI Tool That Turns Prompts into UI Designs

Building a side project but struggling with UI design? Google Stitch generates complete user interfaces from text prompts, and it is still free.

Everything below was re-checked against Google's own blog posts, docs and help pages on 6 August 2026. Stitch is a Google Labs experiment, which means its features and limits can change without notice - and in the eight months since this post was first written, a lot of them did.

---

What changed since the December 2025 version of this post

Good news first: Stitch has not been renamed, discontinued, folded into Gemini or AI Studio, or moved behind a paywall. Same name, same URL, still a Google Labs beta, still free. The premise of the original post survived intact.

What changed:

• Stitch got a lot more capable. The May 2026 I/O release rebuilt it around a streaming "Stitch Agent" you steer in real time, with voice input, plus export into Google Antigravity and one-click publishing to Netlify.
• Brand and design systems are now supported. The old version of this post listed "custom design tokens or brand guidelines" as something Stitch cannot do. In April 2026 Google open-sourced the DESIGN.md format to do exactly that. That limitation is now a feature.
• There is an official MCP server, an Agent Skills library, and a Gemini CLI extension. If you already work inside a coding agent, this is now the most interesting part of the product, and the old post did not mention it at all.
• Firebase Studio, which the old comparison table recommended, is being shut down. New signups were disabled on 22 June 2026. That row has been removed.

---

What is Google Stitch?

Google Stitch is an AI tool from Google Labs, launched at Google I/O 2025. It uses Gemini models to turn your descriptions into UI designs and exports clean, readable front-end code.

Think of it as a UI designer on demand. Describe what you want, upload a sketch, or share a screenshot - and Stitch builds it.

Try it: stitch.withgoogle.com

On "free"

Stitch is free, with a caveat the original version of this post did not give you.

It is a free Google Labs beta. Google's own AI credits documentation lists Google Flow and Google Antigravity as credit-consuming products and does not list Stitch. But daily credit limits on Stitch clearly exist - Google's own Gemini community hosts a thread asking when Stitch daily credits reset - and Google publishes no number for them anywhere I could find.

So: free, yes. "Generous limits", which is what this post used to claim, is not something anyone can verify. Third-party sources give figures that contradict each other by as much as 30-fold, so none are quoted here. Plan for a ceiling you cannot see, and remember that Labs status carries no continuity guarantee.

---

Key Features

Text-to-UI Generation

Describe your interface in plain English:
- "A pricing page with 3 tiers and a toggle for monthly/yearly"
- "A dashboard with sidebar navigation and data cards"
- "A login form with social auth buttons"

Stitch generates a complete, responsive design with multiple screens.

Image-to-UI

Have a screenshot, sketch, or wireframe? Upload it and Stitch recreates it as clean, editable code. It handles napkin sketches, whiteboard drawings, and polished mockups equally well.

The Stitch Agent

As of the May 2026 release, Stitch streams its work straight to the canvas - you watch it build in real time and steer it mid-generation rather than waiting for a finished screen and then asking for changes. You can drive it by voice, including spoken design critiques.

Google describes this as "a live, collaborative partnership with the Stitch Agent". That is human-to-agent collaboration, not multiplayer editing - see the limitations section.

DESIGN.md: your brand, as a file

In April 2026 Google open-sourced the DESIGN.md format. It lets you describe your design system in a file that Stitch and other agents can read, so generated UI matches your brand rather than defaulting to generic AI styling.

Google's framing: Stitch "understands the reasoning behind your design system and can generate user interfaces that match your brand", and agents can validate their choices against WCAG accessibility rules. The May 2026 update added importing an existing codebase and design files as context, for the same reason.

This is the single biggest functional change since the original post, and it inverts what used to be Stitch's most-cited weakness.

Export and publish

• Google AI Studio - get a shareable link to your build
• Google Antigravity - export screens into Google's agent-first development platform to plug in backend logic
• Netlify - publish directly to the web in one click
• .zip and copy to clipboard - download or paste into a coding agent like Claude Code, Cursor or Copilot
• Figma - still works (a Google team member confirmed the integration was functioning as of 19 May 2026), but note that Figma export is absent from every 2026 Stitch announcement, so it is a quietly de-emphasised path

The Netlify option matters more than it sounds: you can now go from prompt to a live URL without leaving Stitch.

The Jules export from the original version of this post is not named in any 2026 Stitch announcement. I could not confirm whether it still exists, so it is listed here as unverified rather than removed or endorsed.

AI modes

Stitch runs on current Gemini models, with a fast default for quick iteration and a higher-quality Pro option for polished output, plus a redesign mode that rebuilds an existing app or site from a screenshot.

Deliberately no model version numbers here. Stitch lags the Gemini release train by several versions - through mid-2026, users on Google's own developer forum were still asking when newer Gemini models would land in Stitch, and Google staff replied they could not give an ETA. Any specific version printed in an article like this one goes stale in weeks. Check the mode picker in the product.

Prototypes

You can stitch different screens on your canvas together into working prototypes, so you are designing interactions and complete user flows rather than static screens.

Annotate

The Annotate feature (marked with a banana icon, hinting at Google's Nano-Banana model) lets you add comments and visual notes directly onto UI screens. Submit your annotations and Gemini processes the feedback into context-aware UI changes.

Multi-Select Editing

Hold Shift and click to select multiple screens at once. Apply a single prompt or theme change to all of them simultaneously - a real time-saver for consistency.

---

Stitch in your coding agent (MCP)

This is the part that did not exist when this post was first written, and for anyone already working inside a coding agent it is now the main event.

Google ships:

• An official Stitch MCP server, documented at stitch.withgoogle.com/docs/mcp/
• An Agent Skills library under the google-labs-code GitHub org, covering code-to-design, React, React Native, shadcn-ui and Vite generation, and DESIGN.md analysis
• A Gemini CLI extension
• A Google Codelab for the Antigravity + Stitch MCP design-to-code pipeline

The skills work with Claude Code, Cursor, Codex, Antigravity, Gemini CLI and OpenCode.

The honest friction: setup needs a Google Cloud project with the Stitch API enabled and a Stitch API key. That is a genuinely heavier lift than the web flow, where you just sign in and type. Worth it if you are generating UI regularly inside an agent; overkill if you want one landing page.

---

How to Use Google Stitch

Step 1: Access the Tool

1. Go to stitch.withgoogle.com
2. Sign in with your Google account
3. No installation needed - fully web-based

The May 2026 update was announced as available to global users, and no current Google page mentions a waitlist, so the waitlist note in the original version of this post has been removed. Availability may still vary by region.

Step 2: Describe Your UI

Write a clear prompt describing what you need:

Good prompt:

A mobile app onboarding screen with:
- Welcome headline
- 3 feature highlights with icons
- Get Started button at the bottom
- Progress dots showing step 1 of 3


Vague prompt (avoid):

Make a nice welcome page


Step 3: Steer the Agent

This step works differently than it used to. Rather than submitting a prompt and waiting:

• Watch the build stream onto the canvas and interrupt to redirect it mid-generation
• Use voice to give running critiques as it works
• Use Annotate to mark up specific regions when text is a clumsy way to describe a layout change
• Generate multiple variants to explore layouts
• Feed it a DESIGN.md, an existing codebase, or design files so it stays on-brand from the first generation instead of being corrected into it

Step 4: Export or publish

Pick the path that matches where the work is going:

• Shipping a static page today? Publish straight to Netlify from Stitch.
• Adding backend logic? Export the screens into Google Antigravity.
• Sharing for feedback? Generate an AI Studio link.
• Pasting into your own repo? Download the .zip or copy the code to your clipboard and hand it to your coding agent.
• Continuing in design tooling? Figma export still works.

---

Example Prompts for Side Projects

Landing Page

A SaaS landing page with:
- Hero section with headline, subheadline, and CTA button
- 3 feature cards with icons
- Testimonial section with user avatar and quote
- Pricing section with 2 plans
- Footer with links
Use a modern, clean style with blue as the primary color.

Dashboard

An analytics dashboard with:
- Sidebar navigation with icons
- Top bar with user avatar and notifications
- 4 stat cards showing key metrics
- Line chart for traffic over time
- Recent activity list
Dark theme preferred.

Mobile App Screen

A task manager mobile app main screen:
- Header with app name and add button
- Tab bar for Today, Upcoming, Completed
- Task list with checkboxes and due dates
- Floating action button to add task
iOS style, light theme.

E-commerce

A product detail page:
- Product image gallery with thumbnails
- Product title, price, and rating stars
- Size and color selectors
- Add to cart button
- Product description tabs
- Related products section

---

Code Quality

The generated code is clean and readable:

<section class="hero">
  <div class="container">
    <h1 class="hero-title">Build Your Side Project Faster</h1>
    <p class="hero-subtitle">From idea to launch in days, not months</p>
    <a href="#" class="btn btn-primary">Get Started Free</a>
  </div>
</section>

.hero {
  padding: 4rem 1rem;
  text-align: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.hero-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.btn-primary {
  display: inline-block;
  padding: 0.75rem 2rem;
  background: white;
  color: #667eea;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
}

The code:
- Uses semantic HTML
- Follows modern CSS practices
- Is responsive by default
- Is easy to customize

Still review it before it goes to production. "Readable" is not the same as "audited".

---

Tips for Better Results

1. Be Specific

Include details about layout structure, colours and style, the specific components you need, and the device you are targeting.

2. Give it your design system

If you have a DESIGN.md, an existing codebase, or design files, feed them in before your first prompt. Correcting generic output into your brand costs far more prompts than starting on-brand.

3. Reference Existing Designs

A pricing page similar to Stripe's pricing page style,
with 3 tiers and a comparison table below

4. Iterate in Steps

Start with the main layout, then refine sections: basic structure, hero, specific components, final details.

5. Interrupt it

Because generation streams live, you do not have to wait for a wrong screen to finish. Redirect it as soon as you can see where it is heading.

6. Use Image Input

Sketch your idea on paper, take a photo, upload it. Stitch reads hand-drawn wireframes surprisingly well.

7. Leverage Multi-Select

Shift+click multiple screens and apply consistent styling or theme changes in one prompt.

---

Limitations

What Stitch still struggles with:
- Complex JavaScript functionality or interactions
- Backend integration (this is what the Antigravity export is for)
- Fully responsive layouts - expect some manual adjustment
- Deep design thinking like visual hierarchy strategy or user journey mapping

On collaboration: Stitch supports real-time collaboration with the Stitch Agent - streaming, steering, voice. There is no confirmed multi-user simultaneous editing. Third-party outlets reported multiplayer shipping at I/O 2026, but Google's own I/O post does not claim it, so it is not stated as fact here. If you need confirmed multiplayer design, verify it yourself before planning a team workflow around it.

Removed from this list since the last version: "custom design tokens or brand guidelines". DESIGN.md now handles exactly that.

Think of Stitch as a powerful starting point, not a complete design-to-deployment solution. You will still refine the output and add functionality.

---

Stitch vs Other AI Design Tools

Two notes on this table.

Firebase Studio has been removed. It used to sit in this comparison as a recommended free alternative. Google announced its sunset on 19 March 2026; new workspace creation and new user signups were disabled on 22 June 2026, and full shutdown with permanent data deletion is scheduled for 22 March 2027. A reader following the old recommendation today cannot even register. Google directs Firebase Studio users to Antigravity for code-first work or AI Studio for prototyping.

The v0, Lovable and Bolt.new rows are not re-verified. They are the same vintage as the Firebase Studio row, which turned out to point at a product being deleted, so their pricing is marked unverified rather than restated. Check each vendor's own pricing page.

Use Stitch when:
- You need quick HTML/CSS or Tailwind code
- You are prototyping ideas visually
- You want a free option and can live with limits you cannot see
- You have a design system you want the output to respect
- You want to go from prompt to live URL fast

Use Antigravity when:
- The screens exist and you need backend logic, state and real data

Use Figma Make when:
- Your team already lives in Figma and you want prompt-to-code inside that workflow

---

Workflow for Side Project Builders

1. Ideation (5 minutes)

List the screens you need: landing page, dashboard, settings.

2. Set up your context (5 minutes)

Point Stitch at your DESIGN.md, existing codebase, or design files. Skip this and you will spend the next thirty minutes prompting your brand colours in one screen at a time.

3. Generate with Stitch (30 minutes)

Build each screen, steering mid-generation. Use Prototypes to connect screens and see the flow.

4. Ship or integrate (15 minutes to 2 hours)

Publishing a static marketing page? Netlify, one click, done. Integrating into an existing app? Export to Antigravity, or pull the code and adapt it to your framework.

5. Add functionality

Connect your backend, add interactions, wire in real data, test.

Total time saved: hours of fighting with CSS layouts and design decisions.

---

Recent Updates

• May 2026 (Google I/O) - The big one. Stitch rebuilt around a streaming Stitch Agent: work appears on the canvas in real time, you steer it mid-generation, and you can drive it by voice. Added export to Google Antigravity, one-click publish to Netlify, shareable AI Studio links, and importing an existing codebase and design files for on-brand output.
• April 2026 - Google open-sourced the DESIGN.md format so agents can read and respect your design system, and validate against WCAG accessibility rules.
• March 2026 - Voice commands for real-time design critiques, and automatic screen generation.
• Ecosystem - Official Stitch MCP server, Agent Skills library, and a Gemini CLI extension.

---

When to Use Stitch

Great for:
- Landing pages
- Admin dashboards
- Mobile app mockups
- Email templates
- Quick prototypes
- On-brand generation once you have a DESIGN.md
- Learning CSS patterns
- Exploring design variations

Not ideal for:
- Complex web applications with custom interactions
- Production code without review and refinement
- Teams that need confirmed simultaneous multi-user editing
- Anything where you need a guaranteed, documented usage quota

---

Getting Started Today

1. Visit stitch.withgoogle.com
2. Try this prompt: "A modern landing page for a task management app with hero, features, and pricing sections"
3. Steer it as it builds, and refine with chat or voice
4. Publish to Netlify, or export the code
5. Use it in your side project

You will have a professional-looking UI in minutes instead of hours.

---

Share Your Creation

Built something using Google Stitch? Share your side project with the builder community and get feedback from other developers who are shipping products.

---

Facts in this article were verified against Google's own blog posts, documentation and help pages on 6 August 2026. Two things could not be verified and are deliberately not stated as fact: the exact free-tier credit limits (Google publishes no number, and third-party figures contradict each other badly) and whether multi-user simultaneous editing shipped. Stitch is a Google Labs experiment - features and limits change without notice, so check the product before planning around anything here.