design-systempar Anthropic

Design System Skill.

Un skill Claude Code et Codex pour le travail de marque et de design système : audite, documente ou étend un design système existant.

Marque et design systems
Design system

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

anthropics/knowledge-work-plugins · design/skills/design-system/SKILL.mdSKILL.md

--- name: design-system description: Audit, document, or extend your design system. Use when checking for naming inconsistencies or hardcoded values across components, writing documentation for a component's variants, states, and accessibility notes, or designing a new pattern that fits the existing system. --- ## Usage ## Components of a Design System ## Principles ## Output — Audit ## Design System Audit ## Output — Document

Entête et titres de section lus depuis le fichier source le 14/09/2026 · 5 552 caractères au total

01 Ce qu'il fait

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

Un skill de commande slash pour travailler sur un design system existant selon trois modes : audit, document ou extend. La passe d'audit rapporte la cohérence du nommage, la couverture des tokens et l'exhaustivité des composants, et note le système sur 100. Le mode document produit une spécification de composant avec description, variantes, props, états, accessibilité et bonnes/mauvaises pratiques.

Le mode extend propose un nouveau composant ou pattern en le comparant à ceux existants dans le système, en listant les tokens qu'il utiliserait et les questions ouvertes qu'il soulève. Il couvre les design tokens, les composants et les patterns, et peut accéder à un outil de design ou une base de connaissances lorsque ceux-ci sont connectés. Les lecteurs sont des designers et développeurs qui maintiennent la cohérence d'un système.

Ce qu'il produit

Un rapport d'audit de design system se terminant par des actions prioritaires classées
Documentation de composant avec un tableau de props indiquant propriété, type, valeur par défaut et description
Une nouvelle proposition de composant commençant par le problème qu'elle résout

Voir l'exemple de prompt ↗

Fonctionnement

01
Choisir le mode à partir de l'argument
La commande prend un mode ainsi qu'une cible : auditer l'ensemble du système, ou faire passer un seul composant ou pattern par document ou extend.
02
Exécuter l'audit selon trois axes
L'audit vérifie la cohérence du nommage, la couverture des tokens comptée par rapport aux valeurs codées en dur, et le degré d'exhaustivité de chaque composant, puis nomme les actions prioritaires.
03
Rédiger la spécification du composant
Le mode document remplit un modèle comprenant description, variantes, props avec types et valeurs par défaut, états, accessibilité et un tableau de bonnes/mauvaises pratiques.
04
Proposer l'extension par rapport à l'existant
Le mode extend compare la nouvelle idée aux composants apparentés, puis propose une API, des variantes, des états et les tokens exacts que le composant consommerait.
05
Puiser dans les outils connectés lorsqu'ils sont présents
Avec un outil de design connecté, le skill peut extraire les propriétés des composants et la structure des calques pour la documentation, et vérifier le nommage, les variantes et l'usage des tokens dans Figma.

02 Trouvez celui qui vous convient

Quand utiliser le Skill design-system

Utilisez le skill design-system 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 fichier du skill.

Bon choix

Vous suspectez que des incohérences de nommage ou des valeurs codées en dur se sont glissées dans vos composants.
Vous avez besoin d'une documentation pour un composant couvrant ses variantes, états et notes d'accessibilité.
Vous concevez un nouveau composant ou pattern et souhaitez qu'il s'intègre au système que vous avez déjà.
Vous souhaitez que le skill vérifie ce qui est déjà documenté avant d'en écrire davantage, en utilisant une base de connaissances connectée.

Connaître les limites

Des composants ponctuels qui dupliquent ce que le système fournit déjà vont à l'encontre de l'intérêt même du système.
Une proposition d'extension ne tranche pas les décisions difficiles : elle peut se conclure par des décisions qui nécessitent encore une revue de design.
La lecture directe des composants depuis Figma n'a lieu que lorsqu'un connecteur d'outil de design est disponible.

Quoi fournir

Le mode et sa cibleDonnez à la commande un mode ainsi que le composant, le motif ou le système auquel elle s'applique, afin que le skill sache quel modèle remplir.
Vos composants existants pour comparaisonUne proposition d'extension compare les composants apparentés sur ce qu'ils partagent et pourquoi cela ne suffit pas, il faut donc connaître ces composants voisins.

03 Dans le skill

Règles que le skill 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.

