Let me be straight about this one, because most guides on the internet are not.
Google Stitch is a prompt-driven UI generator. It does not read a config file from your repository, because there is no repository. There is no .stitch/rules folder to create.
So the workflow is different. It is still worth doing, and it still works.
What Stitch actually gives you
Stitch turns a text prompt or a reference image into UI, then exports to code or to Figma. The design decisions happen inside the prompt, not inside a project config.
That means your DESIGN.md becomes prompt material rather than ambient context. The good news: because Stitch generates whole screens at once, one well-built prompt goes a long way.
The workflow
Step one: trim your DESIGN.md. The full document is too long for a prompt box. Pull out the parts Stitch can act on: colors, type, radius, spacing, and the two or three component rules that define your look.
Step two: paste it as constraints. Lead with the constraint block, then describe the screen.
Design constraints, follow exactly:
- Background #0b0b0c, surface #121214, border #232327
- Primary action #0061ff, text on primary #ffffff
- Text primary #f2f1ee, secondary #8d8b86
- Font: Inter. Display 28px/600, body 15px/400
- Radius: 12px cards, 10px buttons, 999px pills
- No gradients, no drop shadows, 1px borders only
Now design a billing settings screen with a plan summary card,
a payment method row, and an invoice table.Step three: reuse it. Keep that block in a snippet. Every new screen starts by pasting it.
Keep the export honest
After you export to code, the values drift a little. Generators round things, and a 12px radius sometimes lands as 0.75rem in one place and 12px in another.
This is where your real DESIGN.md earns its keep. Drop the exported code into your repo, then let Claude Code or Cursor normalise it against the file:
Rewrite this exported component to use only tokens from DESIGN.md.
List any value that had no matching token.That last line is the useful part. It tells you where Stitch invented something.
Verify it worked
Generate two different screens with the same constraint block and put them side by side.
If the greys match, the radii match, and neither has a shadow, your constraints landed. If screen two has softer corners than screen one, the block is too long and something got dropped. Trim it.
Common mistakes
- Pasting the whole DESIGN.md. It buries the instruction under detail. Twelve lines of tokens beats four hundred lines of documentation.
- Describing the vibe instead of the values. "Clean and modern" produces a different result every run. Hex codes do not.
- Treating the export as final. Stitch is a starting point for a screen, not a source of truth for your system. The repo file stays the source of truth.
What this means for you
Stitch is genuinely fast for exploring layouts. Pair it with a design contract you own and you get the speed without the drift.
Pull a documented system from the library, trim it to a constraint block, and keep that block one paste away.