Por qué las interfaces generadas por IA se desvían de la marca

El lunes le pides a una herramienta de programación con IA un panel de control, y los botones primarios vuelven en #2563eb. El miércoles pides una página de ajustes —mismo proyecto, mismas instrucciones— y los botones llegan en #3b82f6. El viernes aparece una ventana modal de registro en #1d4ed8. Tres vistas, tres azules. Cada pantalla parece razonable por sí sola; nada dio error, nada falló. Ponlas una al lado de la otra y el proyecto sostiene tres opiniones ligeramente distintas sobre su propio color de marca.

Las interfaces generadas por IA se desvían de la marca porque un modelo de lenguaje genera cada respuesta desde cero: a menos que un valor exacto esté presente en su contexto, cada decisión de color, tamaño y espaciado es una nueva conjetura —plausible, cercana a la anterior y no idéntica a ella—. La desviación no es un fallo que haya que parchear; es el comportamiento por defecto de un sistema generativo que trabaja sin una fuente bloqueada. La solución es darle al modelo una fuente determinista de valores —design tokens— que consultar en lugar de inventar.

Esa es la versión corta. El resto de este artículo —parte de nuestra guía sobre IA y sistemas de diseño— desglosa por qué ocurre la desviación, por qué sobrevive a la revisión y qué cambia realmente una fuente bloqueada.

¿Por qué el mismo prompt produce valores distintos?

Un modelo de lenguaje no recupera tu azul de marca de ningún sitio, porque, a menos que el valor esté en su contexto, no hay ningún sitio de donde recuperarlo. Genera su salida por muestreo: en cada paso elige entre las continuaciones estadísticamente plausibles dado todo lo que ha leído. El modelo ha visto una cantidad enorme de interfaces, así que su idea de «un buen azul para un botón primario» no es un valor único: es una distribución de valores, con #2563eb, #3b82f6 y #1d4ed8 cómodamente dentro de ella. Pídelo tres veces y obtienes tres muestras.

Este es un patrón de comportamiento de la tecnología, no un defecto de una herramienta en particular, y bajar la aleatoriedad no lo elimina: el contexto difiere entre sesiones —la conversación hasta el momento, los archivos a la vista, el orden de las peticiones— y la muestra se mueve con el contexto.

¿Por qué «plausible» no es lo mismo que «consistente»?

Porque la plausibilidad se juzga de una respuesta a la vez, y la consistencia es una propiedad del conjunto entero. Cada uno de los tres azules es defendible por separado: quien revisa la modal del viernes ve una pantalla coherente con un color primario creíble y la aprueba. La desviación es invisible en cualquier vista aislada y solo aparece al comparar vistas, lo que significa que se cuela por el proceso de revisión que la mayoría de los equipos aplican en realidad: la comprobación por pantalla de «¿esto se ve bien?».

El color es simplemente el lugar más fácil para verlo. El mismo patrón produce texto de cuerpo de 15px en una pantalla y de 16px en la siguiente, un peso de fuente de 500 junto a uno de 600, un espacio de 12px donde su vecino recibió 14px. Cada elección está bien; el conjunto es ruido.

¿Por qué los usuarios notan una desviación que no saben nombrar?

Las interfaces se leen en parte por reconocimiento. Una vez que un usuario se ha encontrado con el botón primario unas cuantas veces, deja de leerlo: su color, peso y forma se procesan como una señal conocida, a un coste cognitivo casi nulo. La consistencia es lo que hace posible ese atajo. Cuando los valores oscilan, el atajo se degrada de forma silenciosa: el usuario no registra conscientemente que el azul del miércoles difiere del del lunes, pero la interfaz se percibe como algo menos cuidada, desajustada de una manera difícil de articular. El reconocimiento de marca funciona igual a mayor escala: se construye a partir de señales idénticas repetidas, y las señales casi idénticas lo diluyen en lugar de reforzarlo.

¿Qué cambia una fuente bloqueada?

Saca las decisiones a nivel de valor del bucle de muestreo. Un archivo de design tokens almacena cada decisión como datos con nombre —accent contiene un color exacto, space-4 un espacio exacto—; nuestro artículo sobre qué son los design tokens cubre la mecánica. Una vez que ese archivo está en el proyecto, el trabajo del modelo cambia de forma: los tokens se convierten en la interfaz entre el diseño y la IA: no «produce un azul plausible», sino «consulta el nombre accent». Producir un nombre correcto a partir de una lista corta que puede ver es una tarea que un modelo de lenguaje maneja con fiabilidad; mantener un valor hex idéntico a lo largo de veinte sesiones no es para lo que está hecho.

Los valores en sí provienen del cálculo, no del muestreo. Abre una rampa de color bloqueada en Scale Composer: un color semilla, diez pasos situados sobre una curva de luminosidad en OKLCH, cada paso con un nombre y un valor exacto. Sale igual cada vez, porque se calcula, no se adivina.

¿Dónde sigue ganándose la IA su lugar?

La cuestión es una división del trabajo, no un veredicto. Las herramientas generativas son fuertes en estructura y variación: montar el andamiaje de una vista, conectar componentes, maquetar un formulario, proponer tres alternativas antes del almuerzo. Lo que no hacen bien es mantener muchos valores exactos estables a lo largo del tiempo, ni las partes de un sistema de diseño que son cálculos y no elecciones. Los requisitos de contraste, como los mínimos de WCAG, son aritmética sobre la luminosidad; los pasos de color perceptualmente uniformes son colocación en una curva. Esos tienen respuestas correctas, y las respuestas correctas deben comprobarse, no muestrearse. Scale Composer los calcula: los roles semánticos —fondo, texto, acento— se derivan de la rampa con un suelo de contraste y se puntúan con APCA, de modo que los emparejamientos se sostienen antes de que nada llegue a un prompt.

El reparto que funciona, entonces: el sistema determinista guarda los valores, y la IA construye con ellos.

De la rampa a los roles

Una rampa es materia prima; lo que una IA acaba consultando son nombres de roles. Abre los roles semánticos derivados de esa misma rampa bloqueada: fondo, texto y acento asignados a partir de los pasos de la rampa, cada emparejamiento comprobado contra el suelo de contraste. Esa lista corta de nombres es lo que reemplaza la distribución de la que el modelo muestrearía en otro caso: dale la lista, pídele que consulte los nombres, y el problema de los tres azules ya no tiene nada de donde desviarse.