Chi ha generato qualche interfaccia con un assistente AI riconosce subito il risultato: gradiente dal viola al blu, card di vetro con ombre colorate, emoji nelle voci di menu, badge "New ✨", titolo in grassetto 900 e "Welcome back! 👋". È il cosiddetto AI slop. Unslop, creata dal designer Damir Sokolovsky (@heydamir), è una skill che trasforma una UI "vibecodata" in un'interfaccia progettata.
Attenzione all'omonimia: su GitHub ci sono vari progetti chiamati "unslop", ma la maggior parte riguarda i testi scritti dall'AI. Quello di cui parliamo qui è heydamir/unslop, dedicato all'aspetto visivo.
Come lavora
La skill funziona su Next.js, React, Vue, Svelte, Tailwind o HTML/CSS puro, per dashboard, applicazioni e landing page; può anche analizzare un sito pubblicato partendo dall'URL. Il flusso è in tre fasi:
- Audit: elenca i segni di slop e classifica la schermata come "heavy", "light" o "no slop".
- Direzione: scrive una direzione di design di cinque righe, ricavata dal prodotto, e si ferma ad aspettare la tua approvazione prima di toccare il codice.
- Correzione in nove passaggi, sempre nello stesso ordine: spaziature, colore, icone, testi, tipografia, layout, dettagli, elementi visivi, animazioni. Chiude con una checklist e un report.
I segni che riconosce
Il file references/signs.md abbina a ogni segno la correzione. Qualche esempio per area:
| Area | Segni tipici |
|---|---|
| Superfici e colore | Gradienti viola-blu, testo sfumato nei titoli, glow colorati, bordi neon, card di vetro |
| Tipografia | Titoli in peso 800-900, etichette maiuscole spaziate, troppe dimensioni diverse |
| Icone | Emoji come icone di navigazione, icone di dimensioni miste, la "scintilla" per tutto ciò che è AI |
| Spaziature | Valori arbitrari come mt-[13px], righe con altezze diverse |
| Testi | Saluti nei titoli, punti esclamativi, parole come "seamless", "supercharge", "magic", dati finti |
| Componenti | Pillole luminose ovunque, badge "PRO" e "Beta 🚀", sparkline su ogni card |
| Landing page | Pillola sopra il titolo ("✨ Introducing…"), blob fluttuanti, tutto centrato, "Trusted by 10,000+ teams" non verificabile |
| Animazioni | animate-pulse su elementi non live, hover:scale sulle card, parallasse |
La skill avverte anche del rischio opposto: dopo la pulizia non bisogna ricadere nell'aspetto "template", per esempio una pagina grigia anonima con il font Inter.
Installazione
Per Claude Code:
git clone https://github.com/heydamir/unslop
mkdir -p ~/.claude/skills && cp -r unslop/skills/unslop ~/.claude/skills/Per un solo progetto si copia invece in .claude/skills/ della cartella del progetto. Sono previste anche Codex (cartella ~/.agents/skills/) e Google Antigravity (~/.gemini/antigravity/skills/).
Per analizzare siti pubblicati e generare il video "prima/dopo" servono Playwright e ffmpeg:
npm install -D playwright
npx playwright install chromiumUso
/unslop this dashboard
/unslop the hero of https://example.com
/unslop my landing page and make the story video so I can post itIn Codex si usa $unslop, oppure basta chiederlo a parole. Il "story video" opzionale è un video quadrato di circa dieci secondi in cui la schermata si ripulisce da sola, pensato per i social.
Licenza
Unslop è distribuita con licenza CC BY 4.0: si può usare, modificare e condividere anche a fini commerciali, citando l'autore e il repository.
Quando usarla
Unslop interviene dopo, su una schermata già fatta. Per impostare lo stile prima della generazione sono più adatti un DESIGN.md o Taste Skill; per una revisione più ampia c'è Impeccable.