Que fait ui-design-system ?
Kit de système de conception UI pour Senior UI Designer, incluant la génération de jetons de design, la documentation de composants, les calculs de design responsive et les outils de transfert aux développeurs. Utilisez-le pour créer des systèmes de design, maintenir une cohérence visuelle et faciliter la collaboration design-développement.
Fonctionnalités
- Génération de jetons de design : Automatise la création de jetons pour les couleurs, la typographie, les espacements et les ombres.
- Documentation de composants : Génère une documentation au format Markdown prête pour Storybook ou Docusaurus.
- Calculs pour design responsive : Calcule les grilles, les points de rupture et les ratios de mise à l'échelle.
- Boîte à outils de transfert développeur : Extrait les spécifications et exporte du code (CSS, Tailwind).
Utilisation
- Jetons de design : Fournissez un fichier JSON de jetons Figma ou Tailwind, et le skill génère une configuration normalisée.
- Documentation des composants : Décrivez un composant (ex.
Bouton,Carte), et le skill produit un fichier.stories.mdxou.mdx. - Design responsive : Entrez la largeur de la maquette (ex. 1440 px) et le nombre de colonnes de la grille ; le skill calcule la gouttière, les marges et les points de rupture.
- Transfert : Le skill compile le tout en un résumé prêt pour le développeur, incluant les classes Tailwind et les extraits CSS.
Exemples
# Générer des jetons de design à partir d'un fichier Figma tokens
skill davila7/ui-design-system generate-tokens --input tokens.json
# Documenter un composant
skill davila7/ui-design-system document-component --name "Bouton" --props "variante, taille, desactive"
Configuration
Le skill utilise par défaut le répertoire courant. Pour les personnalisations (ex. motif de jeton personnalisé), ajustez le fichier .skillrc à la racine de votre projet.
Intégration
Ce skill s'intègre de manière transparente dans les assistants IA prenant en charge les skills (Claude Code, Cursor). Il suit le protocole de définition de skill standard et ne nécessite pas de configuration externe.
Contribution
Les contributions visant à étendre la prise en charge des formats de jetons ou à améliorer les modèles de documentation sont les bienvenues. Forkez le dépôt et soumettez une pull request.