Exportar Pro

Copia cualquier sección de una web como JSX + Tailwind

Smart Design Inspector convierte la sección de una web que elijas en un componente JSX con clases de Tailwind, o en HTML y CSS, listo para pegar en tu proyecto.

Apúntate a la lista de espera Cómo funciona

Función Pro en acceso anticipado gratis hasta el lanzamiento de la Pro (fecha por definir)

Sección · tucliente.example

Reservas

Mesa para esta noche

De martes a domingo, 13-23 h
Calle Mayor 12

Reservar

div.card · clic para copiar

<div className="rounded-lg border border-gray-200 p-8">
  <p className="text-xs uppercase tracking-widest">Reservas</p>
  <p className="mt-2 text-2xl font-semibold">Mesa para esta noche</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; }

Ejemplo ilustrativo · Pro · acceso anticipado

Cómo funciona

3 pasos

01
Abres la web y eliges Copiar sección.
02
Pasas el ratón y haces clic en el bloque que quieres: un hero, una tarjeta de precio, un pie.
03 Pro
Eliges el formato, JSX + Tailwind o HTML/CSS, y se copia al portapapeles.

Qué sale

2 formatos

JSX + Tailwind

Un componente con las clases de Tailwind que reproducen los estilos calculados.

HTML/CSS

El marcado con su hoja de estilos, para proyectos sin Tailwind o para WordPress.

Inspírate, no copies

Propiedad intelectual

Los textos, las imágenes y los logos de otra web tienen dueño. Copia la estructura y el estilo, y pon tu contenido. Con la primera Pro llega el modo inspiración, gratis para todos: cambia los textos y las imágenes por marcadores al copiar.

Gratis y Pro

Ver precios →

	Gratis0 €para siempre	Pro49 €pago único
Copiar el CSS de cada elemento
Copiar una sección como JSX + Tailwind o HTML/CSS	—	Acceso anticipado gratis
Modo inspiración: cambia los textos y las imágenes por marcadores al copiar	Con la primera Pro	Con la primera Pro

Es una función Pro. Hasta el lanzamiento de la Pro (fecha por definir), está en acceso anticipado gratis para todos. Después se incluye en la Pro de 49 €, de pago único.

Apúntate a la lista de espera

Preguntas frecuentes

Más preguntas →

¿Es gratis?

Es una función Pro. Hasta el lanzamiento de la Pro (fecha por definir), está en acceso anticipado gratis para todos. Después se incluye en la Pro de 49 €, de pago único.

¿El código sale perfecto?

Sale funcional y cercano al original. Las animaciones hechas con JavaScript y algunos efectos no se pueden traducir a clases, así que conviene repasarlo.

¿Usa los colores de mi proyecto?

Usa los de la web original. Para tener los tokens como variables, combínalo con extraer el sistema de diseño.

¿Puedo copiarlo para React, Vue o Elementor?

El JSX sirve directamente en React. Vue y Elementor están previstos para versiones posteriores.

¿En qué navegadores y sistemas funciona?

En Chrome, Edge, Brave, Arc, Opera y Vivaldi, en Windows, Mac y Linux, desde la 1.0. Funciona igual en todos porque la extensión la ejecuta el navegador, no el sistema. El código está preparado para llevarla a Firefox y Safari sin reescribirla. Mientras está en desarrollo, puede haber cambios.

Sigue con

Funciones cercanas

Pro · acceso anticipado

Sistema de diseño

Colores, espaciados y tipografía a Tailwind v4 @theme, variables CSS o DESIGN_SPECS.md.

Extraer el sistema de diseño →

Gratis

Inspector CSS

Pasa el ratón y ve el CSS calculado, la caja, los márgenes y las distancias.

Inspector CSS →

Precios

Gratis para siempre. Pro, 49 € una sola vez.