Forge: el compilador de IA determinista de SiteDrop Live

Todos los creadores de sitios web con IA funcionan igual: escribes un prompt, un LLM escribe el HTML y recibes lo que te da. A veces es bueno. A veces no. Pulsas "generar" otra vez y obtienes algo completamente distinto: otro diseño, otros colores, otra calidad. El resultado es, en el fondo, impredecible.

Nosotros lanzamos ese modelo. Funcionó. La gente creó sitios web de verdad con él. Pero al ver cómo se generaban miles de sitios, apareció un patrón: el LLM gastaba la mayor parte de sus tokens reinventando cosas que no debería estar decidiendo. Los sistemas de navegación. El contraste de color. Los puntos de ruptura para móvil. Los enlaces ancla. La carga de fuentes. El marcado del formulario de contacto.

Cada generación era una nueva tirada de dados sobre problemas que tienen respuestas correctas.

Forge es nuestra respuesta a esa observación. No es una mejora gradual: es una arquitectura fundamentalmente distinta de cómo la IA crea sitios web.

El problema de dejar que la IA escriba HTML sin procesar

Cuando le pides a un LLM que "cree un sitio web para una barbería", tiene que tomar miles de decisiones a la vez: qué secciones incluir. En qué orden ponerlas. Cómo es la navegación. Qué colores usar. Cómo manejar los diseños para móvil. Cómo cargar las fuentes. Cómo conectar los enlaces ancla. Cómo estructurar el HTML de forma semántica. Cómo manejar los ratios de contraste. Cómo dar formato al horario de apertura. Cómo mostrar un número de teléfono como un enlace en el que se pueda hacer clic.

Algunas de esas decisiones son creativas: qué secciones incluir, qué paleta de colores le va a una barbería, cómo debe ser el aspecto general.

La mayoría son de ingeniería: la navegación debe desplazarse a anclas reales, el ratio de contraste debe ser al menos de 4.5:1, el número de teléfono debe estar en formato E.164, la fuente debe cargarse desde Google Fonts con preconnect y el diseño para móvil debe apilarse en vertical por debajo de 480 px.

Cuando dejas que el LLM se encargue de ambas, las decisiones creativas son buenas, pero las de ingeniería son irregulares. Algunas generaciones tienen un contraste perfecto. Otras no. Algunas tienen enlaces ancla que funcionan. Otras tienen href muertos que apuntan a secciones que no existen. Algunas cargan las fuentes bien. Otras incrustan un font-face que nunca se resuelve.

La idea detrás de Forge: separar las decisiones creativas de las decisiones de ingeniería. Que la IA se encargue de la creatividad. Que un compilador se encargue de la corrección.

La arquitectura en dos fases

Forge divide la generación de un sitio web en dos fases distintas:

Fase 1: la IA decide qué construir (SiteSpec)

En lugar de escribir HTML sin procesar, la IA produce una especificación estructurada: un documento JSON al que llamamos SiteSpec. El SiteSpec describe qué secciones debe tener el sitio, qué contenido va en cada sección, cuál debe ser la paleta de colores y la tipografía, cómo es la navegación y cuál es el tratamiento de diseño general.

La IA toma todas las decisiones creativas: ¿es una estética oscura y lujosa o un aire luminoso y editorial? ¿Debe la portada usar una fuente de titulares condensada como Bebas Neue o una serif elegante como Cormorant Garamond? ¿Deben las secciones incluir una galería, una banda de cifras, unas preguntas frecuentes o una cuadrícula de equipo?

Pero la IA NO decide cómo se dibuja nada de eso. No escribe ni una línea de HTML o CSS. Describe la intención.

Fase 2: el compilador lo dibuja a la perfección (siempre)

El SiteSpec pasa a un compilador determinista: una función pura que toma una especificación y un playbook y produce HTML autónomo y de calidad profesional. La misma entrada siempre produce la misma salida.

