La arquitectura
Un director, cincuenta estudios
El truco no es «genera un sitio, cincuenta veces». Es una separación de papeles:
- Una sesión orquestadora escribe primero una constitución de diseño que los agentes no pueden negociar, y luego cincuenta briefs art-dirigidos uno por uno: concepto, paleta con hexadecimales reales, tipografías nombradas, técnica firma, y la cosa que ese sitio tiene que probar.
- Cincuenta builders en paralelo, cada uno con un brief y autonomía total sobre una carpeta. Sin plantilla común, sin componentes compartidos — deliberadamente, porque dos sitios que comparten un componente pueden converger, y converger es el único fracaso que ya no se arregla después.
- El orquestador vuelve como director de arte: mira cada hero en frío y devuelve hallazgos específicos. No «mejora el contraste», sino «el dithering se está aplicando encima del texto del párrafo y lo vuelve ilegible».
El anti-convergencia
El registro de ADN
Antes de escribir un solo brief se construye un registro con el ADN de los cincuenta: dominio, técnica, paleta, tipografía titular y mood. La regla es que ningún par de sitios comparte más de un eje, y que técnica y tipografía titular no se repiten nunca.
Esto no es burocracia. Sin el registro, los sitios 30 al 50 se parecen a los primeros diez — el modelo tiene atractores, y vuelve a ellos. El contrato se verifica con un script que falla si dos briefs colisionan, antes de que nadie construya nada:
$ python3 tools/adn.py
✅ CONTRATO DE ADN CUMPLIDO — 50 sitios, 0 colisiones.
tecnicas unicas: 50/50
displays unicos: 50/50
paletas unicas: 50/50
moods unicos: 50/50El lazo
Tres pasadas sobre los píxeles
Ningún sitio se declara terminado sin tres pasadas de crítica. Una pasada es:
- Renderizar la página real en un navegador headless — escritorio a 1440×900 y móvil a 390×844, en tres posiciones de scroll — capturando errores de consola, peticiones fallidas, cadenas en inglés, imágenes rotas, contraste bajo AA y la altura del documento.
- Mirar los píxeles. El agente lee sus propias capturas con visión y se critica como un director de arte hostil: ritmo, alineación, viudas, cortes de palabra, zonas muertas, cualquier cosa que huela a plantilla generada.
- Arreglar todo — y añadir una complejidad deliberada. Una textura, una micro-interacción, marginalia, un huevo de pascua.
La tercera regla es la que importa. Sin la obligación de añadir algo en cada pasada, la iteración converge hacia la seguridad blanda: cada ronda quita defectos y también quita carácter, hasta dejar algo correcto que no mira nadie.
Por qué píxeles y no código: la revisión de código no ve una viuda. No ve una palabra cortada a media línea, ni un botón que se pierde en su fondo, ni cuatrocientos píxeles de nada. Cerrar el lazo entre lo que se escribió y lo que se pintó es lo que convierte salida plausible en juicio de diseño.
La vara
Críticos ciegos, calibrados a perder
Cada sitio terminado se comparó en A/B ciego contra un sitio real de fable-25 — ciento cinco sitios construidos autónomamente, públicos e inspeccionables. El crítico es un agente de contexto fresco: nunca vio el razonamiento del builder, solo las capturas.
Y está calibrado para ser duro: su default es que gana el referente, y solo cede cuando el retador gana claramente. Un crítico complaciente no sirve de nada — si aprueba trabajo mediocre, el proyecto se degrada y nadie se entera hasta que sale.
Devuelve un solo gap, no una lista. Con cinco, el builder arregla los cinco por encima en vez del que de verdad mueve la aguja.
Lo que salió mal
Tres fallos que valieron el viaje
Fallo 1 — el instrumento mentía
El detector de contraste reprobó dieciséis elementos de un sitio con lecturas de 1.04:1.
Eran falsos positivos: cuando el texto va sobre un <canvas>,
el color de fondo real lo decide un píxel que el DOM no conoce, y el detector caía a blanco
por defecto.
Se detectó porque los números eran demasiado malos para ser ciertos. Si no se hubiera atrapado, tres builders habrían aclarado texto perfectamente legible para «arreglar» un defecto inexistente — degradando el diseño para complacer a un instrumento roto. El arnés ahora salta la medición cuando hay un canvas, un vídeo, un gradiente o un blend mode de por medio, en vez de inventar un defecto.
Fallo 2 — la técnica encima del texto
El primer sitio de mezcal aplicó su trama de dithering sobre todo, incluido el texto. El hero se veía espectacular y el párrafo era ilegible.
De ahí salió una regla que entró al estándar y aplicó a los otros cuarenta y nueve: el tratamiento va detrás del texto, jamás encima. Un párrafo tramado no es una decisión de diseño, es un párrafo que nadie puede leer.
Fallo 3 — sesenta megabytes de miniaturas
Las miniaturas de la galería salieron en PNG de seiscientos kilobytes cada una porque el comando de conversión no declaraba el códec y la herramienta dedujo el formato del archivo de origen. La galería pesaba 66 MB.
Con el códec correcto pasó a 7 MB. El fallo no fue elegir mal el formato: fue no medir el resultado. Un comando que devuelve cero y produce basura se ve idéntico a uno que funciona.
El estándar
Diez reglas que nadie podía negociar
| Regla | Por qué |
|---|---|
| Español real, copy real | Negocios creíbles, precios en pesos, testimonios con nombre. Cero relleno, cero inglés en la interfaz — ni en botones, ni en alt. El que clona la plantilla tiene que ver cómo se escribe, no solo cómo se ve. |
| Tipografía distintiva | Nunca Inter, Roboto ni fuentes de sistema. Nunca la misma familia para titular y cuerpo. Y nunca converger: cincuenta titulares distintos. |
| Movimiento propio | Curvas de aceleración propias, jamás transition-all, solo transform y opacity. Respeta prefers-reduced-motion. |
| Cero errores de consola | Condición de aceptación, no aspiración. |
| Estático puro | Sin compilación, sin framework, sin dependencias instaladas. La carpeta se abre y funciona. Entre 90 y 150 KB por sitio. |
| Accesible | Contraste AA, foco visible en todo lo clicable, jerarquía de encabezados correcta, navegable con teclado. |
| Prohibida la estética por defecto | Gradiente morado sobre blanco, sombras planas, azul de framework como primario, retículas de tres columnas con iconitos. |
| Listo para clonar | Cada sitio trae un README con los cinco lugares donde vive el contenido que hay que cambiar. |
Reproducirlo
Lo que hay que montar
- Un estándar de build que los agentes no puedan negociar.
- Briefs de verdad: nombra la paleta, las tipografías, la técnica firma y la cosa que hay que probar. Un brief vago produce un sitio vago.
- Un registro de ADN verificado por script, antes de construir.
- Un arnés de capturas para cada agente, y N pasadas obligatorias con la regla del añadido.
- Un crítico de contexto fresco con un referente real y nombrable, calibrado para que el default sea perder.
- Una sesión que se quede como director y mire cada resultado en frío.
La complejidad va en los píxeles, no en la tubería.