DESIGN.md : Comment un Simple Fichier Markdown a Résolu le Plus Gros Problème du Vibe Coding

Le 31 mars 2026, un repository apparemment banal a fait surface sur GitHub : VoltAgent/awesome-design-md. Dix jours plus tard, il affichait 40 700 stars et 5 100 forks. Pour mettre ce chiffre en perspective, les listes "awesome" les plus emblématiques de GitHub, comme awesome-react ou awesome-go, avaient mis un mois entier pour atteindre 3 200 stars lors de leur lancement en 2014. Même en tenant compte de la croissance massive de la base utilisateurs de GitHub (de 10 millions en 2014 a plus de 150 millions en 2026), la vélocité d'awesome-design-md reste sans précédent.

Le ratio fork/star de 12,6 % raconte une histoire encore plus intéressante. Sur un projet GitHub moyen, ce ratio oscille entre 5 et 8 %. Quand il dépasse les 10 %, cela signifie que les développeurs ne se contentent pas de mettre une étoile par curiosité : ils forkent le projet, le copient dans leurs propres repositories et l'intègrent activement dans leurs workflows de production. En comparaison, awesome-go affiche un ratio de 7,8 % et awesome-python de 9,5 %.

Ce qui se joue derrière ces chiffres, c'est un changement profond dans la manière dont les équipes construisent des interfaces avec l'aide de l'IA. Jusqu'ici, demander à un agent IA de générer une interface utilisateur revenait à jouer à la loterie visuelle : couleurs arbitraires, typographies incohérentes, composants qui ne respectent aucune charte graphique. DESIGN.md résout ce problème en offrant aux agents un cahier des charges design lisible, standardisé et exploitable immédiatement.

DESIGN.md est un fichier markdown standardisé qui sert de spécification de design pour les agents IA. Concrètement, vous placez ce fichier à la racine de votre projet, aux côtés de votre code source. Lorsque vous demandez à un agent IA (Claude Code, Cursor, GitHub Copilot ou tout autre outil) de construire une interface utilisateur, l'agent lit ce fichier comme un document de contraintes. Il fonctionne comme un brief de design détaillé, un guide de style et une spécification de composants réunis dans un seul fichier en texte brut.

L'élégance de DESIGN.md repose sur sa simplicité. Ce n'est pas un format binaire. Ce n'est pas un outil propriétaire. C'est du markdown pur, ce qui signifie qu'il est versionnable avec Git, lisible par un humain et modifiable dans n'importe quel éditeur de texte. Cette universalité est délibérée : le markdown est le format que les LLM lisent le mieux, sans nécessiter de parser ni de schéma de validation.

Pour l'installer, une seule commande suffit :

bash

npx getdesign@latest add stripe

Cette commande crée un package complet dans votre projet : le fichier DESIGN.md lui-même, un fichier preview.html pour visualiser le design en mode clair, et un fichier preview-dark.html pour le mode sombre. Vous n'avez plus besoin d'exports Figma, de schémas JSON ou d'outils spécialisés. Vous avez un fichier texte que n'importe quel agent IA peut lire nativement.

Le site getdesign.md permet également de parcourir et prévisualiser l'ensemble des design systems disponibles avant de les installer.

Pour comprendre pourquoi DESIGN.md est structuré de cette manière, il faut remonter à Google Stitch. Le 18 mars 2026, Google Labs a lancé une refonte complète de Stitch, son outil de design IA. Contrairement aux tentatives précédentes de design assisté par IA, Stitch n'a pas été conçu pour remplacer les designers ni pour concurrencer Figma. Son objectif est différent : comprendre et exécuter des spécifications de design fournies dans un format standardisé.

Ce format, c'est DESIGN.md.

Quand vous utilisez le modèle Gemini au sein de Stitch pour générer des maquettes UI ou affiner des itérations de design, le modèle opère dans les limites définies par votre DESIGN.md. L'IA ne génère pas de choix de design aléatoires. Elle ne se contredit pas d'un écran à l'autre. Elle maintient une cohérence visuelle et comportementale parce que la spécification lui dit exactement ce que la cohérence signifie pour votre produit.

