Design-Systeme werden bald ausführbar

Das Design-System war ein Dokument. Jetzt ist es eine Runtime.

In vier Monaten hat eine Formatspezifikation zur Beschreibung einer visuellen Identität für Coding-Agents 27.148 Sterne auf GitHub erreicht. Tools, die UI generieren, lesen inzwischen ein Design-System, bevor sie einen einzigen Pixel zeichnen. Das Design-System verlässt die Dokument-Ära.

Eine Präzisierung zum Titel: ausführbar ist eine Vision, keine Runtime. DESIGN.md macht ein Design-System für Agents lesbar; nichts wird im technischen Sinne ausgeführt. Wichtiger ist, was sich geändert hat: die Constraint, die den AI-Output begrenzt, ist jetzt Code. Versionierbar, testbar, installierbar.

Ich erlebe das täglich. Mein Design-System ist eine DESIGN.md-Datei mit 177 Zeilen, gelesen von den Agents meines Stacks, bevor sie irgendetwas produzieren. Ich habe DS Bridge gebaut, um ein Figma-Design-System über MCP lesbar zu machen; dieser Artikel ist die Datei-Version derselben Idee.

Tokens als Code: der Weg zu einem portablen Format

Der erste Schritt war, die Werte aus Figma in ein portables Format zu extrahieren. Dieser Teil ist ausgereift.

Die W3C-Community-Spec (Design Tokens Format Module 2025.10)

Am 30. Juli 2026 veröffentlichte die W3C Design Tokens Community Group ihren Format-Modul-Draft: Design Tokens Format Module 2025.10 (designtokens.org), herausgegeben von Louis Chenais, Kathleen McMahon, Drew Powers, Matthew Ström-Awn und Donna Vitan. Der Status ist eindeutig: „kein W3C-Standard und nicht auf dem W3C Standards Track" (designtokens.org). Es ist ein Austauschstandard zwischen Tools, keine offizielle Norm.

Aliase ($ref), zusammengesetzte Tokens, Gruppen, Vererbung, Schutz vor Zirkelbezügen: die Grammatik, mit der Figma, Style Dictionary und Agents dieselbe Sprache teilen.

Style Dictionary: einmal stylen, überall nutzen

Style Dictionary ist das etablierteste Token-Build-Tool: 4.766 Sterne, Apache-2.0, entstanden 2016. Das README verspricht „Style once, use everywhere" und exportiert Tokens nach iOS, Android, CSS, JS, HTML, Sketch-Dateien und Style-Dokumentation (github.com/style-dictionary).

Tokens Studio: die Figma-Brücke

Tokens Studio ist das dominierende Figma-Token-Tool (1.602 Sterne, MIT): „Design systems, fully automated" (tokens.studio). Es exportiert über token-transformer nach Style Dictionary (npm).

Die Token-Ebene ist gelöst. Die Werte sind bereits Code. Was fehlte, ist der Vertrag darüber.

DESIGN.md: das Design-System als Agent-Vertrag

DESIGN.md von Google Labs ist „eine Formatspezifikation zur Beschreibung einer visuellen Identität für Coding-Agents" und gibt ihnen „ein persistentes, strukturiertes Verständnis eines Design-Systems" (github.com/google-labs-code/design.md). Erstellt am 10. April 2026: 27.148 Sterne, 2.262 Forks, Apache-2.0.

„Eine DESIGN.md-Datei kombiniert maschinenlesbare Design-Tokens (YAML-Front-Matter) mit der für Menschen lesbaren Design-Begründung (Markdown-Prosa). Die Tokens geben Agents exakte Werte. Die Prosa erklärt, warum diese Werte existieren und wie sie anzuwenden sind." (design.md README)

Prompts haben das nie geliefert. Ein Agent, der eine DESIGN.md liest, entdeckt die Marke nicht in jeder Session neu: die Werte sind exakt, die Begründung überlebt das Gespräch.

Adoption in vier Monaten: 27k Sterne, 107k im Ökosystem

