Système de Design — Générer & Auditer des Systèmes Visuels
Quand l'utiliser
- Démarrer un nouveau projet nécessitant un système de design
- Auditer une base de code existante pour la cohérence visuelle
- Avant une refonte — comprendre ce que vous avez
- Quand l'interface semble « bancale » sans que vous puissiez identifier pourquoi
- Examiner les PRs qui touchent au style
Comment ça fonctionne
Mode 1 : Générer un système de design
Analyse votre base de code et génère un système de design cohérent :
1. Scanne les motifs CSS/Tailwind/styled-components existants
2. Extrait : couleurs, typographie, espacements, border-radius, ombres, points de rupture
3. Recherche 3 sites concurrents pour l'inspiration (via le navigateur MCP)
4. Propose un ensemble de tokens de design (JSON + propriétés CSS personnalisées)
5. Génère DESIGN.md avec la justification de chaque décision
6. Crée une page de prévisualisation HTML interactive (autonome, sans dépendances)
Sortie : DESIGN.md + design-tokens.json + design-preview.html
Mode 2 : Audit visuel
Note votre interface sur 10 dimensions (0-10 chacune) :
1. Cohérence des couleurs — utilisez-vous votre palette ou des valeurs hexadécimales aléatoires ?
2. Hiérarchie typographique — h1 > h2 > h3 > body > caption claire ?
3. Rythme d'espacement — échelle cohérente (4px/8px/16px) ou arbitraire ?
4. Cohérence des composants — les éléments similaires se ressemblent-ils ?
5. Comportement responsive — fluide ou cassé aux points de rupture ?
6. Mode sombre — complet ou à moitié fait ?
7. Animation — intentionnelle ou gratuite ?
8. Accessibilité — rapports de contraste, états de focus, cibles tactiles
9. Densité d'information — encombrée ou épurée ?
10. Fignolage — états de survol, transitions, états de chargement, états vides
Chaque dimension reçoit un score, des exemples spécifiques et une correction avec le fichier:ligne exact.
Mode 3 : Détection de « slop » IA
Identifie les motifs de design génériques générés par l'IA :
- Dégradés gratuits sur tout
- Valeurs par défaut violet-à-bleu
- Cartes en « glass morphism » sans but
- Coins arrondis sur des éléments qui ne devraient pas l'être
- Animations excessives au défilement
- Hero générique avec texte centré sur dégradé standard
- Police sans-serif sans personnalité
Exemples
Générer pour une application SaaS :
/design-system generate --style minimal --palette earth-tones
Auditer une interface existante :
/design-system audit --url http://localhost:3000 --pages / /pricing /docs
Vérifier la présence de slop IA :
/design-system slop-check