Name: nyrthoughts/anti-slop-ui
Author: Community

Was macht anti-slop-ui?

Ein Skill für Claude Code, Codex CLI und Cursor, der eine UI auf KI-typische Merkmale prüft (auditiert) und sie in geordneten Durchgängen korrigiert. Es baut nicht von Grund auf neu, sondern verleiht dem Vorhandenen ein absichtsvolles Aussehen.

Wann verwenden

Der Benutzer bittet dich, einen Bildschirm, eine Seite oder eine Komponente, die KI-generiert aussieht, zu bereinigen, zu ent-schlabbern (de-slop, unslop) oder zu polieren. Oder der Benutzer zeigt auf eine Datei, ein Verzeichnis oder eine URL und sagt, es sehe generisch / standardmäßig / vibe-coded aus.

Arbeitsablauf

Schritt 1: Designrichtung lesen

Suche nach DESIGN.md im Projektstammverzeichnis, dann in templates/. Wenn sie existiert, lade sie. Jede Entscheidung im Folgenden muss mit ihr konsistent bleiben. Wenn keine DESIGN.md existiert, informiere den Benutzer und biete an, gemeinsam eine auszufüllen, bevor du fortfährst. Eine Richtung ist erforderlich; überspringe diesen Schritt nicht.

Schritt 2: Audit (Prüfung)

Scanne das Ziel (Datei, Verzeichnis oder gerenderte Seite). Liste jedes gefundene KI-Merkmal auf, gruppiert nach Kategorie. Verwende diese Checkliste:

Notiere für jeden Fund die Datei und Zeile (oder den Selektor, wenn von einer URL).

Schritt 3: Richtung vorschlagen

Schreibe eine kurze Richtung (3–5 Zeilen), die Folgendes beantwortet:

Was dieses Produkt ist (ein Satz).
Charakter – ein Adjektiv, das nicht „sauber“, „modern“ oder „minimal“ ist.
Der Akzent – eine Farbe, abgeleitet vom Produkt oder der Marke, nicht von einem Trend.
Das charakteristische Detail – eine kleine, spezifische Sache, die nur dieses Produkt haben würde.

Präsentiere die Richtung dem Benutzer. Warte auf Zustimmung, bevor du Code bearbeitest. Wenn der Benutzer etwas ändert, aktualisiere die Richtung und bestätige erneut.

Schritt 4: Geordnete Durchgänge

Wende Korrekturen in dieser Reihenfolge an. Schließe jeden Durchgang ab, bevor du mit dem nächsten beginnst. Notiere nach jedem Durchgang kurz, was sich geändert hat.

Durchgang 1: Abstände

Ersetze willkürliche Werte (mt-[13px]) durch den nächstgelegenen 4px-Raster-Schritt.
Normalisiere Abstände (gaps) auf die projekteigene Skala (Tailwind-Standard oder die Skala aus DESIGN.md).
Stelle konsistente Innenabstände (padding) innerhalb von Containern sicher.

Durchgang 2: Farbe

Entferne Verläufe, Glüheffekte, Blobs, farbige Schatten.
Wende die neutrale Rampe aus DESIGN.md an (oder leite eine ab: ein einziges abgetöntes Grau).
Wende den Akzent aus der Richtung nur auf interaktive Elemente an.
Prüfe den Textkontrast: mindestens 4,5:1 für Fließtext, 3:1 für großen Text.

Durchgang 3: Symbole

Ersetze Emojis durch die projekteigene Symbolfamilie (Standard: Lucide, 16–18px, Strichstärke 1.5).
Entferne dekorative Emojis aus Textinhalten.
Stelle sicher, dass durchgehend eine Symbolfamilie verwendet wird.

Durchgang 4: Texte

Entferne Hype-Wörter: „Supercharge“, „Unlock“, „Seamlessly“, „Effortlessly“, „KI-gestützt“, „Revolutionize“, „next-generation“.
Entferne Ausrufezeichen aus UI-Texten.
Entferne „Welcome back“ mit Welle-Emoji.
Ersetze „Learn more“ / „Get started“ CTAs durch Verb + Ergebnis, spezifisch für die Aktion.
Entferne erfundene Statistiken, Logos, Testimonials. Ersetze sie durch echte Daten oder entferne den Abschnitt.
Entferne „Neu“-Badges, es sei denn, die Funktion wurde in der letzten Woche ausgeliefert.

Durchgang 5: Typografie

