Estrai ed esporta
Design token
Estrai colori per ruolo, gradienti, spaziature, scala dei testi, raggi e ombre di un sito ed esportali in variabili CSS, Tailwind, globals.css o theme.json.
Aggiornata il 20 ottobre 2026
La finestra Design token legge il design system di un sito (colori, spaziature, tipografia, raggi e ombre) e ti fa esportarlo nel formato del tuo progetto. Ti serve all’inizio di un restyling, per allinearti al brand di un cliente o per dare alla tua AI i valori veri del sito.
Come estrarre i design token
-
Su qualsiasi pagina apri Design token dal pannello di Pickode.
-
Controlla cosa ha trovato Pickode: colori per ruolo, gradienti, spaziature, scala dei testi, raggi e ombre.
-
Esporta nel formato che ti serve, copia i token per l’AI o salvali nella libreria.
Cosa raccoglie Pickode
| Gruppo | Dettagli |
|---|---|
| Colori | Per ruolo: primario, secondario, accento, successo, errore, sfondo, testo, bordo; più i colori del brand |
| Gradienti | I gradienti usati nella pagina |
| Spaziature | Una scala delle spaziature, con rilevamento della griglia da 4 o 8 px |
| Tipografia | Scala dei testi e font |
| Forme | Raggi e ombre |
Formati di export
| Formato | Quando usarlo |
|---|---|
| Variabili CSS | Qualsiasi progetto, senza framework |
Tailwind v4 @theme |
Progetti con Tailwind v4 |
tailwind.config.js |
Progetti con un file di configurazione Tailwind |
globals.css (shadcn) |
Un tema shadcn preso da qualsiasi sito |
theme.json di WordPress |
Temi a blocchi e siti WordPress |
| JSON | I tuoi strumenti o la tua pipeline di design |
| Copia per AI | Un testo con i token per Claude, ChatGPT o Cursor |
Se stai esportando anche un componente in Tailwind, con l’export @theme o tailwind.config.js tieni i valori del sito come token con un nome nel tuo progetto. Vedi Export in Tailwind.
Free e Pro
Limiti
Correlati
Ancora bloccato?Contattaci