Google just dropped Stitch, and honestly? It's the first AI UI tool that made me stop and pay attention. Not because it's perfect—it isn't—but because it does something surprisingly well: turning half-baked ideas into surprisingly polished interfaces.
Key Takeaways:
- Google Stitch uses Gemini 2.5 to generate UIs from text prompts or image sketches
- Flash mode = fast iterations (350/month), Pro mode = higher quality (400/month)
- One major change per prompt—combining multiple requests breaks everything
- Figma export works with one click, but code export needs cleanup
In This Article
- What Actually Is Google Stitch?
- Setting Up (Takes 30 Seconds)
- Flash vs Pro: Which Mode When?
- Writing Prompts That Don't Suck
- Building a Landing Page Step-by-Step
- Exporting to Figma and Code
- The Limitations Nobody Mentions
- FAQ
What Actually Is Google Stitch?
Google Stitch is a Google Labs experiment that converts natural language prompts into UI designs. Think of it as the design-focused cousin of tools like v0 or Bolt.new—but with a twist.
What makes Stitch different:
| Feature | Google Stitch | Traditional AI UI Tools |
|---|---|---|
| Input Types | Text + images/sketches | Usually text only |
| Output Focus | Visual design first | Code first |
| Figma Export | One-click native | Usually requires plugins |
| Powered By | Gemini 2.5 Pro/Flash | Various LLMs |
| Price | Completely free | Often freemium |
The "image input" thing is actually huge. You can literally snap a photo of a napkin sketch, and Stitch will turn it into a proper interface. Not perfectly, but close enough that you're not starting from zero.
Stitch runs on Gemini 2.5, Google's latest multimodal AI. The "multimodal" part matters—it means the tool understands both what you're saying and what you're showing it.
Setting Up (Takes 30 Seconds)
Here's the entire setup process:
- Go to stitch.withgoogle.com
- Sign in with your Google account
- Click "Create new project"
- Start typing
That's it. No credit card. No waitlist. No "book a demo" nonsense.
You'll land in the editor with a blank canvas and a prompt box. The interface is minimal—almost suspiciously minimal. But don't let that fool you. The simplicity is the point.
Flash vs Pro: Which Mode When?
Stitch has two AI modes, and picking the wrong one will waste your time. Here's the actual difference:
Standard Mode (Gemini 2.5 Flash)
- Speed: Fast. Like, really fast.
- Generations: ~350 per month
- Best for: Quick exploration, testing ideas, basic iterations
- Limitations: Text prompts only, no image input
Use Flash when you're still figuring out what you want. It's the brainstorming mode.
Experimental Mode (Gemini 2.5 Pro)
- Speed: Slower, but worth it
- Generations: 400 per month (yes, more than Flash now)
- Best for: Final designs, complex UIs, anything important
- Superpower: Accepts images, sketches, and visual references
Use Pro when you know roughly what you want and need it done right. The image input feature alone makes it worth the slightly longer wait.
Pro tip: Start with Flash to explore directions, then switch to Pro for your final iteration. This workflow gets you both speed and quality.
Writing Prompts That Don't Suck
Here's the thing about Stitch prompts that took me way too long to figure out: they're not like ChatGPT prompts.
With ChatGPT, you can throw a wall of text and it figures things out. With Stitch, that same wall of text will generate a UI that looks like a fever dream.
The Golden Rule: One Change at a Time
I'm going to be blunt—this is the single most important thing in this entire tutorial.
When you combine multiple requests in one prompt, Stitch doesn't just try to do both. It recreates the entire layout from scratch. And that recreation usually breaks everything that was working.
Bad prompt:
"Add a navigation bar at the top, change the primary color to blue, add three feature cards in a grid, and include a footer with social links"
Good prompts (sent separately):
"Add a minimal navigation bar with logo on left, links on right"
Wait for generation
"Change primary button color to #3B82F6"
Wait for generation
"Add a three-column feature card grid below the hero"
Yes, it's slower. Yes, it's annoying. But it actually works.
Be Specific About Elements
Stitch responds well to UI/UX terminology. The more precisely you describe what you want, the better.
| Vague (Bad) | Specific (Good) |
|---|---|
| "Add a menu" | "Add a horizontal navigation bar with dropdown menus" |
| "Make it look nice" | "Use a minimalist design with generous whitespace" |
| "Add buttons" | "Add a primary CTA button with hover state" |
| "Some images" | "Add a hero image with 16:9 aspect ratio" |
Set the Vibe with Adjectives
This is surprisingly effective. Stitch picks up on descriptive language and translates it into visual choices.
Good vibe-setting prompts:
- "Create a dark, professional SaaS dashboard"
- "Design a playful, colorful mobile onboarding screen"
- "Build a minimal, elegant portfolio hero section"
The adjectives directly influence color schemes, spacing, typography, and overall feel.
The Screenshot Trick
Here's a workflow tip that's saved me countless hours: save a screenshot after every successful generation.
Stitch occasionally resets unexpectedly. If you've been iterating for 20 minutes and suddenly lose everything, those screenshots become your safety net. You can feed them back into Pro mode as a reference image and get back to roughly where you were.
Building a Landing Page Step-by-Step
Let's build something real. I'll walk through creating a SaaS landing page, prompt by prompt.
Step 1: Start with the Hero
Open a new Stitch project and start with this prompt:
"Create a modern SaaS landing page hero section. Include a bold headline, subheadline, primary CTA button, and a product screenshot mockup on the right. Use a light background with purple accent colors."
This gives Stitch enough context without overwhelming it. You should get a clean hero section with the basic elements in place.
Step 2: Refine the Hero
Now we iterate. Look at what generated and pick ONE thing to improve:
"Make the headline larger and add a gradient text effect"
Or:
"Replace the product mockup with a browser window showing a dashboard"
Each refinement gets you closer to what you actually want.
Step 3: Add Navigation
Once you're happy with the hero, add the nav:
"Add a sticky navigation bar at the top with logo on left, 4 nav links in center, and a 'Get Started' button on right"
Step 4: Build Feature Sections
Now work your way down the page:
"Add a features section with 3 cards in a row. Each card has an icon, title, and short description. Use the same purple accent color."
Then:
"Add a testimonial section with 3 customer quotes in a carousel layout"
Step 5: Close with CTA and Footer
"Add a final CTA section with a dark background, centered headline, and two buttons"
"Add a footer with 4 columns: Company, Product, Resources, Legal. Include social icons at the bottom."
The key is building incrementally. Each prompt adds ONE section or makes ONE change. It takes longer, but the result is coherent instead of chaotic.
Want to try a similar approach with more advanced React output?
Exporting to Figma and Code
Here's where Stitch actually shines compared to most AI UI tools.
Figma Export (The Good)
Click the Figma icon, and Stitch generates a paste-able Figma design. It's not a file export—you literally paste it into Figma as editable frames and components.
The structure is surprisingly clean:
- Proper layer naming (mostly)
- Components are grouped logically
- Auto-layout is applied where it makes sense
- Styles are maintained
For designers who just need a starting point, this is genuinely useful. You can hand this off to a design team and they'll actually be able to work with it.
Code Export (The Messy)
The code export is... okay. Here's what you actually get:
- HTML structure with inline CSS
- Reasonably semantic markup
- Responsive-ish layouts
Here's what you don't get:
- React/Vue/Svelte components
- Tailwind CSS classes
- Clean, production-ready code
- Any JavaScript functionality
If you need proper React components with Tailwind, you're better off using the Stitch output as a visual reference and then generating the actual code with a tool like Fardino or running the design through your preferred vibe coding workflow.
The HTML export is useful for static pages or as a reference, but don't expect to ship it directly.
The Limitations Nobody Mentions
I like Stitch. But let me be honest about where it falls short:
Long Prompts Break Things
Anything over ~5,000 characters and Stitch starts dropping components. It's not a hard limit, but complexity has a ceiling.
No Component Library
You can't save components for reuse across projects. Every new project starts from scratch. Compare this to building a design system incrementally and you'll feel the pain.
No Real Interactivity
Stitch generates static designs. No hover states that actually work, no form validation, no animated transitions. It's a design tool, not a prototyping tool.
Mobile-First? Not Really
While you can request mobile layouts, the default output tends toward desktop. You'll need explicit prompts for responsive behavior, and results vary.
The Reset Problem
I mentioned this earlier, but it bears repeating: Stitch can reset unexpectedly. Always save screenshots of successful generations. Always.
Pro Tips for Better Results
After two weeks of testing, here's what consistently improved my output:
-
Start with a reference image in Pro mode. Even a rough screenshot of a competitor's page gives Stitch direction.
-
Use screen names. Instead of "the page," say "the sign-up screen" or "the dashboard view."
-
Specify color values. "Blue" is vague. "#3B82F6" gets exactly what you want.
-
Match theme changes globally. When changing colors, add "ensure all icons and images match this new color scheme."
-
Iterate on individual screens. Don't try to design a whole app in one conversation. Do screen by screen.
-
Keep a prompt journal. Note which prompts worked well—you'll reuse them.
When to Use Stitch vs Other Tools
Here's my honest assessment:
| Use Case | Best Tool |
|---|---|
| Quick visual exploration | Google Stitch |
| Figma-first workflow | Google Stitch |
| Production React code | Fardino or v0 |
| Full-stack apps | Bolt.new |
| Learning UI patterns | Google Stitch |
Stitch is best for designers who think visually first and code second. If you're a developer who wants working React components, it's a useful brainstorming step but not your final destination.
You Might Also Like
- AI Landing Page Prompts: 50+ Templates That Work - Copy-paste prompts for every landing page section
- Google AI Studio Vibe Coding Tutorial - Another Google AI tool for frontend development
- Vibe Coding Best Practices Guide 2025 - Level up your AI-assisted development workflow
Frequently Asked Questions
What is Google Stitch?
Google Stitch is a free AI tool from Google Labs that generates UI designs from text prompts or image sketches. It's powered by Gemini 2.5 and can export directly to Figma or as HTML/CSS code.
Is Google Stitch free?
Yes, completely free. Standard mode gives you ~350 generations per month, and Experimental mode (with Gemini 2.5 Pro) gives you 400 generations per month. No credit card required.
Can Google Stitch export to Figma?
Yes, and it's one of Stitch's best features. Click the Figma export button, and you get a paste-able design with proper layers, components, and auto-layout that designers can actually work with.
What's the difference between Flash and Pro mode in Stitch?
Flash (Standard) mode uses Gemini 2.5 Flash for faster generation, best for quick iterations. Pro (Experimental) mode uses Gemini 2.5 Pro for higher quality output and accepts image inputs like sketches and screenshots.
Can Google Stitch generate React code?
Not directly. Stitch exports HTML/CSS code, not React components. For production React/Tailwind code, you'll need to use the Stitch output as a visual reference and generate code with a different tool.
Written by the Fardino Team. We build AI tools for frontend developers. Try Fardino free →
<!-- SCHEMA_DATA { "article": { "@type": "Article", "headline": "Google Stitch Tutorial: From Prompt to UI in Minutes", "description": "I spent 2 weeks testing Google Stitch prompts. Most failed. Here's the workflow that actually generates pixel-perfect UIs—plus the mistakes to avoid.", "author": { "@type": "Organization", "name": "Fardino", "url": "https://fardino.com" }, "datePublished": "2025-12-28", "dateModified": "2025-12-28" }, "faq": [ { "question": "What is Google Stitch?", "answer": "Google Stitch is a free AI tool from Google Labs that generates UI designs from text prompts or image sketches. It's powered by Gemini 2.5 and can export directly to Figma or as HTML/CSS code." }, { "question": "Is Google Stitch free?", "answer": "Yes, completely free. Standard mode gives you ~350 generations per month, and Experimental mode (with Gemini 2.5 Pro) gives you 400 generations per month. No credit card required." }, { "question": "Can Google Stitch export to Figma?", "answer": "Yes, and it's one of Stitch's best features. Click the Figma export button, and you get a paste-able design with proper layers, components, and auto-layout that designers can actually work with." }, { "question": "What's the difference between Flash and Pro mode in Stitch?", "answer": "Flash (Standard) mode uses Gemini 2.5 Flash for faster generation, best for quick iterations. Pro (Experimental) mode uses Gemini 2.5 Pro for higher quality output and accepts image inputs like sketches and screenshots." }, { "question": "Can Google Stitch generate React code?", "answer": "Not directly. Stitch exports HTML/CSS code, not React components. For production React/Tailwind code, you'll need to use the Stitch output as a visual reference and generate code with a different tool." } ], "howto": { "name": "How to Build a Landing Page with Google Stitch", "steps": [ {"name": "Start with the hero section", "text": "Create a new project and prompt for a hero section with headline, CTA, and product mockup"}, {"name": "Refine one element at a time", "text": "Make single changes per prompt to avoid layout resets"}, {"name": "Add navigation", "text": "Prompt for a sticky navigation bar with logo and links"}, {"name": "Build feature sections", "text": "Add features, testimonials, and other sections incrementally"}, {"name": "Export to Figma or code", "text": "Click export to get Figma-paste-able designs or HTML/CSS code"} ] }, "breadcrumb": ["Home", "Blog", "Tutorials", "Google Stitch Tutorial: From Prompt to UI in Minutes"] } SCHEMA_DATA -->
