Web Design Deslop

¿Qué hace Web Design Deslop?

El "slop de IA" en diseño web no es una mala decisión. Es el promedio de un millón de landing pages: el gradiente de púrpura a rosa, el héroe centrado con una píldora y dos botones, las tres tarjetas de características iguales con un icono cuadrado tintado, las tarjetas de cristal sobre fondo casi negro, el texto que dice "Desbloquea flujos de trabajo sin fisuras". Cada pieza está bien por sí sola. Juntas hacen una página que podría pertenecer a cualquier empresa, lo que significa que no pertenece a ninguna.

Este skill hace tres trabajos:

1. Auditar una página, maqueta o código existente e informar sus señales de slop con correcciones concretas.
2. Guiar una nueva construcción para que el slop nunca se escriba en primer lugar.
3. Reescribir textos que suenen generados.

Lee references/tells.md (señales visuales, de layout, de movimiento y de Tailwind, con el reemplazo para cada una) cada vez que audites o construyas. Lee references/copy.md cuando se esté escribiendo o revisando cualquier titular, subtítulo, descripción de característica o llamada a la acción.

La única prueba que importa

La prueba de intercambio. Reemplaza el logo y el nombre del producto por los de un competidor. ¿Sigue funcionando la página? Si es así, es slop, por muy pulido que esté. Una página diseñada está construida a partir del material que solo esta marca tiene: su producto, su gente, su lugar, su proceso, sus números reales, su voz. Cada juicio a continuación es un caso especial de esta prueba.

Dos pruebas de apoyo:

• La prueba de entrecerrar los ojos. Entrecerrando los ojos (o desenfocando la mirada). Si ves una columna centrada de rectángulos redondeados del mismo tamaño apilados a intervalos iguales, el diseño es una plantilla. Las páginas diseñadas tienen una silueta desigual: una sección ancha, la siguiente estrecha, una cosa muy grande, muchas cosas pequeñas.
• La prueba de la fuente. ¿De dónde vino cada decisión? "Del material de la marca" es bueno. "Porque así es como se ven las landing pages" es la señal.

Modo 1: Auditoría

Úsalo cuando el usuario comparta una URL, captura de pantalla, frame de Figma, componente o repositorio y quiera una revisión, o diga que se ve genérico.

1. Lee todo primero. Para código, lee cada componente de página/sección y la configuración de Tailwind o CSS global. Para capturas de pantalla, mira la página completa antes de escribir. No comentes solo desde el héroe.
2. Ejecuta la prueba de intercambio y da el veredicto en una oración. Sé honesto y específico: "Esta podría ser la página de inicio de cualquier startup de devtools" es más útil que una puntuación.
3. Enumera las señales, de peor a mejor. Para cada una: la señal, dónde está (archivo y línea, o nombre de sección), por qué se lee como generado, y la corrección. Toma de references/tells.md pero escribe la corrección para esta página, no el reemplazo genérico.
4. Nombra qué conservar. Cada página tiene algo que funciona. Dilo, o el usuario lo tirará junto con el slop.
5. Da los tres cambios con mayor efecto. Generalmente: una decisión tipográfica, una decisión de diseño, una decisión de contenido. Si el usuario solo hace estos, la página ya debería pasar la prueba de entrecerrar los ojos.

Formato de salida para una auditoría:

## Veredicto
Una o dos oraciones. Resultado de la prueba de intercambio. En general: con plantilla / mixto / diseñado.

## Corregir primero estos
1. [señal] / [dónde] / [corrección específica]
2. ...
3. ...

## Todo lo demás, por área
### Tipo ### Color ### Diseño ### Componentes ### Movimiento ### Texto ### Contenido/Imágenes
(una lista corta debajo de cada una; omitir áreas vacías)

## Conservar
Lo que ya está bien y por qué.

Cuando el usuario te pida aplicar las correcciones, edita los archivos reales. No reescribas la página completa desde cero a menos que te lo pidan; las ediciones específicas preservan lo que funciona y son más fáciles de revisar.

Modo 2: Construir sin slop

Úsalo cada vez que generes un sitio, página, sección o plantilla. El orden importa: las decisiones tomadas temprano (concepto, tipo, cuadrícula) previenen el slop; las decisiones tomadas tarde (intercambiar este gradiente) solo lo ocultan.

Antes de escribir cualquier marcado