Les implications dépassent largement les outils Google. Une fois le format publié, les développeurs ont réalisé qu'ils pouvaient utiliser le même fichier DESIGN.md avec d'autres agents IA. Une spécification écrite pour Stitch pouvait désormais servir à Claude Code, Cursor ou n'importe quel script alimenté par un LLM. Cette interopérabilité explique pourquoi l'adoption de DESIGN.md a explosé aussi rapidement : le format n'était pas verrouillé à un seul éditeur.

VoltAgent, l'organisation open source fondée par Omer et Necati Ozmen (également connus pour leur framework TypeScript d'orchestration d'agents IA sur voltagent.dev), a saisi cette opportunité. En extrayant les spécifications de design de 62 sites web réels utilisés par des millions de personnes au quotidien, ils ont crée une bibliothèque de design systems éprouvés et testés. Le choix de la licence MIT garantit que n'importe quelle équipe peut utiliser, forker et distribuer ces fichiers sans contrainte.

Chaque fichier DESIGN.md suit une structure standardisée composée de neuf sections. Cette cohérence est ce qui rend le format lisible par les machines tout en restant suffisamment flexible pour s'adapter à des philosophies de design différentes.

La section Visual Theme and Atmosphere établit l'intention émotionnelle et visuelle du produit. L'interface doit-elle paraître corporate et digne de confiance ? Moderne et ludique ? Minimaliste et utilitaire ? Pour un agent IA, cette section devient un point de référence lorsqu'il doit trancher entre plusieurs choix de design valides.

Color Palette and Roles spécifie quelles couleurs sont utilisées, où elles apparaissent et quelle signification sémantique elles portent. Au lieu d'une directive vague comme "utilisez du bleu pour les actions principales", cette section définit des valeurs précises : le fond du bouton primaire est #0066FF, l'état hover est #0052CC, l'état désactivé est #CCCCCC. Ces définitions éliminent toute ambiguïté.

Typography Rules définit les familles de polices, les tailles, les hauteurs de ligne, les espacements et les graisses pour chaque élément textuel. Pour les agents IA, ces règles évitent les désastres de mise en page qui surviennent quand la typographie est laissée au hasard.

Component Stylings documente comment chaque composant UI apparaît et se comporte : boutons, champs de saisie, modales, cartes, éléments de navigation. La spécification inclut les états par défaut et les états interactifs (hover, actif, focus, désactivé).

Layout Principles définit le système de grille, l'échelle d'espacement et les largeurs de conteneurs. Cette section établit le squelette sur lequel tous les éléments visuels reposent.

Depth and Elevation couvre la manière dont le design communique la profondeur et la superposition : spécifications d'ombres, z-index et relation spatiale entre les éléments.

Do's and Don'ts fournit des garde-fous explicites. "Ne pas utiliser plus de trois couleurs dans une seule carte." "Assurer un minimum de 44px pour les zones tactiles sur mobile." Ces contraintes sont particulièrement précieuses pour les agents IA, qui fonctionnent avec le plus de confiance dans des limites explicites.

Responsive Behavior spécifie comment le design s'adapte selon les tailles d'écran : points de rupture, empilement des composants sur mobile, éléments masqués ou affichés selon la largeur du viewport.

Agent Prompt Guide est une méta-section qui instruit directement l'agent IA. Elle peut indiquer : "Lors de la construction de formulaires, toujours inclure un feedback de validation" ou "Les composants carte ont une largeur maximale de 400px." Cette section traite l'IA comme un membre de l'équipe avec des instructions explicites.

Le workflow pratique avec DESIGN.md varie selon l'outil IA utilise, mais le schéma de base reste identique : copiez le DESIGN.md dans votre projet, référencez-le lorsque vous demandez à l'IA de construire une interface, et laissez l'agent utiliser la spécification comme boussole.

Avec Claude Code, l'outil CLI officiel d'Anthropic, l'intégration est particulièrement fluide. Claude Code lit automatiquement les fichiers du projet, y compris DESIGN.md. Quand vous lui demandez de "construire une page de login qui respecte le design system", il incorpore automatiquement les contraintes du DESIGN.md dans son raisonnement. Aucun prompting supplémentaire n'est nécessaire.

