Por qué todas las webs generadas por IA se ven iguales

Es tentador describir esto como un problema de gusto: el modelo ha visto mil millones de landing pages y regresa a la media. Eso es parte del problema, pero no es el mecanismo, y lleva a la gente a buscar la solución incorrecta (mejores prompts). El mecanismo es más aburrido y mucho más accionable: un agente de código al que se le pide construir una UI recurre a una librería de componentes, y esa librería incluye valores predeterminados. Esos valores fueron diseñados para no resultar ofensivos, que es precisamente lo que los hace universales.

Pida un dashboard a cinco herramientas diferentes —Claude Code, Cursor, v0, Lovable, Bolt— sin dar más instrucciones. Obtendrá cinco diseños y una sola identidad visual. No se están copiando entre sí. Cada una está haciendo, de forma independiente, lo más sensato con el mismo material de partida.

El tema predeterminado de shadcn/ui se basa en la escala zinc de Tailwind, con slate y gray como sustitutos comunes. Es un gris frío, con un ligero tinte azulado. Una vez que lo nota, no puede dejar de verlo: es el fondo de la mayoría de los productos creados por IA lanzados en los últimos dos años. Es un neutro genuinamente bueno, y ahí reside el problema: es lo suficientemente bueno como para que nadie lo reemplace.

La señal no es el gris en sí, sino su *uniformidad*. Una interfaz diseñada suele sesgar sus neutros ligeramente hacia el tono de la marca, para que los grises se sientan relacionados con el color de acento. Una interfaz predeterminada tiene una gama pura junto a un acento no relacionado, y ambos nunca llegan a encajar del todo.

Inter es una tipografía de UI excelente, razón por la cual está en todas partes y por la que ahora se percibe como un valor predeterminado más que como una decisión. Cuando no es literalmente Inter, es el stack del sistema font-sans, que resulta en una grotesque casi idéntica en la mayoría de las máquinas. En cualquier caso, la página tiene una sola familia haciendo todo el trabajo: titulares, cuerpo, etiquetas, números.

El hecho de usar una sola familia es la verdadera señal, más que la familia elegida. Un sistema diseñado casi siempre combina: una fuente de display con personalidad para los titulares frente a una fuente utilitaria para el cuerpo, o al menos un contraste deliberado de peso y ancho dentro de una misma superfamilia. Las páginas de una sola familia se perciben planas, incluso cuando todas las demás decisiones son acertadas.

El --radius predeterminado de shadcn es 0.5rem, y se propaga por igual a botones, inputs, tarjetas, diálogos y popovers. Un radio uniforme en todos los tamaños de elementos no es como se comportan los sistemas diseñados: un botón de 44px y una tarjeta de 400px con el mismo radio de esquina hacen que la tarjeta parezca blanda y el botón parezca una mancha, porque el radio se percibe en relación con el elemento en el que se encuentra.

:root {
  /* The line most AI-built projects never touch */
  --radius: 0.5rem;
}

Hero, luego tres tarjetas iguales, luego una franja de testimonios y un CTA. Esto es genuinamente gravedad de los datos de entrenamiento más que un valor predeterminado de configuración: es la estructura de página de marketing más común en la web, por lo que es la forma que produce un modelo cuando el brief no implica otra. No es incorrecto. Es simplemente el diseño que no aporta ninguna información sobre su producto.

La respuesta común es escribir un prompt más largo: *usa una paleta cálida, combina una serif de display con un cuerpo grotesque, varía el radio*. Eso funciona. Funciona para una pantalla, y suele funcionar para la segunda y la tercera.

Luego se degrada, y lo hace de una manera específica. El agente no está ignorando su instrucción; está manteniendo una conversación cada vez más larga en la que su párrafo de estilo compite con todo lo ocurrido después. Para la quinta pantalla, recuerda lo de *cálido* pero ha perdido los valores hex, por lo que aproxima. La aproximación es un cálido ligeramente diferente. La sexta pantalla aproxima la aproximación.

Quienes están en medio de este proceso lo llaman *design drift* (deriva de diseño), y es la razón por la que una app diseñada por sensaciones que se veía impecable el viernes parece ensamblada por un comité el lunes. La instrucción vivía en la conversación, y las conversaciones se degradan.

Un sistema de diseño detiene la deriva por la misma razón que la detiene en los equipos humanos: los valores residen en algún lugar duradero y se consultan, en lugar de estar en la cabeza de alguien. Para un agente de código, ese lugar es un DESIGN.md más un conjunto de tokens en el repo. Ambos se vuelven a leer al inicio de cada sesión, por lo que la pantalla veinte resuelve el mismo --primary que la pantalla uno, no uno similar.

Este es el argumento principal para darle a un agente un sistema real en lugar de una mejor descripción de uno. La capa de tokens semánticos importa más que la paleta: --primary y --muted-foreground sobreviven a un rediseño, mientras que un blue-600 disperso por el marcado no lo hace.

En su mayoría no, y ese es el hallazgo más incómodo. Analizamos 299 archivos DESIGN.md públicos de GitHub —el archivo cuya función exclusiva es evitar esto— y medimos su contenido.

De los 72 que describen un sistema de diseño visual, el 21% especifica una escala de radio y el 26% especifica la elevación. Estos son dos de los cuatro indicadores mencionados anteriormente, dejados en sus valores por defecto por tres cuartas partes de las personas que se sentaron específicamente a escribir un contrato de diseño. El 69% omite el modo oscuro por completo, por lo que todo el segundo tema queda a merced de la invención del agente. Y el 86% nombra los colores por tono o enumera hexes puros en lugar de usar roles semánticos, lo que significa que el archivo no puede aplicarse a ningún componente que no haya descrito explícitamente.

Existe una versión de segundo orden del mismo problema: el 54% de los archivos contienen al menos un adjetivo vago en lugar de un valor, liderados por *clean* (39%) y *modern* (36%). Un adjetivo no reemplaza un valor por defecto; le pide al agente que elija uno.

1. 1

   Muestree el fondo

   Extraiga el hex del fondo de su página. Si es #09090b, #18181b, #0f172a o #020617, está utilizando una escala de zinc o slate sin modificar.

2. 2

   Cuente las familias tipográficas

   Abra los estilos computados de un H1 y de un párrafo del cuerpo. Si ambos tienen la misma font-family, significa que una sola familia está realizando todo el trabajo.

3. 3

   Compare dos radios

   Mida el radio de la esquina de un botón y de su tarjeta más grande. Valores idénticos significan que nadie escaló el radio según el tamaño del elemento.

4. 4

   Compare su primera y última pantalla

   Coloque la primera pantalla que creó junto a la más reciente. Enumere cada valor que no coincida: esa lista es su deriva de diseño.

5. 5

   Decida dónde reside la respuesta

   Para cada discrepancia, pregunte si el valor correcto existe en algún lugar duradero. Si la respuesta honesta es "en el prompt que escribí en marzo", eso es lo que debe corregir.