Sitio web de Claude Code a Divi 5 a través de Novamira

Seguramente ya estás haciendo sitios web con inteligencia artificial: le pides un diseño a Claude Code, a Claude Design o a Codex, y en unos minutos tienes un HTML listo para subir a cualquier hosting. El problema llega después, cuando tu cliente (o tú mismo) necesita editar ese diseño dentro de WordPress, con un constructor visual, sin tocar código. Hasta hace muy poco eso no era posible. Hoy sí, y la combinación que lo resuelve es Claude Code, Divi 5 y Novamira: Novamira es el puente, Claude Code es el que ejecuta y Divi 5 es donde se maqueta todo con módulos nativos.

En este tutorial te muestro paso a paso cómo conectar Claude Code a tu WordPress con Novamira Pro, el prompt exacto que usé para replicar un diseño HTML en Divi 5, el resultado real (con sus fallos) y si de verdad vale la pena pagar la versión Pro.

🛠️ Enlaces de este tutorial
Descarga Novamira desde novamira.ai (enlace de afiliado) y usa el cupón UXDIVI10 para tener un 10% de descuento en la versión Pro.
Si quieres ver el flujo completo aplicado a un proyecto real, en El Método Vibe Coding construimos una plataforma entera con Novamira. Y si prefieres el agente oficial de Elegant Themes, tienes el curso de Divi AI Agent con lo bueno y lo malo del agente.

¿Qué es Novamira y por qué es el puente entre Claude Code y Divi 5?

Novamira es un plugin de WordPress creado por Dynamic.ooo que conecta tu sitio con agentes de inteligencia artificial como Claude Code o Codex. Funciona como un conector MCP: le da al agente acceso a tu WordPress y, sobre todo, le explica cómo están construidos los constructores visuales para que pueda crear bloques dentro de ellos en lugar de escupir HTML.

Esa es la clave. Claude Code sabe programar, pero no sabe de entrada cómo guarda Divi 5 una sección, una fila o un módulo de grupo. Novamira le da ese conocimiento. Es algo muy parecido a lo que hace el Divi AI Agent, del que ya publiqué una review honesta después de probarlo a fondo. La diferencia es que Novamira no se casa con un solo constructor.

Además de Divi 5, Novamira entiende Elementor, Bricks, Beaver Builder y Breakdance, y también se lleva bien con WooCommerce, ACF, Meta Box, JetEngine y temas como Astra o GeneratePress. En la práctica maneja los constructores más populares del mercado, así que si mañana un cliente te pide Elementor, el flujo es el mismo.

Novamira gratis vs. Novamira Pro: ¿cuál necesitas para Divi 5?

Novamira tiene una versión gratuita que sí o sí vas a necesitar, porque la Pro funciona encima de ella. Con la gratuita puedes hacer pruebas, pero en mi experiencia no construye como uno quiere. Con Elementor funciona más o menos bien y entiende los widgets gratuitos, pero no construye completo. Con Divi 5 la cosa es más clara: necesitas la versión Pro, porque ahí es donde los desarrolladores metieron el conocimiento de los módulos nuevos de Divi 5 (y de los widgets Pro de Elementor).

La versión Pro arranca en 49 € al año con el plan Personal, que es el que yo compré para hacer pruebas y el que uso en este tutorial. Si lo vas a usar para ti o para pocos clientes, te alcanza perfecto. También existe un plan Agency (149 € al año) y un Agency Lifetime (299 € en pago único). Con el enlace de afiliado y el cupón UXDIVI10 te sale un 10% más barato sobre cualquiera de esos precios.

Consejo: prueba primero la versión gratuita con tu constructor. Si ves que se acopla a lo que necesitas, da el salto a la Pro. Para Divi 5, eso sí, no esperes resultados serios sin la Pro.

Lo que necesitas antes de empezar

Para este flujo necesitas tres cosas: un diseño ya hecho en HTML (el mío lo hizo Claude Code, pero puede venir de Claude Design, de Codex o de donde tú quieras), la carpeta con los assets de ese diseño (imágenes, íconos) y un sitio de pruebas con Divi 5 actualizado. El flujo es exactamente el mismo si tu diseño viene de Claude Design.

Uso un sitio de pruebas por una razón muy concreta: el agente ejecuta PHP como administrador y los cambios en la base de datos no tienen botón de deshacer. De hecho, Novamira te muestra una alerta cuando detecta que estás en un sitio en producción. Hazle caso.

Paso a paso: cómo conectar Novamira con Claude Code

Paso 1: instala Novamira gratis y Novamira Pro

Primero instala y activa el plugin gratuito de Novamira. Después ve a Plugins, Añadir nuevo, Subir plugin, y sube el ZIP de Novamira Pro que descargaste de tu cuenta. Actívalo también.