awesome-design-md, die Ökosystem-Liste, steht bei 107.821 Sternen: „Drop one into your project and let coding agents generate a matching UI" (github.com/VoltAgent/awesome-design-md). Eine Chrome-Erweiterung extrahiert die Styles einer Website in eine DESIGN.md (2.636 Sterne). Eine Liste mit 67 DESIGN.md- und SKILL.md-Design-Dateien für agentische Tools wie Claude Design, Google Stitch, Codex und Cursor folgt (2.290 Sterne) (github.com/bergside).

Eine Nuance: 107k Sterne sind ein Ökosystem-Signal, kein Beleg für Produktions-Adoption. Das Tempo aber ist real.

Das Timing ist kein Zufall. Claude Code liefert den Auto-Modus standardmäßig (claude.com), Microsoft Design beschreibt den „naked designer" (microsoft.design), NN/g hat das PROVE-Framework formalisiert (nngroup.com). Wenn Agents standardmäßig ausführen, ist das Design-System, das man ihnen gibt, der Kontext, der die Qualität des Outputs bestimmt.

Was sich ändert, wenn das System ausführt

Design-in-Code: Linear, Vercel Geist, die Sketch-to-UI-Schleife

Die Referenzfälle liefern ihr Design-System als Code, nicht als Figma-Dateien. Linear veröffentlicht sein Design als Referenz. Vercel verteilt Geist als Open-Source-Code: React-Komponenten und Tokens (geist-ui, 4.556 Sterne, MIT; geist-font, 3.571 Sterne, OFL-1.1) (vercel.com/geist). Geist kommt einem installierbaren Executable heute am nächsten.

Mariusz Cieśla formuliert die Konsequenz in The last product design tool (3. August 2026):

„Sobald ein Design-System in Code etabliert ist, erbt das Interface bereits ein Set visueller Regeln. Das schafft eine Welt, in der ein AI-Code-Tool einen Sketch lesen und daraus ein korrektes Interface bauen kann." (writing.mariusz.cc)

Er wireframed in tldraw statt in Figma, weil das Design-System im Code lebt.

Figma Variables und die REST-API: die Design-Datei als Datenquelle

Figma steht nicht still. Die REST-API dokumentiert eine Variables-Kategorie (figma.com/developers/api): Dateien, Styles und Variablen sind per Code lesbar, die Figma-Datei wird zur Datenquelle, und DS Bridge ist darauf gebaut.

Das Executable als White-Label-Paket

Das Executable ist ein Identitätspaket, das man auf einer App installiert. Tokens, DESIGN.md, Komponenten, als eine Einheit ausgeliefert und an ein bestehendes Produkt angeschlossen. Die Identität wird zum austauschbaren Artefakt: Marke, Farben, Typografie und Tonalität ersetzen, ohne das Produkt anzufassen. Wie ein Theme, aber auf Ebene der kompletten Identität.

„Du hast ein Executable, du installierst es auf deiner App, und alles ist White-Label, austauschbar auf Design-Ebene."

Die Bausteine existieren: Geist wird als npm-Code ausgeliefert, DESIGN.md wird von Stitch und von Agents konsumiert, Tokens exportieren über Style Dictionary. Was fehlt, ist die Installations- und Austauschebene, das „npm install der Marke". Niemand hat sie bisher geliefert. Genau dort liegt die Chance.

Identität wandert vom Referenzdokument zur Produkt-Abhängigkeit. Für eine Design-Ops-Freelance-Praxis ist die Konsequenz direkt: Identität wird zum Produkt-Deliverable, zu einem installierbaren Identitätsvertrag statt zu einem Dokumentations-Deliverable. Wiederverwendbar, versionierbar, reversibel. Das ist das Argument für KMU und Multi-Produkt-Startups: eine Marke, die sich ohne Redesign an- und abstecken lässt.

Meine DESIGN.md mit 177 Zeilen ist der Embryo dieses Pakets. Heute installiere ich sie auf meinen eigenen Agents. Morgen könnte derselbe Vertrag auf jeder App installiert werden.

Mein Setup: eine DESIGN.md-Datei, und die Agents, die sie lesen

