DESIGN.md Examples
A good DESIGN.md example has two parts: YAML frontmatter with your design tokens and a Markdown body explaining when to use them. This guide walks through three
Learn
Practical guides and deep dives on the DESIGN.md format, design tokens, brand systems, and AI-assisted design workflows.
DESIGN.md
DESIGN.md Generators
You can generate a DESIGN.md five ways: from a live URL, from a Figma file, from any page via a Chrome extension, with a visual token editor, or from your own c
The State of DESIGN.md
We ran all 74 DESIGN.md files in the awesome-design-md collection through Google's official linter. The results: not a single file produces an error, and not a
DESIGN.md Tools Compared
The DESIGN.md ecosystem has four kinds of tools: the reference library and CLI () that validates and converts files, generators that create a DESIGN.md from a w
Is DESIGN.md a Standard?
DESIGN.md is an open format published by Google under the Apache 2.0 license. It is a specification with a reference implementation, not a formal standard: it h
How to Write a DESIGN.md
Write DESIGN.md in three passes: extract your real tokens (from code, not from memory), write rationale only where a wrong choice is likely, and cut everything
What Is DESIGN.md?
DESIGN.md is an open-source file format from Google that stores a complete design system in a single Markdown file: machine-readable design tokens (colors, typo
Design Tokens
DESIGN.md to Tailwind v4 Theme
The CLI ships a export target that emits a Tailwind v4 block with CSS custom properties for every token in your DESIGN.md file. Paste the block into your , add
DESIGN.md vs DTCG: Which to Use
DESIGN.md is a Markdown+YAML file that bundles tokens with human-readable rationale for use in a repository. DTCG (W3C Design Tokens Community Group) is a JSON
Design Tokens Explained
Design tokens are named, versioned design decisions stored as key-value pairs. The widely-taught three-tier model splits them into global tokens (raw palette),
AI & Workflows
Agentic Design Systems: The Guide
An agentic design system is a design system your AI agents can actually use: tokens, component specs, and usage rules published as machine-readable context inst
Why AI UI Drifts Off-Brand
AI-generated UI drifts off-brand through four failure modes: token fabrication (the model invents colors and spacing), within-session drift (styles mutate as th
DESIGN.md with Claude Code
To make Claude Code use DESIGN.md, place the file in your repository root and reference it from CLAUDE.md (e.g. "Read DESIGN.md before generating any UI and fol
DESIGN.md with Cursor
Cursor doesn't read DESIGN.md automatically. Add a rule in .cursor/rules (or reference it from AGENTS.md) that instructs Cursor to load DESIGN.md before UI work
DESIGN.md vs MCP Servers
Use DESIGN.md for portable design context: one-shot prototyping, cross-tool workflows, theming, and use an MCP server when agents need live, complete access to
What Is Agentic Design?
Agentic design has two distinct meanings. In AI engineering, it refers to agentic design patterns: architectural patterns like planning, reflection, and tool us
What DESIGN.md Changes in Practice
Tokens tell a coding agent what your values are. Prose tells it what those values mean and when to hold back. A token-only DESIGN.md still produces generic UI:
DESIGN.md vs CLAUDE.md and AGENTS.md
DESIGN.md, AGENTS.md, and CLAUDE.md solve different problems: DESIGN.md stores your design system (tokens plus rationale) so agents build on-brand UI; AGENTS.md
DESIGN.md for AI Coding Agents
AI coding agents have no memory of your brand between sessions. A DESIGN.md in your repo is a plain-text file the agent can read once and apply across every gen