102.3K+Scarica
Vai alla guida all’uso
Design Tokendi Owl-Listener

Design Token Skill.

Dai alle decisioni visive nomi e relazioni che i componenti possano riutilizzare.

  • Design system
  • Specifiche
Scarica OpenDesignVedi la guida all'uso
Revisione della fonte · Design TokenSKILL.md
Attività Design system Produce • Una categorizzazione dei token e uno schema di denominazione • Relazioni tra token globali, alias e di componente • Indicazioni su uso e versionamento Prima di iniziare Fornisci i valori visivi esistenti, esempi di componenti e vincoli di denominazione. La skill definisce i nomi dei token e le loro relazioni; gli strumenti di esportazione e l'integrazione con i framework richiedono una configurazione separata.
Sintesi editoriale · fonte esaminata 2026-10-07 · non è un esempio generato

01 Funzionalità

Design Token: definire una base semantica

Categorie di design token, relazioni su tre livelli, denominazione, uso e indicazioni sul versionamento.

Flusso di lavoro basato sulla fonteNon è un benchmark di esecuzione

L'approccio di lavoro

Design Token definisce la base su cui poggia un design system. Copre colore, spaziatura, tipografia, elevazione, bordi e movimento, con regole di denominazione e uso che collegano i valori grezzi al significato semantico.

La struttura a tre livelli separa valori globali, alias semantici e token specifici dei componenti. Questa distinzione aiuta un team a cambiare un valore senza perdere il motivo per cui viene usato. L'audit dell'uso esistente e la mappatura multi-brand sono esplicitamente attività separate.

Risultati attesi

  • Una categorizzazione dei token e uno schema di denominazione
  • Relazioni tra token globali, alias e di componente
  • Indicazioni su uso e versionamento
Vedi il brief di esempio

Dal brief alla revisione

  1. 01
    Inventariare le basi

    Elenca i valori di cui il prodotto ha bisogno per colore, layout, tipografia, elevazione e movimento.

  2. 02
    Definire i livelli

    Separa le scale grezze dai ruoli semantici e aggiungi nomi specifici dei componenti solo dove servono.

  3. 03
    Documentare l'utilizzo

    Spiega dove si applicano gli alias e come i componenti devono farvi riferimento invece di usare valori codificati direttamente.

02 Quando usarlo

Quando usarla

Fornisci i valori visivi esistenti, esempi di componenti e vincoli di denominazione. La skill definisce i nomi dei token e le loro relazioni; gli strumenti di esportazione e l'integrazione con i framework richiedono una configurazione separata.

Quando è adatta

  • Un nuovo livello di tokenDa usare quando esistono valori visivi ma mancano nomi e ruoli condivisi.
  • Basi incoerentiDà un vocabolario comune a decisioni ripetute su spaziatura o colore.

Limiti da verificare

  • Non è un audit automaticoLa fonte rimanda l'audit dell'uso esistente a un'altra skill.
  • Non è una pipeline di buildDescrive l'architettura dei token, non garantisce l'esportazione né l'integrazione con i framework.

Cosa portare

  • Valori attualiFornisci le decisioni su palette, tipografia, spaziatura ed elevazione.
  • Esigenze dei componentiMostra usi e stati rappresentativi.
  • Vincoli di denominazioneIndica le convenzioni della piattaforma e le aspettative sul versionamento.

03 Decisioni importanti

Decisioni che contano

  1. I nomi preservano l'intento

    Gli alias semantici preservano l'intento quando i valori grezzi cambiano.

  2. I livelli evitano confusione

    Un colore globale e il colore di uno stato di un pulsante non vanno trattati come nomi intercambiabili.

04 Esempio di brief

Prova un brief mirato

Il brief di esempio qui sotto non è stato testato. Controlla la configurazione della skill prima di usarlo.

Controlla la configurazione

Carica il SKILL.md di questa attività dal repository designer-skills nella posizione per le skill supportata dal tuo agente. Il file di ingresso non stabilisce alcun comando di installazione universale.

File sorgente originale
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/design-systems/skills/design-token/SKILL.md

Fornisci i valori visivi esistenti, esempi di componenti e vincoli di denominazione. La skill definisce i nomi dei token e le loro relazioni; gli strumenti di esportazione e l'integrazione con i framework richiedono una configurazione separata.

Parti da un solo risultato

Adatta ambito, materiale di partenza e vincoli di questo brief prima di eseguire la skill.

Brief di esempio
Usa design-token per definire un livello di token per questo piccolo sistema di prodotto. Separa scale grezze, alias semantici e token di componente necessari. Mappa gli esempi di pulsante e card forniti, documenta le regole di denominazione ed evita di dichiarare una pipeline di esportazione che non abbiamo implementato.

Esamina il risultato

Confronta l'output effettivo con questi criteri osservabili.

  • Gli alias si risolvono in valori definiti.
  • I nomi comunicano l'uso, non un aspetto casuale.
  • I componenti fanno riferimento al livello di token previsto.

OpenDesign offre uno spazio di lavoro di design locale per gli agenti di programmazione. Questo elenco non significa che la skill sia inclusa nel pacchetto né che strumenti esterni, credenziali e dipendenze software siano compresi.

Scarica OpenDesignLeggi la guida rapida

05 Fonte e licenza

Fonte e licenza

Questa pagina descrive la revisione della fonte fissata e collegata qui sotto. Il comportamento e i requisiti upstream possono cambiare.

Proprietario della fonte
Owl-Listener
Repository
Owl-Listener/designer-skills
File della skill
design-systems/skills/design-token/SKILL.md
Licenza
MIT
Snapshot esaminato
2026-10-07 · 9a6930cf84a8
Sintesi editoriale della fonte
Categorie di design token, relazioni su tre livelli, denominazione, uso e indicazioni sul versionamento.

Sintesi originale di OpenDesign, basata sulla fonte collegata. Le star del repository sono un indicatore di popolarità datato, non misurano l'uso della skill né ne sono un punteggio di qualità.

06 Domande prima di iniziare

Domande prima di iniziare

I token riguardano solo i colori?

No. La fonte include spaziatura, tipografia, elevazione, bordi e movimento.

Ogni componente dovrebbe usare valori grezzi?

La fonte consiglia riferimenti semantici invece di valori grezzi diretti.

Gestisce più brand?

La voce distingue l'architettura di base dei token da un'attività separata dedicata ai sistemi di theming.

OpenDesign

Fai spazio alla prossima iterazione del design.

Tieni brief, materiali di partenza e lavoro di design insieme in uno spazio di lavoro locale. Controlla la configurazione della skill prima di aggiungerla al tuo flusso di lavoro.

Scarica OpenDesignSfoglia le skill di design
File sorgente originale
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/design-systems/skills/design-token/SKILL.md