Annotated 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…
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…
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…
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…
How to Create a DESIGN.md File
Create a 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…
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…
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…
AI & Workflows
Claude Design vs Google Stitch
Claude Design and Google Stitch both generate interface designs from prompts, but they treat the design system differently. Claude Design (Anthropic) builds a…
Design System MCP Servers
A design system MCP server lets a coding agent look up tokens, component APIs, and usage guidance on demand instead of reading a static file. As of November…
Google Stitch and DESIGN.md
DESIGN.md originated in Google Stitch, a Google Labs AI design tool, where it carries design rules between projects and to other tools. According to Google…
What Is Vibe Design?
Vibe design is the practice of creating a user interface by describing intent in natural language and iterating on what an AI tool produces, rather than…
The DESIGN.md Agent Skill
The DESIGN.md skill is one file that teaches a coding agent the DESIGN.md format: read the file before building UI, write spec-valid tokens and sections, run…
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…
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…
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…
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…
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…
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…