Design MD Google open source : le fichier qui rend l’IA cohérente

Le code fonctionne, mais l’interface utilisateur donne toujours une impression de médiocrité. Comparez cela à Stripe, Linear, Vercel, vraiment n’importe quelle grande plateforme. Alors, que font-ils différemment ?

Un simple fichier. Il s’appelle Design MD et Google vient de le publier en open source. Je vous présente comment injecter ce fichier dans votre code en seulement quelques étapes.

google-labs-code / design.md

Design MD est un fichier Markdown simple qui indique aux agents IA comment votre produit doit se présenter.

• Couleurs,
• polices,
• espacements,
• boutons,
• règles de mise en page,
• notes d’accessibilité, tout y est..

Au lieu de deviner votre marque, l’IA lit le fichier et le suit. Pas d’export Figma, pas de fouillis JSON, pas de prompt de dix paragraphes à répéter à chaque fois pour obtenir un résultat parfait.

Si vous aimez les outils et astuces de codage qui accélèrent votre flux de travail, nous publions du contenu régulièrement. Passons à la démonstration. Laissez-moi vous montrer pourquoi c’est vraiment important.

Je vais utiliser le même prompt ici : construire un tableau de bord moderne. D’abord, sans fichier Design MD. Il génère un tableau de bord IA classique. Techniquement, ça fonctionne. Mais il a l’énergie par défaut de Tailwind, ça lui ressemble. Des boutons aléatoires, des cartes génériques. Il n’y a pas de véritable identité dans ce que vous construisez.

Maintenant, si j’exécute le même prompt, mais cette fois j’ajoute un fichier Design MD de style Stripe, ou vraiment n’importe quel fichier Design MD que vous souhaitez pour une autre marque. Et là, la différence saute aux yeux.

• Les couleurs s’alignent,
• l’espacement semble plus propre,
• les boutons ont l’air d’appartenir à un ensemble cohérent.
• L’écran entier a un point de vue.

Même IA, même prompt, mais maintenant le contexte est différent.

Alors, que contient réellement ce fichier ? Considérez-le comme un système de design que l’IA peut lire. En haut, vous avez généralement des tokens structurés. Des choses comme les codes hexadécimaux exacts, les familles de polices, le rayon des bordures, l’espacement.

Ce sont des règles strictes, mais la partie importante vient après. Le Markdown. C’est là que vous expliquez l’intention.

Les valeurs exactes et la raison qui les sous-tend. Et c’est pourquoi la sortie s’arrête de dériver de ce que nous essayons réellement d’atteindre.

Ce que contient exactement la spécification DESIGN.md

Les neuf sections clés du fichier

• Visual Theme & Atmosphere : le ton visuel général, l’intention esthétique de la marque.
• Color Palette & Roles : couleurs avec rôles sémantiques (primary, surface, accent, error).
• Typography Rules : familles de polices, échelles, poids, hauteurs de ligne.
• Component Stylings : patterns pour boutons, cartes, formulaires, navigation avec variantes.
• Layout Principles : grilles, breakpoints, espacement de base.
• Depth & Elevation : ombres, z-index, stratification visuelle.
• Do’s and Don’ts : règles explicites sur ce qui est permis et ce qui ne l’est pas.
• Responsive Behavior : comment adapter le design sur desktop, tablette et mobile.
• Agent Prompt Guide : instructions dédiées aux agents IA qui lisent le fichier.

La section « Agent Prompt Guide » est la véritable nouveauté. Elle permet au designer de laisser des instructions explicites pour l’IA. Quelque chose que les design systems traditionnels n’ont jamais prévu, car ils étaient pensés uniquement pour les êtres humains. C’est ce qui fait la différence entre un fichier de spécifications classique et un véritable pont entre le designer et la machine.

Un exemple concret de DESIGN.md prêt à l’emploi

La syntaxe est volontairement minimale. Voici un extrait typique que vous pouvez copier et adapter à votre projet :

# DESIGN.md

## Visual Theme & Atmosphere
Moderne, minimal, professionnel. Neutres chauds avec un accent fort.

## Color Palette & Roles
- Primary: #0099e5
- Primary Dark: #0077b3
- Surface: #f5f2ea
- Background: #e5e1d7
- Ink: #1a1a1a
- Success: #2e8b57
- Warning: #b8860b
- Error: #c0392b

## Typography Rules
- Font Family: Inter, system-ui, sans-serif
- Heading 1: 48px / 700 / 1.1
- Heading 2: 32px / 600 / 1.2
- Body: 16px / 400 / 1.6
- Caption: 13px / 500 / 1.4

