La pregunta: ¿Puede una IA diseñar interfaces?
Esto es una exploración conceptual intentar pensar y usa la IA de otra manera, y esta en procesos
Cuando hablamos de IAs que generan interfaces, normalmente pensamos en herramientas como v0 o Lovable - sistemas que producen código funcional a partir de prompts. Pero este experimento va por otro camino: ¿qué pasaría si dos IAs dialogaran para crear una composición visual?
No estamos construyendo una herramienta de diseño interactivo. Estamos explorando cómo sería una interfaz que se genera continuamente, como un boceto que cobra forma mientras describes lo que imaginas.
El concepto: Separación de responsabilidades
La arquitectura se basa en una idea simple pero potente: dividir el problema en dos partes.
Usuario: "portfolio minimalista de fotografía"
│
├── MODEL A → Entiende la INTENCIÓN
│ └── Genera: [hero, gallery, about]
│
└── MODEL B → Construye la COMPOSICIÓN
└── Genera: primitivas visuales
Model A: El intérprete de intenciones
El primer modelo actúa como un "director creativo". Su trabajo es entender qué quiere el usuario y traducirlo a componentes semánticos: hero, gallery, features, pricing, testimonial...
No le importa cómo se verán estos componentes. Solo necesita identificar qué piezas hacen falta para construir lo que el usuario describe. Es como el índice de un libro antes de escribir el contenido.
Model B: El compositor visual
El segundo modelo es el "diseñador de producción". Recibe los componentes semánticos y los traduce a primitivas visuales: cajas, textos, botones, imágenes, grids, stacks...
Aquí está el insight clave:
El LLM NO genera código. Genera descripción estructurada.
El código determinista la interpreta.
Es el mismo patrón que usan los Design Systems: tokens → componentes → composición. La IA selecciona y organiza, el código renderiza.
Las primitivas: El vocabulario visual
El sistema trabaja con un conjunto limitado de primitivas:
| Primitiva | Descripción |
|---|---|
box |
Contenedor (card, outlined, container) |
text |
Texto con variantes (h1, h2, body, meta...) |
button |
Botón (primary, secondary, outline, ghost) |
image |
Imagen con aspect ratio |
grid |
Layout de columnas |
stack |
Agrupación vertical/horizontal |
avatar, badge, icon... |
Elementos decorativos |
Sobre estas primitivas básicas, existen compounds - patrones pre-construidos como feature-item, testimonial-item o pricing-tier que encapsulan estructuras comunes.
El flujo en tiempo real
Lo interesante del sistema es que funciona en streaming:
- Mientras escribes: Un intérprete local ofrece feedback instantáneo
- Model A responde (~500ms): Identifica componentes necesarios
- Model B genera (streaming): Cada componente se traduce a primitivas conforme llega
Esto crea una sensación de "diálogo" - la interfaz va tomando forma progresivamente, como si la IA estuviera pensando en voz alta.
La teoría subyacente
Este experimento explora varias ideas:
1. Composición sobre generación
En lugar de pedirle a la IA que genere código completo, le pedimos que seleccione y organice elementos de un vocabulario conocido. Esto reduce errores y aumenta la coherencia.
2. Especialización de modelos
Cada modelo hace lo que mejor sabe hacer. Model A es bueno entendiendo lenguaje natural e intenciones. Model B es bueno siguiendo patrones estructurados y generando JSON válido.
3. El código como intérprete
La IA genera una "partitura" (estructura de datos). El código determinista es el "músico" que la interpreta. Esto mantiene el control en manos del sistema mientras la creatividad viene de la IA.
4. Primitivas como contrato
El conjunto fijo de primitivas actúa como un contrato entre la IA y el renderer. La IA puede ser creativa dentro de esos límites, pero no puede inventar elementos que el sistema no sepa renderizar.
Estado actual
Este es un experimento en construcción. Las ideas están claras, pero la implementación tiene bordes por pulir:
- El diálogo entre modelos funciona
- Las primitivas se renderizan correctamente
- El streaming ofrece feedback progresivo
- La separación de responsabilidades es sólida
Lo que falta es refinamiento: mejor detección de patrones, más variedad en las composiciones, y quizás un tercer modelo que critique y mejore los resultados.
Por qué importa
No se trata de reemplazar el diseño humano o la generación de código. Se trata de explorar un nuevo tipo de herramienta: una que piensa contigo mientras describes lo que imaginas.
La UI generativa no busca ser algo definitivo es el medio de conversación entre la intención y la forma en este caso primitivas conectadas
Este proyecto se desarrolla como parte de exploraciones sobre IA generativa aplicada a interfaces. El código está disponible y evoluciona constantemente. Versión actual: v6 - Intelligent Compositor.