unslop erklärt: der Claude-Skill, der KI-Oberflächen entschlackt

Was ist unslop? unslop ist ein Skill, also eine Sammlung von Markdown-Anleitungen, die Claude Code oder Codex bei Bedarf lädt, um eine bestehende Oberfläche von typischen KI-Mustern zu befreien. Statt einen neuen Look zu erfinden, arbeitet der Skill wie ein Designer bei einer Korrekturrunde: Er listet zuerst alles auf, was generiert wirkt, legt dann eine Richtung aus dem Produkt fest und korrigiert die Seite Schicht für Schicht.

Mit «AI-Slop» (sinngemäss: KI-Einheitsbrei) sind dabei Muster gemeint, die man auf unzähligen generierten Seiten sieht: violett-blaue Verläufe, leuchtende Schatten, Emoji als Icons, Grossbuchstaben-Labels mit weiter Laufweite und Überschriften, die auf jedes Produkt passen.

Warum unslop gerade so gefragt ist

Das Repository heydamir/unslop wurde am 29.10.2026 angelegt und zählte am 04.11.2026 8'111 Sterne und 404 Forks (Stand 04.11.2026, Quelle: GitHub). Der Urheber Damir Sokolovsky hatte vorher auf X eine Serie namens «Unslopping» veröffentlicht, in der er generierte Dashboards Schritt für Schritt überarbeitet; das README verweist ausdrücklich darauf. Laut Commit-Verlauf kam der Skill am 28.10. mit sechs Durchgängen, am 29.10. folgten Richtung, neun Durchgänge, Referenzbilder und die Video-Skripte.

Der Zeitpunkt passt: Viele Teams bauen Seiten inzwischen mit Agenten, und die Ergebnisse sehen sich auffällig ähnlich. Ein Werkzeug, das diese Ähnlichkeit gezielt benennt, trifft einen Nerv.

So funktioniert es

Die Datei SKILL.md beschreibt einen festen Ablauf:

1. Ansehen. Die Seite rendern und als Screenshot beurteilen, nicht nur den Code lesen.
2. Audit. Jede Fundstelle aus einer Liste von Slop-Zeichen notieren (Datei references/signs.md).
3. Umfang entscheiden. Starker Slop bedeutet voller Prozess, leichter Slop nur Politur, kein Slop nur zwei, drei kleine Vorschläge.
4. Richtung in fünf Zeilen. Produkt, Charakter (Wörter wie «clean» oder «modern» sind verboten), Welt, ein bis zwei farbige Momente und ein Erkennungsdetail. Danach soll der Agent anhalten und nachfragen.
5. Neun Durchgänge in fester Reihenfolge: Abstände, Farbe, Icons, Texte, Schrift, Layout, Details, Bilder, Bewegung.
6. Checkliste und ein kurzer Bericht.

Die Werte kommen aus references/tokens.md: ein 4-Pixel-Raster, drei getönte Grautreppen (graphit, warm, tinte), eine Schriftwahl nach Charakter und eine einzige Bewegungskurve. Bemerkenswert ist der Grundsatz, die Oberfläche ruhig zu halten und Farbe nur in ein bis zwei Inhaltsmomente zu legen.

Installation

Laut README wird der Skill für Claude Code so installiert:

git clone https://github.com/heydamir/unslop
mkdir -p ~/.claude/skills && cp -r unslop/skills/unslop ~/.claude/skills/

Für Codex nennt das README $skill-installer install https://github.com/heydamir/unslop/tree/main/skills/unslop. Danach genügt in Claude Code /unslop this dashboard oder eine Bitte in eigenen Worten. Für Live-Site-Snapshots und das Story-Video verlangt das README zusätzlich npm install -D playwright und npx playwright install chromium sowie ffmpeg.

Wir haben den Skill nicht installiert, sondern die Dateien als Text gelesen und wörtlich angewendet (siehe nächster Abschnitt). Für den Alltag ist die Installation in einen Projektordner unter .claude/skills/ der sauberere Weg als die globale Ablage.

Unser Test

Skill-Dateien von GitHub (Commit a6f121e), angewendet von Claude Opus 5.5 am 04.11.2026, Ergebnis eine Stichprobe von eins. Als gemeinsame Ausgangslage für alle Design-Skills haben wir eine LandingpageEine Landingpage ist eine eigenständige Webseite, die auf genau ein Ziel ausgerichtet ist — eine Anfrage, eine Buchung, einen Download oder einen Kauf — und…Mehr erfahren → der fiktiven «Schreinerei Holzwerk Muster, Winterthur» gebaut, so wie ein Agent sie ohne Anleitung typischerweise liefert: Inter, violetter Verlauf mit Farbflecken, Pill-Badge mit Funkeln, drei Kennzahlen, drei Karten mit Emoji, Fünf-Sterne-Zitat und ein Verlaufsbanner. Fremden Code haben wir nicht ausgeführt, die Skripte snapshot.mjs und story.mjs blieben unberührt.