## Component Stylings
- Button: border-radius 10px, padding 12px 24px, shadow offset 4px
- Card: border-radius 12px, border 2px solid ink, shadow bcb8ae
- Input: border 1px solid 9a968c, focus ring 2px primary

## Do's and Don'ts
- DO use the primary color only for interactive elements
- DO maintain 4.5:1 contrast ratio on text
- DON'T introduce colors outside the palette
- DON'T use drop shadows above 8px offset

## Agent Prompt Guide
When generating UI, always:
1. Reference this file before writing any code
2. Apply the color palette strictly
3. Use the typography scale as defined
4. Follow the component patterns exactly

Vous placez ce fichier à la racine du projet, comme vous le feriez avec un README. Chaque outil compatible l’utilise pour générer des interfaces cohérentes avec votre identité visuelle. La comparaison avec README.md est explicite : comme le README explique le projet aux nouveaux contributeurs, DESIGN.md explique le design system aux agents IA qui écrivent du code UI.

Intégration avec Claude Code, Cursor et Copilot

L’intégration est transparente. Vous déposez le fichier DESIGN.md à la racine de votre projet, et les agents IA le détectent automatiquement. Plus besoin de répéter vos préférences de design à chaque nouveau prompt.

Un agent qui lit ce fichier génère une UI avec des titres à l’encre foncée, un fond imitant la pierre calcaire chaude, et des boutons dans ce terracotta spécifique.

Aucun prompt supplémentaire. Plus besoin de vous répéter.

Et ce n’est pas qu’une spécification sur le papier. Google a livré un CLI fonctionnel : npx @google/design.md lint DESIGN.md valide la structure, détecte les références de tokens cassées, et vérifie automatiquement les ratios de contraste WCAG AA. Un outil concret, pas juste un document.

La communauté awesome-design-md : 69+ modèles gratuits

La communauté a déjà créé plus de 69 modèles gratuits pour les marques les plus populaires : Linear, Stripe, Notion, Vercel, et bien d’autres. Vous pouvez les télécharger, les adapter à votre projet, ou les utiliser comme inspiration pour créer le vôtre.

C’est un écosystème qui grandit rapidement. Selon l’annonce officielle de Google, l’objectif est de standardiser la façon dont les agents IA comprennent le design.

Maintenant, la question évidente est : avons-nous vraiment besoin d’un autre format de système de conception ? Nous avons déjà Figma, nous avons déjà des jetons JSON, et nous avons déjà Cursor Rules et Claud MD. Mais chacun d’eux résout un problème différent.

Figma est une interface utilisateur

C’est excellent pour les humains, mais il vit généralement en dehors du dépôt. Les jetons JSON sont excellents pour les machines, mais ils n’expliquent pas notre goût pour le site web ni l’intention que nous poursuivons.

Cursor Rules et Claud MD indiquent à l’agent comment se comporter, mais ce n’est pas vraiment un système de conception.

Design MD se situe au milieu de tout cela

Il est lisible par l’humain, tout en étant également lisible par la machine. Il est versionné et natif pour les agents. C’est le grand changement ici.

Personne ne veut continuer à taper : « Rends-le propre. Rends-le moderne. Utilise un meilleur espacement. Rends-le plus comme ce site web. »

Allez, ça devient vite lassant. Avec design.md, vous arrêtez de vous répéter. Vous donnez les règles de conception à l’IA une fois, puis chaque écran part de la même base. C’est le vrai gain ici. La conception sur tous les écrans, la rapidité.

Il y a moins de retouches. Il y a moins de corrections du même bouton moche pour la dixième fois. Pour être honnête, ce n’est pas parfait. C’est un excellent début. C’est un seul fichier. Il vit dans votre dépôt.

Aussi, le fichier n’est bon que pour ce que vous y mettez. Un design.md faible vous donnera évidemment un résultat faible. Mais pour les développeurs solo, les prototypes, les workflows axés sur l’IA, c’est une mise à niveau vraiment pratique.

Vous pouvez retrouver d’autres ressources sur le blog pour compléter votre boîte à outils: outils IA pour développeurs.

Les limites à connaître avant de sauter le pas

Comme tout outil récent, DESIGN.md a ses faiblesses. Voici les principales à garder en tête :

• Dépendance à la qualité du fichier : un DESIGN.md mal rédigé produira des résultats médiocres. L’IA ne fait pas de miracles avec des mauvaises entrées.
• Pas de support visuel : contrairement à Figma, vous ne pouvez pas voir le rendu avant de générer le code. C’est un fichier texte, pas un outil de design graphique.
• Adoption encore partielle : tous les agents IA ne supportent pas encore ce format. Vérifiez que votre outil (Claude Code, Cursor, Copilot) est compatible.

