Google Stitch Usage Guide: From the Right Prompt to a Perfect Design

In my last post I covered what Google Stitch is and why it matters. This one picks up where that left off — but from a different angle. Not for people discovering the tool for the first time, but for everyone who's opened it and thought: "Okay, now what?"

I've been using Stitch seriously for the past few weeks. Here's what I can tell you: jumping in without knowing how to prompt it can actually be more frustrating than Figma. But once you build the right habits, the speed shift is real.

First: Know What You're Building

The first question Stitch asks you is: Mobile App or Web App?

This choice matters more than it looks. Stitch optimizes its output based on the platform you pick — typography hierarchy, component sizing, imagery — all of it shifts. Mobile mode prioritizes touch target sizes; web mode optimizes for desktop reading patterns.

Build Multi-Agent AI Systems from Scratch
Build Multi-Agent AI Systems from Scratch
Build multi-agent AI architectures with LangChain and Google AI.
Go to course →

The rule is simple: where do most of your users live? Start there.

Prompting Is an Art

Most people get 7/10 results from Stitch because they write weak prompts. A solid prompt has three layers:

Idea: What are you building? What's the core goal? Theme: What's the visual tone? Bold, minimal, corporate? Content: What do you want the user to do?

Bad prompt:

Make an e-commerce site

Good prompt:

Product detail page for a Japandi-styled tea store. Sells herbal teas and ceramics.
Neutral, minimal colors, black buttons. Soft, elegant font. Use white space,
keep the layout uncluttered.

The difference is obvious. Stitch isn't a designer — it's an engine waiting for direction. The clearer you are, the cleaner the output.

The Right Approach, Step by Step

1. Start high-level, go deeper from there

Don't try to define everything in the first prompt. Start broad and let Stitch build a skeleton. Then drill down screen by screen:

Make the primary CTA button on the login screen larger and use the brand's primary blue.

2. Adjectives set the tone

Colors, fonts, mood — you can steer all of it through adjectives:

A vibrant and encouraging fitness tracking app
A minimalist and focused app for meditation

Same functionality, two completely different outputs.

3. Control the theme directly

Change the primary color to forest green
Use a serif font for headings
Make all buttons fully rounded
Add a 2px black border to input fields

You can combine these too:

Book discovery app: serif font for text, light green brand color for accents.

Which Mode Should You Use?

Multiple models are running under the hood in Stitch. These modes are hidden in the menu — and which one you pick depends on what you're trying to do:

Thinking (3.1 Pro) → Complex dashboards, production-ready pages. Takes longer and uses credits. But when the difference matters, it's worth it.

Redesign (Nano Banana Pro) → For aesthetically elevating an existing interface. Bento grid, Glassmorphism, Duotone-style transformations all happen here.

Fast → Wireframe-speed output, quick Figma export. As a developer, this is what I reach for most — get the structure down fast, finish the detail in Figma.

Variations: Fast-Testing Design Decisions

This is one of Stitch's most powerful features. With a single prompt you can generate 5 different directions. Then you pick the closest one and fine-tune it with the Refined (low drift) or Creative (full overhaul) slider.

When to use it:

  • You're stuck and don't know what to change
  • You need to show a client three directions, not one
  • You want to shift the entire vibe in one session

4 Features Nobody Talks About

Instant Prototype

Starting from a single screen, Stitch automatically generates the next logical screen in the user flow. Useful for testing a flow before wireframing the entire product.

Live Mode

Click the button next to the input field and you can design with your voice. As you talk, the screen updates. The first time I saw it I genuinely stopped and stared.

Import Your Brand Kit from a Website

If you want to pull colors and fonts from an existing site:

Design Systems → + → Import from website

Paste the URL and Stitch scrapes your design system — colors, fonts (if they're on Google Fonts), component styles. No need to manually define brand colors from scratch.

Export to Figma

This was the one that got me. When you export as a Figma file, you get editable layers with Auto Layout intact. You can take Stitch's output, refine it in Figma, and hand it straight to a developer.

Real-World Use Cases

Client Pitch Presentations

Classic problem: slide decks looked generic, even the ones Gemini could generate in seconds. Clients expect to be wowed.

Design a 10-screen B2B pitch deck UI for a growth marketing agency.
Aesthetic: clean, modern, high-trust. White background, bold sans-serif headings,
strong typography hierarchy.

Screens:
1. Cover with company name and tagline
2. Executive summary
3. Problem
4. Solution
5. How it works (3-step process)
6. Case study / Social proof (logos, results, client names)
7. Pricing and engagement tiers
8. 30/60/90 day onboarding timeline
9. Success metrics
10. CTA and contact info

Save variations.

First draft: 15 minutes.

Campaign Landing Pages

Every campaign used to mean a new page — 3-4 hours of development, 2 hours of revisions. Weekly.

Campaign landing page for a growth marketing agency. Clean, modern, high trust.
Hero with headline + CTA, social proof strip with logos, service tiers,
3-step how-it-works section, pricing, client results with metrics, footer CTA.
Save variations.

Once the brief is finalized, the page can go live the same day.

Dashboards and Reports

Internal metric reports used to get built the same way every week: Google Sheet, screenshot. The data was right. The presentation was wrong.

Marketing performance dashboard. Weekly view. Dark mode, card-based layout.
Metrics: placements made, active clients, talent pipeline, client retention rate,
revenue by service tier, time-to-placement. Data visualization components
(bar charts, trend lines, KPI tiles). Executive-ready.

Conclusion

Stitch doesn't replace a designer — it dramatically shortens the time to get started. Figma is still great; use it to finish. Use Stitch to begin.

The MCP integration that lets it connect directly to Cursor and Gemini CLI is also worth paying attention to — it means the wall between design and code is getting thinner. I wrote separately about what MCP is and why that integration matters.

All you need to try it is a Gmail account: stitch.withgoogle.com

Google StitchArtificial IntelligenceUI DesignPromptFigmaGeminiToolsVibe Design
Tuncer Bağçabaşı
Tuncer Bağçabaşı
Software Engineer & AI Researcher
← All posts