"Getting an AI to understand your design system used to mean exporting Figma tokens, converting to JSON, installing plugins, and going through the whole handoff dance…" — that was the story until last year. Now it takes one markdown file. On April 21, 2026, Google officially open-sourced the DESIGN.md spec. It's the format the team used internally while building Stitch — now anyone can drop it in their project root, and AI agents like Claude, Cursor, and Stitch read it to generate consistent UI. The awesome-design-md collection by VoltAgent hit 68.7K GitHub stars within a month of launch, with 70 brands' DESIGN.md files published in full — Linear, Apple, Stripe, Claude, Notion, Vercel, and more.
What Is It?
DESIGN.md is a file that captures an entire design system in a single markdown document. Think of it as the design counterpart to AGENTS.md — the file that tells coding agents how to build the project. VoltAgent's comparison makes it intuitive.
| File | Who Reads It | What It Defines |
|---|---|---|
| AGENTS.md | Coding agents (Cursor, Claude Code, Codex, etc.) | How to build the project |
| DESIGN.md | Design agents (Stitch, Claude Design, etc.) | How the project should look |
"Markdown is the format LLMs read best — no parsing, no setup required. Just drop it in your project root and you're done." — VoltAgent README.
Google had been using DESIGN.md internally for about a year while building Stitch, their vibe design tool. Over time, outside developers started making their own versions, and companies started sharing their markdowns publicly. On April 21, Google officially open-sourced the standard spec. That moment turned "everyone's improvised markdown" into "a Google-backed standard."
- Two-layer structure
The top layer is YAML tokens (hex values, font sizes, spacing — machine-readable). The bottom layer is markdown prose (the reasoning behind those decisions — for both people and agents to use as context). It separates the "what" from the "why." - 9 standard sections
Visual Theme & Atmosphere, Color Palette, Typography Rules, Component Stylings, Layout Principles, Depth & Elevation, Do's/Don'ts, Responsive Behavior, Agent Prompt Guide. - Two preview files
Each DESIGN.md comes with two visual catalogs: preview.html (light mode) and preview-dark.html (dark mode), so you can see colors, typography, buttons, and cards at a glance.
The 70-brand lineup in awesome-design-md is genuinely impressive. AI/LLM tools: Claude, Cohere, ElevenLabs, Mistral, Ollama, Replicate, xAI. Developer tools: Cursor, Vercel, Warp, Raycast. Backend: PostHog, Supabase, Sentry, MongoDB. Design tools: Figma, Framer, Webflow. Fintech: Stripe, Coinbase, Revolut. And yes, even cars — Ferrari, Lamborghini, Tesla. Instead of vague instructions like "make it look like Stripe," you just hand the agent stripe/DESIGN.md directly.
What Changes Compared to the Figma Workflow?
The way teams hand off design systems to AI has changed several times in the past year. Here's how the difference actually plays out in practice.
| Area | Figma + MCP/Plugin | DESIGN.md |
|---|---|---|
| Setup | Figma account + plugin/MCP server + authentication | Copy one file to your project root |
| Transfer cost | Token export, JSON conversion, eats your entire context window | A few hundred lines of markdown — context efficiency is dramatically better |
| Tool lock-in | Locked to Figma. Other agents can't read it. | Plain text. Claude, Cursor, and Stitch all read it. |
| Updates | Change in Figma → re-export → redeploy | A single git diff, reviewed as a PR |
| Preserving "why" | Just component names and color values — intent gets lost | Prose like "Golden Retriever orange for playful energy" is preserved |
When your design system becomes text in the file tree, code review, PRs, git blame, and branching all apply automatically.
The preservation of "why" is especially significant. When you export tokens, the hex codes travel — but the reasoning behind those color choices doesn't. "An optimistic, trustworthy, energetic brand tone" gets left behind. When a new component comes up, or an edge case, or an unexpected layout constraint, the agent has nothing to fall back on. The markdown half of DESIGN.md is exactly where that context lives. Guidelines like "never crowd elements together" can't be tokenized, but they're critical to every decision.
① Interactions and animations aren't standardized yet (you can describe them in prose, but there's no formal structure). ② Complex rules like multilingual font systems (CJK fallbacks) are difficult to express in markdown. ③ It doesn't fully replace Figma's pixel-validation workflow — DESIGN.md is a guide for how things should look; pixel-level accuracy still needs a separate step. ④ The 70-brand collection was extracted from public CSS, so it's not 100% identical to the original brand guidelines. Treat these as inspiration and starting points.
Stitch also shipped MCP integration in April. AI coding agents (like Anti-Gravity) can now look at a Stitch design and send layout modification requests directly, or auto-generate design variations — a true bidirectional feedback loop. DESIGN.md sorted out format standardization; MCP sorted out two-way communication between tools. The design-to-code handoff is practically disappearing.
Getting Started
The barrier to entry is almost zero. Here's how to get up and running in about 30 minutes.
- Grab a reference DESIGN.md
Download a DESIGN.md from getdesign.md or github.com/voltagent/awesome-design-md that matches the tone of your product. Popular picks: Linear (minimal precision), Stripe (elegant purple gradients), Notion (warm minimalism), Vercel (black-and-white precision). - Drop it in your project root
Just put DESIGN.md in your project root (right next to README.md). That's it. No indexing, no plugins. - Tell the agent
Say "follow DESIGN.md to implement [feature]" and Claude Code, Cursor, or Stitch will apply the hex values, fonts, and spacing automatically. Adding a one-liner to AGENTS.md makes this even more reliable. - Customize for your brand
Use the reference DESIGN.md as a base and swap out the colors, fonts, and tone. The standard 9-section structure is documented at stitch.withgoogle.com/docs. - Commit to git and share with your team
This is where the real value kicks in. Your design system gets reviewed in PRs, experimented on in branches, and tracked with blame. Designers and engineers start speaking the same language.
One more thing — if you think of this as just a Figma export replacement, you're underselling it. The bigger picture is that when a design system becomes plain text, AI agents can participate in design decisions. Gokul (former product leader at Google and Meta), quoted in a Department of Product piece, sparked debate by calling design "the first AI casualty." His actual point: once a central design system is formatted in a way AI can consume, companies will stop backfilling designer headcount. Whether or not you agree, the trend of design systems hardening into markdown is hard to stop.
Deep Dive Resources
VoltAgent — awesome-design-md (68.7K Stars) Full collection of DESIGN.md files for 70 brands including Linear, Apple, Stripe, and Claude — with preview.html and dark mode previews included github.com
getdesign.md — Download Directory The web interface for awesome-design-md. Browse by category, or request a DESIGN.md for a specific site getdesign.md
Google Stitch — Vibe Design Tool Where the DESIGN.md spec started. Build UI from natural language, export to Figma, and get bidirectional feedback with coding agents via MCP integration stitch.withgoogle.com
Department of Product — DESIGN.md Explained A breakdown of the two-layer structure, the "design as first AI casualty" debate, and the AGENTS.md vs. DESIGN.md comparison departmentofproduct.substack.com
