🎨 Por qué el resultado predeterminado sale genérico

¿Eres nuevo aquí? Front-end es la parte de un sitio o una aplicación que la persona ve y toca en la pantalla: botones, colores, textos, diseño. Es diferente del «back-end», que es el motor detrás de todo (base de datos, reglas de negocio) y que nadie ve directamente. Cuando este módulo habla del «sitio que produce el agente», se refiere al front-end.

Seguro que ya lo viste: fondo blanco o gris muy claro, un título grande y centrado, un botón azul con esquinas redondeadas que dice "Get Started" o "Saiba mais", íconos genéricos, tipografía del sistema. No importa de qué trate el sitio —una receta de pastel, un currículum, una tienda de ropa— el resultado predeterminado de un agente de IA sin instrucciones visuales suele tener ESTA MISMA apariencia. Quienes trabajan con IA ya le pusieron un apodo: "olor a IA" (en inglés, «AI slop» o «AI smell»): el aspecto que delata a primera vista que nadie intervino.

¿Eres nuevo aquí? Uno modelo de IA (el “cerebro” que interpreta tu pedido y genera el resultado) se construyó en un proceso llamado entrenamiento: le mostraron millones de ejemplos reales; en este caso, millones de páginas de front-end escritas por personas de todo el mundo, y aprendió los patrones que más se repiten en esos ejemplos. No "memorizó" un sitio específico; aprendió estadísticamente qué suele venir después de qué.

Esto tiene una consecuencia directa: cuando pides algo vago ("haz un sitio web bonito"), el modelo no tiene de dónde elegir, así que converge en la respuesta más probable, es decir, la promedio estadístico de todo lo que ya vio. Y el promedio de millones de sitios de front-end tiende a lo mismo: azul (el color más usado en botones CTA en todo el mundo), blanco (el fondo más seguro y común), fuente del sistema (la que siempre funciona sin configurar nada). No es pereza del modelo: es la matemática de la probabilidad haciendo exactamente lo que fue entrenado para hacer.

Leyenda: arriba, el pedido vago cae en el promedio de todo lo que el modelo ya vio y da un resultado genérico; abajo, el mismo pedido con una referencia visual llena el vacío con tu estilo en lugar del promedio. Esa es la diferencia que los módulos 5.2 y 5.5 te enseñarán a construir.

Hay una segunda causa, tan importante como la primera: el agente que escribe el código de un sitio no necesariamente ve el resultado. Uno prompt (el pedido en texto que escribes para el agente) describe lo que quieres con palabras, pero el texto no es una imagen. A menos que alguien obligue al agente a tomar una captura de pantalla y mirarla como lo haría un diseñador, está trabajando “a ciegas”: escribiendo HTML y CSS técnicamente correctos, pero sin comprobar si quedó bonito, equilibrado y con la personalidad adecuada.

Junta las dos causas y entenderás el problema por completo: (1) sin una referencia de marca, colores o ejemplo visual, el modelo llena los vacíos con lo que es estadísticamente "seguro" según los datos de entrenamiento; (2) sin alguien —o algo— que fuerce una mirada crítica sobre el resultado, nada corrige ese primer instinto. Las dos causas juntas explican el "aspecto de IA" —y ambas tienen solución, que es justamente el resto de esta ruta.

Para concretar esto, mira la misma tarea — "crear la landing page de una panadería de barrio" — planteada de dos maneras diferentes. El texto de abajo describe lo que resultaría de cada pedido, punto por punto, exactamente como un diseñador describiría dos wireframes (bocetos simplificados del diseño, sin detalles finales) colocados uno al lado del otro.

Leyenda: la misma tarea, dos resultados. A la izquierda, sin color, fuente ni foto de referencia, el modelo cae en el promedio (azul, redondeado, ícono genérico). A la derecha, con la paleta terracota y crema de la panadería y una foto real del producto incluidas en el pedido, el resultado ya nace con identidad: no hace falta «más creatividad», solo más información.

La mejor forma de interiorizar este módulo es experimentar el fenómeno por cuenta propia, una sola vez, antes de aprender a evitarlo. Objetivo: confirmar, en tu propio Claude Code, que una solicitud vaga de front-end realmente siga el patrón genérico descrito arriba, sin ninguna instrucción de estilo, color o marca.

Crea una landing page en HTML/CSS para 
con un formulario de contacto y una sección de testimonios. No me des ningún color, fuente o
referencia de estilo — decide tú mismo el diseño visual.

Resultado típico: fondo blanco o gris claro, título centrado en negrita, botón azul redondeado con un texto como "Get Started" o "Fale conosco", tarjetas de testimonios idénticas entre sí, fuente del sistema. Si tu resultado coincide con esta descripción — como sucede en la gran mayoría de los casos — acabas de reproducir el fenómeno de este módulo.

Acabas de ver las dos causas del problema: falta de referencia visual y falta de un criterio automático para "mirar" el resultado. Los dos módulos siguientes atacan exactamente esas dos causas, en ese orden.