Communitygithub.com

design-system-builder

Créez, étendez ou auditez un système de design pour tout projet et plateforme — jetons de design (couleur, typographie, espacement, rayon, ombre, mouvement, points de rupture), architecture des jetons (primitif → sémantique → composant), format W3C DTCG, thèmes (clair/sombre, marques, densité), sortie multiplateforme (variables CSS, Tailwind v4 @theme, React Native, Flutter, SwiftUI, Compose), conventions d'API de composants, documentation (DESIGN.md, Storybook) et gouvernance.

Qu'est-ce que design-system-builder ?

Ce skill est un assistant complet pour la création, l'extension et l'audit de systèmes de design, adapté à tout projet et plateforme. Il guide l'utilisateur à travers les étapes clés : analyse de l'existant (code, Figma, fichiers de configuration), définition de la direction esthétique, construction des fondations visuelles (couleur, typographie, espacement, forme, ombre, mouvement, mise en page), architecture des jetons en trois niveaux (primitif → sémantique → composant) avec prise en charge du format standard W3C DTCG, et génération de sorties pour de multiples plateformes (CSS, Tailwind v4, React Native, Flutter, SwiftUI, Compose, et autres). Le skill inclut des valeurs par défaut raisonnables, des références détaillées pour chaque fondation, et une liste de contrôle qualité pour garantir la cohérence, l'accessibilité (WCAG 2.2 AA) et une documentation maintenable. Il est conçu pour être utilisé dans des environnements comme Claude Code et Cursor, en s'appuyant sur des outils externes (ex: `color-theory`) pour générer les palettes automatiquement. Son approche est pragmatique : commencer petit et développer par extraction, en partant des tokens existants dans le code.

Compatible avec~Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add https://github.com/TomasValleDuran/pomos-skillzzeria/tree/HEAD/plugins/skillzzeria/skills/design-system-builder
Voir l'original→Voir toutes les compétences

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentation

Design System Builder

Un système de design est un ensemble de décisions prises une fois pour que chaque écran n'ait pas à les re-décider. Les jetons contiennent les décisions, les composants les appliquent, la documentation les explique. Adaptez l'effort au projet : une application de week-end a besoin d'un fichier de jetons de 40 lignes et d'un DESIGN.md ; un produit multi-équipe nécessite des pipelines et de la gouvernance. Commencez petit, développez par extraction.

Processus

0. Lire ce qui existe

