cd /news/ai-agents/design-md-vs-tokens-json-vs-figma-fo… · home topics ai-agents article
[ARTICLE · art-41659] src=dev.to ↗ pub= topic=ai-agents verified=true sentiment=↑ positive

DESIGN.md vs tokens.json vs Figma for AI Agents

A developer proposes DESIGN.md as a unified format for AI agents that combines structured design tokens, expressible rules, machine readability, and version control in a single file. The approach contrasts with alternatives like tokens.json, which lacks rules, README prose, which lacks structured values, and Figma, which is unreadable by agents. DESIGN.md can export to Tailwind and W3C DTCG standards, allowing it to serve as a source of truth while coexisting with Figma.

read2 min views1 publishedJun 27, 2026

DESIGN.md is the only common approach that gives an agent structured values, expressible rules, machine readability, and persistence in one versioned file. Here is how it compares to the alternatives.

A tokens.json gives exact values but cannot express rules. There is no way to say "use the accent only for the primary action" in JSON. The agent knows your colors but not how to apply them, so it uses them generically.

A README or CLAUDE.md can express rules, but has no structured, machine-readable values to anchor to. The agent reads intent but has no precise tokens to apply.

Figma is built for humans. An AI coding agent cannot read it directly, so a link gives the agent nothing.

DESIGN.md exports to Tailwind and the W3C DTCG standard, so you keep your existing pipeline and use DESIGN.md as the source of truth:

$ npx @google/design.md export --format dtcg DESIGN.md > tokens.json
$ npx @google/design.md export --format css-tailwind DESIGN.md > theme.css

Can DESIGN.md and Figma coexist? Yes - keep Figma as the design source, export to DTCG, fold into a DESIGN.md whose prose adds rationale.

Is it proprietary? No - open, and its tokens are based on the W3C standard.

Each alternative has one or two of the properties an agent needs. DESIGN.md has all of them at once, in a single file.

Free starter: The format, a complete annotated example, and the core idea are on a free cheat sheet: DESIGN.md Quick-Start Cheat Sheet

Go deeper: The full guide covers the entire format — the token schema, the CLI in depth, accessibility, Tailwind and DTCG export, agent integration, and a complete walkthrough: DESIGN.md: The Complete Guide to Design Systems for AI Agents

How are you giving your agent design context today - a tokens file, a README, or nothing yet? Curious to compare approaches below.

── more in #ai-agents 4 stories · sorted by recency
── more on @google 3 stories trending now
sponsored brought to you by zahid.host 4,200+ EU-deployed projects
reading about agents? ship yours in a single git push.

Run your AI side-project on zahid.host

EU-based hosting, git-push deploys, automatic HTTPS, no cold starts. Free tier with a custom domain — perfect for shipping the agent you just read about.

$git push zahid main
Live at https://your-agent.zahid.host
Get free account → Pricing
from €0/mo · no card required
LIVE [news/design-md-vs-tokens-…] indexed:0 read:2min 2026-06-27 ·