Get your design.md
Enter a website and get its colors, type, spacing, radius and shadows as one file your agent can read. Free, and no account needed.
What is DESIGN.md?
A plain-text file that tells a coding agent how your product looks. AGENTS.md says how to write the code; DESIGN.md says what it should look like.
Google Labs publishes it as an open format, still marked alpha. It has two layers: design tokens in YAML at the top, which are the rules, and prose under them, which says how to apply them.
colorsAny CSS color. Quote hex values, or YAML reads them as comments.typographyFont family, size, weight, line height and letter spacing per text style.spacingThe spacing scale, in px, em or rem.roundedThe corner radius scale.componentsBackground, text color, type, radius, padding and size per component. A hover state is its own entry.
The prose sections are optional, but the ones you write go in this order:
- 1. Overview
- 2. Colors
- 3. Typography
- 4. Layout
- 5. Elevation & Depth
- 6. Shapes
- 7. Components
- 8. Do's and Don'ts
DESIGN.md
---
name: Heritage
colors:
primary: "#1A1C1E"
accent: "{colors.tertiary}"
tertiary: "#B8422E"
typography:
h1:
fontFamily: Public Sans
fontSize: 3rem
fontWeight: 600
rounded:
sm: 4px
spacing:
sm: 8px
---
## Overview
Quiet, editorial, generous with space.
## Colors
Primary carries text and outlines.
Tertiary marks the one action on each screen.A token can point at another, as accent does: {colors.tertiary}.
Use it with your agent
Four steps, and Claude Code, Cursor or Codex builds with your colors and type instead of guessing.
1. Get the file
Read your website above, or write it by hand from the example.
2. Put it in your repository
Save it as DESIGN.md at the root, next to AGENTS.md or CLAUDE.md.
3. Point your agent at it
Add one line to AGENTS.md (Codex, Cursor) or CLAUDE.md (Claude Code), so it is read on every task:
Follow DESIGN.md for every visual decision: colors, type, spacing, radius.
4. Lint it
Google’s CLI checks the structure and the contrast of your color pairs, and diff flags what got worse between two versions.
npx @google/design.md lint DESIGN.md
Where one file stops
DESIGN.md is a good start for one repository. A brand used by a whole team, in every agent, needs more than a file.
It goes stale
A file is a copy. Change a color and every repo holding the old one keeps building with it.
Archetype serves the brand live over MCP, and opens a pull request in your repos when it changes.
Values, not parts
It names your values. Your real buttons, cards, logos, icons and templates are not in it.
Agents fetch the real component code, templates with slots, logos and icons.
No voice
Tokens can’t hold how you write: the words you use, the ones you never do.
Voice documents and guidelines go to the agent with the design.
No check
Lint checks the file. Nothing checks what the agent built with it.
check_against_brand grades the live page, the code or the copy, worst issue first.
Questions
What is DESIGN.md?
A plain-text file that tells a coding agent how your product looks: design tokens in YAML at the top, and prose under them that says how to use them. Google Labs publishes it as an open format under the Apache-2.0 license.
Is DESIGN.md a finished standard?
Not yet. Google marks the spec as alpha, so the schema and the CLI can still change.
Which agents read it?
Any agent that reads the files in your repository, such as Claude Code, Cursor and Codex. Mention it in AGENTS.md or CLAUDE.md so it is read on every task, not only when the agent happens to open it.
Is the generator free?
Yes. It reads one page of the website and its stylesheets, with no account and no AI model.
Why are some values missing from my file?
The generator only writes values the site declares in its own stylesheets. Nothing is invented to fill a gap, so a site with no spacing scale gets none.
DESIGN.md or an MCP server?
Both work together. The file suits one repository and one agent. An MCP server like Archetype’s serves the same brand, plus its components, templates, assets and voice, to every agent your team uses, and stays current when the brand changes.