Cómo hacer que la UI generada por IA parezca menos genérica

Los consejos de prompt no son erróneos, simplemente son efímeros. Si se le indica que use una paleta cálida, el agente lo hará. Seis pantallas después, recordará el adjetivo pero no los valores, por lo que hará una aproximación, y las aproximaciones divergen. Ese es el mecanismo detrás de por qué los sitios creados por IA convergen, y es la razón por la que las soluciones a continuación se escriben como valores y no como instrucciones.

Este es el cambio con mayor impacto y casi nadie lo hace. Los temas predeterminados combinan una escala de grises puros con un acento inconexo, y ambos parecen pertenecer a productos distintos. Los sistemas de diseño sesgan los neutros unos pocos grados hacia el tono de acento, con una croma muy baja.

/* Default: pure neutral, unrelated to the accent */
--background: oklch(0.145 0 0);
--muted:      oklch(0.269 0 0);
--primary:    oklch(0.55 0.19 45);

/* Tinted: same lightness, a trace of the accent hue */
--background: oklch(0.145 0.008 45);
--muted:      oklch(0.269 0.012 45);
--primary:    oklch(0.55 0.19 45);

Mantenga la croma realmente baja. Por encima de aproximadamente 0.02, los grises empiezan a percibirse como colores en lugar de neutros, y habrá cambiado un aspecto obvio por otro.

Que una sola familia se encargue de los encabezados, el cuerpo, las etiquetas y los números es la forma más rápida de detectar una UI generada. La solución es una combinación con contraste real; no dos tipografías grotescas similares, lo cual se percibe como un accidente y no como una decisión.

• Serif display + grotesque body. El contraste más fiable y difícil de errar.
• Grotesque display + humanist body. Más discreto; funciona para UI de productos densos donde una serif resultaría decorativa.
• Una superfamilia, dos extremos. Una versión condensed heavy frente a una regular. Seguro cuando la marca necesita mantener la cohesión.
• Una mono para datos. No como decoración: las cifras tabulares evitan que los números oscilen entre filas.

Sea lo que sea que elija, escriba las familias, pesos y el espaciado entre letras exactos en los tokens. *Combinar una serif con una sans* es un adjetivo, y los adjetivos se degradan.

Un único --radius aplicado en todas partes es la tercera señal. El radio se percibe *en relación con el elemento en el que se encuentra*, por lo que los mismos 8px hacen que un botón pequeño parezca deforme y que una tarjeta grande parezca apenas redondeada.

/* One value, applied to everything */
--radius: 0.5rem;

/* Scaled to element size */
--radius-sm: 0.25rem;  /* inputs, chips, badges */
--radius-md: 0.5rem;   /* buttons, small controls */
--radius-lg: 0.875rem; /* cards, panels */
--radius-xl: 1.25rem;  /* modals, sheets, hero surfaces */

Tres tarjetas iguales sugieren que cada elemento tiene el mismo peso. Eso casi nunca es cierto, y un diseño que lo sugiere de todos modos no aporta información sobre el producto.

El cambio es editorial más que técnico: decida qué elemento es realmente el más importante y deje que el diseño lo comunique. Una tarjeta ancha sobre dos estrechas. Una división de dos tercios y un tercio. Una sola funcionalidad con imágenes de apoyo reales en lugar de tres iconos. La cuadrícula es correcta cuando los elementos son genuinamente pares; el error es usarla por defecto.

La UI generada suele tener una única sombra, aplicada a cualquier elemento que deba parecer elevado. Los sistemas de elevación reales cuentan con dos o tres niveles que mantienen una coherencia sobre la procedencia de la luz, y utilizan cambios en el borde y el fondo además de la sombra, o a menudo en su lugar.

/* One shadow doing every job */
--shadow: 0 1px 3px rgb(0 0 0 / 0.1);

/* Levels that agree about a light source */
--elevation-0: none;                                  /* flush: use a border */
--elevation-1: 0 1px 2px rgb(0 0 0 / 0.06);           /* cards */
--elevation-2: 0 4px 12px rgb(0 0 0 / 0.08);          /* dropdowns */
--elevation-3: 0 16px 40px rgb(0 0 0 / 0.12);         /* modals */

Los cinco cambios anteriores tienen poco valor si permanecen en una conversación. Inclúyalos en un archivo DESIGN.md y en los archivos de design tokens del repositorio; así, el agente resolverá los mismos valores en cada ejecución, incluso en una sesión abierta el próximo mes.

