ui-design-systempar Alireza Rezvani

UI Design System Skill.

Un skill Claude Code et Codex pour le travail de marque et de design system : tokens de design, documentation de composants, calculs responsive et transmission aux développeurs.

Marque et design systems
Design system

Télécharger OpenDesign Voir le guide d'utilisation

alirezarezvani/claude-skills · product-team/skills/ui-design-system/SKILL.mdSKILL.md

--- name: ui-design-system description: UI design system toolkit for Senior UI Designer including design token generation, component documentation, responsive design calculations, and developer handoff tools. Use when creating design systems, generating design tokens, maintaining visual consistency, or facilitating design-dev collaboration and developer handoff. --- ## Trigger Terms ## Workflows ## Quick Reference Tables ## Knowledge Base ## Validation Checklist

En-tête et titres de section lus depuis le fichier source le 14/09/2026 · 10 759 caractères au total

01 Ce qu'il fait

Ce que fait le skill ui-design-system dans Claude Code et Codex

Résumé, workflow et sorties, tous lus dans le SKILL.md du skill.

D'après le SKILL.mdLu le 14-09-2026 · pas une exécution enregistrée

Dans les termes du Skill

Une boîte à outils de design system pour transformer une couleur de marque en un ensemble complet de tokens. design_token_generator.py prend une couleur hexadécimale ainsi qu'un préréglage modern, classic ou playful et retourne des couleurs, une typographie, un espacement en 8pt, des dimensions, des bordures, des ombres, des animations, des breakpoints et des niveaux de z-index au format json, css, scss ou en résumé.

Quatre workflows couvrent ensuite l'architecture des composants, des atomes aux templates, les breakpoints responsives avec un type fluide clamp(), la validation du contraste WCAG, ainsi que la transmission aux développeurs sous forme de variables CSS React, de configuration Tailwind ou de styled-components, en plus de la synchronisation Figma via Tokens Studio. Il s'adresse aux designers UI seniors qui doivent documenter les tokens et composants pour une équipe de développement.

Ce qu'il produit

Documentation de l'API des composants couvrant les props, les options de variantes, les états et les exigences d'accessibilité.
Extraits d'intégration pour React avec des variables CSS, une configuration de thème Tailwind et des styled-components.
Tokens de couleurs sémantiques qui portent leurs propres couleurs de contraste.

Voir l'exemple de prompt ↗

Fonctionnement

01
Corriger la Couleur de Marque
Le workflow commence par identifier la couleur primaire de la marque, que le fichier exige au format hexadécimal, puisque chaque catégorie générée en découle.
02
Exécuter le Générateur de Tokens
Un seul appel de script produit tout le système : couleur, préréglage de style et format de sortie sont les trois arguments qu'il accepte.
03
Associer les Tokens à une Hiérarchie de Composants
Les composants sont organisés en atomes, molécules, organismes et templates, puis chacun est relié aux groupes de tokens qu'il consomme.
04
Définir les Points de Rupture et la Typographie Fluide
Six points de rupture vont de xs à 2xl, et la typographie fluide est exprimée avec une formule clamp entre une taille minimale et maximale.
05
Intégrer les Tokens dans le Code
Le workflow de remise montre le fichier de tokens importé directement, un thème Tailwind construit à partir du JSON, et un thème styled-components lisant les clés de tokens.
06
Synchroniser Figma et Valider
Les tokens sont intégrés dans Figma via le plugin Tokens Studio, et la checklist de remise confirme que le pipeline, la bibliothèque de composants et la documentation sont terminés.

02 Trouvez celui qui vous convient

Quand utiliser la skill ui-design-system

Utilisez le skill ui-design-system dans Claude Code ou Codex lorsque le travail concerne la marque et les systèmes de design de ce type. L'adéquation et les limites ci-dessous sont tirées du propre fichier du skill.

Bon choix

Vous avez une seule couleur de marque et avez besoin d'un système de tokens complet dérivé de celle-ci.
Vous structurez une bibliothèque de composants et souhaitez que les tokens soient associés aux atomes, molécules, organismes et templates.
Vous avez besoin de points de rupture, d'échelles typographiques fluides ou de valeurs d'espacement responsive calculées pour vous.
Vous vous préparez à remettre un ensemble de tokens finalisé à l'équipe de développement.

