Divi AI Agent: todas las novedades del agente de Divi 5

Llevo meses prometiéndote en el canal que te iba a traer cada movimiento de Elegant Themes en materia de inteligencia artificial, y este es de los gordos. Acaba de salir un video donde Nick muestra cómo evolucionó el Divi AI Agent, y la idea de fondo es que vas a poder trabajar como trabajas hoy con Claude o con Codex, pero dentro del constructor de Divi 5, sin salir a ninguna otra herramienta.

Entre la academia y mi estudio de diseño llevo más de diez años haciendo sitios con Divi, y te lo digo con honestidad: esto es un cambio de paradigma para los dos lados del negocio. Elegant Themes fue de las últimas empresas del ecosistema en subirse al barco de la IA, pero por fin lo está haciendo, y lo está haciendo por donde más importa: el constructor. Aquí te cuento todo lo que mostraron, función por función, y también las tres preguntas que la demo deja abiertas y que a mí me siguen dando vueltas.

¿Qué es el Divi AI Agent y por qué cambia la forma de maquetar?

El Divi AI Agent es un agente de inteligencia artificial que vive dentro del constructor de Divi 5 y ejecuta por su cuenta las mismas acciones que harías tú a mano: crear secciones, aplicar estilos, generar variables, guardar presets, editar módulos. Esa es la diferencia real con lo que ya conocías. El Divi AI de siempre generaba textos e imágenes; este agente construye, y construye con módulos nativos de Divi, que es justamente lo que se les venía pidiendo desde hace años.

Cuando lo enseñaron por primera vez ya te conté mis impresiones honestas sobre ese primer vistazo al agente. Aquella vez era un adelanto corto, casi un teaser. Esta versión tiene decenas de funciones nuevas encima y se ve mucho más cerca de algo usable en producción.

Quédate con este concepto, porque es el que define todo lo demás: la interfaz de diseño de Divi 5 del futuro es doble. Por un lado sigues teniendo el canvas, donde ves cómo se arma el diseño bloque por bloque y puedes entrar a editar cualquier elemento con el detalle de siempre. Por otro lado, a la izquierda, tienes el panel del agente, al que le vas pidiendo cosas en lenguaje natural. Ninguna de las dos reemplaza a la otra: el chat hace el volumen de trabajo y el canvas te da el control fino.

De una imagen de referencia a una sección construida

Esta es la función que abre la demo y la que más impresiona. Arrastras al constructor una imagen con el layout que quieres —una captura, una referencia de diseño, lo que sea— y le pides que construya algo igual o parecido. En segundos el agente lo arma dentro del builder: toma los colores, toma las tipografías, crea los bloques de texto, las imágenes, los botones y todo lo que contenga esa referencia.

Consejo: Si vas a trabajar con imágenes de referencia, pásale capturas limpias y a resolución decente. Una captura con el menú del navegador, la barra de tareas y medio cursor encima le mete ruido al agente y la reconstrucción se degrada.

En el ejemplo del video construye una sección hero para una cafetería y, además de replicar la estructura, detecta que necesita cuatro imágenes y sale a buscarlas en stock. También puede generar imágenes con IA si se lo pides. Después le lanzan un reto mayor: la home completa de una bodega de vinos, a partir de una sola imagen de referencia. Tardó unos 45 segundos y el resultado coincide bastante bien con el original.

Y ojo, que las imágenes de referencia son solo una de las vías. También puedes describirle el diseño por texto, con instrucciones detalladas de estructura, guías de marca y copy incluidos. El agente maneja una ventana de contexto grande, así que no tienes que resumirle el proyecto en dos líneas.

Variables globales y presets generados solos

Aquí viene la parte que a mí me interesa más que la generación en sí, porque es la que separa un layout bonito de un sitio mantenible. Una vez que el agente construyó la sección, te pregunta si quieres convertir todos esos colores en variables globales. Le dices que sí y te las deja creadas dentro del gestor de variables de Divi 5, listas para reutilizar en el resto del sitio.

