Vai alla guida all’uso
design-systemdi Anthropic

Design System Skill.

Uno skill per Claude Code e Codex dedicato a brand e design system: verifica, documenta o amplia un design system esistente.

  • Brand e design system
  • Design system
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
Front matter e intestazioni di sezione lette dal file upstream il 14-09-2026 · 5.552 caratteri in totale

01 Cosa fa

Cosa fa lo Skill design-system in Claude Code e Codex

Sintesi, workflow e output, tutto letto dal SKILL.md della skill.

Dal SKILL.mdLetto il 14-09-2026 · non è un'esecuzione registrata

Nelle parole della skill

Una skill a comando slash per lavorare su un design system esistente in tre modalità: audit, document o extend. La modalità audit riporta la coerenza della denominazione, la copertura dei token e la completezza dei componenti, assegnando un punteggio su 100. La modalità document produce una specifica del componente con descrizione, varianti, props, stati, accessibilità e cose da fare/non fare.

La modalità extend propone un nuovo componente o pattern confrontandolo con quelli già presenti nel sistema, elencando i token che utilizzerebbe e le domande aperte che solleva. Copre design token, componenti e pattern, e può accedere a uno strumento di design o a una knowledge base quando questi sono collegati. I destinatari sono designer e sviluppatori che mantengono coerente un sistema.

Che cosa produce

  • Un report di audit del design system che termina con azioni prioritarie in ordine di importanza
  • Documentazione del componente con una tabella props di proprietà, tipo, valore predefinito e descrizione
  • Una proposta di nuovo componente che si apre con il problema che risolve
Vedi l'esempio di prompt ↗

Come funziona

  1. 01
    Scegliere la modalità dall'argomento

    Il comando accetta una modalità più un target: audit per l'intero sistema, oppure eseguire document o extend su un singolo componente o pattern.

  2. 02
    Eseguire l'audit su tre assi

    L'audit verifica la coerenza della denominazione, la copertura dei token conteggiata rispetto ai valori hardcoded e quanto sia completo ciascun componente, quindi indica le azioni prioritarie.

  3. 03
    Scrivere la specifica del componente

    La modalità document compila un template con descrizione, varianti, props con tipi e valori predefiniti, stati, accessibilità e una tabella Cose da fare/non fare.

  4. 04
    Proporre l'estensione rispetto a ciò che esiste

    La modalità extend confronta la nuova idea con i componenti correlati, quindi propone un'API, varianti, stati e i token esatti che il componente consumerebbe.

  5. 05
    Attingere dagli strumenti collegati, quando presenti

    Con uno strumento di design collegato, la skill può recuperare le proprietà dei componenti e la struttura dei livelli per la documentazione, e verificare denominazione, varianti e utilizzo dei token in Figma.

02 Trova la tua applicazione

Quando usare la skill design-system

Usa la skill design-system in Claude Code o Codex quando il lavoro riguarda brand e design system di questo tipo. Idoneità e limiti sono presi dal file della skill stessa.

Buona applicazione

  • Sospetta che si siano insinuate incoerenze di denominazione o valori hardcoded nei suoi componenti.
  • Ha bisogno della documentazione per un componente che copra le sue varianti, gli stati e le note sull'accessibilità.
  • Sta progettando un nuovo componente o pattern e vuole che si adatti al sistema che ha già.
  • Vuoi che lo skill verifichi cosa è già documentato prima di scrivere altro, usando una knowledge base connessa.

Conosci i limiti

  • Componenti isolati che duplicano ciò che il sistema già fornisce vanificano lo scopo di avere il sistema.
  • Una proposta di estensione non risolve le decisioni difficili: può concludersi con decisioni che richiedono ancora una revisione di design.
  • Leggere i componenti direttamente da Figma avviene solo quando è disponibile un connettore per strumenti di design.

Cosa fornire

  • La modalità e il suo targetFornisci al comando una modalità e il componente, il pattern o il sistema a cui si applica, così lo skill sa quale template compilare.
  • I tuoi componenti esistenti per il confrontoUna proposta di estensione confronta i componenti correlati su ciò che condividono e sul perché ciò non sia sufficiente, quindi questi elementi vicini devono essere conosciuti.

03 Dentro la skill

Regole che la Skill design-system fornisce a Claude Code e Codex

7 istruzioni concrete, valori predefiniti e limiti che SKILL.md definisce per l'agente — la parte del file che cambia il risultato.

  1. Segnala Deviazioni di Naming Rispetto a uno Standard

    Le incoerenze di naming non vengono solo segnalate: ogni riga indica i componenti coinvolti e lo standard da adottare.

  2. Conta i Valori Hardcoded, Non Stimarli a Occhio

    La copertura dei token confronta un conteggio definito con il numero di istanze trovate, come valori hex hardcoded, valori di spaziatura arbitrari o font e dimensioni personalizzati.

  3. Documenta Tutto

    Se un componente, una variante o una regola non è scritta, lo skill la considera inesistente.

  4. Resta Flessibile All'Interno dei Vincoli

    I componenti sono pensati per essere componibili piuttosto che rigidi, quindi l'insieme dei pattern si adatta senza essere abbandonato.

  5. Versiona i Cambiamenti Che Rompono la Compatibilità

    Ogni cambiamento che rompe la compatibilità deve arrivare con un percorso di migrazione, non solo un componente sostitutivo.

  6. Inizia con un Audit

    Il punto di ingresso predefinito è un audit dello stato attuale del sistema prima di documentare o estendere qualsiasi cosa.

  7. La Copertura Vince Sulla Perfezione

    L'80% dei componenti documentati è considerato meglio che fare 10 componenti in modo perfetto.

