Stitch design.md est désormais open source depuis mars 2026, sous l’impulsion de Google Labs Le format DESIGN.md format open source décrit un système de design lisible par les agents IA Les agents comme Claude peuvent générer des interfaces cohérentes à partir de ce fichier markdown L’interopérabilité outils design est au cœur du projet : Figma, Stitch, et autres outils peuvent lire le même fichier La spécification est disponible sur GitHub, avec un SDK et un serveur MCP pour l’intégration
Qu’est-ce que DESIGN.md et pourquoi Google l’ouvre au public
En mars 2026, Google Labs a pris une décision qui va loin dans ses implications : rendre public le format DESIGN.md, le fichier de conception au cœur de Google Stitch. Stitch design.md est désormais open source, et ce n’est pas qu’une annonce tech de routine.
Le problème que DESIGN.md cherche à résoudre
Avant de comprendre pourquoi c’est important, il faut parler du contexte. Chaque équipe design travaille avec son propre design system, stocké dans Figma, dans un repo Git, dans un wiki ou dans la tête du designer senior. Résultat : quand un agent IA veut générer une interface utilisateur, il n’a aucune source de vérité. Il invente des couleurs, ignore les règles d’accessibilité, utilise le mauvais type de bouton. Le travail de correction qui suit est long et pénible.
DESIGN.md résout ce problème par l’approche la plus directe possible : un fichier texte structuré en markdown, placé à la racine de votre projet, qui décrit toute la logique visuelle de votre design dans un format que les agents comprennent nativement.
Pourquoi Google choisit l’open source maintenant
Google Labs n’ouvre pas ce format par altruisme. La stratégie est claire : pour que DESIGN.md devienne un standard de facto, il faut que toutes les plateformes, tous les outils, toutes les équipes puissent l’adopter librement. Un format propriétaire ne peut pas devenir un standard. Un format ouvert, si.
C’est le même raisonnement qui a fait le succès de formats comme Markdown lui-même ou JSON. Google stitch mise sur l’adoption massive pour créer un écosystème, pas sur la rétention pour verrouiller les utilisateurs. Cela change beaucoup de choses pour le monde du design. On retrouve cette logique d’interopérabilité dans d’autres domaines du numérique, et elle produit toujours les mêmes effets positifs.
Comment DESIGN.md fonctionne concrètement
Le fichier fonctionne comme une couche sémantique entre votre design system et vos agents IA. Ce n’est pas une simple liste de variables CSS. C’est une description d’intention.
La structure sémantique des couleurs et règles WCAG
Voici un exemple concret. Dans un fichier DESIGN.md classique, une couleur n’est pas juste #FF5252. Elle est déclarée avec son rôle : couleur d’alerte, fond de notification critique, jamais utilisée pour la décoration. Un agent qui lit ce fichier sait qu’il ne peut pas utiliser cette couleur pour un bouton d’action principal. Il connaît les règles avant même de générer la première ligne de code.
Les règles WCAG sont intégrées directement dans les métadonnées de chaque élément. Le ratio de contraste minimum, le mode sombre, les tailles de texte accessibles : tout cela est décrit dans le fichier. Résultat : la validation automatique de l’accessibilité se fait au moment de la génération, pas après coup. C’est un grand changement par rapport au workflow habituel où l’accessibilité est vérifiée en dernier, souvent bâclée. On peut rapprocher cette logique des tests automatisés en data engineering : valider la qualité en amont, pas en sortie.
Du prototypage à l’export React : le flux complet
Le flux concret ressemble à ceci. Vous créez votre maquette dans Stitch, sur le canevas infini qui permet d’organiser plusieurs écrans en même temps. Vous définissez votre design system directement dans l’interface. Ensuite, vous exportez un fichier DESIGN.md depuis Stitch, automatiquement généré à partir de vos données de conception.
Ce fichier, vous pouvez l’ajouter à votre repo GitHub, le partager avec votre équipe, ou le passer directement à un agent comme Claude via le serveur MCP. L’agent lit le fichier, comprend les règles, et peut alors générer des interfaces React cohérentes avec votre charte visuelle. L’export React produit du code fonctionnel, pas des maquettes statiques. C’est du code avec lequel votre développeur peut travailler directement.
Le prototype devient produit sans refonte manuelle. C’est là que le gain de temps est réel.
Les avantages pour designers et développeurs
Éliminer la synchronisation manuelle design-code
Le travail de synchronisation entre design et code est l’un des plus frustrants dans le métier. Un designer met à jour une couleur dans Figma. Le développeur ne le voit pas tout de suite. Le design system dans le code diverge. Trois semaines plus tard, personne ne sait quelle est la version de référence. Ce type de situation coûte des heures chaque semaine à chaque équipe.
Avec DESIGN.md, la mise à jour du fichier est la source de vérité. Toutes les modifications passent par lui. Le serveur MCP peut être connecté à votre IDE pour que les agents IA intégrés à votre environnement de développement lisent toujours la version à jour. La mise en place prend une heure, le gain s’accumule sur chaque projet. Pour les équipes qui utilisent déjà Claude Code en terminal, l’intégration via MCP est encore plus directe.
Ce que les agents IA peuvent faire avec DESIGN.md
Les agents IA, en particulier Claude, peuvent utiliser ce fichier de plusieurs façons. Voici les cas d’usage les plus utiles en pratique :
Générer une interface utilisateur complète à partir de prompts textuels en respectant votre charte visuelle Valider automatiquement que les composants générés respectent les règles WCAG définies dans le fichier Transformer des images ou captures d’écran en code React avec le bon design system appliqué Ajouter de nouveaux composants cohérents sans brief visuel détaillé, l’agent manager piloter les règles Créer des variantes d’écrans pour différents contextes (web, app mobile, mode sombre) sans travail manuel
Gemini est également intégré dans Stitch et peut lire ces fichiers dans le cadre des workflows Google Labs. Le système Antigravity, qui alimente Stitch, utilise DESIGN.md comme référence principale pour toute génération d’interface.
Un langage commun entre tous vos outils
L’interopérabilité outils design, c’est l’autre grand bénéfice. Via le SDK disponible sur GitHub, n’importe quel outil tiers peut lire et écrire du DESIGN.md. Figma peut exporter vers ce format. Un autre outil peut l’importer. Les designers qui travaillent en équipe distribuée n’ont plus besoin d’être sur la même plateforme pour partager un design system cohérent.
Différences clés avec l’approche Figma
Tableau comparatif Stitch vs Figma
| Critère | Google Stitch (DESIGN.md) | Figma |
|---|---|---|
| Format du design system | Open source, fichier markdown portable | Propriétaire, stocké dans Figma cloud |
| Intégration agents IA | Native via MCP et SDK, Gemini intégré | Limitée, via plugins tiers |
| Export code | React fonctionnel, direct depuis Stitch | Variables CSS, export partiel |
| Accessibilité WCAG | Intégrée dans le fichier, validation auto | Vérification manuelle ou plugin |
| Interopérabilité | Totale, outil-agnostique | Limitée à l’écosystème Figma |
L’argument de l’indépendance vis-à-vis de l’outil
Ce tableau résume l’essentiel, mais le vrai point de différenciation n’est pas une feature isolée. C’est l’approche philosophique. Figma reste un outil centré sur lui-même : votre design system vit dans Figma, pour les utilisateurs de Figma. DESIGN.md est pensé pour être indépendant.
Un fichier DESIGN.md fonctionne dans n’importe quel environnement qui supporte le SDK ou le serveur MCP. Votre design system n’appartient plus à une plateforme. Cela change la relation de vos données avec vos outils, et c’est une distinction qui compte sur le long terme, surtout pour les équipes qui veulent piloter leur stack sans dépendance forte. C’est comparable au choix entre un stockage cloud propriétaire et une solution ouverte.
La comparaison n’a pas pour but de mettre Figma sur le côté. Les deux outils coexistent, et des équipes utilisent les deux en parallèle aujourd’hui.
Mise en place de DESIGN.md dans vos workflows
Étapes pour démarrer avec Stitch et DESIGN.md
Pour commencer, accédez à Stitch sur stitch.withgoogle.com. Le produit est accessible gratuitement dans sa version actuelle via Google Labs. Voici les étapes pratiques pour intégrer DESIGN.md dans votre workflow :
Créez votre projet dans Stitch et définissez votre design system (couleurs, typographie, composants) dans l’interface Utilisez le canevas infini pour organiser vos maquettes et prototypes sur un même espace de travail Exportez le fichier DESIGN.md généré automatiquement depuis les paramètres de votre projet Ajoutez ce fichier à la racine de votre repo GitHub et configurez le serveur MCP dans votre IDE Invitez Claude ou un autre agent à lire le fichier via le protocole MCP pour générer des interfaces React
Le SDK est disponible sur GitHub à l’adresse officielle du projet Google Labs Antigravity. Vous pouvez contribuer à la spécification, signaler des problèmes, ou créer des intégrations pour d’autres outils.
Cas d’usage réel : utiliser Claude avec DESIGN.md
Un exemple concret. Vous avez un design system pour une app SaaS. Vous exportez votre DESIGN.md depuis Stitch. Vous passez ce fichier à Claude avec un prompt du genre : « Génère une page de tableau de bord avec les composants de ce design system. » Claude lit le fichier markdown, comprend que le bouton primaire est bleu (#1A73E8), que le texte doit avoir un ratio de contraste minimum de 4.5:1, que les cartes utilisent un rayon de 8px. Le code React généré respecte toutes ces règles. Vous n’avez pas besoin de faire une code review visuelle complète. Le studio de design et le code sont enfin synchronisés.
Pour les équipes qui travaillent avec Tailwind, le SDK permet de transformer le fichier DESIGN.md en configuration Tailwind directement. Le format s’adapte à votre stack, pas l’inverse.
Implications pour l’écosystème design et IA
Pourquoi ce moment est différent des précédentes annonces IA
Depuis deux ans, chaque mois apporte une nouvelle annonce sur la génération d’interfaces par IA. La plupart des outils IA promettent de transformer un prompt en maquette. Ce que DESIGN.md apporte, c’est différent : un standard ouvert pour que ces générations soient cohérentes avec un design system réel. C’est le passage du vibe design (générer quelque chose qui a l’air bien) à une conception systématique et contrôlée.
Google Labs l’a compris : les agents IA génération interfaces ne valent rien sans un contexte de conception structuré. Le fichier markdown est ce contexte. C’est pour cela que Stitch Google Labs design system est construit autour de ce fichier, pas autour d’un canvas infini ou d’une feature de voix, qui ne sont que des modes d’entrée. Les LLM sous-jacents, qu’il s’agisse de Gemini ou de Claude, ont besoin de cette couche sémantique pour produire des résultats exploitables.
L’impact sur la prochaine génération d’outils design
L’ouverture du format va accélérer deux choses. D’abord, la lecture et écriture de DESIGN.md va devenir une fonctionnalité standard attendue dans tout outil de design sérieux, comme l’export SVG l’est aujourd’hui. Les outils qui ne supportent pas ce format seront perçus comme en retard.
Ensuite, la génération d’UI par agents IA va gagner en qualité et en rapidité parce que les agents auront accès à des design systems structurés et validés, pas à des prompts vagues. Pour les designers, cela signifie moins de travail répétitif et plus de temps sur les décisions stratégiques. Pour les développeurs, cela signifie un code généré plus proche de la production. Ensemble, ces deux effets peuvent transformer la façon dont les équipes produit travaillent, à partir de maintenant. Le métier de prompt engineer évolue lui aussi dans cette direction : structurer le contexte plutôt que formuler des requêtes dans le vide.
Questions fréquentes sur Stitch DESIGN.md open source
Qu’est-ce que le format DESIGN.md exactement ?
DESIGN.md est un fichier markdown structuré qui décrit un design system de façon lisible par des agents IA. Il contient les couleurs avec leur intention sémantique, les règles WCAG d’accessibilité, les composants et leurs règles d’usage. Placé à la racine d’un projet, il sert de référence commune entre tous les outils et tous les agents.
Comment accéder à Stitch pour utiliser DESIGN.md ?
Vous pouvez accéder à Stitch directement sur stitch.withgoogle.com. Le produit est proposé par Google Labs et disponible gratuitement. La spécification DESIGN.md est sur GitHub, open source, et le SDK pour l’intégrer dans vos propres outils est accessible à toutes les équipes.
DESIGN.md est-il compatible avec Figma ?
Oui, via le SDK open source disponible sur GitHub. Des intégrations permettent d’exporter un design system Figma vers le format DESIGN.md, ou d’importer un fichier DESIGN.md dans d’autres outils. L’objectif du format est précisément cette interopérabilité entre plateformes, dans la même logique que les formats ouverts qui facilitent l’échange de données.
Les agents IA comme Claude peuvent-ils vraiment respecter mon design system ?
En pratique, oui, à condition que votre DESIGN.md soit bien renseigné. Claude, connecté via le serveur MCP, lit le fichier et applique les règles lors de la génération de code React. Il sait quelle couleur est réservée aux alertes, quels composants sont accessibles, quels espacements sont définis. Le résultat est bien plus cohérent qu’une génération sans contexte. Pour comprendre comment ChatGPT et Claude se comparent sur ce type de tâches, notre comparatif détaille les forces de chaque modèle.
Peut-on contribuer à la spécification DESIGN.md ?
Oui. La spécification est hébergée sur GitHub sous licence open source. Vous pouvez soumettre des issues, proposer des modifications, ou créer des intégrations pour de nouveaux outils. Google Labs encourage les contributions de la communauté pour faire évoluer le format et l’adapter aux besoins réels des équipes design du monde entier.
