Niltra/web-diseno-antislop

Diseño web anti-slop

Principio: el modelo por defecto converge a la media de todo lo que ha visto. Esta skill rompe esa convergencia obligando a decidir antes de construir y verificando con evidencia después.

Cuándo se activa

• Al construir o rediseñar páginas, secciones, heroes, cards, navegación o cualquier UI.
• Al auditar una web o captura con la pregunta "¿esto parece hecho por IA?".
• Al elegir tipografías, paletas, espaciado o motion para un proyecto nuevo.

Design DNA (obligatorio antes de tocar código)

Todo proyecto declara primero:

1. Paleta nombrada (ej. "Sala de control"): 1 color de tinta/base, 1 de superficie, 1 acento señal, 1 acento de datos, 1 de alerta. HEX u OKLCH + contraste AA verificado.
2. Par tipográfico con roles: display, cuerpo, mono técnica, cifras. Nunca una sola fuente para todo.
3. Esqueleto de la sección principal en ASCII.
4. Composición del hero: qué se ve sin scroll en un portátil 1280x720.
5. Elemento firma: algo único que solo tenga este sitio (un gráfico vivo, un patrón de grid, un cursor, una transición propia).
6. Nivel de motion (0-10) y comportamiento con prefers-reduced-motion.

Se escribe en docs/design-dna.md del proyecto y no se improvisa a mitad de build.

Los dos tests anti-slop

• Test 1: ¿alguien podría adivinar la paleta solo sabiendo la categoría del producto? Si sí, rehacer.
• Test 2: ¿podría adivinar la familia estética con categoría + anti-referencias? Si sí, rehacer.

Baneos duros (si aparece uno, se regenera ese eje)

Territorio tipográfico: Inter, Roboto, Open Sans o cualquier fuente por defecto de sistema en un rol protagonista; todas las secciones con el mismo tamaño de titular.

Territorio color: gradientes morados/índigo/violeta; #fff y #000 puros; neón verde sobre negro como "dev portfolio"; crema + terracota + serif; más de un gradiente decorativo por página.

Territorio layout: hero centrado apilado (kicker + H1 + subtítulo + 2 botones); 3 columnas iguales con iconos; bento con cards dentro de cards; borde de acento lateral en cards; glassmorphism; dashboard falso con sparklines decorativas; todo con fade-in-up al entrar; secciones idénticas en estructura una tras otra.

Territorio contenido visual: capturas inventadas o mockups flotantes; imágenes stock; imágenes generadas por IA como sustituto de producto real; emojis como iconos de features; logos en fila "confían en nosotros" sin contexto.

Territorio copy: "Elevate your...", "Unlock", "Supercharge", "Take your X to the next level", "The future of...", "Seamlessly", "Effortless"; em dashes decorativos; pastilla "Available for work" con punto verde; más de 2 tipos de botón distintos.

Reglas de construcción

• El texto es HTML real (indexable), nunca texto dentro de canvas, SVG o imagen.
• Grid con intención: anchos distintos por tipo de contenido, alineaciones rotas a propósito, jerarquía por tamaño y peso, no por cajas.
• Espaciado por escala (4/8) declarada; nada de valores aleatorios.
• Interacción real: hover, foco, teclado, estados de carga y vacío. Nada decorativo que no responda.
• Motion con propósito: entra una vez, no en bucle; anima transform y opacity; respeta prefers-reduced-motion de forma explícita.
• Accesibilidad por encima de originalidad: contraste AA, foco visible, áreas táctiles 44px, 375px de ancho mínimo.

Auditoría anti-slop (con capturas)

1. Capturar desktop 1440 y móvil 375 con Playwright CLI (nunca opinar sin captura).
2. Recorrer la lista de baneos y nombrar el patrón detectado con evidencia (selector/captura).
3. Aplicar los dos tests.
4. Comprobar foco, teclado, contraste computado y reduced-motion.
5. Salida: patrón → evidencia → fix concreto. 0 patrones = pasa.

Herramientas de apoyo

• Playwright CLI para capturas y verificación: ver skill web-qa-visual.
• Assets reales y logos: ver skill web-assets-reales.
• Texto: gate no-ai-slop.
• Registro de builds anteriores para no repetir esqueleto/paleta: docs/design-dna.md del proyecto (append-only).