106.9K+Scarica
Vai alla guida all’uso
Design Tokensdi julianoczkowski

Design Tokens Skill.

Trasforma una direzione di design scelta in valori di tema riutilizzabili.

  • Token
  • Tailwind
Scarica OpenDesignVedi la guida all'uso
Esame della fonte · design-tokensSKILL.md
Attività Trasforma una direzione di design scelta in valori di tema riutilizzabili. Risultati Un file di token o un’estensione del tema nel formato del progetto. Prima di iniziare La fonte richiede di estendere un sistema presente, non sovrascriverlo.
Sintesi editoriale · fonte esaminata il 2026-11-02 · non è un esempio generato

01 Funzionalità

Trasforma una direzione di design scelta in valori di tema riutilizzabili

Genera o estendi token CSS, Tailwind o di tema per colori, spaziatura, tipografia, layout e movimento da un brief esistente.

Flusso di lavoro basato sulla fonteNon è un benchmark di esecuzione

L'approccio di lavoro

Design Tokens definisce i valori usati dai nuovi componenti. Prima esamina variabili CSS, provider di tema, file di token e dipendenze del framework, poi legge il brief della funzionalità. Se un sistema esiste, ne colma le lacune invece di sostituirlo.

L’output segue lo stack: proprietà CSS personalizzate, configurazione Tailwind o modulo di tema. Il flusso documentato include palette chiare e scure, spaziatura, tipografia, layout, movimento e valori responsive. L’agente spiega la direzione scelta e le decisioni che se ne discostano.

Risultati attesi

  • Un file di token o un’estensione del tema nel formato del progetto.
  • Palette chiare e scure intenzionali con ruoli semantici.
  • Una breve descrizione della direzione visiva e delle scelte implementative.
Vedi il brief di esempio

Dal brief alla revisione

  1. 01
    Esamina le fondamenta esistenti

    Cerca variabili CSS, configurazione Tailwind, provider di tema ed esportazioni di token. Individua lacune, come modalità scura o valori di movimento mancanti, prima di generare.

  2. 02
    Collega brief e stack

    Leggi il brief attivo e la direzione estetica. Scegli il formato adatto all’app; se lo stack è incerto usa proprietà CSS personalizzate come default.

  3. 03
    Definisci scale correlate

    Crea colori semantici e valori coerenti di spaziatura, tipografia e layout. Includi movimento e breakpoint referenziabili dai componenti.

  4. 04
    Costruisci entrambe le modalità

    Progetta deliberatamente i valori scuri e supporta i modelli della fonte per preferenza di sistema e selezione manuale. Spiega come i valori estendono il sistema.

02 Quando usarlo

Quando usarla

La fonte richiede di estendere un sistema presente, non sovrascriverlo.

Adatta a

  • Prima dei componentiUna nuova funzionalità richiede valori coerenti prima di costruire gli elementi visivi.
  • Fondamenta incompleteUn tema manca di categorie o valori scuri progettati intenzionalmente.

Limiti da verificare

  • Preserva i token esistentiLa fonte richiede di estendere un sistema presente, non sovrascriverlo.
  • Serve una direzione di designSe manca il brief, definisci la direzione prevista. Una filosofia estetica nominata ricava i parametri dalla skill complementare frontend-design.
  • Verifica i valori applicatiUna palette generata richiede ancora verifiche di contrasto e rendering nei componenti reali.

Cosa portare

  • Brief della funzionalitàFornisci direzione accettata e decisioni pertinenti.
  • Sorgente del temaFornisci variabili, configurazioni ed esportazioni attuali.
  • Stack applicativoIdentifica CSS, Tailwind o implementazione con provider di tema.

03 Decisioni importanti

Le decisioni importanti

  1. Riuso semantico

    I componenti possono riferirsi a testo, superficie e focus anziché valori arbitrari.

  2. Modalità intenzionali

    La modalità scura viene progettata insieme a quella chiara.

  3. Coerenza con lo stack

    I token vengono consegnati dove l’app attuale può usarli.

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.

Esamina la fonte e la configurazione

Fornisci direzione accettata e decisioni pertinenti.

File sorgente originale
https://github.com/julianoczkowski/designer-skills/blob/c259656c76d9758d7ead46b0d2f125cbe84f8665/design-tokens/SKILL.md

Il riferimento seguente apre le istruzioni originali. Verifica la configurazione del repository prima di usarle: non è un comando di installazione.

Inizia con un solo risultato

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

Brief di esempio
Usa design-tokens per estendere il tema della nuova funzionalità di report. Leggi il brief approvato e ispeziona prima variabili CSS, impostazioni Tailwind e provider attuali. Mantieni i nomi esistenti e colma solo lacune documentate. Servono superfici semantiche per grafici, colori di stato, spaziatura e tipografia in modalità chiara e scura. Usa il formato del progetto e spiega l’interazione tra selezione manuale e preferenza di sistema. Mappa i nuovi valori ai ruoli previsti e segnala combinazioni che richiedono ancora verifica del contrasto renderizzato.

Esamina il risultato

Confronta l'output effettivo con questi criteri osservabili.

  • Le definizioni esistenti restano intatte salvo modifica esplicitamente giustificata.
  • Entrambi i temi coprono i ruoli semantici previsti.
  • I nuovi componenti possono usare l’output nel sistema di stili reale del progetto.

OpenDesign offre uno spazio di lavoro di design locale per agenti di programmazione. Questa scheda non significa che la skill sia inclusa nel pacchetto né che i suoi strumenti esterni, le credenziali e le 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. Comportamento e requisiti upstream possono cambiare.

Proprietario della fonte
julianoczkowski
Repository
julianoczkowski/designer-skills
File della skill
SKILL.md
Licenza
Apache-2.0
Snapshot esaminato
2026-11-02 · c259656c76d9
Sintesi editoriale della fonte
Trasforma una direzione di design scelta in valori di tema riutilizzabili.

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

06 Domande prima di iniziare

Domande prima di iniziare

Crea sempre un nuovo tokens.css?

No. La fonte sceglie variabili CSS, configurazione Tailwind o modulo di tema in base allo stack.

Come derivare la modalità scura?

La fonte richiede scelte di palette intenzionali, non una semplice inversione dei colori chiari.

Può lavorare con un sistema esistente?

Sì. Inizia trovando i token esistenti e colmandone le lacune.

OpenDesign

Tieni insieme il brief e il lavoro di 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/julianoczkowski/designer-skills/blob/c259656c76d9758d7ead46b0d2f125cbe84f8665/design-tokens/SKILL.md