Design systems are about to become executable
The design system was a document. Now it is a runtime.
In four months, a format specification for describing a visual identity to coding agents reached 27,148 stars on GitHub. Tools that generate UI now read a design system before drawing a single pixel. The design system is leaving the document era.
One caveat on the title: executable is a vision, not a runtime. DESIGN.md makes a design system readable by agents; nothing executes in the technical sense. What changed matters more: the constraint that bounds AI output is now code. Versionable, testable, installable.
I live this every day. My design system is a 177-line DESIGN.md file, read by the agents in my stack before they produce anything. I built DS Bridge to make a Figma design system readable through MCP; this article is the file-based version of that idea.
Tokens as code: the road to a portable format
The first step was extracting values out of Figma into a portable format. That part is mature.
The W3C community spec (Design Tokens Format Module 2025.10)
On 30 July 2026, the W3C Design Tokens Community Group published its format module draft: Design Tokens Format Module 2025.10 (designtokens.org), edited by Louis Chenais, Kathleen McMahon, Drew Powers, Matthew Strom-Awn and Donna Vitan. The status is explicit: "not a W3C Standard nor on the W3C Standards Track" (designtokens.org). It is a tool-to-tool exchange standard, not an official norm.
Aliases ($ref), composite tokens, groups, inheritance, circular reference prevention: the grammar that lets Figma, Style Dictionary and agents share one language.
Style Dictionary: style once, use everywhere
Style Dictionary is the most established token build tool: 4,766 stars, Apache-2.0, created in 2016. Its README promises "Style once, use everywhere" and exports tokens to iOS, Android, CSS, JS, HTML, sketch files and style documentation (github.com/style-dictionary).
Tokens Studio: the Figma bridge
Tokens Studio is the dominant Figma token tool (1,602 stars, MIT): "Design systems, fully automated" (tokens.studio). It exports to Style Dictionary through token-transformer (npm).
The token layer is solved. Values are already code. What was missing is the contract on top.
DESIGN.md: the design system as an agent contract
DESIGN.md, from Google Labs, is "a format specification for describing a visual identity to coding agents", giving them "a persistent, structured understanding of a design system" (github.com/google-labs-code/design.md). Created on 10 April 2026: 27,148 stars, 2,262 forks, Apache-2.0.
"A DESIGN.md file combines machine-readable design tokens (YAML front matter) with human-readable design rationale (markdown prose). Tokens give agents exact values. Prose tells them why those values exist and how to apply them." (design.md README)
Prompts never delivered that. An agent reading a DESIGN.md does not rediscover the brand every session: the values are exact, the rationale survives the conversation.
Four months of adoption: 27k stars, 107k across the ecosystem
awesome-design-md, the ecosystem list, sits at 107,821 stars: "Drop one into your project and let coding agents generate a matching UI" (github.com/VoltAgent/awesome-design-md). A Chrome extension extracts a site's styles into a DESIGN.md (2,636 stars). A list of 67 DESIGN.md and SKILL.md design files for agentic tools like Claude Design, Google Stitch, Codex and Cursor follows (2,290 stars) (github.com/bergside).
One nuance: 107k stars is an ecosystem signal, not proof of production adoption. The speed, though, is real.
The timing is not a coincidence. Claude Code ships auto mode by default (claude.com), Microsoft Design describes the "naked designer" (microsoft.design), NN/g formalized the PROVE framework (nngroup.com). If agents execute by default, the design system you hand them is the context that determines output quality.
What changes when the system executes
Design-in-code: Linear, Vercel Geist, the sketch-to-UI loop
The reference cases ship their design system as code, not as Figma files. Linear publishes its design as a reference. Vercel distributes Geist as open source code: React components and tokens (geist-ui, 4,556 stars, MIT; geist-font, 3,571 stars, OFL-1.1) (vercel.com/geist). Geist is the closest thing to an installable executable today.
Mariusz Ciesla states the consequence in The last product design tool (3 August 2026):
"Once you have a design system established in code, the interface already inherits a set of visual rules. That creates a world where an AI code tool can read a sketch and build a correct interface from those rules." (writing.mariusz.cc)
He wireframes in tldraw instead of Figma because the design system lives in code.
Figma Variables and the REST API: the design file as a data source
Figma is not standing still. The REST API documents a Variables category (figma.com/developers/api): files, styles and variables are readable by code, the Figma file becomes a data source, and DS Bridge is built on top of it.
The executable as a white-label package
The executable is an identity package you install on an app. Tokens, DESIGN.md, components, shipped as one unit and plugged into an existing product. Identity becomes a swappable artifact: replace the brand, its colors, its typography and its tone, without touching the product. Like a theme, but at the level of a full identity.
"You have an executable, you install it on your app, and everything is white-label, swappable at the design level."
The building blocks exist: Geist ships as npm code, DESIGN.md is consumed by Stitch and by agents, tokens export through Style Dictionary. What is missing is the install and exchange layer, the "npm install for a brand". Nobody has shipped it yet. That is where the opportunity sits.
Identity moves from reference document to product dependency. For a design ops freelance, the consequence is direct: identity becomes a product deliverable, an installable identity contract, instead of a documentation deliverable. Reusable, versionable, reversible. That is the argument for SMEs and multi-product startups: a brand that plugs in and unplugs without a redesign.
My 177-line DESIGN.md is the embryo of that package. Today I install it on my own agents. Tomorrow, the same contract could install on any app.
My setup: one DESIGN.md file, and the agents that read it
One file. YAML front matter with the tokens: colors, typography, spacing, radii, tones. Markdown prose explaining why they exist. The agents in my stack, the ones producing for studioflo.fr, read it before generating anything.
Before, agents received style as a prompt, with uneven results. Now the contract is shared, and the output lands in the site's visual language.
The limits are as real as the gains.
A DESIGN.md is a style contract, not a runtime. The executable metaphor has a ceiling: nothing executes, everything is read. Output quality depends on contract quality.
Prose matters as much as tokens. A system with tokens but no rationale produces incoherent UI at scale. The designer's job moves from the pixel to the quality of the contract: tokens plus rationale. I started on this in Auditing a Design System for MCP.
Interoperability is not proven. Figma, Style Dictionary, Stitch and agents may not share one format in practice, and the spec is explicitly a non-standard.
What it means for an SME
For a small company, the consequence is practical: an identity maintained without a full design team. The agent produces in the brand's language, consistently, at a cost an SME can absorb.
The market signal is there. SAPIOM raised 35 million dollars with the ambition of becoming the management controller of AI agents (FrenchWeb). The agent governance layer is becoming a market, and identity governance, the design system as a contract, is one of its layers.
That is the offer I am building for SMEs: digitalize and boost online sales with UX/UI and design ops. An installable identity contract is a deliverable an SME can understand, buy and maintain. A Figma file in a drive is not.
What I learned / Where I am
What works: the chain from tokens to DESIGN.md to agents exists and is verifiable: the spec, the build tools, the consumers, all real.
What remains to be proven:
- Adoption: 107k stars is an ecosystem signal, not a production metric.
- Interoperability: Figma, Style Dictionary, Stitch and agents may not share one format in practice. The spec is a Community Group Report, not a W3C standard.
- The word "executable": a vision. Today's reality is agent-readable, and the install layer, the npm install for a brand, does not exist yet.
If the UI is generated by agents from a DESIGN.md, the design system becomes the only quality control artifact. A badly written system means incoherent UI at scale. The designer moves from pixels to the contract. That is the direction I am building in, the one I described in DS Bridge and Auditing a Design System for MCP.
Key points
- The design system moves from document to contract: normalized tokens plus DESIGN.md, read by the agents that ship the UI.
- The next step is the install layer: identity as an installable, swappable, white-label package. That is where the design ops opportunity sits.
- The designer becomes the keeper of the contract. The quality of tokens and rationale determines the quality of everything agents produce.
---
Sources & references
1. W3C Design Tokens Community Group, Design Tokens Format Module 2025.10 (draft, 30 July 2026). designtokens.org
2. Style Dictionary. github.com/style-dictionary/style-dictionary
3. Tokens Studio. tokens.studio - figma plugin
4. token-transformer (npm). registry.npmjs.org/token-transformer
5. Mariusz Ciesla, The last product design tool (3 August 2026). writing.mariusz.cc
6. Vercel Geist. vercel.com/geist - geist-ui - geist-font
7. Linear. linear.app/design
8. Figma REST API, Variables. figma.com/developers/api
9. Google Labs, DESIGN.md. github.com/google-labs-code/design.md - specification
10. VoltAgent, awesome-design-md. github.com/VoltAgent/awesome-design-md
11. bergside, design-md-chrome and awesome-design-skills. github.com/bergside/design-md-chrome - github.com/bergside/awesome-design-skills
12. Anthropic, Auto mode default in Claude Code. claude.com
13. Microsoft Design, The naked designer. microsoft.design
14. NN/g, The PROVE framework. nngroup.com
15. FrenchWeb, SAPIOM raises 35 million dollars. frenchweb.fr