El compilador es dueño de todas las decisiones de ingeniería:

• Anclas de navegación: cada enlace de navegación apunta a una sección real. Las anclas muertas son imposibles; el compilador concilia cada #href con los ID reales de las secciones.
• Seguridad de contraste: el contraste entre texto y fondo se comprueba y se exige conforme a WCAG AA (4.5:1). La IA elige la paleta; el compilador garantiza la legibilidad.
• Alternancia de superficies: dos secciones contiguas nunca comparten el mismo tono de fondo. El compilador alterna automáticamente las superficies base y secundaria para crear ritmo visual.
• Normalización de los contactos: los números de teléfono se formatean a E.164 para los enlaces tel:, los canales de WhatsApp se detectan automáticamente y los horarios y direcciones se ordenan. Cada dato de contacto funciona como un enlace real en el que se puede hacer clic.
• Carga de fuentes: las Google Fonts se cargan con preconnect y display-swap. Sin font-faces rotos, sin saltos de diseño.
• Diseño adaptable: cada bloque se dibuja correctamente en los puntos de ruptura de móvil, tableta y escritorio. La IA no elige los puntos de ruptura; el compilador los impone.
• Síntesis del pie y la navegación: si la IA omite un pie o una navegación (lo que ahorra tokens), el compilador los deriva de las secciones que existen. Nunca falta nada en el resultado final.

Por qué importa: velocidad y determinismo

Velocidad

Como la IA produce datos estructurados en lugar de HTML sin procesar, el resultado es muchísimo más pequeño. Generar una página HTML completa requiere entre 15,000 y 25,000 tokens de salida del LLM. Un SiteSpec del mismo sitio requiere entre 4,000 y 6,000 tokens: una reducción de 3 a 4 veces. Eso se traduce directamente en una generación más rápida (menos de 90 segundos para un sitio completo) y en un coste menor.

Determinismo

El compilador es una función pura. Dado el mismo SiteSpec, siempre produce el mismo HTML. Esto significa que:

• Editar es seguro. Cuando cambias el encabezado de una sección en el editor visual, solo cambia esa sección. El compilador vuelve a dibujar la especificación y el resto del sitio es idéntico. Sin efectos secundarios en cascada.
• La calidad está garantizada. El contraste, las anclas, el formato de los contactos, la carga de fuentes: todo es correcto en cada generación, no solo a veces.
• Se puede probar. Un motor determinista se puede evaluar de forma sistemática. Ejecutamos comprobaciones automáticas del contraste de color, la integridad de las anclas, la variedad de bloques y la variación de diseño entre generaciones.

Creatividad acotada

Aquí está la idea contraintuitiva: las limitaciones hacen que la IA sea más creativa, no menos. Cuando el LLM se libera de escribir HTML y CSS repetitivo, dedica todo su presupuesto de tokens a las decisiones que de verdad importan: la selección de secciones, la estrategia de contenido, el tratamiento de diseño, la teoría del color. El resultado creativo es mejor precisamente porque el resultado de ingeniería está resuelto.

El sistema de playbooks

El compilador no tiene fijado en el código cómo se dibuja cada bloque. En cambio, toma un Playbook: un módulo que define la biblioteca de bloques (cómo se convierte cada tipo de sección en HTML/CSS), el sistema de resolución del diseño (cómo se resuelven las paletas y la tipografía) y la hoja de estilos base.

Cambia el playbook y el mismo SiteSpec se dibuja con un lenguaje visual completamente distinto. El motor sigue siendo el mismo. Cambian los bloques. Esto es lo que hace que Forge sea extensible: nuevos tipos de sección, nuevos tratamientos de diseño, nuevas estrategias de dibujo, todo sin tocar el núcleo del compilador.

