Observed Signal · Jun 27, 2026 · Technical Article · Source: DEV Community · Impact: 1/5 · Sentiment: Neutral
DESIGN.md vs tokens.json vs Figma for AI Agents
A developer post (PromptMaster) published on 2026-06-27 compares three approaches for giving AI agents design context: tokens.json, prose README files, and Figma links — and argues DESIGN.md combines the strengths of all three. The article states tokens.json provides exact values but cannot express application rules; prose README files can express rules but lack structured, machine-readable tokens; and Figma is designed for humans and is unreadable directly by coding agents. DESIGN.md is presented as a single, versioned file that provides structured values, expressible rules, machine readability, and persistence, and can export to Tailwind and the W3C DTCG standard via a CLI (npx @google/design.md). The post includes links to a free cheat sheet and a paid full guide on Gumroad.
Developer-focused comparison of design formats for AI agents; useful to design and agent engineering teams but not directly impactful to the broader AdTech/MarTech industry.
Track Figma Signals & Market Shifts in Real-Time
Polaris7 autonomous intelligence agents track regulatory filings, primary sources, executive changes, and deal flow 24/7. Create your free Explorer workspace to monitor these entities.
Key Takeaways & Evidence Grounding
- Article authored by PromptMaster and published on DEV Community on 2026-06-27.
- DESIGN.md is described as providing structured values, expressible rules, machine readability, and versioning in a single file.
- tokens.json provides exact design values but cannot express application rules for agents.
- Prose README files (e.g., CLAUDE.md) can express rules but lack structured, machine-readable tokens.
- Figma is human-oriented and not directly readable by AI coding agents.
- DESIGN.md can export to the W3C DTCG standard and Tailwind via the CLI commands using npx @google/design.md.
Connected Companies & Entities
7 Entities mapped“Figma is built for humans. An AI coding agent cannot read it directly, so a link gives the agent nothing....”
“$ npx @google/design.md export --format dtcg DESIGN.md > tokens.json...”
“Explore this practical breakdown on DEV’s open platform, where developers from every background come together to push boundaries....”
“Free starter: The format, a complete annotated example, and the core idea are on a free cheat sheet: DESIGN.md Quick-Start Cheat Sheet (link...”
“MongoDB (promoted content shown on the page as a sponsor)....”
“Sentry (promoted content shown on the page as a sponsor)....”
Ontology Mapping & Concepts
Related Market Signals & Shifts
Recent verified developments and strategic activity across this market segment.
DESIGN.md: Single file standardizes brand design for agents
The article explains DESIGN.md, a proposed plain-text standard that combines machine-readable design tokens (YAML frontmatter) with human-readable rationale (Markdown) in one file. Google Labs open-sourced the DESIGN.md format in April 2026 and provides examples and command-line tooling to lint, diff, and export tokens. The format defines eight ordered sections (Overview, Colors, Typography, Layout, Elevation & Depth, Shapes, Components, Do’s and Don’ts) and treats tokens as normative while prose provides intent. The file is intended to live in the code repository (e.g., beside README.md) so both humans and AI agents can read the brand’s source of truth, reducing agents’ reliance on generic components and improving design-to-code workflows.
Agentic AI Meets Figma: Practical Design Systems Guide
This practical guide explains how agentic AI agents are beginning to use well-structured Figma design systems as machine-readable instructions to assemble UI components. The author recounts a Storybook demo where an agent composed a customer-review component by reading components, tokens and props, and highlights technical building blocks designers must adopt: semantic tokens, exact prop and component naming, complete state coverage, auto layout, slots (Figma feature), and Code Connect mappings to code. The piece defines MCP (Model Context Protocol) as the connector agents use to read tools, notes Uber’s recent write-up using an open-source Figma Console MCP, and raises open questions about governance, visual review workflows, and who owns quality as agents accelerate component generation. The article frames agentic workflows as enabling but requiring disciplined file and process changes.
AI Instruction Split: AGENTS.md, SKILL.md, DESIGN.md
The article describes a growing three-layer standard for instructing AI agents: AGENTS.md for overall agent behavior and boundaries, SKILL.md for reusable task procedures (used by Anthropic's Claude Skills and the Agent Skills standard), and DESIGN.md — a Google Labs design-spec format released in April 2026 that combines machine-readable design tokens (YAML) with human-readable intent and ships with a CLI validator (npx @google/design.md lint). The author argues these formats separate verifiable rules (tokens, audits, structural checks) from judgment-based guidance (tone, stance), and situates the split alongside Spec-Driven Development (SDD) workflows (Kiro, GitHub Spec Kit). The three-layer approach is presented as complementary to SDD and intended for incremental adoption where verification adds value.
Track Real-Time Market Signals & Shifts
Set up custom watchlists to receive automated, evidence-grounded executive digests whenever material signals or shifts occur across your tracked landscape.