| name | design-md-convention |
| description | Convention DESIGN.md pour design systems AI-friendly. Use when setting up a new project UI, documenting design tokens, or generating UI consistent with a design system. |
DESIGN.md — Convention Design System AI-Friendly
Convention inspirée de VoltAgent/awesome-design-md (55+ design systems populaires, concept Google Stitch).
Principe : un fichier DESIGN.md en markdown à la racine du projet sert de source de vérité pour les agents IA qui génèrent ou modifient l'UI. Pas de Figma, pas de JSON complexe, juste du texte lisible par humain et par LLM.
Pourquoi DESIGN.md ?
| Problème sans DESIGN.md | Solution avec DESIGN.md |
|---|
| IA génère des couleurs aléatoires | IA lit la palette définie |
| Incohérence spacing entre composants | IA applique l'échelle documentée |
| Typographie variable | IA utilise les tokens définis |
| Onboarding designer/dev lent | DESIGN.md = réponse unique |
| Dépendance à Figma pour chaque décision | Markdown versionné avec le code |
Structure recommandée
Un DESIGN.md contient 7 sections obligatoires :
- Principes visuels — ton, personnalité, do/don't
- Design tokens — couleurs, typographie, espacements, rayons, ombres
- Grille & layout — breakpoints, colonnes, gutters, container widths
- Composants — liste + variantes + règles d'usage
- Patterns d'interaction — hover, focus, active, disabled, loading
