Figma charges $15 per seat per month and still requires plugins to export code that usually needs a cleanup pass before it’s usable. Google Stitch generates production-quality HTML/CSS or Tailwind from a text prompt in under 60 seconds — and it’s free. The part that matters most for developers: the March 2026 update shipped an MCP server that plugs Stitch directly into Claude Code, Cursor, and Gemini CLI. Your coding agent can now call it as a tool without you ever leaving your editor.
What Google Stitch Is #
Stitch is a Google Labs experiment available at stitch.withgoogle.com. Sign in with a Google account and you get a browser-based AI design canvas powered by Gemini 2.5 Flash (Standard mode) and Gemini 2.5 Pro (Experimental mode). Type a prompt, upload a wireframe or screenshot, and Stitch returns a high-fidelity UI design alongside exportable code — typically in under a minute. The free tier gives you 550 generations per month: 350 Standard and 200 Experimental.
The May 2026 Google I/O update pushed Stitch beyond single-screen generation. You can now produce up to five interconnected screens at once, useful for mapping complete user flows rather than isolated components. A real-time streaming design agent lets you watch the canvas populate as you type or speak, and multiplayer editing landed for teams that want to iterate together.
The MCP Integration #
This is the piece that elevates Stitch from a browser novelty to something worth adding to a development workflow. Stitch ships an official MCP server built by the Google DevRel team. The setup for Claude Code is a single entry in your MCP config:
{
"mcpServers": {
"stitch": {
"command": "npx",
"args": ["-y", "@_davideast/stitch-mcp", "proxy"]
}
}
}
Authentication runs through Google Cloud OAuth, not an API key:
gcloud auth application-default login
For Cursor, open Settings → MCP and add the same server configuration. The source is on the stitch-mcp GitHub repo, and Google maintains official MCP setup documentation. One common gotcha: a .env
file in your project root can break the MCP proxy with invalid character errors — move or rename it during setup.
With the integration active, the workflow changes in a practical way. Instead of bouncing between your editor and a browser tab, you prompt Claude Code to build a component and it calls Stitch as a tool, returns the design and code, and implements it directly. The design.md file Stitch exports — which packages your design tokens, color palette, and typography — gives your coding agent a stable reference to keep component styles consistent across a session.
What It Outputs #
Stitch exports to seven frameworks: HTML/CSS, Tailwind CSS, Vue.js, Angular, Flutter, SwiftUI, and React/JSX (added post-May 2026). This is a meaningful edge over v0, Vercel’s AI component generator, which outputs React only. Stitch also exports a structured Figma file with proper auto-layouts and named layers for teams that want to take designs back into a traditional handoff workflow. The official Stitch announcement outlines the full integration pipeline.
When to Use It — and When Not To #
Stitch is a fast start, not a finisher. It excels at ideation (generating ten concept UIs in the time it takes to open Figma), prototyping user flows across multiple screens, and scaffolding initial component HTML you refine from there. Solo developers and small teams building without a dedicated designer get the most immediate value — you get a credible interface to work from without hours of manual layout work.
Where it falls short: pixel-perfect adjustments, complex design systems with governance, and production-ready accessibility. The exported code is well-structured and semantic, but a real accessibility audit will find missing ARIA attributes and spots where inline styles crept in. It is not a replacement for Figma on teams managing large component libraries or needing predictable designer-developer handoff at scale. And as a Google Labs experiment, there is no SLA and no guarantee it stays free after the expected paid tier arrives in Q4 2026.
Quick Start #
- Go to stitch.withgoogle.comand sign in with your Google account - Type a prompt like *“dark-mode analytics dashboard with sidebar nav and data cards”*and hit generate - Export your design as HTML/CSS, Tailwind, or React and review the output
- For Claude Code or Cursor integration, install the
stitch-mcpserver and run
gcloud auth application-default login
The Bottom Line #
Stitch earns a place in a developer’s toolkit specifically because of the MCP integration. Free UI generation is not new — v0, Locofy, and others have been in this space — but Stitch is the first design tool to connect directly to your coding agent as a native tool. The closed-loop workflow reduces context switching on UI work, which is a real productivity gain. The code quality is a starting point, not a shipping point, but that’s the right expectation. At zero cost, the barrier to finding out if it works for your project is as low as it gets.