DESIGN.md generator with a live preview on real sections
Pick colours, type, radius and motion. Get a spec-valid DESIGN.md for Claude Code, Cursor, Claude Design or Stitch, checked for WCAG AA and previewed on 10 complete Tailwind sections. Or paste your own file and see it applied.
Start from a style
11 original starter styles. One click applies a style; everything stays editable.
All 23 colour tokens
Editing the generator inputs above regenerates these. Edit them last.
Paste a DESIGN.md, drop a file here, or upload one. shadcn colour names are used as they are; Material and Stitch names (surface, on-primary, error, outline) are mapped; missing tokens are derived.
WCAG 2 contrast for 23 text and background pairs the sections actually use (4.5:1 for text, 3:1 for large headlines and icons). A fix changes only the lightness of one source colour.
Loading 10 sections...
Free Tailkits UI sections: Hero, Logo cloud, Features, Stats, Pricing, Testimonial, FAQ, Call to action, Newsletter, Footer.
Export
Copy or download. Lint the DESIGN.md with npx @google/design.md lint DESIGN.md.
Use this design with 271 sections
Every Tailkits UI section reads the same tokens you just designed. Add tailkits-theme.css to your Tailwind v4 build and heroes, pricing tables, footers and sign-up forms take on your DESIGN.md, in HTML or through the MCP server for Claude Code and Cursor.
One email a week with new templates, components and tools. Unsubscribe anytime.
What is DESIGN.md?
DESIGN.md is a Markdown file that tells AI agents how your product should look. Google Labs added it to Stitch in March 2026 as an "agent-friendly" way to move design rules between tools, and open-sourced the format in April 2026. In Google's words, "instead of guessing intent, AI agents can know exactly what a color is for."
A DESIGN.md has two layers. The YAML front matter holds the normative tokens: exact colours, type styles, corner radii, spacing and component tokens. The Markdown body holds the rationale an agent cannot infer from numbers: the personality of the brand, when to use the primary colour, what to avoid.
What goes in a DESIGN.md
| Part | What it holds | What the Studio writes |
|---|---|---|
colors | Named colours (hex recommended) | The 18 shadcn/ui names plus chart-1 to chart-5, so the file doubles as a shadcn theme |
typography | Type styles: family, size, weight, line height, tracking | headline-display, headline-lg, headline-md, body-lg, body-md, body-sm, label-md from your scale |
rounded, spacing | Radius and spacing scales | sm to xl plus full; a 4px spacing grid |
components | Component tokens that reference the others, such as {colors.primary} | Buttons, card, popover, panels, inputs and chart series; the linter checks their contrast |
| Sections | Overview, Colors, Typography, Layout, Elevation & Depth, Shapes, Components, Do's and Don'ts, in that order | All eight, plus a Motion section |
Validate any DESIGN.md with Google's CLI: npx @google/design.md lint DESIGN.md. It reports broken token references, sections out of order, unknown keys and component pairs below WCAG AA, as JSON an agent can act on.
Using DESIGN.md with Claude Code, Cursor, Claude Design and Stitch
Claude Code and Cursor
Commit the file as DESIGN.md at the root of the repository. Add one line to CLAUDE.md, AGENTS.md or a Cursor rule: "Follow DESIGN.md for every UI change and use only its tokens." Then add tailkits-theme.css (or the CLI's css-tailwind export) to your Tailwind v4 stylesheet, so the tokens are real utilities like bg-primary rather than hex values the agent has to copy.
Claude Design
Claude Design builds its design system from what you give it: code, files and assets. Upload the DESIGN.md, or connect the repository that contains it, when you set up the design system. Because the colour names are shadcn's, the screens it hands to Claude Code map onto the same variables.
Google Stitch
Stitch created the format and reads and writes it natively. Import the file to generate screens in your style, or export a DESIGN.md from Stitch and paste it into the Studio to check its contrast and preview it on real sections.
From DESIGN.md to Tailwind v4 and shadcn/ui
The official export, npx @google/design.md export --format css-tailwind DESIGN.md, writes a Tailwind v4 @theme block (--color-primary, --radius-lg, --font-body-md, ...). The Studio's tailkits-theme.css goes one step further: it sets the shadcn variables, derives the 60-odd shades a full landing page needs (surfaces, ink and text ramps, tints, shadows, focus rings) the same way Tailkits UI's derive layer does, adds motion tokens with a reduced-motion rule, and maps everything to utilities. The shadcn theme export is a :root block (and .dark for generated light themes) in OKLCH, ready for globals.css.
Why preview on real sections?
Swatches hide problems. A muted grey that looks fine in a palette can fail as caption text on a tinted band; a brand colour can vanish behind a dark call-to-action. The Studio applies your tokens to ten complete Tailkits UI sections (hero, features, pricing, testimonials, FAQ, footer and more) and checks 23 text and background pairs against WCAG AA, with a one-click fix that changes only the lightness of the colour at fault.
Frequently asked questions
Answers to common questions about DESIGN.md and this generator.
What is a DESIGN.md file?
DESIGN.md is a plain-text description of a design system for AI agents. YAML front matter holds exact tokens (colours, typography, corner radii, spacing, components) and Markdown sections explain how to use them. Google Labs introduced it with Stitch in March 2026 and published the specification as open source (Apache-2.0) in April 2026.
Is the DESIGN.md this generator writes valid?
Yes. It follows the alpha specification from google-labs-code/design.md: tokens in the front matter, sections in the official order, and component tokens that reference the colours. Every starter style is checked with the official linter (npx @google/design.md lint, version 0.4.0) and passes with zero errors and zero warnings. Run the same command on your copy before you commit it.
How do I use a DESIGN.md with Claude Code or Cursor?
Save it as DESIGN.md in the root of your repository and point your agent instructions at it: add a line such as "Follow DESIGN.md for all UI work" to CLAUDE.md, AGENTS.md or a Cursor rule. Coding agents read it as a normal file; no plugin is needed. For Tailwind projects, also add the exported theme CSS so the tokens exist as real utilities.
Can I use it with Claude Design or Google Stitch?
Stitch reads and writes DESIGN.md natively, so you can import the file there directly. Claude Design imports a design system from your files and code; upload the DESIGN.md (or the repository that contains it) when you set the design system up, and keep the exported theme CSS next to it for the hand-off to Claude Code.
How do I turn a DESIGN.md into a Tailwind v4 theme?
The official CLI exports a Tailwind v4 @theme block: npx @google/design.md export --format css-tailwind DESIGN.md > theme.css. The Studio also gives you tailkits-theme.css, which adds the shadcn variable names, every derived Tailkits token, motion tokens and the @theme inline block, so bg-primary, text-muted-foreground and the Tailkits UI sections work straight away.
What is the difference between DESIGN.md, AGENTS.md and SKILL.md?
AGENTS.md (and CLAUDE.md) tell an agent how to build and test a repository. DESIGN.md tells it how the product should look. SKILL.md packages a procedure the agent loads on demand, such as building a pricing section. They work together: the brand in DESIGN.md, the workflow in a skill, the components from a library or MCP server.
Where do motion tokens go? The spec has no motion group.
The alpha spec defines colors, typography, rounded, spacing and components only, and the linter warns about unknown token groups. The Studio therefore writes motion as a "## Motion" section (durations, easing curves and springs in plain words), which consumers preserve, and puts the exact values in tailkits-theme.css as --tk-duration-*, --tk-ease-* and --tk-spring-* variables.
Does the Studio upload or store my design?
No. Generating, importing, checking and exporting all run in your browser. A share link stores the tokens in the part of the URL after #, which browsers never send to a server. The prose of an imported file is not included in share links.