html2wp / Blog / De Claude Design a WordPress
De Claude Design a WordPress: cómo convertir tu diseño en un tema de WordPress
Pasar un diseño de Claude Design a WordPress es la ruta más corta de todos los diseños generados. Si Claude te dio el diseño en HTML, es justo la entrada que quiere el convertidor: sin compilación, sin un paso extra en el navegador y sin framework. Solo tienes que comprobar si un artefacto basta para tu sitio web. La conversión se ejecuta en tu propio equipo, así que necesita Docker, Node y Python. La lista está más abajo, y es corta.
Publicado el · actualizado el · más corta que la ruta de Lovable, sin paso de compilación¿Qué resultado te dio Claude Design?
Claude crea dos tipos de resultado, y cada uno sigue una ruta distinta. Comprueba cuál tienes antes de empezar, porque de eso depende cuánto dura la conversión.
| Lo que te dio Claude | Qué es | Ruta |
|---|---|---|
| Artefacto HTML |
Un archivo .html autónomo: el código, los estilos y los scripts están todos dentro. |
Este artículo. Ya es HTML plano, justo la entrada que necesita el convertidor. |
| Artefacto React |
Un componente. La página solo aparece después de que se ejecuta JavaScript. El HTML que lo rodea es un elemento vacío en el que se monta la app. | La guía de Lovable: el mismo tipo de entrada, el mismo paso extra. |
Si no estás seguro, abre el archivo y mira dentro del <body>. Si ahí ves tus títulos y párrafos, tienes un artefacto HTML y estás en el sitio correcto. Cuando el body es un único <div> vacío y una etiqueta script, tienes el otro tipo.
Por qué HTML es el caso más fácil
Un proyecto React primero hay que compilarlo y luego abrirlo en un navegador real antes de que haya algo que convertir. Un artefacto HTML se salta ese paso. El código ya está escrito en el archivo, y todos los pasos posteriores leen de él.
Exporta el diseño de Claude Design a una carpeta, con imágenes
La entrada siempre es una carpeta en tu disco. La dirección de un sitio publicado no es una entrada válida, y es a propósito. Una copia de una página publicada conserva solo el resultado renderizado y pierde lo que sabe el archivo fuente.
Así que exporta el diseño desde Claude (descarga el artefacto), crea una carpeta y guarda en ella el archivo como index.html. Si el diseño enlaza imágenes que no están dentro del archivo, ponlas a su lado, en las mismas rutas relativas que espera el código.
mkdir my-site && cd my-site
mv ~/Downloads/artifact.html index.html
mkdir -p images # if the design uses any images
¿Una página o más?
Un artefacto es una página, y un sitio de una sola página se convierte sin problemas. Pasa a ser la portada del tema. Si quieres un sitio con páginas Sobre nosotros y Contacto, pídeselas también a Claude. Guarda cada una como su propio archivo .html en la misma carpeta. Los nombres de archivo importan: el análisis los lee y entiende por su nombre un archivo llamado blog.html o about.html.
Si te quedas en cinco archivos o menos, toda la conversión cabe en el plan gratuito.
Requisitos en tu equipo para pasar de Claude Design a WordPress
La ruta más corta también se ejecuta en tu equipo, y los requisitos no se reducen. El navegador y el WordPress temporal están ahí para comprobar el resultado, no para producirlo:
- Node 20 o posterior y Python 3 con los paquetes Playwright y Pillow.
- Docker con el comando
docker compose. Arranca un WordPress temporal en tu equipo, y el convertidor instala ahí el tema antes de que lo veas. - php-cli, porque cada archivo PHP pasa una comprobación de sintaxis antes de entrar en el ZIP.
jq,curl,bashytar. El WordPress de destino debe tener la versión 6.6 o posterior.
El primer paso comprueba todo esto. Separa lo que puede instalar por sí mismo dentro de tus propias carpetas de lo que tienes que decidir tú. No instala Docker por ti a menos que se lo pidas.
Docker no es opcional, y es lo que más sorprende
Un convertidor en el navegador no lo necesita, porque se salta este paso. Aquí el tema generado entra en un WordPress real, y el convertidor lo prueba ahí antes de que lo veas. Para eso sirve el contenedor. Si Docker no está en marcha, la conversión se detiene en el primer paso y te avisa enseguida, no al final.
Ejecuta la conversión de Claude Design a WordPress
Claude Code
/plugin marketplace add iOSDevSK/html2wp-cc-plugin /plugin install html2wp@html2wp
python3 -m playwright install chromium
Codex
codex plugin marketplace add iOSDevSK/html2wp-codex-plugin codex plugin add html2wp@html2wp
Después, desde cualquier carpeta, escribe:
/html2wp:html2wp
convert ./my-site
La ruta de la carpeta es toda la instrucción. No escribes ningún archivo de configuración ni eliges un comando de compilación. En Codex, escribe convert ./my-site with html2wp. Si prefieres no trabajar en una terminal, puedes abrir la misma carpeta en la app de escritorio html2wp (una guía con capturas de pantalla).
Flash tarda unos 30 minutos y Full alrededor de una hora, según el número de páginas y la velocidad de tu equipo. Un artefacto de una página queda en el extremo corto, pero las comprobaciones siempre se ejecutan completas, por pequeña que sea la entrada.
Qué decide por ti y qué te pregunta
Antes de generar nada, mide tus archivos. Hace una lista de las páginas y averigua qué partes del código son compartidas y cuáles son únicas. También encuentra los tokens de diseño (colores, tipografías, espaciados), todo lo que parezca un blog y qué páginas son independientes. Luego escribe lo que piensa hacer y convierte según ese plan.
Un diseño generado suele tropezar con dos cosas:
- Se conservan todas las variantes del diseño. Si tus páginas no comparten la misma cabecera, no elige una ganadora para aplanar las demás. En su lugar crea una parte de plantilla para cada variante y conecta cada página con la que de verdad usaba. Los artefactos de distintos chats de Claude suelen diferir más de lo que recuerdas.
- Las llaves de tu texto sobreviven. El paso intermedio usa un formato parecido a JSX. Sin ese cuidado, una muestra de JSON o CSS en tu texto rompería la compilación o aparecería en la página como
{. El convertidor se encarga de ellas, así que las llaves siguen siendo llaves en la página.
Los grupos que se repiten, por ejemplo tarjetas, testimonios o unas preguntas frecuentes, se guardan como colecciones en lugar de marcado fijo. Gracias a eso, después puedes editarlos de verdad.
La revisión que no puedes saltarte
El convertidor pone cada página en una sola imagen junto a su original, y tú las lees todas de arriba abajo.
En una conversión faltaba una sección más abajo en la página. La comparación de píxeles mostró una diferencia de solo el 0,4 %, así que pasó la comprobación. Por su naturaleza, las comprobaciones numéricas no ven tres tipos de defecto. El primero es un control que se ve perfecto pero no hace nada. Otro es un valor fijo copiado de la única página de la que salió una plantilla. El tercero es todo lo que solo aparece después de desplazarte, hacer clic o enviar un formulario.
Comprueba también si puedes editar el contenido. Una página puede coincidir al píxel y, aun así, nadie puede editar desde wp-admin sus preguntas frecuentes o su cuadrícula de funciones. Ha pasado, y lo detectó esta revisión, no una comprobación automática.
Editar el sitio de WordPress después: tema, Visual Edit o constructor de páginas
En tu carpeta aparecen dos archivos: el ZIP del tema y, a su lado, CONVERSION-REPORT.md. El informe enumera lo que cubrió la conversión, lo que encontró la revisión y lo que sigue pendiente. El tema se instala como cualquier tema de WordPress (Apariencia → Temas → Añadir nuevo → Subir tema).
El tema es independiente. Las páginas, el blog, los formularios, los menús, el SEO y las redirecciones son código propio del tema. No necesita ningún plugin para funcionar y nunca se comunica con nuestro servidor. Las entradas del blog se escriben en el editor de bloques, y el texto de las páginas se queda en el HTML. Para editar las páginas sin código hay dos opciones: Visual Edit y un constructor de páginas.
| Ruta | Qué obtienes | Qué te cuesta |
|---|---|---|
| Solo el tema | Tu código, sin cambios, sin nada instalado encima. Nada que renovar y nada que se rompa con la actualización de otro. | Sin plugin, el texto de las páginas se cambia en el HTML. Si el cliente quiere editarlo él mismo, lo hace con Visual Edit (Lite es gratis). |
| Visual Edit, nuestro plugin | Haces clic en un título de la página, escribes encima y guardas. Editas textos, imágenes, enlaces, formularios y menús donde están, y el código queda como estaba. Lite es gratis y no necesita clave de licencia. | Un plugin más instalado. Lite guarda 10 pasos de historial y no tiene chat con IA. Pro añade ambas cosas y cuesta 59 € al año. |
| Elementor u otro constructor de páginas |
Un entorno conocido para quien ya lo usa, y un cliente que puede rehacer una página sin ti. | El código se reconstruye como widgets del constructor. Ya no es el diseño que hizo Claude. A partir de ahí el sitio no se muestra sin Elementor, y heredas su estructura, su CSS y sus actualizaciones. |
Un constructor de páginas es buena elección cuando el diseño es solo un punto de partida. Es mala elección cuando lo que entregas es el diseño. Si conviertes para que el diseño generado sobreviva en WordPress, rehacerlo como widgets anula el motivo por el que empezaste. Pero si otra persona va a rehacer la maquetación el próximo trimestre, su experiencia con Elementor puede valer más que un diseño fiel.
Lite o Pro, si eliges Visual Edit
| Lite (gratis) | Pro | |
|---|---|---|
| Editar el contenido con un clic | ✓ | ✓ |
| Formularios, menús, campos SEO | ✓ | ✓ |
| Edición mediante chat con IA | – | ✓, con tu propia clave de API |
| Exportación del tema | – | ✓ |
| Protección de formularios con Turnstile | – | ✓ |
| Edición de imágenes con IA y animaciones a partir de imágenes | – | ✓ |
| Historial de edición | 10 pasos | 300 pasos |
El chat con IA funciona con tu propia clave de API. No te vendemos tokens, y lo que cuestan lo arreglas directamente con tu proveedor.
Precio de pasar Claude Design a WordPress y lo que la conversión rechaza
Gratis para todos, sin clave y sin registro: tres conversiones de cinco páginas cada una y cinco repeticiones en total. Ambas cifras cuentan por dirección IP, así que una oficina con una sola dirección tiene un solo cupo. El plan gratuito sirve para probar la herramienta, para sitios personales y para trabajo no comercial.
Una licencia Pro elimina el límite de páginas y hace ilimitadas las conversiones y las repeticiones. También desbloquea el paso que convierte una tienda en WooCommerce. Ese paso nunca es gratis: la app rechaza de entrada una conversión gratuita de un sitio con tienda, en lugar de hacer la mitad. Puedes comprar Pro con pago mensual o anual en la página de precios. Durante la beta, el primer pago tiene un 30 % de descuento.
Una advertencia: esto es una beta. Las comprobaciones detectan la mayoría de las diferencias, no todas. Por eso leer cada página junto a su original es parte del proceso y no un retoque opcional. También por eso conviene que primero conviertas gratis algo tuyo, y solo después confíes en la herramienta.
Tienes una guía paso a paso de todo el proceso en la documentación de la app html2wp. Si tu artefacto es React, la guía de Lovable a WordPress describe esa ruta.