Connaître les limites

Les préréglages de style ne sont pas une refonte visuelle profonde : le choix du thème modifie principalement les familles de polices, le rayon par défaut et le caractère des ombres, par exemple des coins arrondis de 8px pour le style moderne contre 4px pour le classique.

Quoi fournir

Un préréglage de styleChoisissez l'une des trois directions, moderne, classique ou ludique, car le préréglage modifie les familles de polices, le rayon des coins et le traitement des ombres dans l'ensemble généré.
Le format de sortieIndiquez quel format le projet destinataire consomme : json, css, scss ou la vue de synthèse, car cela détermine ce que produit la remise.

03 Dans le skill

Règles que le Skill ui-design-system Donne à Claude Code et Codex

7 instructions concrètes, valeurs par défaut et limites que le SKILL.md fixe pour l'agent — la partie du fichier qui change le résultat.

Couleur de Marque par Défaut
Lorsqu'aucune couleur n'est passée, le générateur revient à #0066CC comme couleur de marque principale, si bien que la sortie s'affiche encore sans argument hexadécimal.
L'Espacement Suit une Grille de 8pt
Les tokens d'espacement suivent une échelle basée sur une grille de 8pt allant de 0 à 64, avec des alias sémantiques superposés aux paliers numériques.
Aucune Valeur Codée en Dur
Les implémentations de composants doivent référencer uniquement les tokens de design ; les valeurs littérales en pixels ou en hexadécimal dans les composants sont considérées comme un échec de vérification.
Chaque Variante est Livrée
Les composants doivent implémenter l'ensemble complet des variantes, primary, secondary et ghost, plutôt qu'un sous-ensemble.
Les variantes de taille ont des dimensions fixes
La taille small est définie avec une hauteur de 32px, un padding horizontal de 12px et une taille de police de 14px, les tailles md et lg étant mises à l'échelle à partir de là.
Le contraste doit respecter la norme WCAG AA
Les couleurs générées sont validées à 4,5:1 pour le texte normal et 3:1 pour le grand texte, les couleurs sémantiques devant définir des valeurs de contraste.
Les zones tactiles restent suffisamment grandes
Les éléments interactifs doivent atteindre une zone tactile minimale de 44 par 44 pixels dans la checklist d'accessibilité.

04 Mettez-le en pratique

Installer ui-design-system dans Claude Code ou Codex

Une commande npx skills add, puis une première tâche dans votre agent et une checklist pour le résultat.

Ajouter ui-design-system à Claude Code, Codex ou votre agent

Exécutez-la dans votre projet ; l'installateur demande à quel agent l'ajouter.

Terminal

npx skills add https://github.com/alirezarezvani/claude-skills --skill ui-design-system

Forme générique de la CLI skills pour product-team/skills/ui-design-system/SKILL.md ; le dépôt peut documenter son propre chemin.

Donnez au Skill une première tâche de brand et de design-system

Rédigé dans les termes propres du skill ; remplacez les parties entre crochets par votre contenu.

Starter prompt