Hoy, el playbook del generador de sitios incluye más de 26 tipos de bloque distintos: desde secciones de portada y listas de servicios hasta bandas de cifras, galerías, preguntas frecuentes, cuadrículas de equipo, marquesinas, llamadas a la reserva y más. La IA elige de esta biblioteca según el tipo de negocio y el contenido, y el compilador los dibuja con precisión milimétrica.

Cómo nació Forge

Forge no empezó como un gran plan. Empezó con un prototipo: un único archivo compile.mjs que tomaba una especificación JSON escrita a mano y la convertía en HTML. La pregunta era sencilla: si definíamos los bloques nosotros y dejábamos que la IA rellenara el contenido, ¿sería el resultado mejor que el HTML en bruto de un LLM?

Lo fue. Muchísimo mejor. El prototipo dibujó el sitio de una barbería con un contraste perfecto, navegación que funcionaba, carga de fuentes correcta y una estética coherente en negro y dorado, todo a partir de una especificación JSON que era una fracción del tamaño del HTML equivalente.

A partir de ahí, la arquitectura tomó forma:

1. El prototipo se convirtió en un motor tipado y sin dependencias de frameworks, que se puede importar desde cualquier entorno de JavaScript sin depender de React, Next.js ni de los componentes internos de SiteDrop.
2. Los renderizadores de bloques fijados en el código se convirtieron en un sistema de Playbooks conectables: cada playbook define sus propios bloques, tokens de diseño y CSS.
3. La integración con el LLM pasó de la salida en HTML sin procesar al uso estructurado de herramientas (el esquema del SiteSpec ES el esquema de la herramienta: le enseña al modelo qué producir a la vez que limita la forma del resultado).
4. Un esquema autodocumentado sustituyó al prompt de sistema tradicional: las descripciones del esquema le enseñan a la IA qué significa cada campo, así que la "gramática" son unas pocas líneas.
5. Se incorporaron al compilador controles de calidad (comprobación de contraste, conciliación de anclas, alternancia de superficies, normalización de contactos) para que se ejecuten en cada generación, y no como un posprocesado opcional.

El resultado es un motor que no depende de ningún proveedor (funciona con Claude, GPT, Gemini, DeepSeek, xAI: cualquier modelo que admita salida estructurada), sin dependencias de frameworks (se puede extraer como un paquete independiente) y determinista (misma especificación, mismo HTML, siempre).

Qué significa esto para ti

Si eres usuario de SiteDrop, Forge ya está funcionando cuando generas un sitio. No tienes que hacer nada distinto: la mejora está en la calidad, la velocidad y la coherencia del resultado:

• Generación más rápida: los sitios se generan en menos de 90 segundos porque el resultado de la IA es de 3 a 4 veces más pequeño.
• Calidad constante: cada generación tiene un contraste correcto, navegación que funciona, carga de fuentes adecuada y datos de contacto con formato.
• Más variedad de diseño: la IA elige entre más de 26 tipos de bloque, más de 4 arquetipos de diseño y una amplia paleta de combinaciones tipográficas. Una barbería recibe una estética oscura y condensada; una clínica dental, un aire limpio y editorial; un restaurante de alta cocina, un tratamiento serif de lujo.
• Edición más segura: el editor visual modifica el SiteSpec y lo vuelve a dibujar a través del compilador, así que los cambios son predecibles y sin efectos secundarios.

Hacia dónde va Forge

La arquitectura del compilador es la base de todo lo que estamos construyendo. Como el motor se guía por la especificación, cada nueva capacidad es un nuevo tipo de bloque, un nuevo playbook o un nuevo token de diseño, no una reescritura del proceso de generación. Ese es el poder de la separación: la IA mejora en decidir, el compilador mejora en dibujar, y ambos progresan de forma independiente.

Creemos que este patrón de dos fases (IA para la intención, compilador para la ejecución) es como se construirán las aplicaciones web a partir de ahora. No solo los sitios web de una página, sino aplicaciones de varias páginas, paneles y experiencias interactivas. La IA describe lo que debe existir. El compilador garantiza que funcione.