Google Stitch et DESIGN.md : un fichier Markdown qui remplace ta réunion de design

#Le problème : le mur entre design et code

Si tu as déjà travaillé sur un projet avec une équipe design, tu connais le circuit. Le designer produit des maquettes dans Figma. Ensuite il y a une réunion de handoff — parfois deux. On passe en revue les espacements, les couleurs, les variantes de boutons, les breakpoints. Le développeur prend des notes, ouvre Figma à côté de son éditeur, et commence à interpréter. Trois jours plus tard, le résultat ne correspond pas exactement aux maquettes. Re-réunion.

Ce cycle — brief, maquette, réunion, handoff, implémentation, correction — peut prendre une semaine complète pour une seule feature. Et si tu utilises un agent IA pour coder, le problème empire : l'agent n'a aucun accès à tes fichiers Figma. Il invente des couleurs, des tailles de police, des espacements.

Google Stitch propose une solution à ce problème avec un concept simple : encoder tout ton design system dans un fichier Markdown que n'importe quel agent IA peut lire.

#Google Stitch, c'est quoi ?

Google Stitch est un outil de design basé sur l'IA, développé par Google Labs. Disponible gratuitement sur stitch.withgoogle.com, il fonctionne entièrement dans le navigateur — rien à installer.

Le principe : tu décris ce que tu veux en langage naturel (texte ou voix), et Stitch génère des interfaces haute-fidélité sur un canvas infini. Derrière chaque élément, il y a du HTML/CSS réel.

Quelques caractéristiques clés :

• Entrée flexible : texte, voix, capture d'écran, URL existante
• Sortie design : maquettes layered sur un canvas, pas juste du code brut
• Export Figma : en un clic, avec Auto Layout et calques éditables
• Prototypes : un bouton "Play" connecte les écrans entre eux
• Modèle IA : propulsé par Gemini (3.0 Flash en standard, 3.1 Pro en expérimental)

Google positionne Stitch comme l'équivalent design du "vibe coding" : tu décris ton intention business ou esthétique (par exemple "premium et minimaliste, comme Stripe"), et l'IA génère plusieurs directions simultanément.

#DESIGN.md : l'innovation clé

La vraie nouveauté de la mise à jour mars 2026, c'est DESIGN.md — un fichier Markdown qui encode l'intégralité de ton design system dans un format lisible par les humains ET par les LLM.

#Structure du fichier

DESIGN.md est organisé en cinq sections principales :

## Colors
- Primary: #1A73E8
- Error: #EA4335
- Surface: #FFFFFF
- On-Primary: #FFFFFF

## Typography
- Font Family: Inter, sans-serif
- Heading 1: 32px, 700 weight, 1.2 line-height
- Body: 16px, 400 weight, 1.5 line-height
- Caption: 12px, 400 weight

## Spacing & Layout
- Base unit: 4px
- SM: 8px | MD: 16px | LG: 24px | XL: 32px
- Container max-width: 1200px
- Breakpoints: 640px, 768px, 1024px, 1280px

## Component Styles
- Button border-radius: 8px
- Card shadow: 0 2px 8px rgba(0,0,0,0.12)
- Border: 1px solid rgba(0,0,0,0.1)

## Component Patterns
- Button: primary, secondary, ghost — with hover/active states
- Card: header, body, footer layout
- Form inputs: label above, helper text below

#Pourquoi Markdown et pas JSON ?

Le choix du Markdown n'est pas anodin. JSON ou YAML auraient été plus faciles à parser programmatiquement, mais Markdown offre trois avantages décisifs :

1. Lisibilité humaine : un designer ou un PM peut lire et modifier DESIGN.md sans outil spécial
2. Compatibilité LLM : les modèles de langage comprennent nativement le Markdown structuré avec des headings
3. Portabilité : le fichier se commit dans un repo Git, se partage par email, s'ouvre dans n'importe quel éditeur

Quand tu envoies un prompt à Stitch, l'IA injecte le contenu complet de DESIGN.md comme contexte. Les tokens de design deviennent des contraintes, pas des suggestions : Stitch applique les valeurs hex exactes, les bonnes polices, les bons espacements.

#Comment obtenir un DESIGN.md

Deux méthodes :

1. Depuis un projet Stitch : tu designs ton interface, puis tu exportes le DESIGN.md généré automatiquement
2. Depuis une URL : Stitch peut analyser n'importe quel site web public et en extraire le design system sous forme de DESIGN.md

