Anti-slop (Anti-señales de IA)
Las UIs codificadas con vibraciones fallan de las mismas formas predecibles. Esta skill fusiona tres cosas en un flujo de trabajo: el método paso a paso de unslop, la maquinaria de dirección artística de taste-skill, y una lista de 20 señales reveladoras desactualizadas con un script que detecta las mecánicas.
Créditos y licencias
- El método está adaptado de unslop por Damir Sokolovsky (https://github.com/heydamir/unslop),
bajo licencia CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/). Adaptado: condensado y fusionado con
taste-skill por Leonxlnx y las señales de Molveau en
references/playbook.md. Mantén este crédito en cualquier copia o adaptación. El original está almacenado sin modificar enreferences/vendor/unslop/. - La ejecución de dirección artística, las reglas internas y el inspector provienen de taste-skill por Leonxlnx
(https://github.com/Leonxlnx/taste-skill), MIT, almacenado sin modificar en
references/vendor/taste/. - La lista de 20 señales y
scripts/detect-tells.mjsson propiedad de Molveau (MIT). scripts/story.mjsestá adaptado del renderizador de unslop (CC BY 4.0, los cambios se listan en su encabezado); permanece bajo CC BY 4.0, al igual quescripts/story-server.mjs, su servidor local.scripts/story-contrast.mjses propiedad de Molveau (MIT).
Comienza aquí
Lee references/playbook.md primero, comenzando por su bloque "Haz esto primero"; abre los archivos de los vendedores solo para profundizar o para ejemplos prácticos. El
playbook es la doctrina fusionada (dirección, pasadas, copia, espaciado, color, tipografía, iconos, detalles, datos,
pantallas de app, imágenes, movimiento, comprobaciones) con etiquetas de origen y las decisiones tomadas cuando las fuentes discrepan.
La tabla "Qué leer cuándo" a continuación es el índice de profundidad.
Superposición: esta es la pasada de aspecto IA. Las filas de crítica de la skill ui son la revisión de diseño general más ligera, y
design-grill es la auditoría profunda de múltiples lentes; úsalas para la calidad de diseño más allá de las señales.
Puerta de dirección
Haz esto antes de cualquier código para una nueva página o pantalla y como paso 3 de cada ejecución de slop pesado, incluso cuando la solicitud sea de una línea o diga que solo lo hagas. El resto de esta skill elimina errores; no le da carácter a una pantalla. Si se omite, el resultado es la página mediana que todo modelo hace: correcta en los detalles, pero sin dueño.
- Cinco líneas. Producto: qué hace, para quién. Carácter: dos o tres palabras concretas (
tranquilo, exacto, un poco cálido), nunca limpio, moderno, elegante, minimalista o premium. Mundo: el lugar o material al que pertenece el producto; tiñe los neutros y define el acento. Momentos: los uno o dos lugares que obtienen color y detalle ricos. Firma: un pequeño detalle que solo tiene este producto, usado de forma consistente. Un momento se dibuja con cuidado, no solo se limpia: un gráfico redibujado para lo que debe decir (líneas suaves, una comparación reflejada, una escala real), o el objeto propio del producto renderizado con peso y luz. - Inventario, luego la idea. Enumera de 8 a 12 cosas que ningún competidor comparte (nombre, calle, números en el briefing, materiales, herramientas, rituales, documentos que imprime el oficio). Escribe: "En esta pantalla, [un elemento] se convierte en [el dispositivo]". Ese dispositivo es el momento.
- Rechaza los valores por defecto de segunda generación a menos que la marca ya los posea. Son lo que un modelo alcanza
una vez que las señales obvias están prohibidas:
- una página beige, piedra o blanco cálido con un acento naranja quemado, terracota, salvia o bosque, con o sin un titular serifa (el aspecto "papel y tinta" es el nuevo valor por defecto, no una dirección);
- Fraunces, Instrument Serif, Playfair o Georgia como la fuente del titular por reflejo; system-ui como la única fuente;
- Inter o Geist sobre blanco con un acento índigo o azul;
- héroe, tres características, testimonios, llamada a la acción, en ese orden, sin argumento; en una pantalla de app, cuatro tarjetas de estadísticas iguales sobre un gráfico de barras;
- un subtítulo centrado, titular y dos botones ocupando toda la primera pantalla.
- Prueba de intercambio. Reemplaza el nombre y el oficio con los de un competidor. Si la pantalla sigue encajando, cambia la afirmación, el momento y la firma, y prueba de nuevo.
- Muestra y espera. Muestra las cinco líneas y la idea, y espera al dueño. Si no puedes preguntar (el usuario dijo que solo lo construyas, o ejecutas sin una persona), escríbelas como un comentario al principio del archivo principal y construye exactamente eso.
Profundidad: playbook anti-slop §2 (dirección) y §12 (pantallas de app); la skill design-inspiration-index para
referencias reales.
La idea central
El slop extiende color y efectos sobre el cromo: fondos, botones, bordes, etiquetas. El diseño cuidado mantiene el cromo silencioso y pone la riqueza en uno o dos momentos de contenido que la gente recuerda. Eliminar el slop es la mitad del trabajo; una pantalla limpia que podría pertenecer a cualquier producto es la siguiente plantilla. Cada ejecución termina con una pantalla que solo este producto podría tener.
Orden de trabajo
- ¿Página desde cero o rediseño profundo? Sigue la ejecución de taste-skill (
references/vendor/taste/taste-skill.md) con las anulaciones del playbook. Pantallas de app: playbook §12. - Mira la pantalla, renderizada si puedes, no solo el código.
- Audita contra la lista de señales (
references/vendor/unslop/unslop/references/signs.md) y las 20 señales (references/tells.md). Una línea por señal, con dónde vive. - Dimensiona el trabajo (pesado, ligero, sin slop) y escribe la dirección, luego espera al dueño (playbook §1 y §2).
- Corrige en nueve pasadas, cada una a lo largo de toda la pantalla: espaciado, color, iconos, copia, tipografía, layout, detalles, visuales, movimiento (playbook §3 a §14).
- Verifica con la lista de verificación del playbook, ejecuta el detector, compara con la auditoría (playbook §15).
- Informa la dirección, unas pocas líneas por pasada, y cada afirmación que eliminaste o no pudiste verificar.
Las 20 señales
Tabla completa con reemplazos: references/tells.md. Resumen, con lo que detecta el script:
| # | Señal | Script |
|---|---|---|
| 1 | Degradado violeta/fucsia/índigo | sí |
| 2 | Texto degradado | sí |
| 3 | Emoji en la copia | sí |
| 4 | Inter o Space Grotesk por todas partes | no |
| 5 | Borde de franja lateral de color | sí |
| 6 | Glassmorfismo decorativo | sí |
| 7 | Modo oscuro de bajo contraste | no |
| 8 | Tres cajas de iconos en fila | no |
| 9 | Píldora de subtítulo sobre el titular | no |
| 10 | Lucide por defecto | sí |
| 11 | shadcn/ui sin modificar | no |
| 12 | Fundido al hacer scroll | sí |
| 13 | Brillo que sigue al cursor | no |
| 14 | Fundido al pasar el ratón sobre botones | sí |
| 15 | Espaciado inconsistente | no |
| 16 | Guiones largos en la copia | sí |
| 17 | Copia con palabras de moda | sí |
| 18 | Palabras de acento en cursiva serifa | no |
| 19 | Space Grotesk con su compañero serifa display habitual (par en references/tells.md) | sí |
| 20 | Granulado sobre degradado | no |
El detector
node <carpeta de la skill>/scripts/detect-tells.mjs [--json] [--include-tests] <rutas...>
Sin dependencias, Node 20 o superior, sin imports fuera de esta carpeta de skill, por lo que funciona cuando la skill
está instalada sola. Salida 0 limpio, 1 hallazgos, 2 uso. Omite node_modules .git .next dist build .open-next coverage y archivos de prueba. Reporta ruta:línea #etiqueta de señal coincidencia. Los límites se listan al
final de references/tells.md; trata un acierto como "mira aquí".
Test de trinquete en un proyecto
Un trinquete fija el recuento actual y falla cuando aumenta, por lo que las señales solo pueden reducirse. Esquema para
node:test (adapta las rutas y la línea base):
import { test } from 'node:test';
import assert from 'node:assert/strict';
import { readFileSync, globSync } from 'node:fs'; // globSync necesita Node 22; en Node 20 recorre las carpetas tú mismo
import { detectTells } from './.agents/skills/anti-slop/scripts/detect-tells.mjs';
const BASELINE = { 10: 8, 5: 1 }; // número de señal -> hallazgos permitidos hoy
test('sin nuevas señales de código vibrado', () => {
const files = globSync('{app,components}/**/*.{ts,tsx,css}').map((path) => ({ path, text: readFileSync(path, 'utf8') }));
const now = {};
for (const f of detectTells(files)) now[f.tell] = (now[f.tell] ?? 0) + 1;
for (const [tell, n] of Object.entries(now)) assert.ok(n <= (BASELINE[tell] ?? 0), `señal ${tell}: ${n} hallazgos, línea base ${BASELINE[tell] ?? 0}`);
});
Baja la línea base cada vez que corrijas una; nunca la subas.
Video de historia
Un clip cuadrado, de unos 10 segundos, donde la pantalla se des-slopee a sí misma paso a paso con líneas rojas. Hazlo solo
cuando se te pida. Construye el archivo de historia exactamente como dice la sección "Story video" de unslop
(references/vendor/unslop/unslop.md: un story.html, CSS .s1 a .s5 en la parte superior, data-gap,
data-radius, data-slop, intercambios), luego renderízalo con el renderizador adaptado de esta skill:
node <carpeta de la skill>/scripts/story.mjs unslop-story/story.html unslop-story.mp4 # --wide para 16:9, --play para verlo
Lo que añade al renderizador de unslop:
- Un paso de Accesibilidad. Un paso cuyo nombre contiene Accesibilidad muestra mediciones en vivo. Pon
data-contrasten dos a cuatro elementos de texto cuyo contraste cambia; cada uno muestra su relación WCAG, roja por debajo de 4.5:1 (3:1 para texto grande), blanca conAAuna vez que pasa, gris?cuando un color no puede leerse (comolab()ocolor(display-p3 ...)): usa colores sRGB, hex ooklch()en esos elementos. Pondata-targeten uno o dos controles; cada uno muestra su tamaño, rojo por debajo de 24 por 24 px. Elige elementos que fallen en el antes; nunca marques un elemento que aún falla en el después. - Un pie de foto,
<meta name="story-caption" content="...">, abajo a la izquierda. Indica solo lo que es cierto de la ejecución, como el modelo y que la pantalla no fue editada a mano. - El crédito
molveau/skills · unslop method by @heydamirse dibuja en cada fotograma, como lo pide la licencia CC BY 4.0 de unslop. No lo elimines.
La historia es una presentación de archivos reales: el paso 0 es el antes tal como era, y el último paso equivale al archivo limpio que envías. No mejores la historia más allá de la pantalla enviada.
Qué leer cuándo
| Necesidad | Leer |
|---|---|
| Las reglas fusionadas, valores y decisiones de conflicto | references/playbook.md |
| Las 20 señales con reemplazos y los límites del detector | references/tells.md |
| El método completo de unslop, dirección, nueve pasadas, lista de verificación, video de historia | references/vendor/unslop/unslop.md |
| Valores exactos (espaciado, escala tipográfica, rampas, curvas de movimiento) | references/vendor/unslop/unslop/references/tokens.md (sus valores de movimiento están reemplazados: ganan el playbook ui §10 y motion §5, conflicto del playbook 19) |
| La lista de auditoría de señales | references/vendor/unslop/unslop/references/signs.md |
| Visuales de héroe, prompts de imagen, qué estilos funcionan | references/vendor/unslop/unslop/references/visuals.md |
| Código de glifos, medios tonos, tramado y duotono | references/vendor/unslop/unslop/references/effects.md |
| Pantallas de referencia terminadas (imágenes) | references/vendor/unslop/unslop/references/refs.md |
| Capturar una URL en vivo para trabajar sobre una copia | references/vendor/unslop/unslop/scripts/snapshot.mjs |
| Una página desde cero o un rediseño profundo: inventario, dirección resuelta, idea, reglas internas, puerta | references/vendor/taste/taste-skill.md |
| Dashboards, pantallas de administración y configuración en profundidad | references/vendor/taste/taste-skill/references/app-screens.md |
| Deck de copia, aritmética de dos líneas, prueba sin inventar | references/vendor/taste/taste-skill/references/copy.md |
| Escala tipográfica, ajuste de display, carga de fuentes | references/vendor/taste/taste-skill/references/type.md |
| Roles de paleta, campos, páginas oscuras, contraste | references/vendor/taste/taste-skill/references/colour.md |
| Márgenes, espacio vacío, el marco, secciones, el teléfono | references/vendor/taste/taste-skill/references/layout.md |
| Encontrar, acreditar, colocar y tratar imágenes y video | references/vendor/taste/taste-skill/references/imagery.md |
Recetas de movimiento (opt-in: playbook motion §9) y escenas de scroll | references/vendor/taste/taste-skill/references/motion.md, references/vendor/taste/taste-skill/references/scenes.md |
| Juzgar un resultado con una rúbrica | references/vendor/taste/taste-skill/references/critique.md |
| El registro de señales desactualizadas por ola | references/vendor/taste/taste-skill/references/tells.md |
| El estudio detrás de los números de taste | references/vendor/taste/taste-skill/references/research.md |
Los archivos de los vendedores mantienen su diseño original, por lo que algunos enlaces relativos dentro de ellos pueden no resolverse
aquí. Los scripts de taste-skill leen su carpeta library/ (no la leas entera; ejecuta draw.mjs); algunos
scripts necesitan Node 22, un navegador, Playwright, ffmpeg o acceso a la red. Qué comprobaciones visuales ejecutar se decide
en el playbook ui, conflicto 14 (el conflicto 14 de este playbook apunta allí).