Stitch Tutorial

Tips & FAQ

Pro tips to get the most out of Google Stitch, answers to frequently asked questions, and known limitations to be aware of.

Pro Tips

1

Be specific in prompts: include purpose, platform, colors, and components

2

Start with Standard Mode for quick iterations, switch to Experimental for final quality

3

Use image input to match an existing design's visual style

4

Create variants before committing to a direction

5

Export DESIGN.md to maintain consistency across tools

6

Use the Agent Manager to explore multiple design directions in parallel

7

Describe the target audience for better contextual results

8

Use comparative language: "similar to Airbnb but with a darker theme"

9

Generate the overall layout first, then refine individual sections

10

Combine text prompts with image uploads for the most precise results

Frequently Asked Questions

Is Google Stitch free?
Yes, completely free with a Google account. Standard Mode (Gemini 2.5 Flash) offers 350 generations per month, and Experimental Mode (Gemini 2.5 Pro) offers 50 generations per month. Both quotas reset monthly.
What code does Stitch generate?
Stitch generates HTML and CSS code. There is no direct React, Vue, or SwiftUI export yet. However, you can use the Stitch SDK and MCP server to bridge designs into your preferred framework through AI coding assistants.
Does Stitch support non-English prompts?
Current support for non-English prompts is limited. English prompts produce the best and most consistent results. The team is working on improving multilingual support.
Can I use Stitch for production apps?
Stitch excels at design exploration, prototyping, and generating starter code. For production-quality implementations, use the MCP integration with a coding tool like Claude Code or Cursor to convert Stitch designs into framework-specific code.
What if my generation quota runs out?
Quotas reset at the start of each month. You can switch between Standard and Experimental modes to manage usage. Standard Mode has a much higher quota (350 vs 50), so use it for most of your work.
Can Stitch generate multi-page apps?
Stitch works best on a per-screen basis. However, you can use the Interactive Prototyping feature to link screens into flows, and the Design Agent to maintain consistency across screens.
How does Stitch compare to Figma?
Stitch is an AI-first design exploration tool — it generates designs from prompts. Figma is a professional design collaboration platform for refinement and handoff. Many teams use Stitch for initial exploration and Figma for final polish. Stitch can export to Figma format.
Can I use my own images and assets?
Yes. You can upload images as design references (Image to UI), and use Direct Edits to swap placeholder images with your own assets after generation.

Known Limitations

  • HTML/CSS output only — no direct React, Vue, or SwiftUI export
  • Experimental Mode does not support Figma export
  • Works best per screen, not for complex multi-page workflows
  • Non-English prompt support is limited
  • Generation quality can vary — the same prompt may produce different results
  • Complex multi-component layouts may need several iterations
  • No real-time collaboration features (unlike Figma)
  • Requires a Google account to access