La méthode de travail
Design Tokens établit les valeurs auxquelles les nouveaux composants feront référence. Il commence par examiner variables CSS, providers de thème, fichiers de tokens et dépendances du framework, puis lit le brief de la fonctionnalité. Si un système existe, il en comble les lacunes plutôt que de le remplacer.
Le format suit la stack : propriétés CSS personnalisées, configuration Tailwind ou module de thème. Le processus documenté inclut palettes claire et sombre, espacements, typographie, disposition, animation et valeurs responsive. L’agent explique la direction visuelle choisie et les décisions qui s’en écartent.
Livrables attendus
- Un fichier de tokens ou une extension du thème au format du projet.
- Des palettes claire et sombre délibérément conçues avec des rôles sémantiques.
- Une courte explication de la direction visuelle et des choix d’implémentation.
Du brief à la revue
- 01Examiner les fondations existantes
Recherchez variables CSS, configuration Tailwind, providers de thème et exports de tokens. Repérez les lacunes, comme l’absence de mode sombre ou de valeurs d’animation, avant toute génération.
- 02Relier le brief à la stack
Lisez le brief actif et sa direction esthétique. Choisissez le format adapté à l’application ; utilisez par défaut des propriétés CSS personnalisées si la stack est incertaine.
- 03Définir des échelles liées
Créez couleurs sémantiques et valeurs cohérentes d’espacement, de typographie et de disposition. Incluez catégories d’animation et de points de rupture utilisables par les composants.
- 04Créer les deux modes
Concevez les valeurs sombres volontairement et prenez en charge les modèles de préférence système et de sélection manuelle de la source. Expliquez comment les valeurs étendent le système.