Cómo la IA genera un sitio WordPress completo en 2 minutos

Cada vez que alguien escribe una descripción de negocio en PAGEnza y presiona generar, algo bastante complejo sucede en segundo plano, en aproximadamente 90 segundos. Esta publicación explica exactamente qué es.

El problema con las plantillas

La mayoría de los constructores de sitios web de IA funcionan así: eligen una plantilla, reemplazan tu texto y lo llaman "generado por IA". El resultado se parece a cualquier otro sitio construido en esa plataforma.

PAGEnza funciona de manera diferente. No hay plantillas. Cada sitio comienza desde un lienzo en blanco de Gutenberg y se construye algorítmicamente a partir de un conjunto de reglas de diseño que llamamos Mandato de Diseño.

¿Qué es el Mandato de Diseño?

El Mandato de Diseño es un prompt estructurado, de aproximadamente 8.000 tokens, que describe cada decisión visual y estructural para un sitio específico. Se construye en Python antes de que se realice cualquier llamada a la IA, basándose en tu entrada.

Contiene seis partes:

Parte A — Identidad de Marca: industria, nombre del negocio, tono (por ejemplo, "profesional" vs "juguetón"), público objetivo.

Parte B — Sistema de Color: una paleta de 4 colores (tinta, fondo1, fondo2, acento) generada algorítmicamente y validada contra las reglas de contraste WCAG AA. Cada paleta se verifica con matemáticas de luminancia reales, no con suposiciones.

Parte C — Tipografía: un trío de fuentes (encabezado / cuerpo / acento) elegido entre más de 80 Google Fonts, filtrado por arquetipo de industria y verificado para incluir soporte de caracteres latin-ext.

Parte D — Plano de Diseño: la estructura de la página: qué secciones aparecen, en qué orden y con qué variante (por ejemplo, héroe con imagen de ancho completo vs. héroe con diseño dividido).

Parte E — Restricciones de Diseño: estilo del radio del borde (afilado / suave / redondeado), formas de los divisores de sección, tratamiento de imágenes, sistema de espaciado.

Parte F — Reglas de Contenido: qué texto va dónde, cómo se estructuran los titulares, qué CTAs aparecen.

Cómo se generan las paletas

El color es donde la mayoría de las herramientas de IA fallan. Pedirle a un LLM que elija colores te da códigos hexadecimales aleatorios que pueden verse bien de forma aislada pero fallan en las pruebas de accesibilidad, o simplemente se ven genéricos.

Adoptamos un enfoque diferente. Nuestro sistema de paletas funciona así:

1. Basándonos en tu industria y arquetipo (por ejemplo, "lujo", "atrevido", "terroso"), seleccionamos de 20 grupos de paletas pre-auditorizadas
2. Dentro de cada grupo, elegimos una paleta donde la tinta tenga un contraste de ≥4.5:1 contra todos los fondos
3. Verificamos que el acento tenga un contraste de ≥3.0:1 contra fondo1 y fondo2
4. Nos aseguramos de que los dos colores de fondo tengan temperaturas de color contrastantes (una cálida, una fría) para que las secciones se sientan distintas.

Si una paleta falla alguna verificación, se reemplaza automáticamente. Ninguna intervención de LLM en este paso, son matemáticas puras.

Cómo se ensamblan los bloques de Gutenberg

Una vez que el Mandato de Diseño está listo, va a Gemini Flash con un prompt estricto que especifica:

• Qué bloques están permitidos (una lista blanca de ~40 tipos de bloques de Gutenberg)
• Atributos requeridos para cada tipo de bloque
• Formato JSON exacto para la salida

La IA devuelve JSON de bloques de Gutenberg sin procesar, no HTML, no React, sino marcado de bloques de WP real. Ese JSON luego pasa por varias validaciones:

1. Validación de esquema: atributos requeridos presentes, sin tipos de bloques desconocidos
2. Sanitización de clases CSS: se eliminan los nombres de clases inventados, se reemplazan con nuestras clases del sistema de diseño
3. Pasadas de curación: atributos de espaciado sincronizados, gradientes de bloque de portada normalizados, divisores de forma inyectados.

El resultado se carga directamente en WordPress a través de la API REST de WP y se activa como la página de inicio del sitio.

Qué hace único a cada sitio

Varias cosas varían entre cada generación, incluso para la misma industria:

• Paleta: más de 20 grupos, cada uno con múltiples paletas
• Trío de fuentes: más de 6 combinaciones por arquetipo
• Orden y variantes de sección: diseño del héroe, estilo de estadísticas, disposición de tarjetas de características
• Divisores de forma: orgánicos vs. geométricos, variaciones de amplitud/frecuencia
• Formas de blob: para industrias orgánicas, los blobs de imágenes y tarjetas se aleatorizan a partir de 12 variantes.

El resultado es que dos restaurantes de pizza generados el mismo día tendrán colores diferentes, fuentes diferentes, diseños diferentes, y ambos cumplirán con WCAG AA.

Qué sigue

Actualmente estamos trabajando en:

• Generación de múltiples páginas: generar páginas /acerca-de, /servicios y /contacto a partir del mismo mandato
• Vista previa en vivo: ver el sitio antes de que se implemente en WordPress
• Transferencia de estilo: subir una captura de pantalla de un sitio que te guste y extraer su ADN de diseño.

Si quieres ver el sistema en acción, el generador es gratuito para probar, no se requiere cuenta para el primer sitio.