Set it up
-
Turn on Google Stitch in your AI
Add the Stitch connector (remote MCP) to your AI tool and sign in with your Google account, then ask it to design a screen or flow.
-
Add it to your app once
Copy the short config below into your app. It just tells your AI where to find Google Stitch.
-
Just ask
Tell it what you want in plain words — no special commands.
For example, say
“Design a mobile onboarding flow for a meditation app — three calm pastel screens — and give me the UI and code.”
Need the exact config? Show it +
Add to your client
{
"mcpServers": {
"stitch": {
"command": "npx",
"args": [
"@_davideast/stitch-mcp",
"proxy"
]
}
}
}Paste into your client's MCP configuration file.
Get the skill
A ready-made skill that teaches your AI agent to use Google Stitch well. Drops into Claude Code, Cursor and other agents.
npx plugins add google-labs-code/stitch-skills Ready-to-run prompts
If you ask, Google Stitch does it. Copy one, paste it into Claude, Codex or ChatGPT, done. No setup.
Design a playful pricing page
If you ask
“Design a playful pricing page for a coffee subscription app — three tiers, warm colors.”
Then
A friendly pricing screen with three tiers.
Design a dark dashboard
If you ask
“Design a dark-mode dashboard for a fitness tracker — steps, sleep and heart-rate cards.”
Then
A sleek analytics dashboard in dark mode.
Design an onboarding flow
If you ask
“Design a 3-screen onboarding flow for a meditation app with a soft pastel palette.”
Then
A calm three-screen intro.
How to get good results
Checked 2026-06-14 — live · by Ilya GindinTested prompts and honest limits — deeper than the README.
Stitch designs app and web screens from a description and connects to your Google account. Be concrete about the screen, the platform, and the key elements, and iterate screen by screen rather than asking for a whole app at once.
Design a single screen
Prompt that works
“Design a mobile onboarding screen: a friendly headline, one illustration, an email field, and a primary button. Clean, lots of whitespace.”
Why: One screen with named elements gives Stitch a clear target. 'Design my app' is too broad and comes back generic.
Generate a matching variant
Prompt that works
“Make a second version of that screen with a darker theme and the button moved to the bottom.”
Why: Variants on a single screen let you compare directions without redesigning from zero.
Carry a style across screens
Prompt that works
“Now design the home screen using the same colors, type, and button style as the onboarding screen.”
Why: Stitch handles each screen on its own — restating the style keeps a multi-screen flow consistent.
What it can’t do
- ×Remote connector: add it (npx @_davideast/stitch-mcp proxy) and sign in with your Google account.
- ×It designs screens; it's not a full Figma replacement for fine pixel control.
- ×Best one screen at a time — broad 'whole app' prompts get vaguer results.
- ×Generated designs are a starting point; refine the details in a design tool.
What it can access
A local proxy (npx @_davideast/stitch-mcp proxy) signs in with your Google account via OAuth; your design briefs are sent to Stitch to generate screens.
Source: github.com · checked 2026-07-13
When to use
- ✓ You want a screen designed from a description
- ✓ You want editable UI plus starter code
- ✓ You like free, official tools
When not to use
- × You need a finished production app, not a starting design
- × You want pixel-level manual control from the start
About
Stitch is Google's AI design tool: you describe an app or screen in plain English and it generates a complete, editable interface plus front-end code. Google ships an official remote connector, so an assistant like Claude can call Stitch directly and hand you the design and code.
It's an official Google Labs service, free in beta (just a Google account, no card).
Workflows That Use Google Stitch
Tell Google Stitch what screen you want and get an editable design plus starter code — no design tool needed.
Pull your real colors and type from Figma, feed them to Stitch as hard constraints, refine the result in Pencil — AI screens that match your brand instead of inventing one.
FAQ
What does Google Stitch do? +
Stitch is Google's AI design tool: you describe an app or screen in plain English and it generates a complete, editable interface plus front-end code. Google ships an official remote connector, so an assistant like Claude can call Stitch directly and hand you the design and code.
Do I need to know how to code? +
No. Turn it on in your AI's settings and ask in plain English — no terminal, no coding.
When should I use Google Stitch? +
Reach for it when you need to: You want a screen designed from a description; You want editable UI plus starter code; You like free, official tools.
When should I avoid Google Stitch? +
Skip it when: You need a finished production app, not a starting design; You want pixel-level manual control from the start.
Is Google Stitch free? +
Google Stitch is free and open source.
How do I install Google Stitch? +
In Claude Code, run: claude mcp add stitch -- npx @_davideast/stitch-mcp proxy. Copy-paste configs for Claude Desktop, Cursor, and Windsurf are at the top of this page.
How do I design a single screen with Google Stitch? +
Try this prompt: "Design a mobile onboarding screen: a friendly headline, one illustration, an email field, and a primary button. Clean, lots of whitespace." — One screen with named elements gives Stitch a clear target. 'Design my app' is too broad and comes back generic.
How do I generate a matching variant with Google Stitch? +
Try this prompt: "Make a second version of that screen with a darker theme and the button moved to the bottom." — Variants on a single screen let you compare directions without redesigning from zero.
How do I carry a style across screens with Google Stitch? +
Try this prompt: "Now design the home screen using the same colors, type, and button style as the onboarding screen." — Stitch handles each screen on its own — restating the style keeps a multi-screen flow consistent.
