hamzacakmakk/générateur-de-système-de-design

Générateur de Système de Design

Construisez le plus petit système qui rend le produit cohérent. Un système de design est un ensemble de décisions, pas une grande variété de valeurs : moins de tokens bien nommés valent mieux que des échelles exhaustives que personne n'utilise.

Si le skill frontend-design est installé, frontend-design/references/tokens.md contient un ensemble de démarrage complet avec vérification des contrastes ; partez de là et adaptez-le.

1. Entrées

• Lisez ce qui existe : CSS actuel, configuration Tailwind, fichiers de thème, bibliothèque de composants, ressources de marque. Inventoriez les valeurs réellement utilisées (couleurs, tailles de police, espacements, rayons) et leur fréquence d'apparition.
• Clarifiez (ou déduisez et indiquez) le ton du produit, les plateformes (web, iOS, Android), la densité, et si le mode sombre et le mode haut contraste sont requis.

2. Architecture : trois couches

1. Tokens primitifs : valeurs brutes avec des noms neutres. --gray-50 ... --gray-950, --blue-600, --space-4, --radius-md. Jamais utilisés directement dans les composants.
2. Tokens sémantiques : alias basés sur l'usage. --bg, --surface, --surface-sunken, --border, --border-strong, --text, --text-muted, --text-subtle, --accent, --accent-fg, --accent-subtle, --focus-ring, --success, --warning, --danger, --info (+ variantes -subtle). Les thèmes échangent ceux-ci.
3. Tokens de composants (seulement si nécessaire) : --button-height-md, --input-border, --card-padding. Ajoutez-les lorsqu'un composant doit être thématisé indépendamment.

Nommage : catégorie-rôle-variante-état (--text-muted, --accent-hover). Pas de noms de couleurs dans les tokens sémantiques (--accent, pas --blue).

3. Décisions à prendre

• Espacement : base de 4 px. Échelle 0, 2, 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128. (Fluent 2 et Material reposent tous deux sur du 4 px ; l'échelle par défaut de Tailwind est basée sur 4 px.)
• Typographie : une ou deux familles ; une échelle modulaire (1.2 dense, 1.25 produit, 1.333+ éditorial) ; des rôles plutôt que des tailles (affichage, titre, en-tête, corps, étiquette, légende, code) ; des hauteurs de ligne par rôle ; clamp() fluide uniquement pour les tailles d'affichage.
• Couleur : rampe neutre de 10 à 12 pas (légèrement chaud ou froid, choisi délibérément), une rampe d'accentuation, quatre teintes sémantiques. Générez les rampes en OKLCH pour des pas perceptuels uniformes.
• Rayon : une famille (net, doux ou arrondi) avec 3 à 4 pas plus full.
• Élévation : 3 niveaux au maximum (surélevé, flottant, superposition), ombres neutres à deux couches ; en mode sombre, préférez des surfaces plus claires plutôt que des ombres plus lourdes.
• Mouvement : 3 durées (rapide ~140 ms, base ~220 ms, lente ~320 ms), 3 accélérations (out, in, in-out), et une règle de mouvement réduit.
• Couches : une petite échelle d'index z (collant, liste déroulante, superposition, dialogue, notification, infobulle).
• Points de rupture : basés sur le contenu ; un ensemble courant est 640, 768, 1024, 1280, 1536.

4. Thèmes et contraste

• Définissez le clair et le sombre ensemble. Mode sombre : fond quasi noir (pas #000), texte blanc cassé (pas #fff), surfaces plus claires pour l'élévation, accent éclairci et légèrement désaturé.
• Ajoutez une variante prefers-contrast: more qui renforce les bordures et le texte atténué.
• Vérifiez chaque paire texte/fond avec la formule WCAG 2 et publiez les ratios : texte 4.5:1, grand texte et UI significatifs (bordures de champ, icônes, anneaux de focus) 3:1. Incluez les nombres dans la documentation ; ne dites pas "conforme AA" sans l'avoir calculé.

5. Livrables

Produisez, dans la pile technologique du projet :

1. tokens.css (propriétés personnalisées CSS, clair + sombre + haut contraste), et/ou le mappage de thème Tailwind (@theme dans v4, theme.extend dans v3), et/ou tokens.json au format W3C Design Tokens Community Group si un pipeline (Style Dictionary) est utilisé.
2. Un court DESIGN.md documentant : les principes (3 à 5 lignes), les tables de tokens avec les ratios de contraste, les rôles typographiques, les règles d'utilisation de l'espacement, et les à faire / à ne pas faire pour les composants de base (bouton, champ, carte, dialogue, tableau, notification).
3. Optionnellement un seul styleguide.html / page d'histoire rendant chaque token et état de composant dans les deux thèmes, afin que le système puisse être vérifié visuellement.

6. Migration (produits existants)

• Mappez les valeurs existantes au token le plus proche ; listez les valeurs qui disparaissent et pourquoi.
• Remplacez dans l'ordre : d'abord les couleurs, puis l'espacement, puis la typographie, puis les rayons et les ombres.
• Conservez une couche d'alias temporaire pour les anciens noms si la base de code est volumineuse.

Liste de vérification

• Les couches primitive, sémantique et (seulement si nécessaire) de composants sont séparées.
• Les composants référencent uniquement les tokens sémantiques.
• Les thèmes clair, sombre et haut contraste existent et chaque paire a un ratio calculé.
• L'espacement est basé sur 4 px ; une famille de rayon ; au maximum trois niveaux d'élévation.
• Les rôles typographiques couvrent de l'affichage jusqu'à la légende ; au maximum deux familles, trois graisses.
• Les tokens de mouvement incluent une règle de mouvement réduit.
• La documentation explique quand utiliser chaque token, pas seulement sa valeur.