Come ripulire lo Slop AI dalle interfacce web con kill-ai-slop

Ogni volta che qualcuno genera un'interfaccia attraverso Claude o Cursor senza un sistema di design chiaro, l'output è lo stesso template. Gradienti viola-indaco, bordi luminosi delle card, emoji sparse ovunque per lo schermo, MAIUSCOLE nei contatori delle metriche, e una mascotte nell'angolo.

Le macchine generano questi elementi quando mancano di gusto ma hanno bisogno di creare l'apparenza di un lavoro complesso. Ci siamo abituati così tanto a questo rumore visivo su Product Hunt e nei nuovi progetti da aver smesso di notarlo.

Un progetto kill-ai-slop è recentemente apparso su GitHub che ha dichiarato guerra a questa mancanza di gusto digitale. L'autore ha compilato 33 segni caratteristici del design generato, li ha organizzati, e ha scritto uno strumento per la pulizia automatica del codice.

Due parti di un unico progetto

Il repository affronta il problema a due livelli: teorico e pratico.

Da un lato, è un riferimento interattivo distribuito su un sito web separato. Contiene 33 pattern specifici di design generato da macchina. Ogni esempio include una demo interattiva prima-e-dopo in puro HTML, che dimostra come trasformare un blocco disordinato in markup pulito.

Dall'altro lato, il progetto include una skill pronta all'uso per assistenti di codifica e uno scanner standalone. L'utility attraversa l'albero dei sorgenti, identifica i marker del codice generato, spiega la causa radice e suggerisce una correzione pulita.

Cosa esattamente lo scanner considera spazzatura

Il database del progetto non contiene lamentele astratte—tutte le regole derivano da snippet reali che i modelli generativi iniettano nel CSS e nel markup per impostazione predefinita.

Lo scanner cerca marker caratteristici:

• Macchie di colore sfocate e bagliori di gradiente dietro le card (l'effetto blur con tonalità viola)
• Badge di stato senza significato sopra ogni titolo
• Emoji ovunque invece di tipografia corretta o icone vettoriali
• Copy carico di buzzword aziendali come "sblocca il potere dei tuoi dati"

Il sito stesso del progetto è progettato come l'opposto completo di questi pattern. Usa un concetto carta e inchiostro: una griglia rigorosa, un singolo rosso accent per le annotazioni, divisori sottili, e zero dipendenza da script lato client pesanti.

Come eseguire il controllo sul proprio sistema

Puoi verificare il progetto senza installare pacchetti ingombranti. Lo scanner è scritto in puro Node.js e non trascina un albero di dipendenze.

Per eseguire la scansione, basta eseguire il comando nel terminale:

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

Se hai bisogno di output strutturato per CI o script esterni, il flag per il formato leggibile dalla macchina è utile:

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

L'utility analizza solo markup e stili—non sovrascriverà nessun file senza il tuo permesso. Quando un accento visivo specifico è intenzionale e deve rimanere, puoi disabilitare il controllo con un commento deslop-ignore direttamente nel codice. I flag --only e --skip sono anche disponibili per filtrare regole specifiche, insieme all'argomento --rules per aggiungere controlli personalizzati.

Integrazione nei flussi di lavoro degli assistenti

Se stai codificando con Cursor o Claude Code, puoi integrare lo strumento direttamente come skill esterna:

npx skills add yetone/kill-ai-slop

Poi devi solo dare all'assistente un semplice comando di testo: "rimuovi tutto lo AI slop da questo componente". L'agente estrarrà le regole dal catalogo, le abbinerà ai frammenti trovati, e riscriverà pulitamente il CSS rimuovendo ombre inutili, transform non giustificate e spaziatura gonfia.

A chi sarà utile questo repository

Il progetto piacerà agli sviluppatori che costruiscono frequentemente prototipi con LLM ma sono stanchi del loro stile visivo uniforme. Lo strumento aiuta a ripristinare la pulizia dell'interfaccia senza una lunga pulizia manuale del markup.

Il catalogo sul sito serve anche come cheat sheet per l'estetica web di base. Se fai fatica a spiegare a un'IA tramite prompt perché una card suggerita sembra cheap, gli esempi di riferimento forniscono linee guida tecniche chiare: quale peso di linea scegliere, come stabilire la gerarchia attraverso la spaziatura, e perché dovresti evitare gradienti infiniti.