English

Tu sitio grita hecho por IA: tres señales que puedes buscar con grep

Tu sitio grita "generado por IA" — y no necesitas ojo de diseñador para comprobarlo. El look de "AI slop" es un artefacto estadístico, y eso significa que deja una firma en tu código fuente. Tres comandos de grep sobre tu CSS te dirán en menos de un minuto si tu frontend se ve igual al de todos los demás.

Por qué todos los frontends de IA se ven iguales

Los LLM son predictores de patrones, no diseñadores: si les pides "construye una landing page" sin restricciones, emiten la mediana estadística de cada tutorial y plantilla de sus datos de entrenamiento. Y esa mediana tiene un color. Tailwind UI publicó sus componentes de demo con botones bg-indigo-500 y gradientes from-indigo-500 to-purple-600; miles de tutoriales, plantillas y repos de GitHub los copiaron tal cual, y ese corpus es de lo que aprendieron los modelos. El resultado es un ciclo de retroalimentación: los sitios morados generados por IA se despliegan, se scrapean y vuelven a entrenar modelos.

El costo no es funcional, es de credibilidad. Los usuarios ya vieron cientos de veces la plantilla de gradiente morado, hero centrado y todo redondeado. Se lee como "nadie diseñó esto".

Los tres greps

Ejecútalos desde la raíz del proyecto (ajusta --include para .scss, .tsx, etc.):

# Tell 1 — purple/violet gradients
grep -rniE "linear-gradient\([^)]*(purple|violet|indigo|#a855f7|#8b5cf6|#7c3aed|#6366f1)" \
  --include="*.css" .
# Tailwind flavor:
grep -rnE "from-(indigo|purple|violet)-[0-9]+" --include="*.tsx" --include="*.html" .

# Tell 2 — text-align: center on nearly everything
grep -rcn "text-align: *center" --include="*.css" .

# Tell 3 — one big radius everywhere (16px+ / rounded-2xl)
grep -rhoE "border-radius: *[0-9]+px" --include="*.css" . | sort | uniq -c | sort -rn

Ese último pipeline es el interesante: hace un histograma de tus radios. Un sistema diseñado a mano tiene una pequeña escala de radios (botones ≠ tarjetas ≠ inputs). El slop tiene exactamente un valor, de 16px o más, en todo.

Reglas prácticas

Los porcentajes son heurísticas, no leyes — una página de marketing centra más que un dashboard. Lo que importa es si los números reflejan una decisión o un default.

Nivel avanzado: haz que el modelo deje de hacerlo

• Escribe un DESIGN.md (o doc de sistema de diseño) que el agente deba leer: paleta exacta en hex limitada a ~3 tonos, un emparejamiento tipográfico con nombre, una escala de radios. La IA genera a partir del contexto que le das — los prompts vagos devuelven el promedio de los datos de entrenamiento.
• Elimina los defaults del toolchain. Sobrescribe la paleta de Tailwind con tus propios tokens en lugar de renombrar indigo como primary; si indigo-600 no existe en tu config, ni el modelo ni un colega apurado pueden usarlo.
• Prohíbe los tokens explícitamente. Una línea de prompt como "sin gradientes morados/índigo, sin rounded-2xl, sin hero centrado apilado" desplaza la salida lejos de la mediana de forma medible.
• Rompe la simetría a propósito. Layouts de grid asimétricos y una escala real de radios son las señales más baratas de "esto lo diseñó un humano".

Lee el código fuente, no los píxeles: la firma del slop está en tu CSS antes de estar en tu pantalla.

Recursos

• Why Your AI Keeps Building the Same Purple Gradient Website — la explicación de la mediana estadística
• Why Every AI-Built Website Looks the Same (Blame Tailwind's Indigo-500) — cómo un default inundó los datos de entrenamiento
• How to Fix the "AI-Generated" Look in Your Frontend — cuatro arreglos concretos
• AI Slop Design: Why AI-Generated UI Looks Generic — el catálogo completo de señales y seis reglas de reparación
• Design Systems for AI Coding: Stop Getting Purple Gradients — arquitectura de tokens como contexto para la IA