Exportar Pro

Copia qualsevol secció d’una web com a JSX + Tailwind

Smart Design Inspector converteix la secció d’una web que triïs en un component JSX amb classes de Tailwind, o en HTML i CSS, a punt per enganxar al teu projecte.

Apunta’t a la llista d’espera Com funciona

Funció Pro en accés anticipat gratuït fins al llançament de la Pro (data per definir)

Secció · tucliente.example

Reserves

Taula per a aquesta nit

De dimarts a diumenge, 13-23 h
Carrer Major 12

Reservar

div.card · clic per copiar

<div className="rounded-lg border border-gray-200 p-8">
  <p className="text-xs uppercase tracking-widest">Reserves</p>
  <p className="mt-2 text-2xl font-semibold">Taula per a aquesta nit</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">
    Reservar
  </a>
</div>

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

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

Exemple il·lustratiu · Pro · accés anticipat

Com funciona

3 passos

01
Obres la web i tries Copiar secció.
02
Passes el ratolí i fas clic al bloc que vols: un hero, una targeta de preu, un peu.
03 Pro
Tries el format, JSX + Tailwind o HTML/CSS, i es copia al porta-retalls.

Què en surt

2 formats

JSX + Tailwind

Un component amb les classes de Tailwind que reprodueixen els estils calculats.

HTML/CSS

El marcatge amb el seu full d’estils, per a projectes sense Tailwind o per a WordPress.

Inspira’t, no copiïs

Propietat intel·lectual

Els textos, les imatges i els logos d’una altra web tenen propietari. Copia l’estructura i l’estil, i posa-hi el teu contingut. Amb la primera Pro arriba el mode inspiració, gratuït per a tothom: canvia els textos i les imatges per marcadors en copiar.

Gratuït i Pro

Veure preus →

	Gratuït0 €per sempre	Pro49 €pagament únic
Copiar el CSS de cada element
Copiar una secció com a JSX + Tailwind o HTML/CSS	—	Accés anticipat gratuït
Mode inspiració: canvia els textos i les imatges per marcadors en copiar	Amb la primera Pro	Amb la primera Pro

És una funció Pro. Fins al llançament de la Pro (data per definir), és en accés anticipat gratuït per a tothom. Després s’inclou a la Pro de 49 €, de pagament únic.

Apunta’t a la llista d’espera

Preguntes freqüents

Més preguntes →

És gratuït?

És una funció Pro. Fins al llançament de la Pro (data per definir), és en accés anticipat gratuït per a tothom. Després s’inclou a la Pro de 49 €, de pagament únic.

El codi surt perfecte?

Surt funcional i proper a l’original. Les animacions fetes amb JavaScript i alguns efectes no es poden traduir a classes, així que convé repassar-lo.

Fa servir els colors del meu projecte?

Fa servir els de la web original. Per tenir els tokens com a variables, combina-ho amb extreure el sistema de disseny.

El puc copiar per a React, Vue o Elementor?

El JSX serveix directament a React. Vue i Elementor estan previstos per a versions posteriors.

En quins navegadors i sistemes funciona?

A Chrome, Edge, Brave, Arc, Opera i Vivaldi, a Windows, Mac i Linux, des de la 1.0. Funciona igual a tots perquè l’extensió l’executa el navegador, no el sistema. El codi està preparat per portar-la a Firefox i Safari sense reescriure-la. Mentre està en desenvolupament, hi pot haver canvis.

Continua amb

Funcions properes

Pro · accés anticipat

Sistema de disseny

Colors, espaiats i tipografia a Tailwind v4 @theme, variables CSS o DESIGN_SPECS.md.

Extreure el sistema de disseny →

Gratuït

Inspector CSS

Passa el ratolí i veu el CSS calculat, la caixa, els marges i les distàncies.

Inspector CSS →

Preus

Gratuït per sempre. Pro, 49 € una sola vegada.