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 con 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 no pertenecer al mismo producto. 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 percibiría como un accidente en lugar de una decisión.

• Serif para display + grotesque para cuerpo. El contraste más fiable y difícil de errar.
• Grotesque para display + humanist para cuerpo. Más discreto; funciona para UI de producto densas 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 cual sea su elección, 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 refleje. Una tarjeta ancha sobre dos estrechas. Una división de dos tercios y un tercio. Una única 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 design tokens en el proyecto.

   Copy

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

2. 2

   Aplique un kit que ya incorpore estas decisiones

   Neutros tintados, un emparejamiento real, radio escalado 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, no 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 design 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 cosa se sienta lento o «pegajoso». Escriba las tres duraciones como design tokens y el agente dejará de elegir 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 set de código abierto con un único grosor de trazo y, como ese set 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 el producto seguirá siendo reconocible solo por los iconos.

Sustituir el set 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 design tokens.
• Ajuste el tamaño al texto adyacente, 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 cambio total de tema.
• Permita una única excepción y asígnele un nombre. Un solo glifo personalizado, generalmente la marca, utilizado en un lugar consistente. Una desviación deliberada se lee como una decisión; varias se leen 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 fiabilidad) están ausentes en tres cuartas partes. Y las palabras más comunes que sustituyen a 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.