Paso 2: activa la licencia y actualiza

Agrega tu licencia en la pantalla de Novamira Pro. Con la licencia activa, vuelve a Plugins y busca actualizaciones: lo más probable es que el ZIP que subiste no sea la versión más reciente, y con esto te aseguras de trabajar con la última.

Paso 3: enciende las habilidades de IA

Entra a Novamira, Configuración, y enciende las habilidades de IA (vienen apagadas por defecto). Guarda los cambios. Aquí aparece el aviso de sitio en producción que te comentaba.

Paso 4: elige tu agente y el método de conexión

En el segundo paso de la configuración eliges con qué herramienta vas a conectar Novamira. La lista es larga: Claude Code, Claude Desktop (si trabajas con Claude Cowork o el chat de Claude), ChatGPT, Codex en escritorio o por CLI, Antigravity, Cursor, Grok, GitHub Copilot y varios más. Yo elegí Claude Code, pero los pasos son idénticos con Codex.

Después eliges el método de conexión. Hay tres opciones y Novamira recomienda su propio CLI, pero yo usé la contraseña de aplicación: la generas ahí mismo, copias el prompt que te prepara Novamira y listo.

Paso 5: pega el prompt en Claude Code y reinicia la sesión

Abre un chat nuevo en Claude Code, pega el prompt y presiona Enter. Ese prompt ya trae la URL del sitio y todo lo necesario para la conexión. Claude Code hace un respaldo de tu configuración, agrega el servidor MCP y te avisa cuando está listo. Si es la primera vez, te va a pedir que te autentiques: iniciar sesión en el sitio y confirmar desde Claude Code. A mí no me lo pidió porque ya había hecho esa conexión en pruebas anteriores.

Consejo: cada vez que agregas un servidor MCP tienes que cerrar y volver a abrir Claude Code (o arrancar un chat nuevo) para que lo cargue. Después pídele que verifique que puede usar la conexión: te ahorras pelear con un error que no existe.

Con la conexión verificada, te recomiendo preguntarle a Claude Code qué puede hacer en tu sitio a través de Novamira. No solo construye en Divi o Elementor: también puede crear productos de WooCommerce, configurarte la tienda y un montón de tareas más.

🎓 ¿Quieres dominar Claude Code de verdad?
En el Curso de Claude Code te enseño a instalarlo, conectar servidores MCP, manejar sesiones y trabajar con él como tu developer personal. Accede como suscriptor y deja de pelear con la configuración.

¿Novamira es la mejor forma de conectar Claude Code con WordPress?

Para construir en un constructor visual, es de lo mejor que he probado. Pero para trabajar con WordPress en general, mi respuesta honesta es no. La mejor forma, para mí, es conectar Claude Code por SSH al servidor. Así tiene acceso a todo: la base de datos, todos los archivos, puede programar y hacer lo que necesites.

Si tu hosting no tiene SSH, mi primer consejo es que lo cambies. Yo llevo unos tres años con Hostinger (con 20% de descuento en este enlace) y en términos generales me ha ido bastante bien; el soporte no es su punto fuerte, pero el servicio sí. Si buscas algo más económico para sitios pequeños, Banahosting funciona bien, aunque no tiene SSH. Tengo una comparativa más amplia de los mejores hosting para WordPress y Divi si quieres ver más opciones.

El prompt para replicar un diseño HTML en Divi 5

Con todo conectado, llega lo que vinimos a ver. Copié la ruta del archivo HTML y la ruta de la carpeta de assets, y le dicté este prompt a Claude Code:

Crea una nueva página en este sitio web, sin header ni footer (tipo de página: blank page).
Necesito que repliques lo más posible el diseño de este HTML: [ruta del archivo HTML]
Usa bloques nativos de Divi 5. Lo que no puedas replicar exacto, hazlo lo más aproximado posible.
Usa los assets que están en esta ruta: [ruta de la carpeta de assets]
Comienza por crear la página y haz todo de una sola corrida.
Cuando termines, avísame para revisarlo.

Por cierto, no lo escribí: lo dicté con Handy, una herramienta gratuita y de código abierto para dictarle a la IA que funciona bastante bien. Como modelo usé Opus con esfuerzo alto.

Consejo: pásale siempre la ruta de los assets. Si no lo haces, el agente va a improvisar imágenes o dejar huecos. Con la ruta, sube las imágenes a la biblioteca de medios y las usa directamente en los módulos.

El resultado: 31 minutos y 195 módulos nativos de Divi 5

Claude Code tardó exactamente 31 minutos. Algo que me gusta de cómo trabaja con Novamira es el orden: primero carga los presets y todos los elementos gráficos, después construye módulo por módulo, detecta fallos, los corrige y hasta revisa la versión móvil antes de avisarte.