Eine Datei. YAML-Front-Matter mit den Tokens: Farben, Typografie, Abstände, Radien, Tonalitäten. Markdown-Prosa, die erklärt, warum sie existieren. Die Agents meines Stacks, die für studioflo.fr produzieren, lesen sie, bevor sie irgendetwas generieren.

Früher bekamen die Agents den Stil als Prompt, mit ungleichmäßigen Ergebnissen. Jetzt ist der Vertrag geteilt, und der Output landet in der visuellen Sprache der Website.

Die Grenzen sind so real wie die Gewinne.

Eine DESIGN.md ist ein Stilvertrag, keine Runtime. Die Executable-Metapher hat eine Decke: nichts wird ausgeführt, alles wird gelesen. Die Qualität des Outputs hängt von der Qualität des Vertrags ab.

Die Prosa zählt so viel wie die Tokens. Ein System mit Tokens, aber ohne Begründung, produziert im Maßstab inkohärente UI. Die Arbeit der Designerin verschiebt sich vom Pixel zur Qualität des Vertrags: Tokens plus Begründung. Damit habe ich in Auditing a Design System for MCP angefangen.

Interoperabilität ist nicht bewiesen. Figma, Style Dictionary, Stitch und die Agents teilen in der Praxis womöglich kein gemeinsames Format, und die Spec ist ausdrücklich keine Norm.

Was das für ein KMU bedeutet

Für ein kleines Unternehmen ist die Konsequenz praktisch: eine gepflegte Identität ohne vollständiges Designteam. Der Agent produziert in der Sprache der Marke, konsistent, zu Kosten, die ein KMU tragen kann.

Das Marktsignal ist da. SAPIOM hat 35 Millionen Dollar eingesammelt, mit dem Anspruch, der Controller der AI-Agents zu werden (FrenchWeb). Die Governance-Ebene für Agents wird zum Markt, und Identitäts-Governance, das Design-System als Vertrag, ist eine ihrer Schichten.

Das ist das Angebot, das ich für KMU baue: digitalisieren und Online-Verkäufe steigern mit UX/UI und Design Ops. Ein installierbarer Identitätsvertrag ist ein Deliverable, das ein KMU verstehen, kaufen und pflegen kann. Eine Figma-Datei in einem Drive nicht.

Was ich gelernt habe / Wo ich stehe

Was funktioniert: die Kette von den Tokens über DESIGN.md zu den Agents existiert und ist überprüfbar: die Spec, die Build-Tools, die Konsumenten, alles real.

Was noch zu beweisen ist:

• Adoption: 107k Sterne sind ein Ökosystem-Signal, keine Produktionsmetrik.

• Interoperabilität: Figma, Style Dictionary, Stitch und die Agents teilen in der Praxis womöglich kein gemeinsames Format. Die Spec ist ein Community Group Report, kein W3C-Standard.

• Das Wort „ausführbar": eine Vision. Die heutige Realität heißt agentenlesbar, und die Installationsebene, das npm install der Marke, existiert noch nicht.

Wenn die UI von Agents aus einer DESIGN.md generiert wird, wird das Design-System zum einzigen Qualitätskontroll-Artefakt. Ein schlecht geschriebenes System bedeutet inkohärente UI im Maßstab. Die Designerin wechselt vom Pixel zum Vertrag. Das ist die Richtung, in die ich baue, beschrieben in DS Bridge und Auditing a Design System for MCP.

Kernpunkte

• Das Design-System wandert vom Dokument zum Vertrag: normalisierte Tokens plus DESIGN.md, gelesen von den Agents, die die UI liefern.

• Der nächste Schritt ist die Installationsebene: Identität als installierbares, austauschbares White-Label-Paket. Dort liegt die Design-Ops-Chance.

• Die Designerin wird zur Hüterin des Vertrags. Die Qualität von Tokens und Begründung bestimmt die Qualität von allem, was die Agents produzieren.

---

Quellen & Referenzen

1. W3C Design Tokens Community Group, Design Tokens Format Module 2025.10 (Draft, 30. Juli 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 Cieśla, 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 und 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