- Why "design" is the most expensive bottleneck in AI coding — and how to take it off your to-do list entirely
- The 3-layer pipeline: Stitch designs · MCP connects · Claude Code builds
- The one trick (
design.md) that stops components from drifting — plus my operator quality gates from real projects
Why design is the expensive bottleneck
I'm an operator, not a UI designer. Logic, data flows, automations — no problem, I hand those to Claude Code and it delivers. But every time a project needed a real interface, I stalled: either fiddle with spacing and colours for hours myself, or brief an agency and wait for iterations. Both kill the speed that makes a solo setup worth it in the first place.
The insight that fixed it: you don't need to find one tool that does design and code. You split the two jobs and give each to the tool that does it best — then just make sure the handoff is clean.
The pipeline in one sentence
Stitch designs the screens, Claude Code writes the code, and an MCP connection is the conveyor belt in between. Three layers, one direction. No screenshot ping-pong, no "rebuild this from that image." Claude gets the real design context, not a description of it.
- Stitch (stitch.withgoogle.com) — Google's AI UI designer from Labs. Generates whole screens plus a coherent design system from a prompt or reference images. Free, with 350 generations per month on the standard model — which is why it replaces most of the design phase essentially for free.
- Claude Code — Anthropic's terminal agent (
npm install -g @anthropic-ai/claude-code). Reads the designs and writes the production code.
Part 1 — The design layer
Same rule in Stitch as with any AI tool: a vague prompt yields vague output. I give it structure instead of a single line — and if I want to hit a specific mood, I attach reference screenshots (a Pinterest board is enough). My baseline:
App: [what it is, e.g. meal-planning app] for [audience]. Screens: [the ones you need, e.g. onboarding, feed, detail, profile]. Look: [minimal / bold / …], colour direction [range], type feel [range]. Reference: mirror the attached screenshots.
Stitch builds each screen plus a shared design system — the crucial part, because that system becomes the glue that keeps the code consistent later.
The part that turns this into a pipeline — the MCP bridge, the build prompt and my quality gates from real projects — is in the full version:
Full version free with email
Part 2 (MCP connection with the ready command), Part 3 (build prompt), the design.md trick and my 4 operator quality gates. Sign up once, unlocked immediately.
Part 2 — The bridge (MCP)
The conveyor belt. Instead of showing Claude screenshots, I give it read access to the Stitch projects themselves — via an MCP connection. Two steps:
- Generate an API key in Stitch settings: stitch.withgoogle.com/settings.
- Add the Stitch MCP to Claude Code once (replace
YOUR_STITCH_API_KEY):
claude mcp add stitch --transport http https://stitch.googleapis.com/mcp --header "X-Goog-Api-Key: YOUR_STITCH_API_KEY" -s user
From this point on, Claude Code sees your Stitch projects directly — no export, no copy-paste.
Part 3 — The build
In Claude Code, inside the project folder, I point to the designs and say exactly what I want. The "match exactly" matters, otherwise the model interprets too freely:
Use my Stitch designs via the Stitch MCP and build a production-ready [React + Tailwind] app from them. Match layout, spacing, colours and typography per screen exactly, wire the screens with navigation and add smooth transitions.
Claude pulls the real design context and builds it out — screens wired, transitions in place.
The consistency trick: design.md
This is the lever that made the biggest difference for me. Stitch can export its full design system (colours, spacing, components, states) as design.md — a format Claude Code reads cleanly. Drop the file into the project root, tell it once to "stick to design.md," and every new component stays on-system instead of slowly drifting. Kills the "why does every component look slightly different" problem.
My operator quality gates
Four rules I learned from real project work — they separate "fast and good" from "fast and generic":
Without the design.md in the root, the look drifts starting at component 5. File first, then build.
Stitch gets you to ~90% of the look. The last 10% — spacing, micro-polish — Claude Code does in code, not back in Stitch. That's where it counts.
Be honest about the output: this is prototype quality, not a pixel-perfect final deliverable. Treat it as a fast, strong starting point — otherwise you ship something generic.
Without the MCP setup, Stitch exports directly to HTML/Tailwind or Figma (with real layers). Hand that to Claude as the starting point. The MCP path is cleaner, the export path works everywhere.
My take
This pipeline took design off my personal to-do list without the output looking cheap. The trick isn't the one magical tool — it's the clean handoff between a tool that designs and an agent that builds. Same principle I use to orchestrate everything else in the stack.
More on how I chain tools and agents together: How I installed 184 AI agents with Claude.