Question 1

What is a DESIGN.md file?

Accepted Answer

DESIGN.md is an open spec from Google Labs that captures a brand's visual identity in a single, machine-readable Markdown file. It combines YAML design tokens (colors, typography, spacing, components) with human-readable rationale, so AI coding agents like Claude Code, Cursor, and Copilot can produce on-brand UI consistently.

Question 2

How does the generator work?

Accepted Answer

Paste a website URL. The tool fetches the page, extracts a structured signal (CSS variables, Tailwind classes, Google Fonts, hero elements, logo candidates), then runs it through an AI model that produces a brand-distinctive DESIGN.md following the canonical 8-section spec.

Question 3

Is it free?

Accepted Answer

Yes. No signup, no credits. Built and hosted by Masumi.

Question 4

Which AI coding agents can read DESIGN.md?

Accepted Answer

Claude Code, Cursor, GitHub Copilot, Aider, Continue, and any agent that reads Markdown files in your repository. Drop the DESIGN.md at the root of your project and the agent picks it up as persistent style context.

Question 5

Can I edit the generated file before downloading?

Accepted Answer

Yes. The editor lets you tweak colors, fonts, and tokens visually with live preview. Download the .md when you're happy with it, or copy the markdown to your clipboard.

Question 6

Does it follow the official DESIGN.md spec?

Accepted Answer

Yes — sections appear in canonical order (Overview → Colors → Typography → Layout → Elevation & Depth → Shapes → Components → Do's and Don'ts), token references use {colors.primary} syntax, and dimensions use spec-allowed units. Extensions like layout, elevation, and logo are accepted under the spec's 'unknown content' rule.

DESIGN.md Generator

Latest sites the AI looked at

One file your AI agents read across every coding session.

Paste a URL

AI builds your spec

Edit & download

Frequently asked