design-system-patternspar Seth Hobson

Design System Patterns Skill.

Un skill Claude Code et Codex pour le travail de marque et de design system : systèmes de design évolutifs : tokens, infrastructure de thème, architecture de composants.

Marque et design systems
Design system

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

wshobson/agents · plugins/ui-design/skills/design-system-patterns/SKILL.mdSKILL.md

--- name: design-system-patterns description: Build scalable design systems with design tokens, theming infrastructure, and component architecture patterns. Use when creating design tokens, implementing theme switching, building component libraries, or establishing design system foundations. --- ## When to Use This Skill ## Core Capabilities ## Quick Start ## Detailed patterns and worked examples ## Best Practices

Préambule et titres de section lus depuis le fichier source le 2026-09-14 · 4 003 caractères au total

01 Ce qu'il fait

Ce que fait le skill design-system-patterns 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

Ce skill construit des systèmes de design évolutifs avec des tokens de design, une infrastructure de theming et des patterns d'architecture de composants. Il crée des hiérarchies de tokens à trois niveaux — tokens primitifs pour les valeurs brutes, tokens sémantiques pour le sens contextuel, et tokens de composant pour un usage spécifique — puis implémente le changement de thème avec des propriétés CSS personnalisées et des fournisseurs de contexte React.

Le skill gère la génération de tokens multiplateforme pour CSS, iOS et Android, établit des workflows Figma-vers-code avec Style Dictionary, et conçoit des bibliothèques de composants en utilisant des composants composés, des composants polymorphes, des variantes, des slots, et des patterns headless UI. Il détecte les préférences système comme prefers-color-scheme et les modes de mouvement réduit.

Ce qu'il produit

Fichiers de tokens multiplateforme générés pour CSS, iOS et Android
Bibliothèques de composants avec systèmes de variantes et de tailles
Documentation et directives du système de design

Voir l'exemple de prompt ↗

Fonctionnement

01
Définir les Tokens Primitifs
Créez des tokens de valeur brute pour les couleurs, les tailles et les polices, qui servent de couche fondamentale. Ce sont des valeurs littérales comme des codes hexadécimaux et des mesures en pixels.
02
Construire la Couche de Tokens Sémantiques
Référencez les tokens primitifs pour créer des tokens contextuels comme text-primary, surface-elevated et border-default, qui portent un sens plutôt qu'une description visuelle.
03
Créer des Tokens Spécifiques aux Composants
Définissez des tokens pour un usage de composant spécifique, comme button-bg et card-border, qui référencent les tokens sémantiques.

02 Trouvez celui qui vous convient

Quand utiliser le skill design-system-patterns

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

Bon choix

Création de tokens de design pour les couleurs, la typographie, l'espacement et les ombres
Implémentation du changement de thème clair/sombre avec les propriétés personnalisées CSS
Construction de systèmes de thématisation multi-marques
Architecture de bibliothèques de composants avec des API cohérentes
Établissement de flux de travail design-to-code avec les tokens Figma

Connaître les limites

Écarts entre plateformes où des tokens existent pour le web mais pas pour le mobile, ou l'inverse

03 Dans le skill

Règles que le skill design-system-patterns donne à Claude Code et Codex

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

Versionner les tokens avec Semver
Traitez les changements de tokens comme des changements d'API et utilisez le versionnage sémantique. Les modifications de tokens affectent les applications consommatrices de la même manière que les changements d'API.

04 Mettez-le en pratique

Installer design-system-patterns 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 design-system-patterns à 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/wshobson/agents --skill design-system-patterns

Forme générique de la CLI skills pour plugins/ui-design/skills/design-system-patterns/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

Build a design token system for [our SaaS dashboard] with light and dark themes. Create the three-tier token hierarchy (primitive, semantic, component) for colors, typography, and spacing. Implement CSS custom properties and a React theme context provider with system preference detection and persistent storage. Generate tokens for both web and React Native using Style Dictionary, and set up the compound component pattern for our Button and Card components with size and variant props.

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

Vérifiez le premier résultat

Avant d'accepter le résultat, recherchez ceci dans la transcription et les fichiers :

Le résultat est livré sous forme de système de design, comme le catalogue le répertorie pour ce skill.
L'agent nomme le skill design-system-patterns dans son plan ou dans sa transcription avant de produire le résultat.
Votre propre contenu, vos noms et vos chiffres apparaissent inchangés dans la sortie.

Dans OpenDesign, importez design-system-patterns 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: Seth Hobson
Repository: github.com/wshobson/agents Branche main
Fichier du skill: plugins/ui-design/skills/design-system-patterns/SKILL.md Somme de contrôle du contenu enregistrée lors de la vérification ; commit 4236bb9
License: MIT D'après LICENSE.
Étoiles du dépôt: 39 635 Instantané GitHub pris le 14/09/2026 pour l'ensemble du dépôt wshobson/agents, qui contient 18 skills dans ce catalogue. Il ne s'agit pas d'une note ou d'un compteur d'utilisation pour design-system-patterns.
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

Quand utiliser ce skillRépertorie les scénarios pour les tokens de design, le theming, les systèmes multi-marques, les bibliothèques de composants et les workflows Figma
Capacités principalesDétaille les tokens de design, l'infrastructure de theming, l'architecture des composants et les capacités du pipeline de tokens
Tokens de designDéfinit les couches de tokens primitifs, sémantiques et de composants avec conventions de nommage et génération multi-plateforme
Infrastructure de themingCouvre les propriétés CSS personnalisées, le contexte React, le changement dynamique, les préférences système et les modes d'accessibilité
Architecture des composantsDécrit les composants composés, les patterns polymorphes, les variantes, les slots, l'UI headless et les style props
Pipeline de tokensExplique la synchronisation Figma, la configuration Style Dictionary, les transformations et l'intégration CI/CD
Démarrage rapideFournit un exemple TypeScript de structure de tokens primitifs et sémantiques avec des propriétés CSS personnalisées
Bonnes pratiquesRépertorie sept règles : nommage sémantique, hiérarchie, documentation, versionnage, tests, automatisation, migration
Problèmes courantsMet en garde contre la prolifération des tokens, l'incohérence de nommage, l'absence de mode sombre, les valeurs codées en dur, les références circulaires, les écarts entre plateformes

Description du skill lui-même

Créez des systèmes de design évolutifs avec des tokens de design, une infrastructure de thématisation et des architectures de composants. À utiliser lors de la création de tokens de design, de la mise en œuvre de changements de thème, de la construction de bibliothèques de composants ou de l'établissement des fondations d'un système de design.

Description du fichier Front-matter de SKILL.md. Le fichier complet fait environ 4 003 caractères. Lire le fichier complet sur GitHub.

Motifs de système de conception

Exécutez design-system-patterns sur une vraie tâche de marque et de design-system.

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

Télécharger OpenDesign Parcourir tous les skills