Si le pides a Claude "hazme una web bonita", vas a recibir la misma tipografía y el mismo degradado morado sobre blanco que reciben miles de personas más ese mismo día. No es que Claude sea malo diseñando. Es que, sin instrucciones, tiende a lo esperado. Esta guía explica qué es el "AI slop", por qué pasa y el texto exacto que le doy a Claude antes de que escriba una sola línea de código para que cada web salga con su propia identidad.
Así llaman los usuarios al resultado genérico y reconocible a simple vista de una IA generativa: la tipografía Inter o Arial, el degradado morado sobre fondo blanco, la tarjeta centrada con sombra suave, el layout que ya viste en el último SaaS que abriste. No es fea por defecto. Es fea porque es intercambiable: quítale el logo y no sabrías decir de qué negocio es.
El problema no es solo estético. Una web que se ve como cualquier otra generada por IA no transmite que detrás hay una marca con criterio propio. Y eso, para un negocio, cuesta clientes.
Claude tiende a resultados "dentro de lo esperado". Es una tendencia del modelo, no un límite fijo: sin dirección explícita, elige la fuente más segura, la paleta más usada, el patrón de componentes más predecible. Generación tras generación, incluso variando el prompt, repite las mismas elecciones (Space Grotesk es un clásico).
La solución no es pedirle "más creatividad". Es darle, antes de que escriba código, un texto que le prohíba explícitamente las salidas genéricas y le obligue a comprometerse con una estética concreta.
Pega esto en Claude antes de que empiece a construir el frontend:
<frontend_aesthetics>
Tienes tendencia a converger hacia resultados genéricos, "dentro de lo esperado". En diseño de frontend, esto genera lo que los usuarios llaman la estética "AI slop". Evita esto: crea frontends creativos y distintivos que sorprendan y enamoren.
Céntrate en:
Tipografía: elige fuentes bonitas, únicas e interesantes. Evita fuentes genéricas como Arial e Inter; opta en su lugar por elecciones distintivas que eleven la estética del frontend.Color y tema: comprométete con una estética coherente. Usa variables CSS para mantener la consistencia. Los colores dominantes con acentos marcados funcionan mejor que las paletas tímidas y repartidas de forma uniforme. Inspírate en temas de IDE y en estéticas culturales.Movimiento: usa animaciones para efectos y micro interacciones. Prioriza soluciones solo con CSS para HTML. Usa la librería Motion para React cuando esté disponible. Céntrate en los momentos de alto impacto: una carga de página bien orquestada, con revelados escalonados (animation-delay), genera más impacto que micro interacciones dispersas.Fondos: crea atmósfera y profundidad en lugar de recurrir por defecto a colores sólidos. Superpón gradientes CSS, usa patrones geométricos o añade efectos contextuales que encajen con la estética general.
Evita las estéticas genéricas típicas de la IA:
Familias de fuentes sobre utilizadas (Inter, Roboto, Arial, fuentes del sistema)Esquemas de color muy usados (en particular, degradados morados sobre fondo blanco)Layouts y patrones de componentes predeciblesDiseño genérico que carece de carácter específico para el contexto
Interpreta con creatividad y toma decisiones inesperadas que se sientan genuinamente diseñadas para ese contexto concreto. Varía entre temas claros y oscuros, distintas fuentes, distintas estéticas. Aun así, tiendes a converger en elecciones comunes (Space Grotesk, por ejemplo) generación tras generación. Evita esto: es fundamental que pienses fuera de lo convencional
</frontend_aesthetics>
Qué hace cada bloque
"Tipografía" y "Color y tema" le fuerzan a comprometerse en vez de quedarse en elecciones seguras. "Movimiento" y "Fondos" son los que más se saltan por defecto: sin pedirlos, la IA entrega una página estática de bloques planos. La lista de "evita esto" al final no es decorativa: nombrar Inter, Arial y el degradado morado explícitamente es lo que de verdad los bloquea.
Aquí está la parte que casi todos hacen mal: si pegas este mismo texto, tal cual, en cada proyecto que construyes, tus webs van a volver a salir parecidas entre sí. El prompt solo evita que Claude caiga en lo genérico de la IA en general. No decide, por sí solo, cuál es la identidad de cada negocio.
Lo que cambio yo, negocio por negocio, antes de pegar el prompt:
La referencia estética. Un negocio de finanzas no debería inspirarse en lo mismo que una marca de skate. Dale a Claude un punto de partida concreto: un tema de IDE, una era de diseño, una estética cultural específica.
La paleta. No le pidas "colores bonitos". Dile los dos o tres colores dominantes que quieres, y déjale claro que un acento marcado sobre un color dominante gana a una paleta pareja y tímida.
La tipografía. Nómbrale familias tipográficas reales que quieras probar, o pídele explícitamente que evite la que usó la última vez si ya notaste que se repite.
Estas tres decisiones, no el prompt en sí, son las que hacen que cada web termine con su propia cara.
Antes de soltarlo a construir
Combina el prompt de arriba con tu referencia, paleta y tipografía en el mismo mensaje. Pídele después que te muestre 2-3 variaciones de la paleta y la tipografía antes de escribir el resto del código, así apruebas la dirección antes de que invierta el trabajo en construir toda la página.