Avec Cursor, vous pouvez référencer le fichier explicitement dans vos prompts : "Construis un dashboard en utilisant le DESIGN.md de ce projet." Cursor lit le fichier et l'utilise comme contexte pour la génération de code.

Pour les workflows personnalisés ou les équipes qui construisent leurs propres agents IA, l'approche consiste a inclure le DESIGN.md dans le system prompt ou la fenetre de contexte. Avant de demander à l'agent de générer une interface, vous lui fournissez la spécification et lui demandez de traiter ces spécifications comme des contraintes obligatoires.

Voici à quoi ressemble un workflow concret en ligne de commande :

bash

# Installer le DESIGN.md inspire de Stripe
npx getdesign@latest add stripe

# L'outil crée :
# design-md/DESIGN.md          (spécification design de Stripe)
# design-md/preview.html       (apercu mode clair)
# design-md/preview-dark.html  (apercu mode sombre)

# Avec Claude Code, demander la génération :
# "Construis un dashboard utilisateur en respectant le DESIGN.md"

L'effet pratique est considerable. Les équipes rapportent que les interfaces générées par IA sans contraintes de design nécessitent un travail de retouche important. Celles générées avec les contraintes du DESIGN.md ne nécessitent que des ajustements mineurs. La spécification reduit le cycle d'itération de dizaines d'allers-retours a quelques refinements.

Le repository awesome-design-md ne fournit pas seulement le format de spécification. Il propose 62 fichiers DESIGN.md concrets, extraits de produits réels utilisés quotidiennement par des millions de personnes. Cette bibliothèque est l'arme secrété du projet et un avantage compétitif considerable pour les équipes qui cherchent à accélérer leur développement.

Il ne s'agit pas de design systems fictifs. Ce sont des spécifications reverse-engineerees a partir de sites web et applications en production. La collection couvre neuf categories :

Pour une équipe B2B qui construit un nouveau produit, une landing page ou un outil interne, cette bibliothèque est immédiatement exploitable. Vous avez besoin d'un dashboard SaaS qui inspire confiance et professionnalisme ? Commencez avec le DESIGN.md de Stripe. Vous construisez quelque chose de technique orienté développeurs ? Le design system de GitHub est extrait et disponible. Vous voulez une esthétique plus moderne et ludique ? Le design system de Figma fait partie de la collection.

La diversite de la collection merite d'etre soulignee. Les 62 systèmes representent des philosophies différentes, des industries différentes, des audiences différentes. Le design d'une fintech ne ressemble en rien a celui d'un constructeur automobile. La palette minimaliste a fort contraste de Stripe diffère significativement de l'approche plus douce et coloree de Slack. En proposant cette diversite, le repository démontre que DESIGN.md est suffisamment flexible pour capturer des langages visuels varies.

Chaque entree du repository inclut non seulement le fichier DESIGN.md mais aussi des prévisualisations en mode clair et sombre qui permettent de voir à quoi ressemble le design system en pratique avant de l'adopter.

L'émergence de DESIGN.md coincide avec un écosystème de fichiers .md similaires, chacun servant un objectif différent. Comprendre la distinction aide a clarifier pourquoi DESIGN.md est nécessaire plutôt que redondant.

AGENTS.md spécifie comment construire un logiciel. C'est un fichier qui contient les instructions de build, les spécifications de dépendances et les choix architecturaux. Un agent IA qui lit AGENTS.md comprend : "Utilise Node.js pour le backend, React pour le frontend, connecte via REST API." C'est le plan de construction.

CLAUDE.md est spécifique a Claude Code. Il configure le comportement de Claude Code pour un projet particulier : quels dossiers explorer, quels fichiers ignorer, s'il faut lancer les tests automatiquement. C'est un fichier de configuration qui dit a Claude Code comment operer dans un contexte de projet spécifique.

