Have you ever done some Vibe Coding and noticed the AI's layout is always a little off? You keep saying "the spacing is wrong here, the colour is inconsistent there", and it still produces a slightly broken screen? If yes, the real reason is that you haven't given the AI the rules of your design system properly.
To fix exactly that, this post walks through design.md, an AI design system spec released by Google Labs. The goal is to let AI Coding tools like Claude Code, Cursor, and GitHub Copilot actually read your design system and produce consistent UI — so you don't have to keep repeating "wrong colour, wrong font size" forever.
If you're not familiar yet with rules files for AI like CLAUDE.md / AGENTS.md, take a look at first — it'll make a lot more sense why design.md exists.
Where design.md came from
design.md actually comes out of Stitch, Google's AI design tool (first shown at Google I/O 2025). Stitch is a UI design tool powered by Gemini — you give it a Prompt or upload a sketch and it generates a UI screen, frontend code included.
Around 2026, Google released the design.md format itself under Apache 2.0 on GitHub (. Give the AI the key points, not everything.
Right now, design.md doesn't ship with official integration examples for Claude Code / Cursor / Copilot — only the CLI and TypeScript API. So you need to guide the AI to read design.md via your CLAUDE.md / AGENTS.md / rules file.
Wrap-up
So what is design.md, really?
- A design system document for AI Coding tools, in a "YAML token + Markdown design rationale" format.
- The pain point it solves is AI-generated UI having inconsistent colours, font sizes, and spacing.
- The built-in CLI can lint (with WCAG contrast checks), diff, export to Tailwind / DTCG, and output a spec for the AI.
Hope this helps you fix the "AI generates UI with inconsistent colours, font sizes, and spacing" pain so your AI Coding workflow goes a lot more smoothly.
SOCIAL SHARE CARD GENERATOR