🎓 ¿Quieres dominar el sistema de diseño de Divi 5 antes de que llegue el agente?
En uxdivi.com/cursos tengo contenido premium sobre variables globales, presets anidados y componentes reutilizables en Divi 5. Accede como suscriptor y llega a la beta sabiendo exactamente qué pedirle al agente.

Lo mismo con los presets. Le pides que convierta esos módulos en presets y te genera el preset de botón, el de texto y el de encabezado con los estilos que acaba de crear. Si ya trabajas con presets anidados en Divi 5, sabes el tiempo que ahorra tener eso resuelto sin entrar a modo edición de preset, nombrarlo, guardarlo y salir.

También mostraron algo que en agencia se agradece: duplicar una sección e invertir los colores para tener la versión en dark mode, y guardar ambas variantes en la biblioteca de un solo pedido. Dos versiones de la misma sección, listas para usar, sin tocar un solo campo de color a mano.

Reglas, comandos, contexto y scope: los cuatro controles que de verdad importan

Si ya usas agentes de IA para trabajar, estos cuatro nombres te van a sonar muchísimo, y esa es precisamente la buena noticia: Elegant Themes no se inventó un vocabulario propio, adoptó el que ya funciona.

Reglas (rules)

Una regla es una instrucción persistente. Después de crear los presets, le pides que genere una regla del tipo "siempre que agregues un botón, usa este preset". A partir de ahí, cada vez que le pidas una sección nueva —una que no salga de ninguna imagen de referencia, sino de cero— va a respetar esa tipografía, ese botón y ese estilo de fondo.

Y aquí está la clave, porque es donde se equivoca casi todo el mundo: el agente no es coherente por sí solo. La coherencia se la das tú con las reglas. Y las reglas no sirven solo para presets: también puedes cargar contexto del negocio del cliente, sus guías de marca o conocimiento propio tuyo, para que trabaje con esa información en todo el proyecto.

Consejo: Define las reglas antes de generar en volumen, no después. Si arrancas pidiendo diez secciones y luego intentas unificarlas, vas a terminar corrigiendo a mano lo que el agente pudo haber hecho bien desde el principio.

Comandos con barra

Los comandos son prompts guardados que ejecutas escribiendo una barra y el nombre del comando. Si hay tareas que repites siempre —crear una sección de tres columnas para features, hacer una limpieza del diseño, auditar los colores estáticos de la página y pasarlos a globales— las guardas una vez y después las disparas en dos segundos.

Es algo parecido a una skill, pero en versión micro: una tarea concreta que el agente repite igual todas las veces. Uno de los ejemplos del video me pareció especialmente útil para quien viene de la versión anterior: un comando que convierte un layout de Divi 4 basado en bloques a estructura flex.

Contexto con arroba

Escribes una arroba y se abre un buscador de contexto donde eliges qué quieres que el agente tenga en cuenta: un elemento de la página, un preset, una variable, un canvas o incluso una herramienta específica. En la demo lo usan para agregar un botón aplicando un preset concreto: arroba, nombre del preset, "agrega un botón", y el botón sale con ese preset puesto.

Scope

El scope es hacer clic en un elemento de la página para que quede marcado dentro del chat. En vez de explicarle con palabras cuál de las cuatro imágenes quieres cambiar, la seleccionas y le dices "agrégale un borde y una sombra". Funciona igual que cuando seleccionas un elemento en Claude Design y le das la instrucción encima: el agente no tiene que investigar nada, ya sabe de qué le hablas, y por eso responde en un par de segundos.

Cola de tareas

No tienes que esperar a que termine una tarea para pedirle la siguiente. Le escribes varias instrucciones seguidas y se van acumulando en una fila que el agente procesa una por una mientras trabaja. Suena a detalle menor y no lo es: cambia el ritmo de la sesión, porque tú sigues pensando el diseño en vez de quedarte mirando un spinner.