Setze die Schriftart aus DESIGN.md (oder eine in der Richtung gewählte; niemals Inter als Standard).
Lege Schriftstärken fest: 400 für Fließtext, 500 für Hervorhebungen, maximal 600 für primäre Aktionen.
Keine Kursivierung in Überschriften. Keine Großbuchstaben-Labels mit Abstand (entferne uppercase tracking-widest).
Verwende eine konsistente Schriftgrößen-Systematik (type scale). Verwende tabular-nums bei Daten.

Durchgang 6: Layout

Durchbreche das zentrierte Hero + drei Karten Muster, wo es auftritt.
Entferne Kartenverschachtelung. Variiere Kartengrößen, wo Karten erhalten bleiben.
Wende die Regel der verschachtelten Rahmenradien an: innen = außen - Innenabstand.
Überprüfe, ob das Layout bei 375px, 768px und 1280px funktioniert.

Durchgang 7: Zustände und Mobil

Füge für jede datenabhängige Komponente, die keine hat, einen Leerzustand hinzu.
Füge Lade-Skelette hinzu, wo Daten abgerufen werden.
Füge Fehlerzustände hinzu, wo API-Aufrufe fehlschlagen können.
Stelle sicher, dass bei 375px nichts überläuft oder zusammenbricht.

Durchgang 8: Bewegung (Motion)

Ersetze transition-all durch spezifische Eigenschaften (transition-colors, transition-opacity, transition-transform).
Entferne animate-pulse von allem, was kein Skelett-Lader ist.
Entferne hover:scale von Karten.
Lege eine Easing-Kurve für das Projekt fest (Standard: cubic-bezier(0.22, 1, 0.36, 1)).
Eine Eingangsanimation beim Laden: Deckkraft + kleiner translateY, 200–300ms, einmalig.

Schritt 5: Selbstprüfung

Führe nach allen Durchgängen die Audit-Checkliste aus Schritt 2 erneut aus. Wenn ein KI-Merkmal übrig bleibt, korrigiere es oder erkläre dem Benutzer, warum es beibehalten wurde (z. B. „Der Verlauf ist die tatsächliche Markenfarbe, bestätigt in DESIGN.md“).

Bestätige dem Benutzer: was geändert wurde, wie viele Merkmale gefunden, wie viele korrigiert wurden, und welche – mit Begründung – noch vorhanden sind.

Regeln

Tausche niemals ein Klischee gegen ein anderes aus. Wenn eine Korrektur Creme + Serife + Terrakotta oder Schwarz + Säuregrün einführt, mache sie rückgängig und versuche etwas, das vom Produkt abgeleitet ist.
Erfinde niemals Inhalte. Füge keine gefälschten Statistiken, Logos, Testimonials oder Platzhalternamen hinzu, die echt aussehen.
Eine Änderung nach der anderen, ein Durchgang nach dem anderen. Springe nicht voraus.
Respektiere bestehende Designsysteme. Wenn das Projekt eine Komponentenbibliothek mit spezifischen Tokens verwendet, passe die Korrekturen an diese Tokens an, anstatt sie zu überschreiben.
Warte immer auf die Zustimmung des Benutzers zur Richtung, bevor du Code bearbeitest.

Danksagungen

Dieser Skill synthetisiert Ideen aus der Open-Source-Design-Skill-Community. Es handelt sich um Originalarbeit; kein Text ist aus den untenstehenden Quellen kopiert.

Inspirationen:

Unslop von Damir Sokolovsky (CC-BY-4.0) – der Durchgang-für-Durchgang-Arbeitsablauf und mehrere Kategorien von KI-Merkmalen (Abstands-Raster, Symbol-Konsistenz, Text-Verbote, Bewegungsregeln) sind aus Unslops Ansatz übernommen. Gemäß CC-BY-4.0: Nennung von Damir Sokolovsky, Original unter https://github.com/heydamir/unslop, lizenziert unter CC-BY-4.0.
Impeccable von Paul Bakaus (Apache-2.0) – der Audit-zuerst-Ansatz und das Konzept der deterministischen Erkennung.
frontend-design von Anthropic (Apache-2.0) – der Klischee-Katalog (Creme + Serife, Schwarz + Grün, Großbuchstaben-Überschriften).
Hallmark von Nutlope / Together AI (MIT) – Grundregeln und die Idee, bei mehreren Breiten zu testen.
Taste Skill von Leonxlnx (MIT) – strikte Verbote von dekorativer Nummerierung und Haarlinien.
ai-design-skills von elayadesign (MIT) – numerischer Regelansatz und Schriftverbote.
Der 15-Merkmale-Katalog in docs/ai-tells.md dieses Repos.

nyrthoughts/anti-slop-ui

Was ist anti-slop-ui?

In Ihrer bevorzugten KI fragen

Dokumentation