Malgré ces limites, le potentiel est énorme. Pour les projets solo ou les petites équipes, c’est un gain de temps considérable. Pour les grandes organisations, cela pose une base solide pour standardiser le design à travers tous les projets.

Franchement, la prochaine fois que vous ouvrez Cursor ou Claude Code pour générer une UI, glissez un fichier DESIGN.md à la racine. Vous verrez la différence tout de suite. Plus de guessing, plus de prompts à rallonge. Juste un fichier qui dit à l’IA ce que vous voulez vraiment.

Ce que contient vraiment un fichier DESIGN.md (et pourquoi c’est plus qu’un simple guide de style)

Il faut comprendre la structure interne pour en tirer parti. La spécification ouverte par Google Labs le 21 avril 2026 définit neuf sections standard qui transforment un fichier Markdown en un véritable système de design lisible par machine. On n’est pas dans le flou artistique, c’est du concret.

Les tokens de design et la validation automatique

Au sommet du fichier, vous trouvez les tokens structurés : codes hexadécimaux exacts, familles de polices, rayons de bordure, espacements. Mais la vraie innovation, c’est l’outil CLI qui va avec. La commande npx @google/design.md lint DESIGN.md valide la structure, détecte les références cassées et vérifie automatiquement les ratios de contraste WCAG AA. Vous ne pouvez plus vous planter sur l’accessibilité — l’IA vous force à respecter les normes dès la conception du fichier.

Les neuf sections qui changent tout

La spécification ne se limite pas à la couleur et à la typographie. Elle inclut des sections pour les espacements, les ombres portées, les icônes, les animations, les breakpoints responsive, et même des notes d’accessibilité.

Chaque section est écrite en Markdown simple, mais structurée de façon que l’IA puisse la parser sans ambiguïté. Pas besoin d’exporter depuis Figma, pas de JSON à plat — juste un fichier que vous pouvez éditer dans n’importe quel éditeur de texte.

Un exemple concret tiré de la spécification : si vous définissez une couleur de fond « limestone » avec le code F5F0EB et une encre « dark ink » en 1A1A1A, l’agent qui lit ce fichier générera une UI avec des titres en dark ink, un fond chaud comme de la pierre calcaire, et des boutons dans cette teinte terracotta spécifique. Plus besoin de répéter le même prompt à chaque fois.

La compatibilité avec les standards existants

Ce qui rend DESIGN.md puissant, c’est sa compatibilité avec le standard W3C Design Tokens et avec les configurations Tailwind. Vous pouvez importer vos tokens existants directement dans le fichier, ou exporter votre DESIGN.md vers un fichier tailwind.config.js. Google a pensé à l’interopérabilité : ce n’est pas un format fermé, c’est un pont entre les outils.

Comment DESIGN.md change votre workflow avec Claude Code, Cursor et Copilot

L’article principal vous a montré la différence visuelle. Mais concrètement, comment ça s’intègre dans votre quotidien de développeur ?

La réponse est simple : vous placez le fichier à la racine de votre projet, et chaque outil compatible le détecte automatiquement. Plus besoin de répéter « utilise la palette de couleurs de notre marque » dans chaque prompt.

Le problème que DESIGN.md résout vraiment

Le problème fondamental des agents IA de code, c’est que chaque conversation commence de zéro. Vous demandez « un tableau de bord moderne » et vous obtenez le même bleu Tailwind par défaut à chaque fois. Pas parce que l’IA est mauvaise, mais parce qu’elle n’a aucun contexte sur votre marque.

DESIGN.md fournit ce contexte de manière déterministe. L’agent ne devine plus : il lit les règles et les applique. Sur Reddit, le fil r/PromptEngineering a explosé avec des retours d’utilisateurs qui confirment : là où ils passaient 10 à 15 minutes à peaufiner des prompts pour obtenir une UI cohérente, ils ont maintenant un fichier unique qui fait le travail en une seconde.

Un développeur témoigne : « J’ai pris le modèle Stripe, je l’ai adapté à notre palette, et maintenant Claude Code génère des interfaces qui ressemblent à notre produit sans que j’aie à lui rappeler les couleurs à chaque fois. »

Sources

• OpenCode : agent IA open source pour terminal, mieux que Claude Code
• Cryptomator, le chiffrement open source pour vos fichiers cloud
• Authentik auto-hébergé : guide pour configurer SSO et MFA open-source
• Exécuter des modèles IA open source localement : guide complet 2026
• The Pirate Bay : solutions et sites miroir pour y accéder
• Google Stitch open-source DESIGN.md : la spécification qui rend les agents IA cohérents avec votre marque
• Google ouvre DESIGN.md – Stitch – Mission Open Data