Guides·Dec 27, 2025·12 min read

Google Stitch Tutorial: From Prompt to UI in Minutes

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.

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

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:

What Actually Is Google Stitch?

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.

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"

"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?

Try with 0xMinds →

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 0xMinds 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	0xMinds 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.

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 0xMinds Team. We build AI tools for frontend developers. Try 0xMinds free →

#vibe coding#AI UI generator#UI design#Figma#google stitch

Google Stitch Tutorial: From Prompt to UI in Minutes

In This Article

What Actually Is Google Stitch?

Setting Up (Takes 30 Seconds)

Flash vs Pro: Which Mode When?

Standard Mode (Gemini 2.5 Flash)

Experimental Mode (Gemini 2.5 Pro)

Writing Prompts That Don't Suck

The Golden Rule: One Change at a Time

Be Specific About Elements

Set the Vibe with Adjectives

The Screenshot Trick

Building a Landing Page Step-by-Step

Step 1: Start with the Hero

Step 2: Refine the Hero

Step 3: Add Navigation

Step 4: Build Feature Sections

Step 5: Close with CTA and Footer

Exporting to Figma and Code

Figma Export (The Good)

Code Export (The Messy)

The Limitations Nobody Mentions

Long Prompts Break Things

No Component Library

No Real Interactivity

Mobile-First? Not Really

The Reset Problem

Pro Tips for Better Results

When to Use Stitch vs Other Tools

You Might Also Like

Frequently Asked Questions

What is Google Stitch?

Is Google Stitch free?

Can Google Stitch export to Figma?

What's the difference between Flash and Pro mode in Stitch?

Can Google Stitch generate React code?

Report issue