← Volver al Blog

Imágenes de IA convergen al mismo azul: 3 trucos

Hace unos meses publiqué un paper corto titulado AI Blue sobre por qué los modelos de visión (GPT-4o, Claude Sonnet, LLaVA) sistemáticamente ven mal los colores intermedios. El hallazgo técnico principal quedó en el paper, pero el apéndice que más me reescribieron en X y en TabNews es una observación tonta y cotidiana que puedes hacer sin instalar nada: cuando le pides a un LLM que te diseñe una UI, casi siempre te devuelve algo azul-violeta.

En este post recompilé los datos crudos de ese apéndice directamente desde el repositorio público del paper, chequé qué imágenes rompieron el patrón y saco tres trucos concretos para escapar sin cambiar de modelo. Es el complemento visual del post sobre las 7 frases que delatan al LLM en la copy; allí el tell es lingüístico, acá es cromático.

El dataset que voy a mirar

El apéndice analizó siete imágenes de UI generadas por IA. Los conteos por matiz están en ai-blue-color-bias/results/color_distribution_analysis.json. Del JSON crudo salen 2,984 pixels cromáticos (excluyendo grises, negro y blanco) distribuidos así por bin de matiz de 30 grados:

Bin de matizPixels% del total
240° (azul-violeta)1,94465.2%
210° (azul-cián)69723.4%
330° (rosado-magenta)1775.9%
0° (rojo)1234.1%
Resto~441.5%

Los dos primeros bins juntos, la familia del azul, ocupan el 88.5% de los pixels cromáticos del set. Esa es la observación que da nombre al paper: AI Blue.

Una nota sobre los pixels por imagen: la cuenta va de 143 (el “tech blog” desaturado) a 861 (la landing tipo Revolut). No son millones, son cientos. Es un piloto, no un censo. Pero el patrón se repite consistente en las 5 imágenes de “landing genérica”, y por eso vale la pena mirarlo.

Qué pasa cuando el prompt sí escapa

De las 7 imágenes, 5 caen enteras en la familia azul (210°+240° por encima del 99% cada una). Las 2 que rompieron el patrón son las interesantes:

ImagenBin dominante%Bin secundario%
ch04-japan-stereotype330° (rosado)55.8%210°25.2%
ch02-industry-portfolio240°30.0%0° (rojo)26.5%

La primera se generó con un prompt tipo “Japón estereotipado”. La segunda es un layout de portafolio personal. Ambas empujaron al generador afuera del 240°, y lo hicieron por caminos distintos: la de Japón, contra una carga cultural (rosa cerezo, rojo del sol); la de portafolio, contra un formato que suele venir con retrato y acento cálido.

De acá sale el primer truco.

Truco 1: ancla el prompt en un dominio con carga visual propia

Si le pides al modelo “una landing page moderna”, el generador no tiene contra qué desviarse del 240°: la palabra “moderna” en su corpus ya vive dentro de ese bin. Si le pides “una landing page para una florería de temporada en Kioto” o “portafolio de un ilustrador de terror analógico”, el prompt trae dominios con paletas propias y el generador se ve forzado a moverse.

No es magia. Es cambiar el promedio contra el que el modelo optimiza. La imagen ch04-japan-stereotype del dataset se generó exactamente así, y el 240° pasó de dominar (>60% en las landings genéricas) a 0% en esa imagen.

La rutina que uso yo: antes de pedir la UI, escribo un párrafo corto describiendo el mundo del producto (a quién sirve, en qué contexto, qué evoca). Ese párrafo va antes del “genera la landing”. El azul se cae por peso propio.

Truco 2: pide el color por HEX, no por nombre

El paper mide 4 modelos contra 40 colores sólidos. El hallazgo central: los VLM aciertan casi perfecto en colores puros (“azul”, “rojo”, “verde”) y fallan progresivamente en los intermedios (“teal”, “lime”, “mauve”). El mecanismo es de vocabulario. Los nombres de colores puros aparecen mucho más en la Web que los intermedios, y el vision encoder los tiene mejor alineados.

La consecuencia práctica: si en tu prompt escribes “usa un teal suave para el CTA”, el modelo empuja “teal” hacia lo que sí conoce, que suele ser el 240°. Si en cambio escribes “usa #14b8a6 para el CTA”, el pipeline pasa el HEX literal como token y no hay margen para que el vocabulario contamine la elección.

Esto suena obvio pero es raro verlo. En los threads de v0 y Cursor que sigo, los prompts casi siempre nombran los colores (“un azul suave”, “un teal moderno”) en vez de pasar el HEX. Si el problema es “todo me sale azul”, el primer cambio de un solo carácter es reemplazar el nombre por el hexadecimal.

Truco 3: audita los intermedios después de generar

Aún con los dos trucos anteriores, en un puñado de casos el modelo te va a devolver algo con un teal apagado o un lima raro. Necesitas un chequeo mecánico después de la generación.

Yo uso un script corto con Pillow que agarra el CSS o el SVG generado, extrae los valores de color, los pasa a HSV y para cada uno chequea tres cosas:

  1. ¿Está el matiz entre 150° y 270°? Esa es la banda donde los VLM fallan más.
  2. ¿La saturación está por debajo de 0.5? Los colores desaturados también se les escapan.
  3. Si sí a ambos, imprime un aviso.

Cuando la alerta salta, o le pido al modelo que reemplace el token específico por un HEX que yo elijo, o lo cambio a mano en el CSS. En 3 minutos por diseño el problema se corta.

El enfoque es el mismo que usé para generar el color_distribution_analysis.json del paper: Pillow, conversión a HSV, corte por banda de matiz.

Por qué esto se va a poner peor antes de mejorar

El bucle de retroalimentación importa. Los modelos que se entrenan hoy están viendo entrar como training data las UI generadas por los modelos de hace 12 meses. Cada iteración concentra más peso en el bin 240°:

  1. Los VLM ven mejor los colores puros, y el 240° está entre ellos.
  2. Al generar, eligen por defecto lo que “reconocen” bien: 240°.
  3. Las UI generadas entran al corpus de entrenamiento de la próxima generación.
  4. La próxima generación tiene aún más peso en 240°.

Si dejas al pipeline decidir por default, en un par de años la Web va a tener un tono azul-violeta institucional que se va a leer como “hecho con IA” a la primera mirada, del mismo modo que hoy se leen los emojis en los headings o el “Unlock the power of”. Los tres trucos de arriba son formas de salirte de ese loop desde tu proyecto, sin esperar a que Anthropic o Google recalibren.

Referencia y datos

Escribí una versión más larga y con más experimentos de este marco en el libro sobre AI Slop; si el ángulo te interesa, ahí está más completo.