SKILL.md définit des capacites reutilisables. Dans l'écosystème VoltAgent, les fichiers SKILL.md décrivent des compétences d'agent qui peuvent etre composées ensemble. Une compétence peut etre "envoyer un email", "interroger une base de donnees" ou "générer une image".

DESIGN.md est différent de ces trois fichiers. Il ne concerne ni la construction, ni la configuration d'un agent, ni les capacites disponibles. Il concerne l'apparence et le comportement de l'interface utilisateur. Il répond à la question : "A quoi doit ressembler l'interface ?"

En pratique, un vrai projet peut inclure les quatre fichiers. AGENTS.md dit à l'IA comment structurer le code. CLAUDE.md dit a Claude Code comment interagir avec le projet. SKILL.md définit les composants reutilisables. DESIGN.md garantit que l'interface générée correspond a vos spécifications visuelles. Ces fichiers ne sont pas en conflit : ils opèrent à des niveaux d'abstraction différents et se complètent mutuellement.

Les projets derives construits autour de DESIGN.md temoignent d'une véritable maturité écosystémique. Ce n'est plus seulement le repository central : des extensions spécialisées et des intégrations émergent pour repondre à des cas d'usage spécifiques.

awesome-design-md-jp (263 stars) etend DESIGN.md pour la typographie CJK (chinois, japonais, coreen). Les règles typographiques pour ces langues différent significativement des design systems optimises pour l'alphabet latin. L'apparition rapide de cette extension japonaise, a peine quelques jours apres le lancement du repository principal, signale une adoption internationale organique.

stitch-mcp (95 stars) encapsule l'intégration Google Stitch sous forme de serveur MCP (Model Context Protocol). Cela permet a tout agent IA compatible MCP de se connecter directement aux outils Stitch via les fichiers DESIGN.md, rendant l'intégration automatique et transparente.

awesome-design-md-skills (53 stars) fournit des compétences d'agent IA specifiquement conçues pour travailler avec les fichiers DESIGN.md. Plutot que de construire une interface de zero, ces compétences permettent aux agents de référencer, itérer et affiner des spécifications de design existantes.

Figma-to-AI-prompter (27 stars) résout un problème de rétro-compatibilité : comment convertir des designs Figma existants au format DESIGN.md. De nombreuses entreprises ont des annees de travail de design dans Figma. Plutot que de recréer ces spécifications de zero, cet outil automatisé le processus d'extraction.

Le sentiment communautaire a été remarquablement positif. L'existence d'extensions typographiques japonaises signale une adoption internationale. Les serveurs MCP signalent un interet enterprise. Les bibliothèques de skills signalent que des équipes construisent des workflows de production autour de DESIGN.md. Les convertisseurs Figma signalent que des équipes migrent leurs design systems existants vers le nouveau format.

Pour les équipes B2B, DESIGN.md à une pertinence immediate et pratique qui touche les landing pages, les outils internes et les workflows de prospection.