Al terminar me entregó un resumen: 195 módulos en 14 secciones, todos nativos. Usó textos, títulos, filas, columnas, secciones, botones, un formulario de contacto y módulos de grupo de Divi 5, que me encanta que use porque es justo lo que hay que usar en muchas partes. Nada de módulos raros: cero módulos de código, cero estilos inline, y las 19 imágenes salieron de la biblioteca de medios.

Ahora, la parte honesta: Novamira ya conocía este layout. Lo había construido al menos dos veces antes en mis pruebas, así que en esta demostración nos saltamos la iteración. En un primer intento no te va a quedar exactamente igual al HTML. Hay que iterar. Aun así, la estructura quedó bastante bien y lo que faltaba corregir era muy poco.

Lo que tuve que ajustar a mano

• Bordes redondeados: faltaron en casi todas las imágenes. Sería lo primero que le pediría en una segunda iteración.
• Color de los enlaces: salían en azul porque la variable global de color de enlace estaba en azul. La cambié en las variables de Divi 5 y, en los textos donde el color estaba fijo, asigné esa variable global.
• Estilo de lista: un bloque de texto tenía un estilo que no correspondía; con el estilo de lista con viñetas quedó igual a la muestra.
• Una sección en móvil: la dejó en flex al 100% hacia abajo. Con opciones de grid en móvil quedaría mejor, pero eso ya lo hice yo a mano.

Me dio curiosidad cómo resolvió los efectos más particulares del diseño, como unos textos que van transicionando. Lo que hizo fue meter el texto en un módulo nativo y aplicarle un pequeño CSS con un selector directamente en el módulo. Me parece correcto: donde hace falta un efecto que Divi no trae, un CSS pequeño y localizado está bien. En móvil, en términos generales, se ve muy bien.

🎓 ¿Quieres aprender más sobre variables y presets en Divi 5?
En el Curso de Divi 5 completo te enseño a trabajar con variables globales, presets y módulos de grupo, justo lo que necesitas para pulir en minutos lo que construye la IA. Accede como suscriptor y deja cada página lista para entregar.

Caso real: una plataforma completa construida con Novamira

Esto no es solo una demo de una landing. Solo en Calma es una plataforma que construimos al 100% (y a la que ahora le estamos haciendo la app), y todo su diseño lo pasó Novamira desde Claude Design directamente a Divi 5, con estilos y módulos nativos. La tienda, el layout de producto y el blog también los hizo Novamira.

Ojo: tampoco salió a la primera. Tuvimos que iterar varias veces y hubo unas pocas cosas que valía más la pena ajustar a mano. Todo ese proceso, con sus aciertos y sus tropiezos, lo muestro en El Método Vibe Coding.

¿Vale la pena pagar Novamira Pro?

Si trabajas con Divi 5 y quieres pasar diseños hechos con IA a módulos nativos editables, sí. Al menos el plan Personal vale bastante la pena para probar. Con la versión gratuita no vas a conseguir un resultado serio en Divi 5, y la diferencia entre entregarle a un cliente un HTML que no puede tocar y una página que edita desde el constructor es enorme.

Lo que todavía no sé es si el Divi AI Agent va a superar a Novamira en algún momento. Por eso estoy preparando un video comparativo en YouTube: un diseño nuevo desde cero, las dos herramientas construyendo al mismo tiempo desde Claude Code, cada una en su página, y los resultados lado a lado.

Recomendaciones finales

1. Trabaja siempre en un sitio de pruebas o staging. El agente tiene permisos de administrador y no hay deshacer.
2. Pide explícitamente módulos nativos de Divi 5 en el prompt. Si no lo dices, corres el riesgo de que resuelva con HTML.
3. Cuenta con iterar. El primer resultado es un muy buen punto de partida, no la entrega final.
4. Revisa las variables globales que creó el agente. Muchas de las diferencias visuales se arreglan cambiando una sola variable, no módulo por módulo.

🎓 ¿Quieres dominar el flujo completo de diseño con IA a Divi 5?
En El Método Vibe Coding te muestro cómo construimos Solo en Calma con Claude Design, Claude Code y Novamira, y cómo uso este método para crear sitios y proyectos completos para clientes de más de 20,000 dólares. Accede como suscriptor y aplícalo en tu próximo proyecto.

Conclusión

Con Claude Code, Divi 5 y Novamira ya puedes tomar un diseño hecho con IA y convertirlo en una página que tu cliente edita desde el constructor, con módulos nativos y sin código. No es magia ni sale perfecto a la primera, pero en 31 minutos me dejó una estructura sólida que se pule con pocos cambios. Una vez que lo tienes conectado, el cuello de botella deja de ser la maquetación.