1. Encuentra el material bruto de la marca. ¿Qué tiene realmente este negocio? Un producto con una interfaz real, un lugar físico, un material, un proceso artesanal, un fundador con un punto de vista, un conjunto de datos, una base de clientes con nombre. Elige una cosa y deja que impulse la página. El sitio de un tostador de café se puede construir en torno a los perfiles de tueste; el de un concesionario en torno al piso de exhibición; el de una app de facturación en torno a una factura real. Si el usuario no te dio nada, haz una pregunta, o indica la suposición sobre la que estás construyendo al principio de tu respuesta.
2. Elige una idea de diseño, no una lista de secciones. Decide el único movimiento estructural que hace la página: una columna doble editorial con una izquierda fija, un ritmo de imagen a sangre completa, una página densa de índice/tabla, un solo titular enorme con texto de apoyo pequeño, un desplazamiento horizontal de productos. Luego deja que las secciones surjan de eso. Nunca empieces con "héroe → logos → características → testimonios → precios → FAQ → CTA → pie de página". Esa lista es la plantilla de slop; si la página necesita algunas de esas secciones, deberían verse como esta página, no como la lista.
3. Configura el tipo antes que el color. Elige una fuente de visualización con carácter y una de trabajo para el cuerpo; establece una escala real con saltos grandes (p. ej., 14 / 18 / 32 / 72 / 140) en lugar de la rampa suave de Tailwind de text-4xl a text-6xl. Decide la alineación: alineado a la izquierda es el valor predeterminado de las páginas diseñadas; todo centrado es el valor predeterminado de las generadas.
4. Deriva una paleta del material. Uno o dos colores de marca, un fondo de papel o tinta, y el acento utilizado solo en algunos lugares. Los degradados no están prohibidos, pero un degradado que no se deriva de nada (púrpura→rosa, azul→violeta) es la señal de IA más fuerte en la web en este momento.

Mientras escribes el marcado

• Varía el ritmo. No todas las secciones son py-24 max-w-7xl mx-auto. Deja que una sección rompa el contenedor, una se siente en una medida estrecha, una sea una lista dividida por líneas finas en lugar de tarjetas.
• Prefiere líneas y espacio sobre tarjetas y sombras. Los bordes finos (border-b border-neutral-200), los espacios en blanco y el tamaño del tipo transmiten jerarquía mejor que los cuadros rounded-2xl shadow-lg. Usa una tarjeta cuando la cosa sea realmente un objeto discreto (un producto, un plan), no como un contenedor predeterminado.
• Usa contenido real o marcadores de posición honestos. Escribe el titular real del material de la marca. Si se desconoce un hecho, escribe {{TODO: cifra real}} en lugar de inventar "10,000+ clientes satisfechos". Los logos falsos, los testimonios falsos de cinco estrellas y las estadísticas de números redondos son slop de contenido y son peores que una sección faltante.
• Iconos: pocos o ninguno. Los emojis nunca son iconos. Una lista de características no necesita un icono lucide por fila. Si se usan iconos, deben ser un conjunto consistente, pequeños y secundarios al texto.
• Movimiento con una razón. Nada de stagger-fade-up en cada elemento. Uno o dos movimientos deliberados vinculados al contenido (una imagen de producto que se revela al hacer scroll, un hover que muestra un detalle) se leen como diseñados. Las transiciones predeterminadas deben ser rápidas y simples.
• Imágenes: específicas sobre abstractas. Sin blobs 3D, sin orbes de degradado, sin stock de "portátil en escritorio". Una captura de pantalla real, una foto de producto, un mapa, un documento, una textura del material. Si no existe ninguna, un bloque tipográfico bien configurado supera a una imagen de marcador de posición.
• Verifica también el slop de segundo orden. La reacción al slop de degradado tiene su propia plantilla: serif gigante, superposición de grano, secciones numeradas (01), etiquetas mono en mayúsculas en todas partes, filas de marquee, blobs que siguen al cursor, "© 2026 — Todos los derechos reservados" en mono. Es igualmente reconocible. Usa estos movimientos solo cuando provengan de la marca, no porque señalen "diseñado".

Antes de entregar

Ejecuta la auditoría en tu propia salida, rápidamente: prueba de intercambio, prueba de entrecerrar los ojos, escanea references/tells.md. Corrige lo que encuentres. Luego dile al usuario en una o dos líneas por qué la página se ve como se ve (de qué material se construyó, cuál es la idea de diseño), para que pueda juzgar la decisión en lugar de los píxeles.

Modo 3: Texto

Lee references/copy.md. La versión corta: el texto generado es abstracto, adjetival y simétrico. El texto diseñado es concreto, específico y desigual. Reemplaza cada afirmación con un hecho, cada "sin fisuras" con lo que realmente sucede, cada tripleta con la única cosa que importa. Los titulares deben decir qué es o hace la cosa, en la voz de la marca, en palabras que el cliente usaría. La CTA dice qué sucede después ("Ver los tuestes", "Reserva una prueba de manejo"), no "Empezar".

Calibración

• No todos los patrones están mal en todos los contextos. Una tabla de precios con tres niveles es correcta para un producto con tres niveles; la señal es la insignia "Más popular" en la del medio cuando nada lo respalda. Juzga por la prueba de intercambio, no por una lista de verificación.
• El usuario puede querer un diseño convencional y confiable (un banco, una clínica, un concesionario). Deslop no significa raro. Significa específico. Una estructura convencional construida a partir de material real pasa; un diseño experimental lleno de tarjetas genéricas no.
• Cuando el usuario es un diseñador o desarrollador, da las correcciones como código o valores exactos. Cuando no lo es, describe el cambio en lenguaje sencillo y ofrécete a hacerlo.
• No halagues ni acumules. Un veredicto honesto, una lista clasificada y un camino a seguir.