¿Qué hace anti-slop-ui?

Una skill para Claude Code, Codex CLI y Cursor que audita una interfaz de usuario en busca de marcas de IA y las corrige en pasos ordenados. No rediseña desde cero; toma lo que existe y lo hace lucir intencional.

Cuándo usarla

El usuario te pide que limpies, des-slopifiques, o pulas una pantalla, página o componente que parece generado por IA. O el usuario señala un archivo, directorio o URL y dice que se ve genérico / por defecto / vibecoded.

Flujo de trabajo

Paso 1: Leer la dirección de diseño

Busca DESIGN.md en la raíz del proyecto, luego en templates/. Si existe, cárgalo. Cada decisión posterior debe mantenerse coherente con él. Si no existe DESIGN.md, informa al usuario y ofrécele rellenar uno juntos antes de continuar. Se requiere una dirección; no saltes este paso.

Paso 2: Auditar

Escanea el objetivo (archivo, directorio o página renderizada). Enumera cada marca de IA que encuentres, agrupada por categoría. Usa esta lista de verificación:

Para cada hallazgo, anota el archivo y la línea (o el selector si proviene de una URL).

Paso 3: Proponer dirección

Escribe una dirección corta (3-5 líneas) que responda:

Qué es este producto (una oración).
Carácter -- un adjetivo que no sea "limpio", "moderno" o "mínimo".
El acento -- un color, derivado del producto o la marca, no de una tendencia.
El detalle distintivo -- una cosa pequeña y específica que solo este producto tendría.

Presenta la dirección al usuario. Espera la aprobación antes de editar cualquier código. Si el usuario cambia algo, actualiza la dirección y confirma nuevamente.

Paso 4: Pasos ordenados

Aplica las correcciones en este orden. Completa cada paso antes de comenzar el siguiente. Después de cada paso, anota brevemente lo que cambió.

Paso 1: Espaciado

Reemplaza valores arbitrarios (mt-[13px]) con el paso de cuadrícula de 4px más cercano.
Normaliza los gaps a la escala del proyecto (por defecto Tailwind o la escala en DESIGN.md).
Asegura un padding consistente dentro de los contenedores.

Paso 2: Color

Elimina degradados, brillos, manchas, sombras coloreadas.
Aplica la rampa neutral de DESIGN.md (o deriva una: un solo gris con matiz).
Aplica el acento de la dirección solo a elementos interactivos.
Verifica el contraste del texto: mínimo 4.5:1 para cuerpo, 3:1 para texto grande.

Paso 3: Iconos

Reemplaza emojis con la familia de iconos del proyecto (por defecto: Lucide, 16-18px, trazo 1.5).
Elimina emojis decorativos del contenido de texto.
Asegura una sola familia de iconos en todo el proyecto.

Paso 4: Texto

Elimina palabras de hype: "Supercarga", "Desbloquea", "Sin interrupciones", "Sin esfuerzo", "Potenciado por IA", "Revoluciona", "de última generación".
Elimina signos de exclamación del texto de la interfaz.
Elimina "Bienvenido de nuevo" con emoji de mano.
Reemplaza los CTA "Saber más" / "Comenzar" con verbo + resultado específico de la acción.
Elimina estadísticas, logotipos, testimonios inventados. Reemplázalos con datos reales o elimina la sección.
Elimina insignias "Nuevo" a menos que la funcionalidad se haya lanzado en la última semana.

Paso 5: Tipografía

Establece la fuente de DESIGN.md (o una elegida en la dirección; nunca Inter como predeterminada).
Bloquea pesos: 400 cuerpo, 500 énfasis, 600 máximo para acciones principales.
Sin cursivas en encabezados. Sin etiquetas en mayúsculas espaciadas (elimina uppercase tracking-widest).
Aplica una escala tipográfica consistente. Usa tabular-nums en datos.

Paso 6: Diseño

Rompe el patrón de héroe centrado + tres tarjetas donde aparezca.
Elimina el anidamiento de tarjetas. Varía los tamaños de tarjetas donde queden.
Aplica la regla de radio de borde anidado: interior = exterior - padding.
Verifica que el diseño funcione en 375px, 768px y 1280px.

Paso 7: Estados y móvil

Agrega estado vacío para cada componente dependiente de datos que carezca de uno.
Agrega esqueleto de carga donde se obtienen datos.
Agrega estado de error donde las llamadas a la API pueden fallar.
Verifica que nada se desborde o colapse a 375px.

Paso 8: Animación

Reemplaza transition-all con propiedades específicas (transition-colors, transition-opacity, transition-transform).
Elimina animate-pulse de cualquier cosa que no sea un cargador esqueleto.
Elimina hover:scale de tarjetas.
Establece una curva de easing para el proyecto (por defecto: cubic-bezier(0.22, 1, 0.36, 1)).
Una animación de entrada al cargar: opacidad + pequeño translateY, 200-300ms, una vez.

Paso 5: Autoverificación

Después de todos los pasos, vuelve a ejecutar la lista de verificación de auditoría del Paso 2. Si queda alguna marca, corrígela o explica al usuario por qué se mantuvo (por ejemplo, "el degradado es el color real de la marca, confirmado en DESIGN.md").

Confirma al usuario: qué cambió, cuántas marcas se encontraron, cuántas se corrigieron, y las que quedan con sus razones.

Reglas

Nunca intercambies un cliché por otro. Si una corrección introduce crema + serifa + terracota, o negro + verde ácido, reviértela e intenta algo derivado del producto.
Nunca inventes contenido. No agregues estadísticas, logotipos, testimonios o nombres de marcador de posición que parezcan reales.
Un cambio a la vez, un paso a la vez. No te adelantes.
Respeta los sistemas de diseño existentes. Si el proyecto usa una biblioteca de componentes con tokens específicos, adapta las correcciones a esos tokens en lugar de sobrescribirlos.
Siempre espera la aprobación del usuario sobre la dirección antes de editar código.

Créditos

Esta skill sintetiza ideas de la comunidad open-source de skills de diseño. Es trabajo original; no se copia texto de las fuentes a continuación.

Inspiraciones:

Unslop por Damir Sokolovsky (CC-BY-4.0) -- el flujo de trabajo paso a paso y varias categorías de marcas (cuadrícula de espaciado, consistencia de iconos, prohibiciones de copy, reglas de animación) están adaptados del enfoque de Unslop. Según CC-BY-4.0: crédito a Damir Sokolovsky, original en https://github.com/heydamir/unslop, licenciado CC-BY-4.0.
Impeccable por Paul Bakaus (Apache-2.0) -- el enfoque de auditoría primero y el concepto de detección determinista.
frontend-design por Anthropic (Apache-2.0) -- el catálogo de clichés (crema + serifa, negro + verde, cejas en mayúsculas).
Hallmark por Nutlope / Together AI (MIT) -- reglas mínimas y la idea de probar en múltiples anchos.
Taste Skill por Leonxlnx (MIT) -- prohibiciones estrictas sobre numeración decorativa y líneas finas.
ai-design-skills por elayadesign (MIT) -- enfoque de reglas numéricas y prohibiciones de fuentes.
El catálogo de 15 marcas en docs/ai-tells.md de este repositorio.

nyrthoughts/anti-slop-ui

¿Qué es anti-slop-ui?

Preguntar en tu IA favorita

Documentación