Das Audit nach signs.md fand 25 Stellen in acht Gruppen, das Urteil war eindeutig «heavy slop». Die Richtung lautete: Charakter «genau, warm, ruhig», Welt «Werkbank, Esche, Bleistift, Massband», Moment «ein Werkplan der Küche im Hero», Erkennungsdetail «die Bemassungslinie». Die vorgeschriebene Rückfrage haben wir übersprungen, weil der Auftrag schon «entslopen» lautete; der Skill erlaubt das nur in diesem Fall.

Was sich konkret geändert hat:

• TypografieTypografie ist die Gestaltung mit Schrift: die Wahl der Schriftarten und ihre Anordnung in Grösse, Zeilenabstand, Zeilenlänge, Gewicht und Hierarchie. Im…Mehr erfahren →: Instrument Sans für die Oberfläche, Instrument Serif nur für die Hero-Headline, Gewichte 400 und 500 statt 800, Satzschreibung statt Grossbuchstaben-Labels.
• Abstände: alles auf dem 4-Pixel-Raster, Abschnitte 96 Pixel, Hero als asymmetrische Teilung statt zentriertem Stapel.
• Farben: warme helle Grautreppe, ein einziger Akzent in abgedunkeltem Glut-Orange, alle Verläufe und leuchtenden Schatten entfernt.
• Hierarchie: ein Primär- und ein Sekundärknopf, die «Neu»-Meldung als leiser Textlink statt pulsierendem Badge.
• Texte: «Handwerk neu gedacht» wurde zu «Möbel und Küchen nach Mass, gebaut in Winterthur», alle Ausrufezeichen und Hype-Wörter verschwanden.
• Bild: Weil kein Bildgenerator verbunden war, verlangt der Skill eine Produktansicht in Code. Daraus wurde eine gezeichnete Küchenzeile mit Massen in Millimetern.

Was gut war: Die Reihenfolge der Durchgänge verhindert, dass man an Farben feilt, bevor die Abstände stimmen, und die Checkliste am Schluss ist konkret prüfbar. Die Regel «nicht belegte Aussagen entfernen» hat die erfundenen Kennzahlen zuverlässig erwischt.

Was nicht so gut war: Die Seite wirkt sehr zurückhaltend, fast zu leer zwischen Hero und Leistungen. Und ohne Rückfrage nimmt der Skill auch Angaben heraus, die bei einer echten Firma stimmen könnten. Für eine richtige Seite muss der Betreiber diese Liste aus dem Bericht durchgehen.

Beispiele aus der Praxis

• KMU mit selbst gebauter Seite: Wer mit einem Agenten eine erste Version erstellt hat, kann unslop als zweiten Schritt nutzen und erhält zusätzlich eine Liste der Stellen, die generiert wirken.
• Agenturen bei Prototypen: Der Audit-Teil eignet sich als gemeinsame Sprache im Team, um bei Entwürfen aus Werkzeugen wie v0 oder Lovable früh über konkrete Muster zu reden statt über Geschmack.
• Entwickler mit Dashboards: Für App-Oberflächen hat der Skill eigene Regeln, etwa neutrale Flächen, eine Hauptgrafik und Kennzahlen ohne Mini-Diagramme.

Grenzen, Risiken, Lizenz

Die Lizenz CC BY 4.0 erlaubt kommerzielle Nutzung mit Namensnennung; der Skill verlangt ausdrücklich den Credit «unslop by @heydamir» in Videos. Daten verlassen das Gerät nur so weit, wie das verwendete Modell und allfällige Bilddienste sie verarbeiten. Wer Kundenseiten bearbeitet, sollte das im Rahmen des Datenschutzgesetzes (DSG) mit den Anbietern klären. Die beiden Skripte laden laut README Playwright und starten einen Browser; wie bei jedem fremden Code gilt: vorher lesen, in einem Testordner ausführen. Hinweise dazu stehen in unserem Artikel über sicheres Vibe-Coding.

Für wen lohnt sich unslop?

Für alle, die schon eine generierte Oberfläche haben und sie mit wenig Aufwand ruhiger und eigenständiger machen wollen. Wer eine Seite von Grund auf neu plant, findet in unserem Vergleich der vier Anti-Slop-Skills passendere Werkzeuge. Wenn am Ende eine professionelle Firmenwebsite stehen soll, lohnt ein Blick auf unser Webdesign in Zürich.

Weitere Projekte aus dieser Serie finden Sie in der Übersicht über alle 20 GitHub-Trends vom November 2026.