Les design systems sont sur le point de devenir exécutables
Le design system était un document. Maintenant c'est un runtime.
En quatre mois, une spécification de format pour décrire une identité visuelle à des agents de code a atteint 27 148 étoiles sur GitHub. Les outils qui génèrent de l'UI lisent désormais un design system avant de dessiner le moindre pixel. Le design system sort de l'ère du document.
Une précision sur le titre : exécutable est une vision, pas un runtime. DESIGN.md rend un design system lisible par les agents ; rien ne s'exécute au sens technique. Ce qui a changé est plus important : la contrainte qui limite la sortie de l'IA est maintenant du code. Versionnable, testable, installable.
Je le vis tous les jours. Mon design system est un fichier DESIGN.md de 177 lignes, lu par les agents de mon stack avant qu'ils ne produisent quoi que ce soit. J'ai construit DS Bridge pour rendre un design system Figma lisible via MCP ; cet article est la version fichier de cette idée.
Les tokens comme code : la route vers un format portable
La première étape était d'extraire les valeurs de Figma vers un format portable. Cette partie est mature.
La spec communautaire W3C (Design Tokens Format Module 2025.10)
Le 30 juillet 2026, le W3C Design Tokens Community Group a publié son draft de module de format : Design Tokens Format Module 2025.10 (designtokens.org), édité par Louis Chenais, Kathleen McMahon, Drew Powers, Matthew Ström-Awn et Donna Vitan. Le statut est explicite : « pas une norme W3C ni sur le W3C Standards Track » (designtokens.org). C'est un standard d'échange entre outils, pas une norme officielle.
Alias ($ref), tokens composites, groupes, héritage, prévention des références circulaires : la grammaire qui permet à Figma, Style Dictionary et aux agents de partager un même langage.
Style Dictionary : styliser une fois, utiliser partout
Style Dictionary est l'outil de build de tokens le plus établi : 4 766 étoiles, Apache-2.0, créé en 2016. Son README promet « Style once, use everywhere » et exporte les tokens vers iOS, Android, CSS, JS, HTML, les fichiers sketch et la documentation de style (github.com/style-dictionary).
Tokens Studio : le pont Figma
Tokens Studio est l'outil de tokens Figma dominant (1 602 étoiles, MIT) : « Design systems, fully automated » (tokens.studio). Il exporte vers Style Dictionary via token-transformer (npm).
La couche tokens est résolue. Les valeurs sont déjà du code. Ce qui manquait, c'est le contrat par-dessus.
DESIGN.md : le design system comme contrat d'agent
DESIGN.md, de Google Labs, est « une spécification de format pour décrire une identité visuelle à des agents de code », leur donnant « une compréhension persistante et structurée d'un design system » (github.com/google-labs-code/design.md). Créé le 10 avril 2026 : 27 148 étoiles, 2 262 forks, Apache-2.0.
« Un fichier DESIGN.md combine des design tokens lisibles par machine (front matter YAML) avec la raison d'être du design, lisible par les humains (prose markdown). Les tokens donnent aux agents des valeurs exactes. La prose leur explique pourquoi ces valeurs existent et comment les appliquer. » (design.md README)
Les prompts n'ont jamais fourni ça. Un agent qui lit un DESIGN.md ne redécouvre pas la marque à chaque session : les valeurs sont exactes, la raison d'être survit à la conversation.
Adoption en quatre mois : 27k étoiles, 107k d'écosystème
awesome-design-md, la liste de l'écosystème, est à 107 821 étoiles : « Drop one into your project and let coding agents generate a matching UI » (github.com/VoltAgent/awesome-design-md). Une extension Chrome extrait les styles d'un site dans un DESIGN.md (2 636 étoiles). Une liste de 67 fichiers design DESIGN.md et SKILL.md pour les outils agentiques comme Claude Design, Google Stitch, Codex et Cursor suit (2 290 étoiles) (github.com/bergside).
Une nuance : 107k étoiles est un signal d'écosystème, pas une preuve d'adoption en production. La vitesse, elle, est réelle.
Le timing n'est pas un hasard. Claude Code livre l'auto mode par défaut (claude.com), Microsoft Design décrit le « naked designer » (microsoft.design), NN/g a formalisé le framework PROVE (nngroup.com). Si les agents exécutent par défaut, le design system qui leur est fourni est le contexte qui détermine la qualité de la sortie.
Ce qui change quand le système exécute
Design-in-code : Linear, Vercel Geist, la boucle sketch-to-UI
Les cas de référence livrent leur design system comme du code, pas comme des fichiers Figma. Linear publie son design comme référence. Vercel distribue Geist en code open source : composants React et tokens (geist-ui, 4 556 étoiles, MIT ; geist-font, 3 571 étoiles, OFL-1.1) (vercel.com/geist). Geist est ce qui se rapproche le plus d'un exécutable installable aujourd'hui.
Mariusz Cieśla énonce la conséquence dans The last product design tool (3 août 2026) :
« Une fois que vous avez un design system établi en code, l'interface hérite déjà d'un ensemble de règles visuelles. Cela crée un monde où un outil de code IA peut lire un sketch et construire une interface correcte à partir de ces règles. » (writing.mariusz.cc)
Il wireframe dans tldraw au lieu de Figma parce que le design system vit dans le code.
Figma Variables et l'API REST : le fichier design comme source de données
Figma n'est pas en reste. L'API REST documente une catégorie Variables (figma.com/developers/api) : fichiers, styles et variables sont lisibles par le code, le fichier Figma devient une source de données, et DS Bridge est construit là-dessus.
L'exécutable comme package white-label
L'exécutable est un package d'identité que vous installez sur une app. Tokens, DESIGN.md, composants, livrés comme une unité et branchés sur un produit existant. L'identité devient un artefact interchangeable : remplacez la marque, ses couleurs, sa typographie et son ton, sans toucher au produit. Comme un thème, mais au niveau de l'identité complète.
« Vous avez un exécutable, vous l'installez sur votre app, et tout est white-label, interchangeable au niveau du design. »
Les briques existent : Geist est livré en code npm, DESIGN.md est consommé par Stitch et par les agents, les tokens s'exportent via Style Dictionary. Ce qui manque, c'est la couche d'installation et d'échange, le « npm install de la marque ». Personne ne l'a encore livrée. C'est là que se trouve l'opportunité.
L'identité passe du document de référence à la dépendance du produit. Pour un freelance design ops, la conséquence est directe : l'identité devient un livrable produit, un contrat d'identité installable, au lieu d'un livrable documentaire. Réutilisable, versionnable, réversible. C'est l'argument pour les PME et les startups multi-produits : une marque qui se branche et se débranche sans redesign.
Mon DESIGN.md de 177 lignes est l'embryon de ce package. Aujourd'hui je l'installe sur mes propres agents. Demain, le même contrat pourrait s'installer sur n'importe quelle app.
Mon setup : un fichier DESIGN.md, et les agents qui le lisent
Un fichier. Du front matter YAML avec les tokens : couleurs, typo, espacements, rayons, tons. De la prose markdown expliquant pourquoi ils existent. Les agents de mon stack, ceux qui produisent pour studioflo.fr, le lisent avant de générer quoi que ce soit.
Avant, les agents recevaient le style comme un prompt, avec des résultats inégaux. Maintenant le contrat est partagé, et la sortie tombe dans le langage visuel du site.
Les limites sont aussi réelles que les gains.
Un DESIGN.md est un contrat de style, pas un runtime. La métaphore de l'exécutable a un plafond : rien ne s'exécute, tout se lit. La qualité de la sortie dépend de la qualité du contrat.
La prose compte autant que les tokens. Un système avec des tokens mais sans raison d'être produit une UI incohérente à l'échelle. Le travail du designer passe du pixel à la qualité du contrat : tokens plus raison d'être. J'ai commencé là-dessus dans Auditing a Design System for MCP.
L'interopérabilité n'est pas prouvée. Figma, Style Dictionary, Stitch et les agents peuvent ne pas partager un même format en pratique, et la spec est explicitement une non-norme.
Ce que ça signifie pour une PME
Pour une petite entreprise, la conséquence est pratique : une identité maintenue sans équipe design complète. L'agent produit dans le langage de la marque, de façon cohérente, à un coût qu'une PME peut assumer.
Le signal marché est là. SAPIOM a levé 35 millions de dollars avec l'ambition de devenir le contrôleur de gestion des agents IA (FrenchWeb). La couche de gouvernance des agents devient un marché, et la gouvernance de l'identité, le design system comme contrat, en est une de ses couches.
C'est l'offre que je construis pour les PME : digitaliser et booster les ventes en ligne avec de l'UX/UI et du design ops. Un contrat d'identité installable est un livrable qu'une PME peut comprendre, acheter et maintenir. Un fichier Figma dans un drive, non.
Ce que j'ai appris / Où j'en suis
Ce qui fonctionne : la chaîne des tokens au DESIGN.md aux agents existe et est vérifiable : la spec, les outils de build, les consommateurs, tout est réel.
Ce qui reste à prouver :
- Adoption : 107k étoiles est un signal d'écosystème, pas une métrique de production.
- Interopérabilité : Figma, Style Dictionary, Stitch et les agents peuvent ne pas partager un même format en pratique. La spec est un Community Group Report, pas une norme W3C.
- Le mot « exécutable » : une vision. La réalité d'aujourd'hui, c'est lisible par les agents, et la couche d'installation, le npm install de la marque, n'existe pas encore.
Si l'UI est générée par les agents depuis un DESIGN.md, le design system devient le seul artefact de contrôle qualité. Un système mal écrit signifie une UI incohérente à l'échelle. Le designer passe des pixels au contrat. C'est la direction dans laquelle je construis, celle que j'ai décrite dans DS Bridge et Auditing a Design System for MCP.
Points clés
- Le design system passe du document au contrat : tokens normalisés plus DESIGN.md, lus par les agents qui livrent l'UI.
- La prochaine étape est la couche d'installation : l'identité comme package installable, interchangeable, white-label. C'est là que se trouve l'opportunité design ops.
- Le designer devient le gardien du contrat. La qualité des tokens et de la raison d'être détermine la qualité de tout ce que les agents produisent.
---
Sources & références
1. W3C Design Tokens Community Group, Design Tokens Format Module 2025.10 (draft, 30 juillet 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 août 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 et 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