DESIGN.md: a template's design for your coding agent

A DESIGN.md describes a design system in one plain-text file, in the format Google Labs published for coding agents (google-labs-code/design.md, spec version alpha). The top of the file is YAML with the exact values (colours, text styles, corner radii, spacing, component tokens); the rest is short prose that says where each value is used and what to avoid. Give it to Claude Code, Cursor, v0, Lovable or any other agent, so a page it builds next to the template’s pages can use the same colours, type and shapes instead of guessing them.

Templates that have one show it on their page; more are added as templates get their coded editions. It is free, with no account: it holds the tokens and style rules, not the pages, code or images.

Get it

• On the template page: DESIGN.md · Free → Copy DESIGN.md, or View to see the colours, type and parts first (https://framebrick.co/templates/<template>/design, with downloads).
• The raw file: https://framebrick.co/templates/<template>/design.md, for example Kalme’s.
• From the Framebrick MCP server: the tool get_design_md with the template’s slug returns the file; get_template gives its address.
• In the downloads: from their next release, the Next.js, Astro and HTML editions and the AI prompt pack carry it at the project’s root. A project exported from the page builder (Pro) includes one made from the style you picked.

Use it with an agent

1. Save it as DESIGN.md at the root of your project.
2. Tell the agent to read it before it builds or changes a page, for example: “Read DESIGN.md and build a pricing page that follows it: use its colour and text tokens, its corners and spacing, and its do’s and don’ts.” If your agent has a project instructions file (CLAUDE.md, AGENTS.md, Cursor rules…), add one line there: “Follow DESIGN.md for every UI change.”
3. Check the result against the template’s live demo: the file follows the published template, and where they differ, the site is right.

Don’t count on an agent picking the file up by itself: point it there.

In a code edition the token names match the project (ink, lime, h1, section-padding…), so the agent writes classes that exist. The front matter gives desktop sizes; the tables below it give phone, tablet and desktop.

Check or convert it

Google’s command-line tool reads the same file. Tested on 2026-10-13 with @google/design.md 0.4.0 on Kalme’s file:

npx -p @google/design.md@0.4.0 designmd lint DESIGN.md
npx -p @google/design.md@0.4.0 designmd export --format css-tailwind DESIGN.md > theme.css
npx -p @google/design.md@0.4.0 designmd export --format dtcg DESIGN.md > tokens.json

lint reports errors (there are none in our files) and warnings. Expect a few: a colour that no component token uses (an overlay, a border, a transparent tone) is reported as unused, and where a template’s real hover colour is below WCAG AA contrast the warning says so. The exports give a Tailwind CSS v4 @theme block and W3C design tokens. On Windows use the designmd command, as above: design.md clashes with the .md file type.