Vai al contenuto
Pickode
EN – English
Pickode
ExportFree + Pro

Estrai il design system di un sito in pochi secondi.

Pickode legge colori, spaziature, scala tipografica, raggi e ombre di un sito e li esporta come variabili CSS, Tailwind v4 `@theme`, `tailwind.config.js`, `globals.css` per shadcn, `theme.json` di WordPress o JSON.

Aggiungi a Chrome, è gratisVedi i prezzi

Gratis per sempre · prova Pro di 7 giorni senza carta · Chrome, Edge, Brave, Opera, Arc, Comet, Firefox

Finestra design token di Pickode con ruoli dei colori, gradienti e spaziature

In breve

Per estrarre i design token da un sito apri la finestra Design token di Pickode su qualsiasi pagina: ottieni colori per ruolo (primario, secondario, accento, successo, errore, sfondo, testo, bordo), colori del brand, gradienti, scala delle spaziature con rilevamento della griglia 4/8 px, scala dei testi, raggi, ombre e font. Pickode è un'estensione del browser e li esporta come variabili CSS, Tailwind v4 @theme, tailwind.config.js, globals.css per shadcn, theme.json di WordPress o JSON.

Come funziona

Design token in tre passi.

  1. Apri i design token
    01

    Apri i design token

    Su qualsiasi sito apri Design token dal pannello di Pickode.

  2. Controlla il sistema
    02

    Controlla il sistema

    Guarda colori per ruolo, gradienti, spaziature, scala dei testi, raggi e ombre trovati nella pagina.

  3. Esporta o copia
    03

    Esporta o copia

    Esporta nel formato del tuo progetto, copiali per l'AI o salvali nella libreria.

Cosa ottieni

Tutto il design system, nel formato del tuo progetto.

  • Colori per ruolo

    Primario, secondario, accento, successo, errore, sfondo, testo e bordo, più colori del brand e gradienti.

  • Spaziature, testi e forme

    Scala delle spaziature con rilevamento della griglia 4/8 px, scala dei testi, raggi, ombre e font.

  • Pronti per Tailwind e shadcn

    Un @theme per Tailwind v4, un tailwind.config.js o un globals.css per shadcn: il tema di qualsiasi sito in un export.

  • theme.json per WordPress

    Esporta un theme.json di WordPress, variabili CSS o JSON, oppure copia i token per Claude, ChatGPT o Cursor.

Dettagli

Cosa contengono i design token.

Colori
Per ruolo (primario, secondario, accento, successo, errore, sfondo, testo, bordo), colori del brand
Gradienti
I gradienti usati nella pagina
Spaziature
Scala delle spaziature con rilevamento della griglia 4/8 px
Tipografia
Scala dei testi e font
Forme
Raggi e ombre
Formati di export
Variabili CSS, Tailwind v4 @theme, tailwind.config.js, globals.css (shadcn), theme.json di WordPress, JSON
Copia per AI
I token come testo per il tuo strumento di AI
Free e Pro
Gratis in ogni formato (vista, copia, download, salvataggio); Copia per AI è Pro

Domande

Domande su Design token.

Non trovi la risposta?

Leggi la documentazione o scrivici.

Leggi le docsContattaci

Posso ottenere un tema shadcn da un sito?

Sì. Esporta i token come `globals.css` per shadcn e mettilo nel tuo progetto.

Funziona con Tailwind v3 e v4?

Esporta un `@theme` per Tailwind v4 e un `tailwind.config.js`, così scegli quello che usa il tuo progetto.

Posso usare i token in un tema WordPress?

Sì. Pickode esporta un `theme.json` di WordPress con colori, spaziature e tipografia del sito.

È gratis?

Sì. Vedere, copiare e scaricare i token in ogni formato è gratis. È Pro solo Copia per AI, che li trasforma in un testo per il tuo strumento AI.

Posso conservare i token per dopo?

Sì. Salvali nella libreria e, con Pro, sincronizzala con il tuo Google Drive.

Come estraggo i design token (colori, font, spaziature) da un sito?

Apri lo strumento design token sulla pagina. Pickode raccoglie i colori per ruolo, i colori di marca, i gradienti, la scala delle spaziature con il rilevamento della griglia 4/8 px, le dimensioni del testo, i raggi, le ombre e i font. Vista ed export sono gratuiti.

Posso esportare i token come variabili CSS o JSON?

Sì, con Pro: variabili CSS, Tailwind v4 `@theme`, `tailwind.config.js`, `globals.css` per shadcn, `theme.json` di WordPress o JSON. Puoi anche copiarli per l'AI.

Continua a esplorare

Funzioni correlate.

Tutte le funzioni

Smetti di ricostruire. Inizia a selezionare.

Installa Pickode, apri un sito qualsiasi e premi Alt+I.

Aggiungi a Chrome, è gratis

Gratis · prova Pro di 7 giorni · nessun account