💻 Développement

ui-design-system-builder

Création de design systems cohérents avec tokens, composants et guidelines.

⚡ Installation & lancement en 1 commande

Copiez-collez dans votre terminal : le skill s'installe dans ~/.claude/skills et Claude Code se lance directement dessus.

macOS / Linux
curl -fsSL https://raw.githubusercontent.com/khalilbenaz/claude-skills-collection/main/install.sh | sh -s -- ui-design-system-builder --launch
Windows (PowerShell)
iex "& { $(iwr -useb https://raw.githubusercontent.com/khalilbenaz/claude-skills-collection/main/install.ps1) } ui-design-system-builder -Launch"

🚀 Déjà installé ?

claude "/ui-design-system-builder"

Ou tapez /ui-design-system-builder dans une session Claude Code, ou décrivez simplement votre besoin — le skill se déclenche automatiquement via le skill-router.

🔑 Déclencheurs automatiques

Le skill s'active automatiquement quand votre demande contient :

design systemcomposants UItokensstyle guideatomic designFigma componentsUI librarythèmedesign tokens

📦 Installation manuelle

git clone https://github.com/khalilbenaz/claude-skills-collection.git cp -r claude-skills-collection/dev-skills/ui-design-system-builder ~/.claude/skills/

Source : dev-skills/ui-design-system-builder

📖 Manuel

UI Design System Builder

Workflow

  1. Audit de l'existant : analyser les interfaces actuelles pour identifier les inconsistances visuelles, les composants dupliqués ou contradictoires, les styles orphelins, et mesurer l'écart entre ce qui est designé et ce qui est implémenté.
  2. Fondations — Design Tokens : définir les tokens de base (couleurs primitives, typographie, spacing scale en multiples de 4px/8px, shadows, border-radius, breakpoints, z-index, transitions) comme single source of truth.
  3. Palette de couleurs : construire la palette complète — couleurs primaires, secondaires, neutrals (grays), sémantiques (success/warning/error/info), surfaces et backgrounds, en garantissant les ratios de contraste WCAG AA/AAA et en prévoyant le dark mode.
  4. Système typographique : établir la type scale (H1–H6, body, caption, label), sélectionner les font families (display + text), définir les weights, line-heights, letter-spacings, et s'assurer de la lisibilité responsive sur tous les breakpoints.
  5. Composants atomiques : créer Button (variants : primary, secondary, ghost, destructive ; states : default, hover, active, disabled, loading), Input, Badge, Avatar, Icon, Divider, Spinner — chacun avec props, variants et tous les états documentés.
  6. Composants moléculaires : assembler Card, Modal, Dropdown, Toast/Snackbar, Table, Form (avec validation), Navigation (header, sidebar, breadcrumb), Tabs — en respectant la composition des composants atomiques.
  7. Documentation et guidelines : rédiger les règles d'usage (do/don't illustrés), les spacing rules, les copy guidelines (tone, capitalization, longueur), et les accessibility requirements pour chaque composant.
  8. Implémentation : livrer la Figma library (avec variables/styles liés), Storybook pour les développeurs, les CSS custom properties ou le Tailwind config généré depuis les tokens, et un versioning sémantique (changelog, migration guides).

Règles