HomeCasa Prompts

Design token e specifiche dei componenti

Definisci i token di un design system (primitivi, semantici e di componente) e le specifiche dei componenti con stati, varianti e accessibilità. Pensato per ChatGPT, Claude e Gemini. Include 5 variabili personalizzabili e puoi copiarlo gratuitamente con un clic.

Avanzato · Testo · In attesa di revisione editoriale

Pensato per:

Prompt

Agisci come designer di design system con esperienza nel portare i token da Figma al codice.

Prodotto: {{product}}.
Piattaforme: {{platforms}}.
Identità di brand disponibile: {{brand}}.
Componenti prioritari: {{components}}.
Obiettivo di accessibilità: {{a11y_level}}.

Consegna, in quest'ordine:
1. Un'architettura di token a tre livelli (primitivi → semantici → di componente) e una convenzione di denominazione, con esempi.
2. Token primitivi: una scala di colori (9-10 passaggi per tonalità, derivati dal brand), tipografia (scala modulare con dimensioni, interlinee e pesi), spaziatura (base 4 o 8), raggi, ombre, opacità e durate di movimento.
3. Token semantici per tema chiaro e scuro (sfondo, superficie, testo, bordo, azione e stati di successo, avviso, errore e informazione), verificando il contrasto di ogni coppia testo/sfondo.
4. Un'esportazione nel formato W3C Design Tokens (JSON) e il suo equivalente in proprietà personalizzate CSS.
5. Per ogni componente prioritario, una scheda di specifica con: anatomia, varianti, dimensioni, stati (riposo, hover, focus, attivo, disabilitato, caricamento, errore), token utilizzati, comportamento da tastiera, attributi ARIA e cose da evitare.
6. Regole di governance: quando creare un nuovo token, come deprecarlo e come versionarlo.

Vincoli:
- Non inventare i colori del brand: se non ne ho, proponi una palette provvisoria segnata come [PROVVISORIO].
- Indica i rapporti di contrasto calcolati; se qualcuno non è sufficiente, proponi un'alternativa.
- Chiedimi ciò che manca prima di definire i token semantici.

Come usarlo

  1. Elenca i colori e i caratteri del brand che hai già (se possibile in esadecimale).
  2. Scegli alcuni componenti prioritari da cui partire: pulsante, campo di testo, card e modale.
  3. Importa il JSON in Tokens Studio per Figma o in Style Dictionary per generare il codice.
  4. Ricontrolla i rapporti di contrasto con uno strumento esterno prima di approvare la palette.

Esempio d'uso

Prodotto: app bancaria per freelance · Piattaforme: web e mobile · Brand: blu #1E40AF e carattere Inter · Componenti: pulsante, input, card, modale.

Esempio di risultato

1. Architettura dei token

LivelloEsempioUso
Primitivocolor.blue.800 = #1E40AFValore grezzo, mai nei componenti
Semanticocolor.action.primary = {color.blue.800}Intenzione, cambia per tema
Componentebutton.primary.bg = {color.action.primary}Usato da un solo componente

Convenzione: categoria.proprietà.variante.stato, ad es. color.text.on-action.disabled.

3. Contrasto (tema chiaro)

Coppia testo/sfondoRapportoWCAG 2.2 AA
Bianco su blu #1E40AF8,72:1✅
Bianco su corallo #F973622,74:1❌
#111827 su corallo #F973626,47:1✅

Proposta: usare il corallo solo come sfondo con testo scuro, oppure un corallo scurito per il testo su bianco (5,62:1 con #B4412F, [TEMPORANEO]).

4. Esportazione

{
  "color": {
    "blue": { "800": { "$type": "color", "$value": "#1E40AF" } },
    "action": { "primary": { "$type": "color", "$value": "{color.blue.800}" } }
  }
}
:root { --color-blue-800: #1E40AF; --color-action-primary: var(--color-blue-800); }

5. Pulsante — stati

Riposo, hover, focus (anello visibile da 2 px), attivo, disabilitato, caricamento (aria-busy="true"), errore…

Dati chiave

Categoria
Design UI/UX · Design system
Tipo di output
Testo
Livello
Avanzato
Pensato per
ChatGPT, Claude e Gemini
Verificato in
In attesa di verifica editoriale
Variabili
Prodotto, Piattaforme, Identità di brand, Componenti prioritari e Obiettivo di accessibilità
Lingua
Italiano
Prezzo
Gratuito, senza registrazione
Aggiornato
07/11/2026

Domande frequenti

Perché servono i token semantici se ho già i primitivi?

I primitivi descrivono valori («blu 600»), mentre i token semantici descrivono l'intento («colore dell'azione primaria»). Questo livello permette di cambiare tema o rifare il brand senza toccare ogni componente.

Quale formato di token dovrei usare?

Il formato del W3C Design Tokens Community Group è lo standard emergente, e strumenti come Tokens Studio e Style Dictionary possono trasformarlo in codice CSS, iOS o Android.

A cosa serve questo prompt?

Definisci i token di un design system (primitivi, semantici e di componente) e le specifiche dei componenti con stati, varianti e accessibilità.

Con quali strumenti di IA funziona?

È pensato per ChatGPT, Claude e Gemini. Non lo abbiamo ancora verificato in questi strumenti, quindi i risultati possono variare da uno all'altro.

Come personalizzo il prompt?

Clicca su «Personalizza» e compila le variabili (Prodotto, Piattaforme, Identità di brand, Componenti prioritari e Obiettivo di accessibilità). Il testo si aggiorna all'istante e poi puoi copiarlo con un clic. I valori vengono salvati solo nel tuo browser.

Serve esperienza per usarlo?

È di livello avanzato: è pensato per persone con esperienza nell'argomento, in grado di valutare e regolare il risultato.

Questo prompt è gratuito?

Sì. Tutti i prompt di HomeCasa Prompts sono gratuiti, senza registrazione né abbonamento. Puoi usarli anche in progetti professionali.

Posso fidarmi dell'output dell'IA?

Consideralo una bozza di alta qualità: verifica sempre dati, cifre e affermazioni importanti prima di pubblicare o prendere decisioni.

Prompt correlati