Générateur DESIGN.md
Créez des fichiers DESIGN.md prêts pour l'IA pour Google Stitch, Claude Code, Cursor et Copilot — définissez couleurs, typographie, espacements et composants.
Mis à jour mai 2026
Vérifié par Rafael Duarte
Bases du projet
Nommez votre projet et décrivez son intention visuelle globale.
Décrivez le rendu visuel recherché. Les agents IA s’en servent pour donner le ton.
Comment utiliser le générateur DESIGN.md
Assistant en 9 sections, téléchargement en quelques secondes
1. Renseignez les bases et la palette
Nom, slogan, thème visuel en langage naturel, et couleurs par rôle sémantique (primary, error, success).
2. Configurez typographie, mise en page et composants
Polices, échelle modulaire, espacement, border-radius, ombres et modèles de variantes.
3. Téléchargez et commitez
Copiez ou téléchargez le DESIGN.md complet et placez-le à la racine du projet.
Ce que fait cet outil
Les 9 sections du spec officiel, guidées
Assistant étape par étape
Remplit les 9 sections du spec Apache 2.0 sans avoir à mémoriser la structure du fichier.
Couleurs par rôle sémantique
Primary, surface, error, success — pour le mode clair et sombre, pas seulement des valeurs hex isolées.
Échelle typographique modulaire
Minor third, perfect fourth, golden ratio — des tailles mathématiquement cohérentes.
Accessibilité incluse
Niveau WCAG visé, contrastes minimums, focus ring et taille de zone tactile.
Aperçu visuel en direct
Visualisez un tableau de bord, des boutons, un formulaire et des alertes avec vos couleurs et polices réelles avant d'exporter.
Plusieurs thèmes et préréglages de couleur
Ajoutez, renommez et basculez entre des palettes nommées, ou chargez des préréglages comme Ocean et Forest dans n'importe laquelle d'entre elles.
Les 9 sections du spec
Quand vous allez utiliser ça
Les scénarios les plus courants chez celles et ceux qui utilisent l'outil
Démarrer un nouveau projet avec l'IA
Placez le DESIGN.md à la racine avant le premier composant — toute l'UI générée suit vos règles.
Arrêter de répéter les specs dans les prompts
Écrivez la couleur primaire, la police et le border-radius une seule fois, pas à chaque nouveau prompt.
Workflows avec Google Stitch
Exportez les tokens depuis Figma vers le DESIGN.md et chaque génération de Stitch correspond à votre système.
Changer d'outil IA
Le DESIGN.md voyage avec le projet lors de la migration entre Cursor, Copilot et Claude Code.
Valider le contraste avant le handoff
Le lint intégré calcule le ratio WCAG de chaque paire de couleurs et signale les échecs avec un raccourci direct vers l'étape concernée.
Gérer plusieurs marques ou thèmes
Gérez des thèmes nommés séparés (ex. Light et une variante de marque) dans le même fichier, sans dupliquer l'assistant.
Erreurs courantes
Penser que ça remplace Figma
Ils sont complémentaires — DESIGN.md couvre la spécification et le handoff vers l'IA, pas la collaboration visuelle.
Sauter la section accessibilité
Sans contraste minimum ni niveau WCAG définis, les agents IA n'ont aucune contrainte pour générer une UI accessible.
Confondre avec les design tokens
DESIGN.md va au-delà des tokens — il inclut l'intention visuelle en langage naturel et les modèles de composants.
Ignorer les erreurs de l'onglet Lint
L'onglet Lint calcule le contraste réel (WCAG AA) et signale les paires de couleurs qui échouent — ignorer une ERR revient à livrer des tokens que l'IA appliquera de la mauvaise façon.
Confondre thèmes et mode sombre
Les thèmes nommés sont des palettes indépendantes (ex. Light, une variante de marque) ; le mode sombre est un bloc de surcharges à part — les deux ne se remplacent pas.
Pourquoi utiliser cet outil
L'assistant guide à travers les 9 sections du spec officiel avec des valeurs par défaut sensées, plutôt que d'écrire le markdown manuellement depuis zéro.
Il est compatible nativement avec Google Stitch et fonctionne comme fichier de contexte pour Claude Code, Cursor et Copilot — tous lisent automatiquement les fichiers à la racine du projet.
Sans un tel fichier, chaque prompt IA choisit couleur, police et espacement depuis zéro, de façon arbitraire. Avec le DESIGN.md prêt, l'agent traite votre spec comme une contrainte et applique les mêmes règles à chaque génération suivante — pas seulement à la première.
DESIGN.md vs. README.md vs. Design Tokens
Des formats complémentaires, des objectifs différents
Questions fréquentes
Un fichier markdown qui stocke les règles visuelles du projet — couleurs, typographie, espacement et composants — dans un format structuré que les agents IA peuvent lire et suivre. Créé par Google Labs pour Stitch, open source sous licence Apache 2.0.
Références
Documentation officielle du spec DESIGN.md, maintenue par Google Labs.
La licence open source sous laquelle DESIGN.md est publié.
Le critère de succès officiel utilisé comme base pour le lint de contraste de l'outil.
Article associé
Como documentar projetos no GitHub: o README que importa
Outils connexes
- Générateur de Palette de Couleurs Design Générez des palettes de couleurs harmonieuses depuis n'importe quelle couleur de base. Choisissez Analogue, Complémentaire, Triadique ou Tétradique —...
- Vérificateur de Contraste de Couleurs Design Vérificateur de contraste de couleurs gratuit — vérifiez la conformité WCAG 2.2 AA et AAA instantanément. Aperçu en direct, simulation du daltonisme et...
- Convertisseur de Couleurs Design Convertissez des couleurs entre HEX, RVB, HSL et CMJN instantanément. Sélecteur de couleur gratuit avec vérificateur de contraste WCAG et générateur de palette.
- Palette de Couleurs depuis une Image Design Extrayez des palettes de couleurs de n'importe quelle image — obtenez des codes HEX, RGB, HSL et exportez en CSS variables, Tailwind, JSON ou PNG. 100% dans...
- Générateur CSS Box Shadow — Neumorphisme, Glassmorphisme et Tailwind Design Générateur CSS box shadow gratuit avec aperçu en temps réel. Créez des ombres, effets neumorphisme et glassmorphisme. Exportez en CSS, Tailwind ou variables CSS.
