Colori
La palette della pagina raggruppata per uso: sfondi, testi, bordi, accenti
Esporta Pro
Estrai il design system di qualsiasi sito
Smart Design Inspector analizza una pagina, ne estrae i token di design (colori, scala tipografica e spaziature) e li esporta in Tailwind v4 @theme, in variabili CSS o in un DESIGN_SPECS.md pronto per il tuo progetto o per il tuo assistente IA.
Funzione Pro gratis in accesso anticipato fino al lancio della Pro (data da definire)
tucliente.example
/* Tailwind v4 */
@theme {
--color-primary: #2563eb; --color-ink: #0b0b0b; --color-bg: #ffffff; --color-line: #e5e7eb; --font-heading: "Inter", sans-serif;
--text-h1: 48px;
--text-h1--line-height: 1.1;
--spacing-section: 96px;
}/* Variabili CSS */
:root {
--color-primary: #2563eb; --color-ink: #0b0b0b; --color-bg: #ffffff; --color-line: #e5e7eb; --font-heading: "Inter", sans-serif;
--text-h1: 48px;
--spacing-section: 96px;
}# Design system · tucliente.example
## Colori
- primary #2563eb · pulsanti e link
- ink #0b0b0b · testo
## Tipografia
- H1 · Inter 600 · 48 px / 1,1
## Spaziature
- Sezione · 96 px01
Il lavoro che ti risparmia
Il problemaIl cliente ti passa un sito di riferimento: «voglio qualcosa del genere». Per replicarne lo stile ti servono i colori, le dimensioni dei caratteri e le spaziature. Ricavarli con un contagocce e con i DevTools sono decine di clic, e alla fine hai una lista sparsa di valori, non un sistema che puoi usare.
02
Cosa esporta
3 tokenTipografia
Ogni stile (H1-H6, corpo, pulsanti) con famiglia, dimensione, peso, interlinea e spaziatura, più il @font-face o il link a Google Fonts
Spaziature
La scala di margini e padding che si ripete nella pagina
03
Tre formati di output
Copia o scaricaTailwind v4 @theme
Da incollare nel tuo CSS:
@theme {
--color-primary: …;
--font-heading: …;
--spacing-section: …;
}Variabili CSS
In :root, per qualsiasi progetto senza Tailwind.
DESIGN_SPECS.md
Un documento con tutto il sistema spiegato. Serve al team e per passarlo a Claude, Cursor o qualsiasi assistente IA quando gli chiedi di costruire con quello stile.
04
Come si usa
3 passaggi- 01
Apri il sito di riferimento.
- 02
Scegli Design → Esporta sistema.
- 03 Pro
Scegli il formato e lo copi o lo scarichi.
| Gratis0 €per sempre | Pro49 €pagamento unico | |
|---|---|---|
| Vedere la palette, i font e la scala tipografica della pagina | ||
| Esportare il design system: Tailwind v4 @theme, variabili CSS o DESIGN_SPECS.md | — | Accesso anticipato gratis |
06
Etica e licenze
IspiratiLo stile di un sito (colori, dimensioni, spaziature) non è protetto. I testi, le immagini, i loghi e i font commerciali sì. L’estensione esporta valori, non contenuti, e ti avvisa della licenza di ogni font. Usala per ispirarti, non per copiare un marchio.
È gratis?
È una funzione Pro. Fino al lancio della Pro (data da definire) è in accesso anticipato gratis per tutti. Poi sarà inclusa nella Pro da 49 €, con pagamento unico.
Quale versione di Tailwind usa?
Tailwind v4, con la direttiva @theme. Se usi un’altra versione, esporta in variabili CSS.
Estrae il sistema da tutto il sito o da una pagina?
Dalla pagina che hai aperta. Se le altre pagine usano lo stesso sistema, il risultato è lo stesso.
Funziona con un’IA come Claude o Cursor?
Sì. Il DESIGN_SPECS.md è scritto perché un assistente IA lo legga e costruisca con quello stile.
Esporta componenti?
No. Esporta token. Per copiare una sezione come componente c’è la conversione di un sito in Tailwind.
Su quali browser e sistemi funziona?
Su Chrome, Edge, Brave, Arc, Opera e Vivaldi, su Windows, Mac e Linux, dalla 1.0. Funziona allo stesso modo ovunque perché è il browser a eseguire l’estensione, non il sistema. Il codice è pronto per portarla su Firefox e Safari senza riscriverla. Durante lo sviluppo potrebbero esserci cambiamenti.
08
Continua con
Funzioni vicineColori
La palette della pagina, il contagocce e il contrasto WCAG di ogni coppia di testo e sfondo.
Colori di un sito →Font
Famiglia, pesi, origine, licenza e scala tipografica di tutta la pagina.
Font di un sito →Sito in Tailwind
Copia una sezione come JSX + Tailwind o come HTML/CSS.
Convertire un sito in Tailwind →Prezzi
Gratis per sempre. Pro, 49 € una volta sola.
Vedi i prezzi →Lista d’attesa
Sii tra i primi a provarlo
Smart Design Inspector è in fase di sviluppo. Lasciaci la tua email e ti avviseremo il giorno in cui arriverà sul Chrome Web Store, con le 7 funzioni Pro gratis in accesso anticipato.
Un’email il giorno del lancio e poche altre · Disiscrizione con un clic