Toolkit Système de Design UI

Ce qu'il fait

Cette compétence transforme une couleur de marque source et une préférence de style (moderne, classique ou ludique) en un système de jetons de design complet. Elle assure la cohérence visuelle d'un produit en automatisant la création d'échelles de couleurs, de grilles d'espacement et de systèmes typographiques.

Quand l'utiliser

Activez cette compétence lorsque vous devez établir un nouveau système de design à partir de zéro, créer une palette de couleurs cohérente basée sur un code hexadécimal de marque, calculer une typographie fluide pour des mises en page réactives, ou préparer la documentation technique pour la transmission aux développeurs.

Ce qui est inclus

• Scripts : design_token_generator.py pour la génération automatisée de jetons aux formats JSON, CSS et SCSS.
• Références : Guides détaillés sur la génération de jetons, l'architecture des composants, les calculs responsives et la transmission aux développeurs.
• Instructions : Flux de travail étape par étape pour générer des jetons, structurer les hiérarchies de composants (des atomes aux modèles) et calculer des rapports de contraste conformes aux normes WCAG.

Agents compatibles

Optimisé pour les agents ayant des capacités d'exécution de shell, spécifiquement Claude Code, Cursor, Codex et Gemini CLI.