Cherchez : fichiers tokens/theme, configuration tailwind ou blocs @theme, components.json, variables CSS, module theme/, liens Figma (utilisez le MCP Figma get_variable_defs/search_design_system s'il est connecté), DESIGN.md/.interface-design/system.md. Dans les bases de code existantes, extrayez avant d'inventer : grep des couleurs, tailles de police, espacements et rayons réellement utilisés, regroupez-les et proposez l'échelle consolidée. Montrez à l'utilisateur le mapping avant→après.

1. Définir la direction (un paragraphe)

Qui l'utilise, ce qu'il doit ressentir (en mots concrets : "dense comme un terminal de trading", "calme comme une application de lecture"), plateforme(s), contraintes de marque, densité, clair/sombre. Cela guide tous les choix d'échelle ci-dessous. Si les compétences interface-design ou frontend-design sont en jeu, elles possèdent cette étape esthétique ; ce skill transforme la direction en système.

2. Fondations (jetons)

Construisez dans cet ordre — chacun dépend du précédent :

  1. Couleur → exécutez l'outil du skill color-theory : python3 <skills-dir>/color-theory/scripts/palette.py system <brand-hex> --format tailwind|css|json (color-theory est un dossier frère de celui de ce skill). Il produit des rampes primitives + des rôles sémantiques clair/sombre vérifiés.
  2. Typographie → familles de polices (≤2, plus mono), une échelle typographique avec des rôles nommés, hauteurs de ligne, graisses, crénage. Voir references/scales.md.
  3. Espace → grille de base 4px ; échelle t-shirt ou numérique ; espacement de mise en page séparé du padding des composants.
  4. Forme → échelle de rayon (et une règle pour l'imbrication : rayon intérieur = rayon extérieur − padding), largeurs de bordure.
  5. Ombre → échelle d'ombres (clair) et étapes de luminosité de surface (sombre), couches z-index.
  6. Mouvement → durées + courbes d'accélération comme jetons (et comportement de mouvement réduit).
  7. Mise en page → points de rupture, largeurs de conteneur, colonnes de grille, zones de sécurité (mobile).
  8. Taille → hauteurs de contrôle (sm/md/lg), tailles d'icônes, cible tactile minimale.

3. Architecture des jetons

Trois niveaux — les composants ne doivent consommer que le niveau sémantique (ou composant) :

primitif   --blue-600, --space-4, --radius-2          valeurs brutes, nommées par ce qu'elles SONT
sémantique --color-accent, --space-inset-md, --radius-control   nommées par LEUR RÔLE, alias de primitives, changent par thème
composant  --button-bg, --card-padding                 optionnel ; uniquement pour les composants avec de vrais besoins de thème

Changement de thème (mode sombre, marques, densité, contraste élevé) = redirection des jetons sémantiques. Les composants ne changent jamais. Règles de nommage complètes, format DTCG, modes : references/token-architecture.md.

4. Livrer sur la/les plateforme(s)

  • Application web unique : des variables CSS écrites à la main + @theme Tailwind v4 suffisent.
  • Web + mobile, ou applications multiples : créez les jetons en JSON DTCG (une source unique), construisez avec Style Dictionary v5 ou Terrazzo pour CSS, Tailwind, TS, Swift, Kotlin/Compose, Flutter, RN. Recettes et exemples de sortie par plateforme : references/platform-outputs.md. Fichier DTCG de démarrage : assets/tokens.example.json.

5. Composants

Construisez sur des primitives accessibles (voir ui-stack-advisor). API cohérente : variant (intention visuelle), size, tone/color seulement si nécessaire, états via des attributs de données, composition plutôt que configuration. Chaque composant documente tous les états : défaut, survol, actif, focus-visible, désactivé, chargement, erreur, vide, sélectionné, lecture seule. Conventions et liste de contrôle : references/components.md.

6. Documenter et gouverner

Écrivez DESIGN.md à la racine du projet à partir de assets/DESIGN.template.md — direction, tableau des jetons, inventaire des composants, à faire/à ne pas faire, et le pourquoi des décisions. Ce fichier est ce que les sessions futures lisent pour rester cohérentes ; gardez-le court et à jour. Les systèmes plus importants ajoutent Storybook (ou Ladle/Histoire), des tests de régression visuelle, un journal des modifications avec semver, et un processus de contribution (references/components.md#governance).

Valeurs par défaut qui fonctionnent (quand l'utilisateur n'a pas de préférence)

FondationValeur par défaut
Unité de base4px ; échelle d'espacement 0, 1, 2, 4, 6, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96 px
Échelle typographique12, 14, 16 (corps), 18, 20, 24, 30, 36, 48, 60 px (≈ ratio 1,2–1,25) ; les UI produit peuvent utiliser 14px pour le corps
Hauteur de ligne1.5 corps, 1.2–1.3 titres, 1.1 affichage ; resserrez le crénage sur les grandes tailles (−0.01 à −0.03em)
Rayon0, 4, 6, 8, 12, 16, 24, complet — choisissez une personnalité : acéré (2–4), doux (8–12), arrondi (16+) et appliquez-la de manière cohérente
Contrôleshauteurs 32 / 36–40 / 44–48 px ; cibles tactiles ≥ 44pt (iOS) / 48dp (Android) / 24px min WCAG 2.2 (visez 44)
Mouvement100 / 150 / 200 / 300 / 500 ms ; ease-out cubic-bezier(0.23,1,0.32,1) pour l'entrée, ease-in-out pour le mouvement, ressorts sur mobile
Points de rupture640, 768, 1024, 1280, 1536 (Tailwind) ; préférez les requêtes de conteneur pour les composants
Ombre4–5 niveaux d'ombre ; le mode sombre utilise des surfaces plus claires + bordures subtiles à la place
Z-indexbase 0, dropdown 1000, sticky 1100, overlay 1300, modale 1400, popover 1500, toast 1600, tooltip 1700

Les valeurs par défaut sont un plancher, pas un style. La distinction vient des choix qui varient : police de caractères, teinte d'accent, température neutre, personnalité du rayon, densité et caractère du mouvement.

Barre de qualité (à vérifier avant de marquer comme terminé)

  • Aucune valeur brute dans les composants (hex, tailles de police px, espacement arbitraire) — faites un grep pour les trouver
  • Les noms sémantiques décrivent des rôles, pas des valeurs ou des teintes
  • Clair + sombre tous deux conçus et vérifiés pour le contraste (WCAG 2.2 AA)
  • Chaque composant interactif a des états visibles : focus, désactivé, chargement, erreur
  • L'échelle typographique a des rôles nommés (display, h1–h3, body, label, caption, code), pas seulement des tailles
  • Espacement cohérent : même relation → même jeton
  • Variante de mouvement réduit pour les jetons de mouvement
  • DESIGN.md rédigé et précis
  • Mobile : Dynamic Type / mise à l'échelle de la police respectée, zones de sécurité tokenisées, cibles tactiles ≥ 44/48

Références

  • references/token-architecture.md — niveaux, grammaire de nommage, format DTCG 2025.10, modes/thèmes, règles d'alias
  • references/scales.md — typographie (échelles, police fluide, appariement), espacement, rayon, ombre, mouvement, densité, points de rupture
  • references/platform-outputs.md — CSS, Tailwind v4, thème shadcn, React Native (NativeWind/Unistyles/Tamagui), Flutter, SwiftUI, Compose, pipeline Style Dictionary/Terrazzo
  • references/components.md — conventions d'API des composants, anatomie, matrice des états, composition, documentation, tests, gouvernance
  • assets/tokens.example.json — fichier DTCG de démarrage
  • assets/DESIGN.template.md — modèle DESIGN.md

Individual skills in this repo

This repo contains 3 individual skills — each has its own dedicated page.

TomasValleDuran/color-theory

Color theory and palette engineering for UI on any platform (web, iOS, Android, Flutter, React Native). Choose and derive brand palettes, build tonal ramps, tinted neutrals and status colors, map them to light/dark semantic tokens, and verify contrast (WCAG 2.2 + APCA) and color-blind safety with a bundled zero-dependency OKLCH tool. Use this whenever the user picks, generates, critiques or fixes colors — "what colors should I use", brand color, palette, color scheme, theme, dark mode colors, accent, gradient, "this looks dull/garish", contrast problems, color-blind friendliness, or turning one hex into a full system — even if they don't say "color theory".

TomasValleDuran/ui-stack-advisor

Curated, up-to-date knowledge of UI component libraries, animation libraries and building blocks (icons, charts, tables, forms, toasts, drag-and-drop, virtualization, rich text) for web (React, Next.js, Vue, Svelte, Solid, Angular) and mobile (React Native/Expo, Flutter, SwiftUI, Jetpack Compose), with a decision process for picking one. Use this whenever a project is being started or scaffolded, when the user asks "which UI library / component library / design kit should I use", compares libraries (shadcn vs MUI vs Mantine, Tamagui vs NativeWind, etc.), needs a specific widget (date picker, data table, command palette, carousel, bottom sheet, chart), wants "cool animated components", or when you are about to hand-roll a component that a mature library already solves well.

TomasValleDuran/ui-ux-playbook

The entry point for any UI/UX work on web or mobile — the end-to-end workflow (brief → direction → system → stack → build → motion → verify), industry standards and best practices (WCAG 2.2, Apple HIG, Material 3, Nielsen heuristics, Laws of UX, Core Web Vitals, forms, navigation, states, i18n), a pre-ship UI checklist, and a routing map telling you which specialized design/animation/color/library skill to load for each sub-task. Use this whenever you start or plan a frontend or mobile app, build or redesign screens, review UI/UX quality, answer "what's the best practice for X" in interface design, or when several design skills could apply and you need to decide which.

Skills associés

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community