Exportar Claude Design a un tema de WordPress con la app html2wp
Con la app html2wp conviertes un diseño de Claude Design en WordPress, sin terminal. Para exportarlo, guardas el diseño como HTML. Después lo añades a la app, eliges Flash o Full y al final descargas un tema de WordPress que se ve como tu diseño.
Lo que necesitas para convertir tu diseño de Claude Design en la app
- Un Mac con Apple silicon (M1 o posterior) y macOS 12 o posterior.
- Una cuenta de ChatGPT. La conversión la hace la IA con tu propia suscripción, así que no nos pagas créditos.
- Tu diseño exportado de Claude Design: el diseño guardado como archivo HTML. Si tienes varias páginas, guarda cada una como un archivo aparte.
El HTML de Claude es la ruta más corta hacia un tema, porque la app no tiene que compilarlo ni abrirlo antes en un navegador. El plan gratuito convierte tres sitios de hasta cinco páginas cada uno. Para trabajos de clientes necesitas una licencia Pro de la página de precios.
Instalación, entorno e inicio de sesión
Descarga la app para Mac y muévela a la carpeta Aplicaciones. En "Settings" (Ajustes), haz clic en "Prepare environment", y la app descarga Docker y el entorno de conversión. Luego inicia sesión con "Connect with ChatGPT". La guía de Lovable para la app explica cada uno de estos pasos en detalle con capturas, y para Claude son los mismos.
Exporta el diseño de Claude Design y añádelo a la app
Para exportar el diseño de Claude Design, descarga el artefacto en Claude como archivo .html. 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 en la misma carpeta, en los lugares que espera el código. Las demás páginas, como Sobre nosotros o Contacto, van al lado como about.html y contact.html. La app deduce por el nombre del archivo qué página es cada una.
En la app, haz clic en "New project" (⌘N), deja "HTML WordPress theme" como salida y elige "Choose a folder". Si has comprimido la carpeta en un ZIP, usa "Import a ZIP".
Flash o Full para el tema de WordPress
Flash es la opción por defecto: cada paso se ejecuta una vez y tarda una media hora. Full ejecuta todas las comprobaciones e intenta corregir errores, así que tarda alrededor de una hora. Un diseño de una página suele quedar en el extremo corto, pero las comprobaciones se ejecutan igualmente completas.
Durante la conversión, la pestaña "Overview" muestra lo que está haciendo la app. Para pausarla, haz clic en "Stop conversion" y luego retómala con "Continue".
Revisar el diseño en la app
La pestaña "Compare" muestra el original y la versión de WordPress lado a lado, con ancho de escritorio y de móvil. Revisa todas las páginas, porque las comprobaciones automáticas detectan la mayoría de las diferencias, pero no todas. Si algo no coincide, escríbelo en el chat. El cambio se hace en la vista previa, y después "Make release" empaqueta una nueva versión del tema.
Del diseño de Claude Design al tema de WordPress: descarga el ZIP
En la pestaña "Exports", haz clic en "Save" junto al tema de WordPress y guarda el ZIP. En WordPress, lo subes en Apariencia → Temas → Añadir nuevo → Subir tema. El tema es independiente: las páginas, los formularios, los menús y el SEO funcionan sin plugin.
El editor Visual Edit añade la edición con un clic para tu cliente. Si trabajas en la terminal, la guía con el plugin para Claude Code y Codex cubre la misma conversión.