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 su 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, independientemente, lo más sensato con el mismo material de partida.

Aquí presentamos la evidencia visual en lugar de argumentarla. La primera pestaña es el promedio estadístico: indigo-500, un degradado púrpura, Inter, tarjetas rounded-xl. Las otras pestañas son la *misma página*, renderizada a través de un sistema de diseño real. Nada en el diseño cambia; cada diferencia que ve es el sistema.

El tema predeterminado de shadcn/ui se basa en la escala zinc de Tailwind, con slate y gray como sustituciones 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 con 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 pista 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, por eso está en todas partes y por eso ahora se percibe como un valor predeterminado más que como una decisión. Donde 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 el verdadero indicio, más que la familia en cuestión. Un sistema diseñado casi siempre combina: una fuente de display con personalidad para los titulares frente a una fuente robusta 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 sienten 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 gota, 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 display serif 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 *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 inmersos en esto lo llaman *design drift* (deriva de diseño), y es la razón por la cual una aplicación creada mediante «vibe-coding» que se veía impecable el viernes, el lunes parece ensamblada por un comité. La instrucción residía en la conversación, y las conversaciones se degradan.

Un sistema de diseño detiene la deriva por la misma razón que lo hace en los equipos humanos: los valores residen en un 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 design tokens en el repositorio. 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 central 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 única función 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 predeterminados 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 sustituye a un valor predeterminado; 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

   Haga un diff entre 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.

5. 5

   Decida dónde reside la respuesta

   Ante cada discrepancia, pregúntese si el valor correcto existe en algún lugar permanente. Si la respuesta sincera es «en el prompt que escribí en marzo», eso es lo que debe solucionar.

Todo lo anterior se aplica el doble en los constructores basados en chat, ya que en ellos ni siquiera se puede editar la configuración a mano durante el flujo: la conversación es la interfaz. La solución permanente sigue la misma lógica, adaptada a cómo cada herramienta gestiona el contexto: pegue un sistema de diseño completo como primer mensaje (o como conocimiento del proyecto) y construya sobre él. Mantenemos una versión lista para copiar de cada kit por constructor: temas para Lovable, para v0, para Bolt, para Replit y para Base44.