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…
DESIGN.md Team
Editorial team, md-design.io
The DESIGN.md Team is the editorial voice behind md-design.io, an independent resource that explains the DESIGN.md format, design tokens, and AI-assisted design workflows. Articles here are written and reviewed against the open Apache-2.0 DESIGN.md spec and the official @google/design.md tooling, and every factual claim is checked against the published spec, CLI, and community files before it ships. md-design.io is an independent project and is not affiliated with or endorsed by Google.
19 articles by DESIGN.md Team
AI & Workflows7 min read
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…
AI & Workflows7 min read
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…
AI & Workflows6 min read
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.md8 min read
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…
DESIGN.md7 min read
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…
AI & Workflows9 min read
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…
DESIGN.md6 min read
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…
AI & Workflows5 min read
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…
AI & Workflows7 min read
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.md6 min read
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…
AI & Workflows8 min read
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…
DESIGN.md4 min read
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…
AI & Workflows5 min read
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…
Design Tokens6 min read
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 Tokens4 min read
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 Tokens4 min read
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)…
DESIGN.md10 min read
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…
DESIGN.md9 min read
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…