Claude Code writes great code and mediocre interfaces. Google Stitch designs the UI for free, and its official MCP server hands that design straight to Claude Code. No screenshots, no copy-paste.
Go to stitch.withgoogle.com, pick App or Web, and describe what you want in plain English. It generates the screens and a full design system. You can drop in reference images to steer the look.
02
0230 seconds
Grab your API key
Profile picture, top right, then Stitch settings. Generate a key there. This is what lets an agent read your designs instead of you exporting images.
03
03Official
Add the MCP server
Google's own docs at stitch.withgoogle.com/docs/mcp/setup cover it, and Claude Code is listed as a supported client alongside Cursor, Gemini CLI and Antigravity. Add the server, paste the key, done.
04
04The payoff
Let the agent build it
Now Claude Code can read your actual screens, tokens and typography. Ask it to implement a screen and it builds from the real design instead of guessing. Google also ships stitch-skills for this.
The prompt that does the work
Read my Stitch project through the MCP server. Implement the [screen name] screen exactly as designed: match the colour tokens, spacing and typography, wire it to the other screens, and add subtle motion. Then ask it to list anything the design left ambiguous.
Want this running for you?
Build it step by step inside AI Creative OS, with me in the thread.
