Esporta Pro

Copia qualsiasi sezione di un sito come JSX + Tailwind

Smart Design Inspector trasforma la sezione di un sito che scegli in un componente JSX con classi Tailwind, oppure in HTML e CSS, pronto da incollare nel tuo progetto.

Iscriviti alla lista d’attesa Come funziona

Funzione Pro gratis in accesso anticipato fino al lancio della Pro (data da definire)

Sezione · tucliente.example

Prenotazioni

Un tavolo per stasera

Da martedì a domenica, 13-23
Via Maggiore 12

Prenota

div.card · clic per copiare

<div className="rounded-lg border border-gray-200 p-8">
  <p className="text-xs uppercase tracking-widest">Prenotazioni</p>
  <p className="mt-2 text-2xl font-semibold">Un tavolo per stasera</p>
  <ul className="mt-4 space-y-2 text-sm">…</ul>
  <a className="mt-6 block bg-blue-600 px-4 py-2 text-white">
    Prenota
  </a>
</div>

<div class="card">…</div>

.card {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 32px;
}
.card .title { font-size: 24px; font-weight: 600; }

Esempio illustrativo · Pro · accesso anticipato

Come funziona

3 passaggi

01
Apri il sito e scegli Copia sezione.
02
Passi il mouse e fai clic sul blocco che vuoi: un hero, una scheda prezzi, un footer.
03 Pro
Scegli il formato, JSX + Tailwind o HTML/CSS, e viene copiato negli appunti.

Cosa ottieni

2 formati

JSX + Tailwind

Un componente con le classi Tailwind che riproducono gli stili calcolati.

HTML/CSS

Il markup con il suo foglio di stile, per progetti senza Tailwind o per WordPress.

Ispirati, non copiare

Proprietà intellettuale

I testi, le immagini e i loghi di un altro sito hanno un proprietario. Copia la struttura e lo stile, e mettici i tuoi contenuti. Con la prima Pro arriva la modalità ispirazione, gratis per tutti: sostituisce testi e immagini con dei segnaposto quando copi.

Gratis e Pro

Vedi i prezzi →

	Gratis0 €per sempre	Pro49 €pagamento unico
Copiare il CSS di ogni elemento
Copiare una sezione come JSX + Tailwind o HTML/CSS	—	Accesso anticipato gratis
Modalità ispirazione: sostituisce testi e immagini con dei segnaposto quando copi	Con la prima Pro	Con la prima Pro

È 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.

Iscriviti alla lista d’attesa

Domande frequenti

Altre domande →

È 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.

Il codice esce perfetto?

Esce funzionante e vicino all’originale. Le animazioni fatte in JavaScript e alcuni effetti non si possono tradurre in classi, quindi conviene ricontrollarlo.

Usa i colori del mio progetto?

Usa quelli del sito originale. Per avere i token come variabili, abbinalo all’estrazione del design system.

Posso copiarlo per React, Vue o Elementor?

Il JSX funziona direttamente in React. Vue ed Elementor sono previsti per le versioni successive.

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.

Continua con

Funzioni vicine

Pro · accesso anticipato

Design system

Colori, spaziature e tipografia in Tailwind v4 @theme, variabili CSS o DESIGN_SPECS.md.

Estrarre il design system →

Gratis

Ispettore CSS

Passa il mouse e vedi il CSS calcolato, il box, i margini e le distanze.

Ispettore CSS →

Prezzi

Gratis per sempre. Pro, 49 € una volta sola.