Prenons le problème classique de la landing page pour le cold email. Une équipe B2B qui lance une campagne d'outreach a besoin d'une page d'atterrissage qui convertit. Cette page doit paraître professionnelle, se charger rapidement et communiquer une proposition de valeur spécifique. Traditionnellement, cela nécessitait soit d'embaucher un designer, soit de se battre avec un outil no-code. Avec DESIGN.md, une équipe peut utiliser Claude Code avec un design system éprouvé (par exemple l'approche minimaliste de Stripe) pour générer rapidement une landing page aux standards professionnels.

L'approche "vibe coding" qui a émergé dans la communaute des outils IA est particulièrement pertinente ici. Le vibe coding consiste a demander à une IA : "Construis-moi quelque chose qui ressemble au design de Stripe, mais pour notre produit." L'agent IA, avec acces au DESIGN.md de Stripe, comprend exactement ce que "comme Stripe" signifie. Ce n'est pas un jugement esthétique vague. C'est une spécification concrété que l'IA peut exécuter. Les résultats sont systematiquement meilleurs que ceux obtenus en demandant à une IA de construire une landing page "professionnelle" sans guide.

Les outils internes representent un autre cas d'usage fort. Les entreprises B2B construisent souvent des dashboards internes pour leurs équipes commerciales, operations ou customer success. Ces outils n'ont pas besoin d'un design avant-gardiste, mais ils ont besoin de cohérence et de professionnalisme. Un outil interne construit avec le DESIGN.md de Linear ou de GitHub paraîtra cohérent avec le reste de la presence web de l'entreprise.

Les gains de productivite sont quantifiables. Si une itération de design qui prenait habituellement deux heures à un designer peut désormais etre réalisée en 15 minutes avec l'assistance de l'IA et un DESIGN.md, les implications économiques pour les équipes B2B sont significatives. Multipliez cela par des dizaines de pages et de projets, et vous obtenez des semaines de temps économisé annuellement.

Il y a aussi l'angle compétitif. Un prospect qui voit un site de demo ou un pitch deck soigné et bien designe se forme une impression sur la qualite et l'attention aux détails de votre entreprise. DESIGN.md facilite le maintien de standards de design élevés sur tous les actifs orientés client, sans nécessiter une équipe de design complete.

L'adoption rapide de DESIGN.md n'est pas un phénomène isole. Elle s'inscrit dans un schéma plus large de la manière dont les outils IA remodèle les workflows de développement.

Pendant des annees, la discussion autour de l'IA et du développement logiciel s'est concentree sur la génération de code. L'IA peut-elle ecrire du JavaScript ? Du Python ? L'hypothese implicite etait que le code constituait le goulot d'étranglement. Mais en pratique, la plupart des développeurs rapportent que le véritable goulot d'étranglement est la spécification : comprendre quoi construire et pourquoi.

C'est la que DESIGN.md s'inscrit dans un schéma plus large. Les outils IA deviennent de plus en plus performants pour exécuter des spécifications, mais seulement si ces spécifications sont claires. DESIGN.md est un format de spécification. Il dit : "Voici à quoi ressemble une bonne spécification pour le design." Le format est explicite, mesurable et lisible par les machines.

L'ancien modèle etait "ecrivez de meilleurs prompts pour obtenir de meilleurs résultats." Le nouveau modèle est "ecrivez de meilleures spécifications pour obtenir des résultats cohérents." Cela déplace la responsabilite du prompt engineering (une compétence fragile et éphémère) vers l'ecriture de spécifications (une discipline plus structuree et scalable).

Plusieurs directions se dessinent pour les mois a venir. L'interopérabilité deviendra plus importante que l'intégration. La puissance originelle de DESIGN.md reside dans le fait qu'il fonctionne avec plusieurs outils IA simultanement. A mesure que de nouveaux assistants IA arrivent sur le marche, la capacite a deplacer une spécification entre outils (de Claude Code a Cursor, de Stitch à des agents personnalisés) deviendra un avantage compétitif.

Les formats de spécification vont proliferer. DESIGN.md pour le design UI, AGENTS.md pour l'architecture, SKILL.md pour les capacites. Il faut s'attendre a voir émergér de nouveaux formats pour d'autres aspects du développement : SECURITY.md pour la conformite, PERFORMANCE.md pour les objectifs de performance, TESTING.md pour les strategies de test.

La cohérence de design deviendra un différenciant compétitif. Les entreprises capables de générer rapidement des interfaces cohérentes avec leur identite de marque, sans cycles de revue de design interminables, avanceront plus vite que leurs concurrents.

La collaboration inter-équipes va également évoluer. Un designer qui ecrit un DESIGN.md documente ses decisions dans un format que les développeurs et les assistants IA peuvent comprendre et exécuter. Cela crée une boucle de feedback plus serrée. Plutot que de créer des maquettes statiques que les développeurs tentent d'interpréter, les designers pourront itérer directement sur la spécification qui pilote la génération de code.

Le markdown est en train de devenir silencieusement le protocole universel entre les humains, le design et les agents IA. DESIGN.md est la première instanciation reussie de ce principe pour le domaine du design. Ce ne sera pas la dernière. Les équipes qui investissent maintenant dans la comprehension et l'adoption de ces formats de spécification se trouveront avantageusement positionnees dans un futur ou le développement assisté par IA sera la norme plutôt qu'une technique émergente.