One file that tells your agent what your app should look like.
DESIGN.md is Google's open format for handing a coding agent your visual identity. It is one Markdown file you drop next to your README: the top is YAML with the actual values — colours, type scale, spacing, corner radii, component tokens — and the rest is prose explaining why those values exist and when to use them. The agent gets exact numbers and the reasoning behind them, which is the part a screenshot or a "make it look modern" prompt cannot give it. Without something like this an agent re-decides your design on every prompt, so the fifth component it writes rarely matches the first. There is a command-line tool, npx @google/design.md, that checks a file against the spec, flags colour pairs that fail WCAG contrast, and exports your tokens to Tailwind or the W3C token format. The spec is Apache-licensed and still marked alpha, so expect it to move.
Official apps
Pairs well with
Works with
Key info
- Pricing
- Free
- Category
- Utilities
- Best for
- Intermediate
- Made by
- Google Labs
- What it is
- A DESIGN.md file in your project root: YAML design tokens, then prose
- Check one
- npx @google/design.md lint DESIGN.md
- Exports to
- Tailwind v3 and v4, and the W3C design-token format
- Licence
- Apache 2.0; the spec is still marked alpha
- Works with
- Any agent you point at the file — Claude Code, Cursor, Kiro, Windsurf
Related reading
- Prompt engineering
Prompts that get better code back
Give it the constraint, not just the goal.
1 min read · 23 views - Fundamentals
Reviewing code you did not write
You are going to merge a lot of code you did not type. Reviewing it is a different skill from writing it, and it is the one that actually keeps a vibe-coded…
Intermediate1 min read · 27 views - Context engineering
Why your AI keeps forgetting what you told it
Models have a context window, a fixed budget of text they can consider at once. Everything competes for it: your instructions, the files you opened, the erro…
Intermediate1 min read · 26 views