Gradiente de azul a violeta, pastillitas flotando encima del titular, tres tarjetas con emojis en fila…

Si tu app se ve así, la gente se da cuenta de que no tomaste ni una decisión de diseño y que tu agente te diseñó un website con todas las convenciones del AI Slop.

Una lista de prohibiciones evita que la AI haga lo feo; no le dice qué es tu marca. Para eso, léete La referencia completa de estilos de diseño web y escoge un estilo a propósito. Usa este snippet como la ganancia rápida mientras tanto.

El prompt

Las dos variantes usan este mismo prompt. Cópialo una vez, guárdalo, y pégalo al final de la variante que estés usando.

Reglas visuales anti-slop

REGLAS VISUALES ANTI-SLOP: síguelas a menos que yo te diga lo contrario.

Prohibido, estas son las señales de slop de IA:
- Nada de etiquetas tipo pastilla flotando encima del titular.
- Nada de gradientes azul→violeta / índigo. Nada de violeta como acento a
  menos que yo te lo pida.
- Nada de emojis en la interfaz: ni en la navegación, ni en las tarjetas,
  ni en los botones, ni en los títulos. Reemplaza cada emoji por un ícono de
  una librería real (Lucide, Phosphor, Heroicons) con tamaño, grosor y color
  consistentes. Los emojis se ven sin terminar; los íconos se ven
  profesionales.
- Nada de rayas largas (em dash) en ningún lado, ni en el copy de la
  interfaz ni en los comentarios del código. Reemplaza cada raya larga por
  una coma. Si la coma no funciona, usa dos puntos. Si ninguna de las dos
  funciona, parte la oración en dos. La raya larga es la señal más confiable
  de que el texto lo escribió una máquina.
- Nada de tema oscuro por defecto. Pregúntame antes de escoger claro u
  oscuro.
- Nada de Inter (ni Geist/Space Grotesk por defecto). Escoge una tipografía
  intencional y dime por qué.
- Nada de la fila genérica de 3 "feature cards" con íconos, ni bordes de
  color arriba o al lado de las tarjetas.
- Nada de filas de pasos 1-2-3, ni banners de estadísticas.
- Nada de glassmorphism, ni glows de color, ni box-shadows tipo neón.
- Nada de spinners, usa skeleton loaders.
- Nada de copy de relleno en el hero ("Construye el futuro", "10x",
  "potencia tu..."). Escribe copy claro y específico.

Haz esto en su lugar:
- Comprométete con UN solo primitivo de layout fuerte y repítelo (no mezcles
  cinco estilos de tarjeta).
- Escoge una paleta con punto de vista (no lavanda): neutros cálidos,
  crema+tinta, o negro de alto contraste + un solo acento fuerte.
- Jerarquía tipográfica real, espaciado generoso y consistente, contraste de
  texto WCAG-AA.
- Añade elementos de confianza o prueba social solo si yo te doy contenido
  real, nunca logos inventados.

Antes de escribir cualquier UI, PREGÚNTAME:
1. ¿Esto es una app web, una landing de marketing, o una app móvil?
2. ¿Qué vibra? (ej. limpio/minimal, editorial, juguetón, brutalista,
   corporativo)
3. ¿Claro u oscuro, y qué color de acento quieres?

Luego recomiéndame componentes específicos de la fuente correcta:
- App web / UI en React → 21st.dev y https://skiper-ui.com/
- Animaciones CSS / micro-interacciones → https://animista.net/

Dime exactamente qué componentes sacarías de cada uno y dónde irían, y
espera mi visto bueno antes de generar nada.

Variante A: Proyecto nuevo

Agrégalo al prompt que ya ibas a escribir.

Proyecto nuevo

Construye [describe tu app/sitio].

Antes de empezar, aplica las REGLAS VISUALES ANTI-SLOP de abajo y hazme
primero las 3 preguntas. No me entregues los defaults genéricos de IA. Toma
decisiones deliberadas y usa componentes reales de 21st.dev /
skiper-ui.com / animista.net donde encajen.

<pega aquí el prompt de arriba>

Variante B: Arreglar un sitio existente

Esta es para algo que ya está construido.

Arreglar un sitio vibe-codeado

Este sitio se hizo a las millas con IA y se ve como slop genérico. Audítalo
contra las REGLAS VISUALES ANTI-SLOP de abajo y luego arréglalo.

1. Primero, lista cada señal de slop que encuentres (gradientes, etiquetas
   flotantes, emojis, rayas largas, Inter, oscuro por defecto, filas de
   tarjetas con íconos, tarjetas con borde de color, spinners, glows, copy
   de relleno, etc.) con el archivo y la línea donde vive cada una.
2. Hazme las 3 preguntas antes de cambiar el look.
3. Luego refactoriza: reemplaza el slop con una paleta intencional, un
   sistema tipográfico, y UN solo primitivo de layout repetido, cambia cada
   emoji por un ícono real, elimina cada raya larga, y mete componentes de
   21st.dev / skiper-ui.com / animista.net. Deja intactas toda la
   funcionalidad y todo el contenido, cambia solo el diseño.

<pega aquí el prompt de arriba>

Notas

No quites las tres preguntas. Ese paso es la clave de evitar el AI Slop. Una IA sin restricciones te da el promedio de todo lo que ha visto, y ese promedio es exactamente lo que se ve como AI slop. Contestar tres preguntas hace que el resultado sea específico a ti en vez de específico a nadie.
El violeta no está prohibido para siempre. Está prohibido por defecto para que usarlo sea una decisión y no un accidente. Lo mismo con el modo oscuro.
La regla de la raya larga es la que todo el mundo se salta. Parece un detalle bobo, pero el lector la detecta más rápido que cualquier gradiente. Una coma hace el trabajo casi siempre.
Esto es el piso, no el techo. Tu marca no puede ser "lo que sea que no sea AI Slop". La verdadera solución es usar el mismo AI para investigar tu público, construir un marketing persona, después una guía de marca. Para leer el proceso completo accede a mi Blog.