Al margen de estos cuatro, hay un panel de herramientas donde puedes ver todo lo que el agente es capaz de hacer, y la lista es más larga de lo que uno esperaría. Ahí aparecen desde acciones de interfaz —abrir y cerrar modales, acoplarlos, redimensionarlos, crear espacios de trabajo personalizados, ajustar breakpoints— hasta cosas que ocurren fuera del constructor, como actualizar el menú del sitio o cambiar asignaciones de plantillas del Theme Builder.

Modo build y modo ask: construir o preguntar

El agente tiene dos modos. En modo build ejecuta acciones sobre tu diseño. En modo ask no toca nada: te responde dudas. Y este segundo modo es más interesante de lo que parece, porque no responde con conocimiento genérico de internet, sino con acceso directo a toda la documentación del centro de ayuda de Elegant Themes y a miles de fragmentos de conocimiento propio que su equipo de soporte usa para atender consultas.

Dicho de otra forma: es el soporte de Elegant Themes metido dentro del constructor, respondiendo al instante. Si apenas estás empezando con Divi 5 y te trabas con algo, en vez de abrir un ticket y esperar, preguntas ahí mismo. En el video la prueba es preguntarle cómo funciona el aspect ratio en Divi, y el agente busca la documentación, la trae y arma la respuesta.

Puedes elegir el modelo… y ahí aparece el precio

Al final del video muestran el selector de modelos y aparece prácticamente cualquier modelo que se te ocurra: los de Claude que ya conoces, los de OpenAI, y una lista larga de opciones. Tienen algunos marcados como recomendados —los que más han probado— y una opción automática que rutea cada petición al modelo que consideran más eficiente en costo para esa tarea concreta.

Pero lo que me llamó la atención de verdad fue otra cosa: a la derecha de cada modelo aparecen números que se ven como el costo de ese modelo. Y ese detalle abre la pregunta grande de todo este asunto.

Las tres dudas que la demo no resuelve

Todo lo de arriba es lo que mostraron. Lo que viene ahora es lo que no mostraron, y como diseñador que va a tener que tomar decisiones de negocio con esta herramienta, me importa igual o más.

¿Va incluido en Divi o se paga aparte?

No lo confirmaron. En una actualización anterior comentaron que esto forma parte de Divi AI, que es un servicio independiente del tema. Si eso se mantiene, comprar Divi no te daría el agente y tendrías que sumar una suscripción aparte a Elegant Themes.

Mi lectura, y quiero ser claro en que es una hipótesis mía y no un dato confirmado, es que hay dos escenarios posibles. Uno: el agente viene incluido en el constructor y lo que pagas es tu propia API del modelo que elijas, conectándola tú. Dos: pagas una mensualidad a Elegant Themes ligada a un paquete de créditos que se van consumiendo con el uso, y esos números que se ven junto a cada modelo son la referencia de ese consumo. Por lógica de modelo de negocio, la segunda me parece la más probable. Buena para ellos, menos buena para nosotros.

¿Te va a responder en español?

Toda la demo está en inglés y no dicen nada del tema. Si tienes el sitio en español y le escribes en español, ¿te contesta en español? ¿Y si tu idioma es italiano, portugués o japonés? Yo pienso que sí, porque al ser un agente sobre modelos de lenguaje ya lo hacen todos, y no lo veo como una limitación real. Pero prefiero comprobarlo en la práctica antes de afirmarlo.

¿Podrás subirle un HTML completo?

Esta es la grande, y es la misma pregunta que dejé abierta cuando hablé del agente por primera vez. En la demo solo le pasan imágenes: una sección o un layout entero, pero siempre en formato imagen. Ningún otro tipo de archivo.

Si Elegant Themes permite que le subas el ZIP o el HTML de un proyecto que ya construiste con Claude Code, con Claude Design, con Codex o con el agente que uses, y el Divi AI Agent lo interpreta y lo reconstruye con módulos nativos de Divi, eso sí es un game changer de verdad. Para Divi, para Elegant Themes y para todos los que maquetamos con este constructor.