#Utiliser DESIGN.md avec Claude Code

C'est là que ça devient intéressant pour nous. DESIGN.md n'est pas enfermé dans l'écosystème Google. C'est un fichier texte — n'importe quel agent IA peut le consommer.

#Mise en place

Le workflow est simple :

1. Exporte ton DESIGN.md depuis Stitch (ou crée-le manuellement)
2. Place-le à la racine de ton projet
3. Ajoute une instruction dans ton CLAUDE.md :

## Design System
Réfère-toi toujours à DESIGN.md quand tu génères du code UI.
N'invente jamais de nouvelles valeurs de couleur, taille ou espacement.
Utilise uniquement les tokens définis dans DESIGN.md.

À partir de là, chaque fois que Claude Code génère du code frontend, il consulte DESIGN.md et applique les bonnes valeurs. Plus besoin de lui rappeler "utilise la couleur primaire #1A73E8" à chaque prompt.

#Exemple concret

Sans DESIGN.md, tu écris :

Crée un composant Card avec un titre, une description et un bouton primaire.
Utilise la couleur #1A73E8, border-radius 8px, shadow 0 2px 8px rgba(0,0,0,0.12),
police Inter, titre en 20px bold, description en 16px regular...

Avec DESIGN.md dans ton projet :

Crée un composant Card avec un titre, une description et un bouton primaire.

Claude Code lit les tokens dans DESIGN.md et produit un composant cohérent avec le reste de ton UI, sans que tu aies à re-spécifier chaque valeur.

#Le serveur MCP et les Agent Skills

Stitch va plus loin avec un serveur MCP (Model Context Protocol) officiel qui connecte l'outil directement aux environnements de développement. Le repo google-labs-code/stitch-skills sur GitHub fournit sept Agent Skills :

L'installation se fait en une commande :

npx skills add google-labs-code/stitch-skills

Le skill design-md est particulièrement utile : il analyse ton projet existant et génère un DESIGN.md à partir du code déjà en place. Pas besoin de passer par Stitch si tu as déjà un design system en production.

#Ce que ça change concrètement

Le workflow traditionnel ressemble à ça :

1. Le designer crée les maquettes dans Figma
2. Réunion de handoff avec le développeur
3. Le développeur réinterprète les maquettes en code
4. Le designer review et note les écarts
5. Corrections, re-review, validation

Avec DESIGN.md, le workflow devient :

1. Le designer (ou Stitch) produit le DESIGN.md
2. Le fichier est commité dans le repo
3. L'agent IA lit le fichier et génère du code conforme
4. Le designer review le résultat — les écarts sont minimes

La réunion de handoff disparaît parce que le "document de spécification" est directement lisible par l'agent qui implémente. Il n'y a plus de couche d'interprétation humaine entre le design et le code.

#Les limites à connaître

Stitch est encore jeune et présente plusieurs contraintes :

• Pas de collaboration temps réel : c'est un outil solo pour l'instant, pas de mode multi-utilisateurs
• HTML/CSS uniquement : pas d'export natif React, Vue ou mobile (le skill react-components compense partiellement)
• Pas de micro-interactions : les états hover, les animations et les transitions ne sont pas gérés
• Accessibilité variable : le code généré nécessite une review manuelle pour la conformité WCAG
• Quotas mensuels : environ 350 générations en mode standard, 50 à 200 en mode expérimental

Le format DESIGN.md lui-même a aussi ses limites : il encode les tokens statiques (couleurs, tailles, espacements) mais pas les comportements dynamiques (animations, responsive avancé, logique conditionnelle). Pour un design system complet, tu auras probablement besoin de documentation complémentaire.

#En résumé

Google Stitch introduit une idée puissante : le design system comme fichier Markdown. En rendant les décisions de design lisibles par les agents IA, DESIGN.md supprime la couche de traduction manuelle qui ralentit le cycle design-to-code.

Pour les utilisateurs de Claude Code, l'intégration est immédiate : place le fichier à la racine, ajoute une instruction dans CLAUDE.md, et l'agent applique automatiquement ton design system. Le serveur MCP et les Agent Skills offrent une intégration encore plus poussée pour ceux qui veulent automatiser davantage.

Le concept de "vibe design" est peut-être un terme marketing, mais le problème qu'il résout est réel : faire en sorte que le code produit par l'IA respecte tes choix de design sans que tu aies à les répéter à chaque prompt.