DESIGN.md Generator
Turn any website into a DESIGN.md: the design file Claude Code, Cursor and Google Stitch read to build in its style. Real colors, fonts, spacing and radii, from the live site.
Follows Google's open DESIGN.md spec · passes the official linter
Use a DESIGN.md with Claude Code, Cursor and Codex
- 01
Generate it
Paste the website whose look you want. You get its colors, fonts, type scale, spacing and radii as a DESIGN.md.
- 02
Drop it in your project
Save it as DESIGN.md in the project root, next to your README.
- 03
Tell your agent to follow it
"Build the settings page and strictly follow DESIGN.md." Claude Code, Cursor and Codex read it as context.
What is DESIGN.md?
The design version of a README: one Markdown file that tells AI coding agents how your product should look. Without it, agents fall back to the same default look on every project. With it, they build with your colors and type.
At the top
Design tokens, in YAML
Colors, typography, spacing, corner radii and components, with exact values an agent can copy.
colorstypographyspacingroundedcomponentsThen
Eight short sections
How to use the tokens, in the order Google's spec sets, so every agent reads it the same way.
Let your agent write it on its own
Connect the MiroMiro MCP server and Claude Code, Cursor or ChatGPT read any site's brand and design tokens themselves, then write the DESIGN.md, the components and the theme in one go. Building it into your own product? It is one API call.
DESIGN.md questions
What is a DESIGN.md file?
DESIGN.md is a plain Markdown file in the root of a project that tells AI coding agents how the product should look. It starts with YAML design tokens (colors, typography, spacing, corner radii, components) and follows with short sections explaining how to use them. Google Labs published it as an open specification in 2026, and agents like Claude Code, Cursor, Codex and Google Stitch read it as context.
How do I use the DESIGN.md with Claude Code or Cursor?
Download the file, put it in the root of your project as DESIGN.md, and tell the agent to follow it, for example "Build the pricing page and strictly follow DESIGN.md". Claude Code, Cursor and Codex read it like any other project file, so every screen they build uses the same colors, fonts and spacing.
Does it follow Google's DESIGN.md spec?
Yes. The file uses the front matter and section order of the open spec at github.com/google-labs-code/design.md (version alpha), so it passes npx @google/design.md lint DESIGN.md. The spec is still an alpha, so field names may change.
Where do the values come from?
From the live site's own CSS: the brand colors and fonts the site declares, and the type sizes, spacing steps, radii and shadows its stylesheets use most. Nothing is guessed from a screenshot. Values the site does not express, such as a component's exact padding, are left out rather than invented.
Is there an awesome-design-md list for any website?
The awesome-design-md collections cover a few dozen famous brands. This generator makes the same kind of file for any public website, including your own, a competitor or a client's old site.
Can I get the colors and fonts of a whole list of websites?
Yes. Run MiroMiro’s Brand Kit Extractor or Color Palette & Design Tokens tool on the Apify Store: paste a list of domains and pay per site, with no MiroMiro account. Or call the same engine from your own code with the MiroMiro API.
Is the DESIGN.md generator free?
Yes, with no signup: a few sites a minute and up to 60 a day per visitor. To generate DESIGN.md files inside your own agent or product, use the MiroMiro API or its MCP server, which return the same brand and design tokens.