El razonamiento es sencillo. Hoy ya sabemos que se pueden crear sitios rapidísimo y muy bien con agentes de IA. El problema aparece después: editar y mantener ese sitio te deja dependiendo del agente para siempre. Pero si ese proyecto lo puedes maquetar de forma nativa dentro de WordPress, con Divi, con las variables puestas y los presets creados automáticamente, entonces tienes lo mejor de los dos mundos: la velocidad de pre-construir con IA y un framework serio detrás para proyectos que lo necesitan, como un e-commerce o una plataforma de e-learning. Eso es lo que muchos venimos pidiendo desde hace años, y no solo los que usamos Divi.

🎓 ¿Quieres aprender a vender proyectos con este flujo, no solo a construirlos?
Ya está abierto El Método Vibe Coding, el curso premium donde enseño el método completo con el que vendo proyectos de miles de dólares combinando IA y Divi, con ejemplos reales. Accede como suscriptor y trabaja el negocio, no solo la herramienta.

Qué significa esto si trabajas con Divi

Lo evidente es que vas a producir mucho más rápido. Layouts, presets, variables y variantes en dark mode en cuestión de segundos. Si tienes agencia, eso te deja entregar antes, tomar más proyectos o mejorar margen, con una consecuencia incómoda que conviene mirar de frente: si produces varias veces más rápido, cobrar por hora te penaliza. La conversación de precio se mueve hacia el valor del proyecto.

Lo que a mí me tiene más tranquilo es otra cosa: tu diferencial deja de ser saber armar en Divi. Eso lo va a hacer el agente. Tu diferencial pasa a ser la dirección de arte, el criterio de UX, la estrategia y la relación con el cliente. Todo lo que la IA no decide por ti. Ahí es donde vale la pena que pongas tus horas de aprendizaje este año.

Consejo: Cuando abra la beta, mide desde el primer día cuánto te cuesta en modelo cada proyecto real. Ese número te va a servir para dos cosas: decidir si te conviene y ponerle precio a tus entregas con datos en la mano, no a ojo.

Mis recomendaciones para prepararte desde ya

La beta llega en una o dos semanas según lo que anunciaron. Estas son las cosas que yo haría mientras tanto:

1. Ordena tu sistema de diseño en Divi 5 ahora. Variables globales y presets bien montados hacen que el agente trabaje sobre una base sólida en vez de inventarse la suya.
2. Arma una carpeta con imágenes de referencia limpias de los layouts que más repites. Van a ser tu materia prima el día uno.
3. Haz una lista de las tareas que repites en cada proyecto. Esas son tus futuros comandos, y tenerlas escritas te ahorra media hora de pensar cuando abras la beta.
4. Practica escribiendo instrucciones precisas. El agente responde a lo que le pides, y saber pedir bien se está convirtiendo en una habilidad de diseño más.
5. No cambies tu flujo actual todavía. Es una demo de una beta que aún no sale, y la beta real siempre es más áspera que el video de lanzamiento.

🎓 ¿Quieres llegar a la beta dominando Divi 5 de verdad?
En el curso completo de Divi 5 en español cubro el constructor entero desde cero: variables, presets, flexbox, grid, Loop Builder y Theme Builder. Accede como suscriptor y llega al agente sabiendo exactamente qué pedirle y cómo corregirlo.

Conclusión

El Divi AI Agent es la actualización más importante que le ha pasado a Divi en años, y la mejor señal es que Elegant Themes entendió por dónde va el asunto: un agente que construye con módulos nativos, con reglas y comandos que tú controlas, y con el canvas intacto para el trabajo fino. Lo que falta por saber es cuánto cuesta, si nos habla en español y si va a aceptar proyectos completos en HTML. En un par de semanas lo probamos en serio y te lo cuento sin filtro, como siempre, con la herramienta abierta y proyectos reales encima.