04 Mettila al lavoro

Installare design-system in Claude Code o Codex

Un comando npx skills add, poi un primo task nel tuo agente e una checklist per il risultato.

Aggiungere design-system a Claude Code, Codex o al tuo agente

Eseguitelo nel Suo progetto; l'installer chiede a quale agente aggiungerlo.

Terminal
npx skills add https://github.com/anthropics/knowledge-work-plugins --skill design-system

Forma generica della CLI skills per design/skills/design-system/SKILL.md; il repository potrebbe documentare un proprio percorso.

Assegna alla Skill un Primo Task di Lavoro su Brand e Design System

Redatto nei termini propri della skill; sostituisca le parti tra parentesi con il suo materiale.

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.

Fonte: redatto a partire dal SKILL.md, nei termini propri della skill.

Verifica il primo risultato

Ciò che il SKILL.md stesso indica come risultato corretto:

  • Leggi il riepilogo dell'audit: componenti revisionati, problemi trovati e un punteggio su 100.
  • Controlla la tabella di completezza per componente, poiché stati, varianti e documentazione sono segnati separatamente e valutati.
  • Verifica che il blocco di accessibilità sia compilato per il componente documentato.
  • Su un'estensione, verifica che la tabella degli stati copra il comportamento predefinito, di hover e disabilitato prima che passi in revisione.

In OpenDesign importa design-system dal link SKILL.md: Plugins → Add → Skill → Import from link, poi selezionalo nella barra superiore.

05 Open source, tracciabile

Sorgente, licenza e verifica

Da dove provengono i dati di questa pagina e quando sono stati verificati l'ultima volta.

Author
Anthropic
File della skill
design/skills/design-system/SKILL.md Checksum del contenuto registrato alla verifica; commit 8f877b6
License
Apache-2.0 Da LICENSE.
Stelle del repository
24.012 Snapshot GitHub acquisita il 2026-09-14 per l'intero repository anthropics/knowledge-work-plugins, che contiene 7 skill in questo catalogo. Non è un punteggio o conteggio di utilizzo per design-system.
Verificato da OpenDesign
14/09/2026 File sorgente, percorso, testo della licenza e conteggio delle stelle sono stati verificati. Non inclusa in OpenDesign main (verificato il 28/08/2026); un'esecuzione live non è stata registrata in questa pagina.

All'interno di SKILL.md

  1. UsoLe tre forme di invocazione: verificare il sistema, documentare un componente, estendere un pattern.
  2. Componenti di un Design SystemDefinisce token di design, componenti e pattern con le loro sotto-parti, stati e questioni ARIA.
  3. PrincipiCoerenza prima della creatività, flessibilità entro i vincoli, documentare tutto, versionare e migrare.
  4. Output — VerificaModello di verifica: punteggio riassuntivo, coerenza nella denominazione, copertura dei token, completezza, azioni prioritarie.
  5. Output — DocumentaModello del componente: descrizione, varianti, prop, stati, accessibilità, cosa fare e cosa non fare, esempio di codice.
  6. Output — EstendiModello del nuovo componente: problema, pattern correlati, API, varianti, stati, token, domande aperte.
  7. Se sono disponibili connettoriPassaggi opzionali per strumenti di design e knowledge base per verificare, documentare e pubblicare.
  8. SuggerimentiIniziare con una verifica, documentare man mano che si costruisce, preferire la copertura alla perfezione.
Descrizione della skill
"Verifica, documenta o estendi il tuo design system. Usa quando verifichi incoerenze di denominazione o valori hardcoded tra i componenti, scrivi documentazione per le varianti, gli stati e le note di accessibilità di un componente, o progetti un nuovo pattern che si adatta al sistema esistente."

Descrizione front-matter da SKILL.md. Il file completo è di circa 5.552 caratteri. Leggi il file completo su GitHub.

06 Prima di installare

Domande sullo skill design-system

Le risposte provengono dal SKILL.md letto il 2026-09-14, non da un'esecuzione registrata.

Dove finisce realmente la documentazione?

Il lavoro torna come modelli in markdown nella conversazione. Se è collegata una knowledge base, la skill può anche pubblicare la documentazione aggiornata sul vostro wiki.

Posso usarla per progettare qualcosa di completamente nuovo?

La modalità estensione serve per un nuovo componente o pattern che si adatta al sistema già esistente. Parte dal problema e dalla lacuna nei pattern esistenti, propone API, varianti, stati e token, e si conclude con le decisioni e i casi limite che richiedono ancora una revisione di design.

Come si invocano le diverse modalità?

Digitate il comando slash con una modalità e un target. La verifica viene eseguita sull'intero sistema, mentre documenta ed estendi richiedono un componente o pattern specifico, ad esempio il form estendi per un pattern che volete aggiungere.

Design System

Esegui design-system su un Task Reale di Lavoro su Brand e Design System.

Scarica OpenDesign, importa design-system dal suo link SKILL.md, incolla il prompt qui sopra e leggi il piano prima del risultato.

Terminale
npx skills add https://github.com/anthropics/knowledge-work-plugins --skill design-system

OpenDesign Desktop

Un solo design system. Il tuo brand, coerente ovunque

Nel Vibe Design Workspace completo, applica le stesse regole di brand a siti, presentazioni, prototipi interattivi, dashboard, immagini e video HTML. Collega Codex, Claude Code, Cursor e gli altri agenti di coding locali e crea gratis.

  • Siti, presentazioni, prototipi, dashboard, immagini e video
  • Oltre 140 design system e la libreria completa di template e skill
  • Codex locale e oltre 21 agenti di coding · Gratis
Scarica gratis

Disponibile per macOS e Windows