Skip to main content 홈 크리에이터 khalilbenaz claude-skills-collection dev-ui-design-system-builder
dev-ui-design-system-builder Création de design systems cohérents avec tokens, composants et guidelines. Se déclenche avec "design system", "composants UI", "tokens", "style guide", "atomic design", "Figma components", "UI library", "thème", "design tokens". Also triggers on "component library".
설치로 이동 Skills Marketplace 커뮤니티가 만든 AI 스킬을 발견하고 탐색하세요.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
직접 명령은 검토 Prompt를 거치지 않습니다. 실행하기 전에 소스를 확인하세요.
npx skills add https://github.com/khalilbenaz/claude-skills-collection --skill dev-ui-design-system-builder명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.
로컬 사본을 원하시나요? SkillsMP에서 현재 제공할 수 있는 파일을 다운로드하세요.
Zip 다운로드 다운로드 중... 이 저장소의 다른 Skills Guide du protocole Agent-to-Agent (A2A) de Google pour l'interopérabilité entre agents IA — découverte, communication et collaboration inter-agents, avec exemples de code, critères de décision et pièges à éviter. Se déclenche avec "A2A", "agent-to-agent", "protocole A2A", "Google A2A", "interopérabilité agents". Also triggers on "agent-to-agent protocol", "agent interoperability", "connect two agents".
Observabilité complète pour agents IA — distributed tracing, métriques custom, log correlation et dashboards de supervision. Se déclenche avec "observabilité agent", "tracing agent", "métriques agent", "agent observability", "OpenTelemetry agent". Also triggers on "trace my agent", "LLM metrics", "agent dashboards".
Sous-agent spécialisé dans les appels API REST/GraphQL avec retry, auth et transformation de données. Se déclenche avec "sous-agent API", "API caller agent", "agent qui appelle une API", "REST agent", "HTTP agent", "API integration subagent", "external API agent". Also triggers on "subagent that calls an API", "API calling agent", "agent HTTP requests".
name dev-ui-design-system-builder description Création de design systems cohérents avec tokens, composants et guidelines. Se déclenche avec "design system", "composants UI", "tokens", "style guide", "atomic design", "Figma components", "UI library", "thème", "design tokens". Also triggers on "component library".
UI Design System Builder
Étapes du workflow
1. Audit de l'existant
Avant de créer quoi que ce soit, inventorier :
- Compter les valeurs de couleur uniques dans le CSS (grep -r "color:" src/ | sort -u)
- Lister les font-size utilisées
- Identifier les composants Button/Card/Modal dupliqués entre équipes
- Mesurer l'écart design (Figma) ↔ implémentation (DOM)
Critère de go/no-go : si > 5 composants identiques avec des styles différents coexistent → design system prioritaire. Sinon, un simple tokens file suffit peut-être.
2. Design Tokens — single source of truth
Définir les tokens en JSON (style-dictionary) ou en CSS custom properties.
Structure recommandée (style-dictionary 4.x) :
{
"color" : {
"brand" : { "primary" : { "value" : "#1A73E8" } } ,
"neutral" : {
"100"
:
{
"value"
:
"#F5F5F5"
}
,
"900"
:
{
"value"
:
"#1A1A1A"
}
}
,
"semantic"
:
{
"success"
:
{
"value"
:
"{color.green.500}"
}
,
"error"
:
{
"value"
:
"{color.red.600}"
}
}
}
,
"spacing"
:
{
"xs"
:
{
"value"
:
"4px"
}
,
"sm"
:
{
"value"
:
"8px"
}
,
"md"
:
{
"value"
:
"16px"
}
,
"lg"
:
{
"value"
:
"24px"
}
,
"xl"
:
{
"value"
:
"32px"
}
}
,
"typography"
:
{
"scale"
:
{
"h1"
:
{
"value"
:
"2.25rem"
}
,
"body"
:
{
"value"
:
"1rem"
}
}
,
"weight"
:
{
"regular"
:
{
"value"
:
400
}
,
"semibold"
:
{
"value"
:
600
}
}
}
,
"radius"
:
{
"sm"
:
{
"value"
:
"4px"
}
,
"md"
:
{
"value"
:
"8px"
}
,
"full"
:
{
"value"
:
"9999px"
}
}
}
Build via style-dictionary pour générer CSS, JS, iOS Swift, Android XML en parallèle :
npx style-dictionary build --config sd.config.json
3. Palette de couleurs
Texte normal sur fond : ratio ≥ 4.5:1 (AA) ou ≥ 7:1 (AAA)
Texte large (≥18px bold) : ratio ≥ 3:1
Composants UI et icônes : ratio ≥ 3:1
npx @adobe/leonardo-contrast-colors --bg "#FFFFFF" --fg "#1A73E8"
Primitifs (50–950 pour chaque teinte)
Alias sémantiques (--color-text-primary, --color-surface-danger)
Dark mode via @media (prefers-color-scheme: dark) OU data-attribute [data-theme="dark"]
4. Système typographique Type scale modulaire (ratio 1.25 — Major Third) :
Token rem px text-xs0.64 ~10 text-sm0.8 ~13 text-base1.0 16 text-lg1.25 20 text-xl1.563 25 text-2xl1.953 31 text-3xl2.441 39
Line-height : 1.5 pour le corps, 1.2 pour les titres
Toujours définir les tailles en rem (jamais px directement dans les tokens)
Limiter à 2 familles max (display + body)
5. Composants atomiques Pour chaque composant, livrer : props API + variants + états + accessibilité .
interface ButtonProps {
variant ?: 'primary' | 'secondary' | 'ghost' | 'destructive' ;
size ?: 'sm' | 'md' | 'lg' ;
loading ?: boolean ;
disabled ?: boolean ;
leftIcon ?: React .ReactNode ;
onClick ?: () => void ;
children : React .ReactNode ;
}
Composants atomiques prioritaires :
Button, Input, Checkbox, Radio, Badge, Avatar, Icon, Divider, Spinner, Tag
6. Composants moléculaires Assembler les atomiques. Critère : un composant moléculaire contient ≥ 2 atomiques et a sa propre logique d'état.
Priorité par fréquence d'usage :
Card (header + body + footer)
Modal / Dialog (focus trap + aria-modal)
Toast / Snackbar (auto-dismiss, variants success/error)
Dropdown / Select (virtualisé si > 100 options)
DataTable (sort, filter, pagination)
Form (validation, error states, accessible labels)
7. Documentation — Storybook npx storybook@latest init
Structure d'une story minimale :
export default {
title : 'Atoms/Button' ,
component : Button ,
argTypes : { variant : { control : 'select' } },
};
export const AllVariants = (<div style ={{ display: 'flex ', gap: '8px ' }}>
{['primary','secondary','ghost','destructive'].map(v => (
<Button key ={v} variant ={v as any }> {v}</Button >
))}
</div > Activer @storybook/addon-a11y pour les audits d'accessibilité inline.
8. Intégration Tailwind / CSS Variables Option A — Tailwind config depuis tokens :
module .exports = {
theme : {
colors : require ('./tokens/colors.json' ),
spacing : require ('./tokens/spacing.json' ),
borderRadius : require ('./tokens/radius.json' ),
},
};
Option B — CSS custom properties (framework-agnostic) :
:root {
--color-primary : #1A73E8 ;
--spacing-md : 16px ;
--radius-md : 8px ;
--font-size-base : 1rem ;
}
9. Versioning et gouvernance
npm version minor -m "feat(button): add loading state"
Maintenir un CHANGELOG.md par composant
Migration guides pour chaque MAJOR
Figma library versionnée avec auto-sync via Tokens Studio plugin
Garde-fous — Anti-patterns Anti-pattern Conséquence Correctif Valeurs en dur (color: #1A73E8 dans un composant) Impossible de theming Toujours passer par un token Trop de variants dès le début Complexity overhead Commencer avec 3 variants max, ajouter sur usage réel Composants trop couplés (Card qui contient une Table) Impossible à réutiliser Composer via props/slots Aucun test d'accessibilité Non-conformité WCAG Ajouter axe-core dans les tests CI Design tokens sans owner Dérive silencieuse Désigner un DX/Design Lead responsable Dark mode ajouté après coup Refactoring massif Planifier les alias sémantiques dès le départ Storybook non maintenu Décalage doc ↔ réalité PR bloquante si story manquante
Références 2025-2026
Radix UI + shadcn/ui : composants headless + copier-coller, approche recommandée pour ReactStyle Dictionary 4.x : génération multi-plateforme depuis un JSON de tokensTokens Studio (Figma plugin) : sync bidirectionnel Figma ↔ repo GitStorybook 8.x : test visuel, a11y, interaction testing intégrésWCAG 2.2 (2023) : nouveaux critères focus appearance, target size minimum 24×24px
Communication Rules — MANDATORY
Ultra-concise. No filler, no preamble, no pleasantries.
Never say "happy to help", "sure!", "great question", "let me", or similar.
Tool first, talk second. Act before explaining.
Result first. Lead with outcome, not process.
Stop when done. No summary, no recap, no trailing commentary.
No politeness wrappers. Direct and blunt.
Minimum words. If one word works, do not use ten.
No unsolicited explanations.
No emoji unless asked.