Signaler les écarts de nommage par rapport à une norme
Les incohérences de nommage ne sont pas simplement signalées : chaque ligne nomme les composants concernés et la norme à adopter.
Compter les valeurs codées en dur plutôt que de les estimer à l'œil
La couverture des tokens met en regard un nombre défini et le nombre d'occurrences trouvées, comme des valeurs hexadécimales codées en dur, des valeurs d'espacement arbitraires, ou des polices et tailles personnalisées.
Tout documenter
Si un composant, une variante ou une règle n'est pas écrit, le skill le traite comme inexistant.
Rester flexible dans les contraintes
Les composants sont conçus pour être composables plutôt que rigides, afin que l'ensemble de motifs s'adapte sans être abandonné.
Versionner les changements incompatibles
Tout changement incompatible doit s'accompagner d'un chemin de migration, pas seulement d'un composant de remplacement.
Commencer par un audit
Le point d'entrée par défaut est un audit de l'état du système avant de documenter ou d'étendre quoi que ce soit.
La couverture prime sur la perfection
Documenter 80 % des composants est considéré comme préférable à en documenter 10 parfaitement.

04 Mettez-le en pratique

Installer 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 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/anthropics/knowledge-work-plugins --skill design-system

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

Run a full audit of our [product] design system and score it. Flag inconsistent naming across the [Button, Input, Modal] components and count every hardcoded hex, arbitrary spacing value and custom font size you find, then tell me the three most impactful fixes to make first.

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 :

Lisez le résumé de l'audit : composants examinés, problèmes trouvés et un score sur 100.
Vérifiez le tableau d'exhaustivité par composant, car les états, les variantes et la documentation sont notés séparément.
Vérifiez que le bloc d'accessibilité est rempli pour le composant documenté.
Sur une extension, vérifiez que le tableau des états couvre les comportements par défaut, au survol et désactivé avant de passer en revue.

Dans OpenDesign, importez 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: Anthropic
Repository: github.com/anthropics/knowledge-work-plugins Branche main
Fichier du skill: design/skills/design-system/SKILL.md Somme de contrôle du contenu enregistrée lors de la vérification ; commit 8f877b6
License: Apache-2.0 D'après LICENSE.
Étoiles du dépôt: 24 012 Instantané GitHub pris le 2026-09-14 pour l'ensemble du dépôt anthropics/knowledge-work-plugins, qui contient 7 skills dans ce catalogue. Ce n'est pas une note ni un décompte d'utilisation pour 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

UsageLes trois formes d'invocation : auditer le système, documenter un composant, étendre un pattern.
Composants d'un design systemDéfinit les tokens de design, les composants et les patterns avec leurs sous-parties, états et enjeux ARIA.
PrincipesLa cohérence avant la créativité, la flexibilité dans des contraintes, tout documenter, versionner et migrer.
Résultat — AuditModèle d'audit : score récapitulatif, cohérence de nommage, couverture des tokens, exhaustivité, actions prioritaires.
Résultat — DocumentModèle de composant : description, variantes, props, états, accessibilité, bonnes et mauvaises pratiques, exemple de code.
Résultat — ExtendModèle de nouveau composant : problème, patterns associés, API, variantes, états, tokens, questions ouvertes.
Si connecteurs disponiblesÉtapes optionnelles d'outil de design et de base de connaissances pour auditer, documenter et publier.
AstucesCommencez par un audit, documentez au fur et à mesure que vous construisez, privilégiez la couverture à la perfection.

Description du skill lui-même

« Auditez, documentez ou étendez votre design system. À utiliser lors de la vérification des incohérences de nommage ou des valeurs codées en dur entre les composants, de la rédaction de documentation pour les variantes, états et notes d'accessibilité d'un composant, ou de la conception d'un nouveau pattern qui s'intègre au système existant. »

Description en en-tête de SKILL.md. Le fichier complet fait environ 5 552 caractères. Lire le fichier complet sur GitHub.

06 Avant d'installer

Questions sur le skill design-system

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

Où la documentation finit-elle vraiment ?

Le travail revient sous forme de modèles markdown dans la conversation. Si une base de connaissances est connectée, le skill peut aussi publier la documentation mise à jour sur votre wiki.

Puis-je l'utiliser pour concevoir quelque chose de complètement nouveau ?

Le mode Extend est destiné à un nouveau composant ou pattern qui s'intègre au système que vous avez déjà. Il part du problème et du manque dans les patterns existants, propose une API, des variantes, des états et des tokens, et se termine par les décisions et cas particuliers qui nécessitent encore une revue de design.

Comment invoquer les différents modes ?

Tapez la commande slash avec un mode et une cible. Audit s'exécute sur l'ensemble du système, tandis que document et extend prennent un composant ou un pattern spécifique, par exemple la forme extend pour un pattern que vous souhaitez ajouter.

Design System

Exécutez design-system sur une véritable tâche de travail de marque et de design system.

Téléchargez OpenDesign, importez 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