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. A real-time streaming design agent lets you watch the canvas populate as you type or speak, and multiplayer editing landed for teams.
The MCP Integration
Stitch ships an official MCP server built by the Google DevRel team. Setup for Claude Code:
{
"mcpServers": {
"stitch": {
"command": "npx",
"args": ["-y", "@_davideast/stitch-mcp", "proxy"]
}
}
}Authentication runs through Google Cloud OAuth:
gcloud auth application-default login
For Cursor, open Settings → MCP and add the same server configuration. One common gotcha: a .env file in your project root can break the MCP proxy with invalid character errors.
With the integration active, 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 gives your coding agent a stable reference for component styles.
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, which outputs React only. Stitch also exports a structured Figma file with proper auto-layouts and named layers.
When to Use It — and When Not To
Stitch is a fast start, not a finisher. It excels at ideation, prototyping user flows, and scaffolding initial component HTML. Solo developers and small teams building without a dedicated designer get the most immediate value.
Where it falls short: pixel-perfect adjustments, complex design systems with governance, and production-ready accessibility. 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.com and 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
- For Claude Code or Cursor integration, install the stitch-mcp server and run
gcloud auth application-default login
Stitch is the first design tool to connect directly to your coding agent as a native tool via MCP, enabling a closed-loop workflow at zero cost.