Lo que delata una UI hecha con IA, y cómo evitarlo.
Una landing page hecha con IA se reconoce en un segundo: el degradado morado, el hero centrado, las tres tarjetas idénticas. Estas señales aparecen porque los agentes recurren a los patrones más comunes cuando el brief deja margen. Así puedes reconocer cada una y escribir el brief para que tu agente no caiga en ellas.
Actualizado el 6 de noviembre de 2026 · 8 min de lectura
Por qué las interfaces hechas con IA se parecen tanto
Un agente de programación rellena cada hueco de tu brief con la opción más segura y común que ha visto. Pide “una landing page moderna” y obtendrás la media de miles de landing pages modernas: un degradado índigo, un titular centrado y una cuadrícula de tarjetas redondeadas. Ninguna de esas decisiones es mala por sí sola. Juntas parecen una plantilla, y los visitantes lo notan.
La solución no es un modelo más listo. Es un brief que deje menos huecos y una revisión que busque estas señales a propósito.
Las doce señales
Estilo visual
- El degradado de morado a azul. Botones con degradado, titulares con degradado o un suave brillo violeta detrás del hero. Se convirtió en el look “tecnológico” por defecto, así que ahora transmite “nadie eligió esto”.
- Esquinas redondeadas y sombras suaves en todo. Cada tarjeta, botón e imagen tiene el mismo radio grande y la misma sombra difuminada, así que nada destaca.
- Glassmorphism y brillos. Paneles esmerilados y contornos de neón sobre fondo oscuro, usados como decoración y no para marcar la jerarquía.
- Emojis o iconos genéricos como ilustraciones. Un destello, un cohete, un rayo dentro de un círculo de color, en lugar de una imagen real del producto.
Layout
- Todo centrado. Hero centrado, títulos de sección centrados, tarjetas centradas, pie de página centrado. El texto centrado cuesta más de escanear y elimina cualquier sensación de dirección.
- Tres tarjetas de funciones idénticas. Icono, título de dos palabras y una frase vaga, repetidos tres veces en una cuadrícula perfecta.
- Ritmo uniforme. Todas las secciones tienen la misma altura, el mismo padding y la misma estructura, así que la página no tiene énfasis ni cadencia.
Tipografía
- Una fuente, un peso, sin contraste. Una sola sans-serif en tamaños parecidos, de modo que titulares, etiquetas y texto se confunden.
Textos y contenido
- Texto de relleno. “Libera todo el potencial de”, “sin fricciones”, “potencia tu flujo de trabajo” o titulares como “Rápido. Seguro. Sencillo.” Podrían describir cualquier producto.
- Prueba social vaga. “Más de 10 000 equipos confían en nosotros” sobre una fila de logos de relleno, y testimonios de “Sara K., CEO”.
- Secciones que se repiten. Funciones, beneficios y “por qué elegirnos” que hacen las mismas tres afirmaciones con otras palabras.
- Imágenes de stock. Formas 3D abstractas o ilustraciones genéricas en lugar del propio producto.
La segunda oleada de señales
A medida que los agentes aprendieron a evitar los degradados morados, otros automatismos ocuparon su lugar. En noviembre de 2026, tanto la skill frontend-design de Anthropic como Impeccable señalan también estas como señales de IA:
- Crema, serif y terracota. Una página en blanco roto cálido, un titular serif (a menudo con una palabra en cursiva) y un acento óxido o terracota. Fue la solución “con buen gusto” al degradado morado y ahora es igual de común.
- Casi negro con un solo acento ácido. Una página negra con un único color verde ácido o bermellón.
- Etiquetas sobre los titulares. Una pequeña etiqueta en mayúsculas o una insignia en forma de píldora sobre cada encabezado.
- Secciones numeradas y etiquetas monoespaciadas. “01 / 02 / 03” delante de las secciones y etiquetas de datos en una fuente de código.
- Filetes por todas partes. Líneas finas y cajas con contorno que hacen que todas las páginas parezcan la misma hoja de periódico.
- Un fundido de entrada en cada sección. La misma animación de deslizamiento hacia arriba al hacer scroll, haga falta o no.
Ninguna lista se mantiene al día mucho tiempo, porque cada solución se convierte en el siguiente automatismo. La solución duradera es una dirección que nace de tu producto y de tu público, no de una lista de cosas que evitar.
Cómo escribir el brief para que no aparezcan
La mayoría de las señales desaparecen cuando el brief toma las decisiones que, si no, tomaría el agente por ti.
- Nombra la dirección de arte. “Cálida y editorial, titulares serif, fondo crema” le da al agente un punto de vista. “Moderna y limpia”, no.
- Pon restricciones reales. Tus colores de marca, un solo color de acento, tus fuentes y un radio de esquina. Un archivo DESIGN.md los guarda una vez para todas las pantallas.
- Da contenido real. El nombre real de tu producto, cifras, citas de clientes y capturas. Un contenido concreto obliga a layouts concretos.
- Muestra referencias. Una captura de un sitio que admiras dice más que un párrafo de adjetivos.
- Pide propuestas que se diferencien. Con tres opciones distintas a propósito, salta a la vista cuál es la genérica. Consulta cómo diseñar interfaces con Codex.
Este prompt fija una dirección antes de empezar a diseñar:
Antes de diseñar, propón tres direcciones de arte distintas para [producto], cada una con: el ambiente en una línea, una combinación de fuentes, una paleta de cuatro colores como máximo con un acento, un radio de esquina y una idea de layout que no sea un hero centrado. Evita degradados morados o azules, glassmorphism, iconos emoji y cuadrículas de tres tarjetas de funciones. Espera a que yo elija una.
Cómo arreglar una página que ya las tiene
Pídele al agente que audite su propio trabajo con la lista. Se le da bien encontrar las señales en cuanto se las nombras:
Revisa esta página en busca de señales de que parece generada por IA: degradados morados o azules, el mismo radio y la misma sombra en todo, glassmorphism o brillos, emojis o iconos genéricos, todo centrado, tarjetas de funciones idénticas, un ritmo de secciones uniforme, un solo peso de fuente, frases de relleno, prueba social vaga, secciones repetidas e imágenes de stock. Enumera cada una que encuentres e indica dónde aparece; después corrige las cinco más llamativas y deja todo lo demás igual.
Los textos suelen necesitar su propia pasada, porque las frases de relleno sobreviven a los arreglos visuales:
Reescribe todos los titulares y descripciones de funciones de esta página. Cada uno debe decir qué obtiene el usuario, incluir un detalle o una cifra concreta de nuestro producto y evitar estas palabras: liberar, sin fricciones, potenciar, sin esfuerzo, potente, revolucionar, llevar al siguiente nivel. Mantén una longitud parecida.
Y para el layout:
Rediseña la sección de funciones para que deje de usar tres tarjetas idénticas. Dale el doble de espacio a la función más importante, muestra cada función con un pequeño elemento visual de UI dibujado en HTML, alinea el texto a la izquierda y varía el ritmo de las secciones para que la página tenga un momento de énfasis claro.
Skills que ayudan
Las skills de diseño existen en buena parte para contrarrestar estos automatismos. Tanto Taste Skill como la skill frontend-design de Anthropic alejan a los agentes de las decisiones de plantilla, e Impeccable añade un detector con 62 reglas que puedes ejecutar en CI. Consulta Taste Skill vs Impeccable vs UI UX Pro Max para ver cómo se comparan, y las mejores skills de Codex para diseño UI.
Compara antes de publicar
Las señales se ven mejor junto a una alternativa. Pon la versión original y la revisada lado a lado, en dos ventanas del navegador o en un lienzo, y la genérica saltará a la vista. Para eso está Codex Design: cada propuesta que crea Codex aparece junto a las demás como HTML en vivo.
Preguntas frecuentes
¿Es malo que mi sitio parezca generado por IA?
Te resta confianza. Los visitantes interpretan una página de plantilla como poco cuidada, y una página que podría describir cualquier producto no explica el tuyo. Un diseño concreto y deliberado hace que el producto parezca tan real como es.
¿Puedo evitar que Codex produzca estos patrones?
En gran medida, sí. Pon tu dirección de arte y tus restricciones en DESIGN.md o AGENTS.md, instala una skill de diseño y termina con el prompt de auditoría de arriba. Revisar el resultado sigue siendo cosa tuya.
¿Los degradados y las esquinas redondeadas siempre están mal?
No. Cualquiera de ellos puede ser la decisión correcta cuando es deliberada y encaja con la marca. La señal es usarlos todos por defecto, a la vez, porque nadie decidió otra cosa.