Cómo limpiar el desorden de IA de las interfaces web con kill-ai-slop

Cada vez que alguien genera una interfaz a través de Claude o Cursor sin un sistema de diseño claro, el resultado es la misma plantilla. Gradientes púrpura-índigo, bordes de tarjetas brillantes, emojis esparcidos por la pantalla, MAYÚSCULAS en los contadores de métricas, y una mascota en la esquina.

Las máquinas generan estos elementos cuando carecen de gusto pero necesitan crear la apariencia de trabajo complejo. Nos hemos acostumbrado tanto a este ruido visual en Product Hunt y en proyectos nuevos que hemos dejado de notarlo.

Un proyecto kill-ai-slop apareció recientemente en GitHub que declaró la guerra a este mal gusto digital. El autor compiló 33 señales características de diseño generado, las organizó y escribió una herramienta para la limpieza automática de código.

Dos partes de un proyecto

El repositorio aborda el problema en dos niveles: teórico y práctico.

Por un lado, es una referencia interactiva desplegada en un sitio web separado. Contiene 33 patrones específicos de diseño automático. Cada ejemplo incluye una demo interactiva de antes y después en HTML puro, demostrando cómo transformar un bloque desordenado en marcado limpio.

Por otro lado, el proyecto incluye una habilidad lista para usar para asistentes de codificación y un escáner independiente. La utilidad recorre el árbol de código, identifica marcadores de código generado, explica la causa raíz y sugiere una solución limpia.

Qué considera exactamente el escáner como basura

La base de datos del proyecto no contiene quejas abstractas: todas las reglas provienen de fragmentos reales que los modelos generativos inyectan en CSS y marcado por defecto.

El escáner busca marcadores característicos:

• Manchas de color borrosas y brillos de gradiente detrás de las tarjetas (el efecto blur con tonos púrpura)
• Insignias de estado sin sentido sobre cada encabezado
• Emojis por todas partes en lugar de tipografía adecuada o iconos vectoriales
• Texto cargado de jerga corporativa como "desbloquea el poder de tus datos"

El propio sitio del proyecto está diseñado como el opuesto completo de estos patrones. Utiliza un concepto de papel y tinta: una cuadrícula estricta, un solo acento rojo para anotaciones, divisores delgados y cero dependencia de scripts pesados del lado del cliente.

Cómo ejecutar la verificación en tu propio proyecto

Puedes verificar el proyecto sin instalar paquetes voluminosos. El escáner está escrito en Node.js puro y no arrastra un árbol de dependencias.

Para ejecutar el escaneo, simplemente ejecuta el comando en la terminal:

node skill/scripts/scan.mjs path/to/project

Si necesitas salida estructurada para CI o scripts externos, la bandera de formato legible por máquina es útil:

node skill/scripts/scan.mjs path/to/project --json

La utilidad solo analiza marcado y estilos: no sobrescribirá ningún archivo sin tu permiso. Cuando un acento visual específico es intencional y debe quedarse, puedes desactivar la verificación con un comentario deslop-ignore directamente en el código. Las banderas --only y --skip también están disponibles para filtrar reglas específicas, junto con el argumento --rules para agregar verificaciones personalizadas.

Integración en flujos de trabajo de asistentes

Si estás codificando con Cursor o Claude Code, puedes integrar la herramienta directamente como una habilidad externa:

npx skills add yetone/kill-ai-slop

Luego solo necesitas darle al asistente un comando de texto simple: "elimina todo el desorden de IA de este componente". El agente extraerá las reglas del catálogo, las comparará con los fragmentos encontrados y reescribirá limpiamente el CSS eliminando sombras innecesarias, transformaciones injustificadas y espaciado inflado.

A quién le resultará útil este repositorio

El proyecto atraerá a desarrolladores que construyen frecuentemente prototipos con LLMs pero están hartos de su estilo visual uniforme. La herramienta ayuda a restaurar la limpieza de la interfaz sin una larga limpieza manual del marcado.

El catálogo en el sitio también sirve como guía rápida para estética web básica. Si tienes dificultades para explicarle a una IA a través de un prompt por qué una tarjeta sugerida se ve barata, los ejemplos de referencia proporcionan pautas técnicas claras: qué peso de línea elegir, cómo establecer jerarquía a través del espaciado, y por qué deberías evitar los gradientes interminables.