We have settled on [#0066CC] as the brand primary and I need a complete token set for our SCSS codebase, exported as variables we can import. Please generate the tokens in the classic style, document the Button, Input and Card component APIs with their variants and states, and check that the semantic colors clear WCAG AA before we hand off to the developers.

Source : rédigé à partir du SKILL.md, dans les termes propres du skill.

Vérifiez le premier résultat

Ce que le SKILL.md lui-même présente comme un résultat correct :

Confirmer que chaque catégorie de token a bien été générée plutôt qu'un ensemble partiel.
Vérifier que les états hover, active, focus et disabled fonctionnent réellement sur chaque composant.
Vérifier que les indicateurs de focus sont visibles et que des éléments HTML sémantiques sont utilisés.
S'assurer que l'outil de design a bien été synchronisé avant de considérer le handoff terminé.
Confirmer qu'un pipeline de build est configuré afin que les tokens exportés parviennent au code.

Dans OpenDesign, importez ui-design-system depuis son lien SKILL.md : Plugins → Add → Skill → Import from link, puis sélectionnez-le dans la barre supérieure.

Télécharger OpenDesign Lire le démarrage rapide

05 Open source, traçable

Source, licence et vérification

D'où proviennent les faits de cette page et quand ils ont été vérifiés pour la dernière fois.

Author: Alireza Rezvani
Repository: github.com/alirezarezvani/claude-skills Branche main
Fichier du skill: product-team/skills/ui-design-system/SKILL.md Somme de contrôle du contenu enregistrée lors de la vérification ; commit 19392f7
License: MIT D'après LICENSE.
Étoiles du dépôt: 25 934 Instantané GitHub pris le 14-09-2026 pour l'ensemble du dépôt alirezarezvani/claude-skills, qui contient 5 skills dans ce catalogue. Ce n'est pas une note ni un compteur d'utilisation pour ui-design-system.
Vérifié par OpenDesign: 2026-09-14 Le fichier source, le chemin, le texte de licence et le nombre d'étoiles ont été vérifiés. Non intégré dans OpenDesign main (vérifié le 2026-08-28) ; aucune exécution en conditions réelles n'a été enregistrée sur cette page.

Dans le SKILL.md

Termes déclencheursDes phrases entre guillemets telles que generate design tokens qui doivent orienter une requête vers ce skill.
WorkflowsQuatre workflows numérotés : génération de tokens, système de composants, design responsive, handoff développeur.
Référence des outilsArguments, valeurs par défaut et catégories de sortie de design_token_generator.py, avec des exemples d'appels.
Tableaux de référence rapideÉtapes de l'échelle de couleurs, échelle typographique de 1,25, niveaux WCAG et différences entre les préréglages de style.
Base de connaissancesQuatre guides de référence : token-generation, component-architecture, responsive-calculations, developer-handoff.
Checklist de validationListes à cocher pour la génération de tokens, le système de composants, l'accessibilité et le handoff développeur.

Description du skill lui-même

« Boîte à outils de système de design UI pour Senior UI Designer incluant la génération de tokens de design, la documentation de composants, les calculs de design responsive et les outils de passation développeur. À utiliser lors de la création de systèmes de design, de la génération de tokens de design, du maintien de la cohérence visuelle ou de la facilitation de la collaboration design-dev et de la passation développeur. »

Description front-matter de SKILL.md. Le fichier complet fait environ 10 759 caractères. Lire le fichier complet sur GitHub.

06 Avant d'installer

Questions sur le skill ui-design-system

Les réponses proviennent du SKILL.md tel que lu le 2026-09-14, et non d'une exécution enregistrée.

De quoi ai-je besoin pour exécuter le générateur ?

Une couleur de marque hexadécimale et un choix de style, passés directement en ligne de commande avec le format de sortie. Le fichier montre des appels comme une palette classique avec sortie CSS, donc rien d'autre n'a besoin d'être configuré au préalable.

Quels formats de sortie puis-je obtenir ?

JSON est le format par défaut, et le même script écrit des propriétés CSS personnalisées, des variables SCSS ou une vue récapitulative. Les exemples redirigent la sortie SCSS vers un partial afin qu'il puisse être importé directement.

Comment fonctionne la synchronisation avec Figma ?

Vous installez le plugin Tokens Studio et importez le JSON généré, après quoi les tokens se synchronisent automatiquement avec les styles Figma. Ce même workflow de transmission couvre aussi l'intégration React, Tailwind et styled-components.

À quel niveau de contraste le travail est-il tenu ?

Le tableau de référence définit à la fois AA et AAA : AAA exige 7:1 pour le texte normal et 4,5:1 pour le grand texte, tandis que AA vise plus légèrement 4,5:1 et 3:1. Le grand texte désigne au moins 18pt en régulier ou 14pt en gras.

UI Design System

Exécuter ui-design-system sur une vraie marque et une tâche de travail design-system.

Téléchargez OpenDesign, importez ui-design-system depuis son lien SKILL.md, collez l'invite ci-dessus et lisez le plan avant le résultat.

Télécharger OpenDesign Parcourir tous les skills