Système de Design UI
Générer des jetons de design, créer des palettes de couleurs, calculer des échelles typographiques, construire des systèmes de composants, et préparer la documentation pour la remise aux développeurs.
Table des matières
- Termes déclencheurs
- Workflows
- Référence des outils
- Tableaux de référence rapide
- Base de connaissances
Termes déclencheurs
Utilisez cette compétence lorsque vous avez besoin de :
- "générer des jetons de design"
- "créer une palette de couleurs"
- "construire une échelle typographique"
- "calculer un système d'espacement"
- "créer un système de design"
- "générer des variables CSS"
- "exporter des jetons SCSS"
- "mettre en place une architecture de composants"
- "documenter une bibliothèque de composants"
- "calculer des points d'arrêt responsifs"
- "préparer une remise aux développeurs"
- "convertir une couleur de marque en palette"
- "vérifier le contraste WCAG"
- "construire un système de grille 8pt"
Clarifier d'abord
Avant de générer les jetons ou le système, clarifiez les éléments ci-dessous. Lorsqu'un élément est manquant ou vague et modifierait le résultat, demandez-le ; lorsqu'il ne le modifierait pas, utilisez une valeur par défaut raisonnable et mentionnez celle que vous avez utilisée.
- Couleur primaire de la marque (hex) : la graine pour la palette complète (détermine l'échelle de couleurs et les vérifications de contraste WCAG).
- Préréglage de style : moderne, classique ou ludique (définit les polices, le rayon des bordures et le style des ombres).
- Format de sortie et framework : CSS, SCSS ou JSON pour Tailwind/styled-components/Figma (détermine l'export et la remise aux développeurs).
Posez des questions sur les deux ou trois éléments qui comptent le plus pour cette demande, pas sur toute la liste. Si l'utilisateur souhaite un résultat immédiat, produisez-le et énoncez vos hypothèses en haut.
Workflows
Workflow 1 : Générer des jetons de design
Situation : Vous avez une couleur de marque et avez besoin d'un système complet de jetons de design.
Étapes :
-
Identifier la couleur de marque et le style
- Couleur primaire de la marque (format hexadécimal)
- Préférence de style :
modern|classic|playful
-
Générer les jetons à l'aide du script
python scripts/design_token_generator.py "#0066CC" modern json -
Examiner les catégories générées
- Couleurs : primaire, secondaire, neutre, sémantique, surface
- Typographie : fontFamily, fontSize, fontWeight, lineHeight
- Espacement : échelle basée sur la grille 8pt (0-64)
- Bordures : radius, width
- Ombres : none jusqu'à 2xl
- Animation : duration, easing
- Points d'arrêt : xs jusqu'à 2xl
-
Exporter dans le format cible
# Propriétés personnalisées CSS python scripts/design_token_generator.py "#0066CC" modern css > design-tokens.css # Variables SCSS python scripts/design_token_generator.py "#0066CC" modern scss > _design-tokens.scss # JSON pour Figma/outillage python scripts/design_token_generator.py "#0066CC" modern json > design-tokens.json -
Valider l'accessibilité
- Vérifier que le contraste des couleurs respecte WCAG AA (4.5:1 normal, 3:1 grand texte)
- Vérifier que les couleurs sémantiques ont des couleurs de contraste définies
Workflow 2 : Créer un système de composants
Situation : Vous devez structurer une bibliothèque de composants en utilisant des jetons de design.
Étapes :
-
Définir la hiérarchie des composants
- Atomes : Bouton, Champ, Icône, Étiquette, Badge
- Molécules : ChampFormulaire, BarreRecherche, Carte, ÉlémentListe
- Organismes : En-tête, PiedDePage, TableauDonnées, Modale
- Modèles : DispositionTableauBord, DispositionAuth
-
Mapper les jetons aux composants
Composant Jetons utilisés Bouton couleurs, dimensionnement, bordures, ombres, typographie Champ couleurs, dimensionnement, bordures, espacement Carte couleurs, bordures, ombres, espacement Modale couleurs, ombres, espacement, z-index, animation -
Définir les motifs de variantes
Variantes de taille :
sm : hauteur 32px, paddingX 12px, fontSize 14px md : hauteur 40px, paddingX 16px, fontSize 16px lg : hauteur 48px, paddingX 20px, fontSize 18pxVariantes de couleur :
primary : fond primary-500, texte blanc secondary : fond neutral-100, texte neutral-900 ghost : fond transparent, texte neutral-700 -
Documenter l'API du composant
- Interface des props avec types
- Options de variantes
- Gestion des états (survol, actif, focus, désactivé)
- Exigences d'accessibilité
-
Référence : Voir
references/component-architecture.md
Workflow 3 : Design responsive
Situation : Vous avez besoin de points d'arrêt, de typographie fluide ou d'espacement responsive.
Étapes :
-
Définir les points d'arrêt
Nom Largeur Cible xs 0 Petits téléphones sm 480px Grands téléphones md 640px Tablettes lg 768px Petits ordinateurs portables xl 1024px Ordinateurs de bureau 2xl 1280px Grands écrans -
Calculer la typographie fluide
Formule :
clamp(min, préféré, max)/* 16px à 24px entre les fenêtres de 320px et 1200px */ font-size: clamp(1rem, 0.5rem + 2vw, 1.5rem);Échelles pré-calculées :
--fluid-h1: clamp(2rem, 1rem + 3.6vw, 4rem); --fluid-h2: clamp(1.75rem, 1rem + 2.3vw, 3rem); --fluid-h3: clamp(1.5rem, 1rem + 1.4vw, 2.25rem); --fluid-body: clamp(1rem, 0.95rem + 0.2vw, 1.125rem); -
Configurer l'espacement responsive
Jeton Mobile Tablette Bureau --space-md 12px 16px 16px --space-lg 16px 24px 32px --space-xl 24px 32px 48px --space-section 48px 80px 120px -
Référence : Voir
references/responsive-calculations.md
Workflow 4 : Remise aux développeurs
Situation : Vous devez remettre des jetons de design à l'équipe de développement.
Étapes :
-
Exporter les jetons dans les formats requis
# Pour les projets CSS python scripts/design_token_generator.py "#0066CC" modern css # Pour les projets SCSS python scripts/design_token_generator.py "#0066CC" modern scss # Pour JavaScript/TypeScript python scripts/design_token_generator.py "#0066CC" modern json -
Préparer l'intégration du framework
React + Variables CSS :
import './design-tokens.css'; <button className="btn btn-primary">Cliquez</button>Configuration Tailwind :
const tokens = require('./design-tokens.json'); module.exports = { theme: { colors: tokens.colors, fontFamily: tokens.typography.fontFamily } };styled-components :
import tokens from './design-tokens.json'; const Button = styled.button` background: ${tokens.colors.primary['500']}; padding: ${tokens.spacing['2']} ${tokens.spacing['4']}; `; -
Synchroniser avec Figma
- Installer le plug-in Tokens Studio
- Importer design-tokens.json
- Les jetons se synchronisent automatiquement avec les styles Figma
-
Liste de vérification pour la remise
- Fichiers de jetons ajoutés au projet
- Pipeline de build configuré
- Thème/Variables CSS importés
- Bibliothèque de composants alignée
- Documentation générée
-
Référence : Voir
references/developer-handoff.md
Référence des outils
design_token_generator.py
Génère un système complet de jetons de design à partir d'une couleur de marque.
| Argument | Valeurs | Défaut | Description |
|---|---|---|---|
| brand_color | Couleur hexadécimale | #0066CC | Couleur primaire de la marque |
| style | modern, classic, playful | modern | Préréglage de style de design |
| format | json, css, scss, summary | json | Format de sortie |
Exemples :
# Générer des jetons JSON (par défaut)
python scripts/design_token_generator.py "#0066CC"
# Style classique avec sortie CSS
python scripts/design_token_generator.py "#8B4513" classic css
# Vue résumée du style ludique
python scripts/design_token_generator.py "#FF6B6B" playful summary
Catégories de sortie :
| Catégorie | Description | Valeurs clés |
|---|---|---|
| colors | Palettes de couleurs | primary, secondary, neutral, semantic, surface |
| typography | Système de polices | fontFamily, fontSize, fontWeight, lineHeight |
| spacing | Grille 8pt | Échelle 0-64, sémantique (xs-3xl) |
| sizing | Tailles de composants | container, button, input, icon |
| borders | Valeurs de bordures | radius (par style), width |
| shadows | Styles d'ombres | none jusqu'à 2xl, inner |
| animation | Jetons de mouvement | duration, easing, keyframes |
| breakpoints | Responsif | xs, sm, md, lg, xl, 2xl |
| z-index | Système de calques | base jusqu'à notification |
Tableaux de référence rapide
Génération d'échelle de couleurs
| Étape | Luminosité | Saturation | Cas d'utilisation |
|---|---|---|---|
| 50 | 95% fixe | 30% | Arrière-plans subtils |
| 100 | 95% fixe | 38% | Arrière-plans clairs |
| 200 | 95% fixe | 46% | États de survol |
| 300 | 95% fixe | 54% | Bordures |
| 400 | 95% fixe | 62% | États désactivés |
| 500 | Original | 70% | Couleur de base/par défaut |
| 600 | Original × 0.8 | 78% | Survol (foncé) |
| 700 | Original × 0.6 | 86% | États actifs |
| 800 | Original × 0.4 | 94% | Texte |
| 900 | Original × 0.2 | 100% | Titres |
Échelle typographique (ratio 1.25x)
| Taille | Valeur | Calcul |
|---|---|---|
| xs | 10px | 16 ÷ 1.25² |
| sm | 13px | 16 ÷ 1.25¹ |
| base | 16px | Base |
| lg | 20px | 16 × 1.25¹ |
| xl | 25px | 16 × 1.25² |
| 2xl | 31px | 16 × 1.25³ |
| 3xl | 39px | 16 × 1.25⁴ |
| 4xl | 49px | 16 × 1.25⁵ |
| 5xl | 61px | 16 × 1.25⁶ |
Exigences de contraste WCAG
| Niveau | Texte normal | Grand texte |
|---|---|---|
| AA | 4.5:1 | 3:1 |
| AAA | 7:1 | 4.5:1 |
Grand texte : ≥18pt régulier ou ≥14pt gras
Préréglages de style
| Aspect | Moderne | Classique | Ludique |
|---|---|---|---|
| Police sans | Inter | Helvetica | Poppins |
| Police mono | Fira Code | Courier | Source Code Pro |
| Rayon par défaut | 8px | 4px | 16px |
| Ombres | Superposées, subtiles | Couche unique | Douces, prononcées |
Base de connaissances
Guides de référence détaillés dans references/ :
| Fichier | Contenu |
|---|---|
token-generation.md | Algorithmes de couleur, espace HSV, contraste WCAG, échelles de type |
component-architecture.md | Design atomique, conventions de nommage, motifs de props |
responsive-calculations.md | Points d'arrêt, typographie fluide, systèmes de grille |
developer-handoff.md | Formats d'export, configuration framework, synchronisation Figma |
Liste de vérification de validation
Génération de jetons
- Couleur de marque fournie au format hexadécimal
- Le style correspond aux exigences du projet
- Toutes les catégories de jetons générées
- Les couleurs sémantiques incluent des valeurs de contraste
Système de composants
- Toutes les tailles implémentées (sm, md, lg)
- Toutes les variantes implémentées (primary, secondary, ghost)
- Tous les états fonctionnent (survol, actif, focus, désactivé)
- Utilise uniquement des jetons de design (pas de valeurs codées en dur)
Accessibilité
- Le contraste des couleurs respecte WCAG AA
- Les indicateurs de focus sont visibles
- Les cibles tactiles ≥ 44×44px
- Éléments HTML sémantiques utilisés
Remise aux développeurs
- Jetons exportés dans le format requis
- Intégration framework documentée
- Outil de design synchronisé
- Documentation des composants complète
Dépannage
| Problème | Cause | Solution |
|---|---|---|
| Les couleurs générées échouent au contraste WCAG | Couleur de marque trop claire ou trop saturée | Utilisez des nuances plus foncées (600+) pour le texte sur fond clair ; vérifiez avec un outil de contraste |
| L'export de jetons a des valeurs incorrectes | Mauvais argument de format ou syntaxe de couleur | Assurez-vous que la couleur hexadécimale est entre guillemets (ex. "#0066CC") ; vérifiez que le format est json, css, ou scss |
| L'échelle typographique trop grande/petite | Le ratio par défaut 1.25x ne correspond pas au design | Modifiez type_scale_ratio dans la classe DesignTokenGenerator (1.125 pour plus serré, 1.333 pour plus lâche) |
| Conflit de variables SCSS avec l'existant | Collision de noms de jetons | Préfixez tous les jetons avec l'espace de noms du projet (modifiez la fonction d'export) |
| Les outils de design affichent des couleurs différentes | Arrondi hexadécimal dans la génération d'échelle de couleurs | Utilisez l'export JSON comme source de vérité ; synchronisez avec le plug-in Tokens Studio |
| Les valeurs d'espacement ne s'alignent pas sur la grille | Espacement personnalisé mélangé à la grille 8pt | Utilisez uniquement les valeurs du système d'espacement généré ; évitez les valeurs arbitraires en pixels |
| Les jetons d'ombre semblent incorrects en mode sombre | Ombres conçues pour fonds clairs | Créez des jetons d'ombre séparés pour le mode sombre avec des valeurs d'opacité plus claires |
Critères de succès
| Critère | Cible | Comment mesurer |
|---|---|---|
| Cohérence des jetons | Zéro valeur de couleur/d'espacement codée en dur dans le codebase | Nombre de violations des règles de lint |
| Conformité WCAG AA | Tous les textes couleur respectent un rapport de contraste de 4.5:1 | Vérificateur de contraste automatisé ou audit manuel |
| Couverture des formats d'export | CSS, SCSS et JSON génèrent correctement | Exécutez le générateur avec chaque format ; validez la sortie |
| Synchronisation design-développement | <24h entre la mise à jour du jeton et le déploiement du code | Temps entre le changement Figma et la production |
| Couverture des jetons de composants | 100% des composants utilisent des jetons de design | Auditez les styles des composants pour les valeurs codées en dur |
| Cohérence typographique | Tout le texte utilise l'échelle typographique du système de design | Audit visuel sur toutes les pages |
| Comportement responsive | La typographie fluide fonctionne sur tous les points d'arrêt | Testez aux largeurs xs, sm, md, lg, xl, 2xl |
Périmètre et limitations
Dans le périmètre :
- Génération complète de jetons de design à partir d'une couleur de marque
- Génération de palettes de couleurs (primaire, secondaire, neutre, sémantique)
- Système typographique avec échelle modulaire
- Système d'espacement basé sur la grille 8pt
- Jetons de dimensionnement de composants, bordures, ombres, animations
- Export vers les propriétés personnalisées CSS, les variables SCSS et JSON
- Définitions de points d'arrêt responsifs
- Tableaux de référence de contraste WCAG
Hors périmètre :
- Génération de jetons pour le mode sombre (nécessite un mappage de palette séparé)
- Bibliothèque de design d'animation/mouvement
- Génération de système d'icônes
- Implémentation de changement de thème à l'exécution
- Intégration d'API ou de plug-in Figma (utilisez Tokens Studio)
- Tests de régression visuelle
- Conversion du design en code (utilisez Figma Dev Mode ou Locofy)
Points d'intégration
…
[tronqué pour la traduction]