1. 1

   Instale el contrato de diseño

   Escribe el archivo DESIGN.md y los archivos de tokens en el proyecto.

   Copy

   npx --yes identityforge@latest install --client claude-code

2. 2

   Aplique un kit que ya incorpore estas decisiones

   Neutros matizados, una combinación tipográfica real, radios escalados y un modelo de elevación, ya definidos.

   Copy

   identityforge apply terrain-vivant

3. 3

   Referéncielo desde su archivo de agente

   Una línea en AGENTS.md para que el contrato se encuentre deliberadamente en lugar de por azar.

   Copy

   Never hardcode theme colors. Use the semantic tokens in DESIGN.md.

4. 4

   Verifique que se haya mantenido

   Abra una nueva sesión, cree una pantalla no relacionada y compare su color primario y su radio con la primera. Si son idénticos, significa que los valores se están leyendo y no simplemente recordando.

Cualquier guía en esta SERP termina en la lista de correcciones. Ese es el lugar equivocado para detenerse, porque hay dos indicios que sobreviven a los seis cambios y son los que la gente nota sin saber nombrarlos. Ambos están fuera del archivo de tokens tal como se escribe habitualmente, que es precisamente la razón por la que persisten.

Las interfaces generadas tienen una sola animación: un desvanecimiento corto con una pequeña traslación hacia arriba, aplicada a cada elemento que aparece. Está en el hero, en las tarjetas, en el modal y en el toast. Nada en el movimiento indica qué tipo de acción acaba de ocurrir, por lo que todo el producto se siente como una presentación de diapositivas continua.

El movimiento adquiere significado cuando la duración y el easing varían según *lo que el elemento esté haciendo*, no según dónde se encuentre. La distinción que debe codificarse es entre las cosas que responden al usuario y las que aparecen por sí solas:

La asimetría de esa última fila es la parte que casi nada de lo generado hace correctamente: las salidas se ejecutan a la misma velocidad que las entradas, lo que hace que cerrar cualquier elemento se sienta lento. Defina las tres duraciones como tokens y el agente dejará de asignar un único número para todo.

/* One duration, one curve, applied to everything */
--transition: 200ms ease;

/* Motion that says what kind of event it was */
--motion-response: 120ms cubic-bezier(0, 0, 0.2, 1);
--motion-enter:    220ms cubic-bezier(0, 0, 0.2, 1);
--motion-exit:     160ms cubic-bezier(0.4, 0, 1, 1);

@media (prefers-reduced-motion: reduce) {
  --motion-response: 1ms;
  --motion-enter: 1ms;
  --motion-exit: 1ms;
}

El segundo superviviente es la iconografía. Una instalación por defecto le ofrece un conjunto de código abierto con un único grosor de trazo y, como ese conjunto viene con la librería de componentes, los mismos veinte glifos aparecen en miles de productos. Puede cambiar cada color y cada tipografía y seguir siendo reconocible solo por los iconos.

Sustituir el conjunto no suele valer la pena. Restringirlo, sí:

• Ajuste el grosor del trazo al peso de su tipografía. Un trazo de 1.5px frente a una fuente de cuerpo ligero parece prestado; frente a una media, parece coordinado. Elija un valor y colóquelo en los tokens.
• Ajuste el tamaño al texto que lo acompaña, para que un icono en un botón y un icono en una fila de tabla no tengan el mismo tamaño en píxeles por accidente.
• Prohíba los iconos decorativos. Prohíba los iconos que representan un estado de ánimo en lugar de una acción: los destellos, cohetes y rayos son la señal más clara de una UI generada que persiste incluso tras un rediseño completo.
• Permita una sola excepción y asígnele un nombre. Un único glifo personalizado, generalmente la marca, utilizado en un lugar consistente. Una desviación deliberada se percibe como una decisión; varias se perciben como un accidente.

Escribir los seis cambios es la parte fácil. Analizamos 299 archivos DESIGN.md públicos de GitHub para ver qué es lo que la gente realmente sube al repositorio, y el patrón de error es lo suficientemente consistente como para que valga la pena planificar en torno a él.

Compare esto con los seis cambios anteriores y verá que la coincidencia es exacta. La escala de radio se especifica en uno de cada cinco archivos. Las prohibiciones —lo más sencillo de escribir y lo que se sigue con más rigor— están ausentes en tres cuartas partes. Y las palabras más comunes utilizadas para sustituir una decisión fueron *clean* (39% de los archivos), *modern* (36%) y *professional* (22%).

La consecuencia práctica para los seis cambios: escriba cada uno como un número o un código hex, y revise su propio archivo en busca de las tres palabras mencionadas antes de hacer el commit.