So entfernen Sie AI-Slop aus Web-Interfaces mit kill-ai-slop

Jedes Mal, wenn jemand eine Oberfläche über Claude oder Cursor ohne ein klares Design-System generiert, ist das Ergebnis dieselbe Vorlage. Lila-indigofarbene Verläufe, leuchtende Kartenränder, Emojis über den gesamten Bildschirm verteilt, GROSSBUCHSTABEN in Metrik-Zählern und ein Maskottchen in der Ecke.

Maschinen erzeugen diese Elemente, wenn ihnen Geschmack fehlt, aber der Anschein komplexer Arbeit erzeugt werden soll. Wir haben uns so an dieses visuelle Rauschen auf Product Hunt und in neuen Projekten gewöhnt, dass wir es nicht mehr bemerken.

Ein Projekt kill-ai-slop ist kürzlich auf GitHub erschienen, das diesem digitalen Geschmacksmangel den Krieg erklärt hat. Der Autor hat 33 charakteristische Zeichen generierten Designs zusammengestellt, sie organisiert und ein Werkzeug zur automatischen Code-Bereinigung geschrieben.

Zwei Teile eines Projekts

Das Repository begegnet dem Problem auf zwei Ebenen: theoretisch und praktisch.

Einerseits ist es eine interaktive Referenz, die auf einer separaten Website bereitgestellt wird. Sie enthält 33 spezifische maschinelle Designmuster. Jedes Beispiel enthält eine interaktive Vorher-Nachher-Demo in reinem HTML, die zeigt, wie ein überladener Block in sauberes Markup umgewandelt werden kann.

Andererseits enthält das Projekt eine sofort einsetzbare Fähigkeit für Coding-Assistenten und einen eigenständigen Scanner. Das Werkzeug durchläuft den Quellbaum, identifiziert generierte Code-Marker, erklärt die Grundursache und schlägt eine saubere Lösung vor.

Was der Scanner genau als Müll betrachtet

Die Datenbank des Projekts enthält keine abstrakten Beschwerden – alle Regeln stammen aus tatsächlichen Snippets, die generative Modelle standardmäßig in CSS und Markup einfügen.

Der Scanner sucht nach charakteristischen Markern:

• Verwischte Farbkleckse und Gradienten-Glühen hinter Karten (der blur Effekt mit violetten Farbtönen)
• Bedeutungslose Status-Badges über jeder Überschrift
• Emojis überall statt ordentlicher Typografie oder Vektor-Icons
• Texte voller Corporate-Bullshit wie „erschließen Sie die Kraft Ihrer Daten"

Die Projektseite selbst ist als genaues Gegenteil dieser Muster gestaltet. Sie verwendet ein Papier-und-Tinte-Konzept: ein strenges Raster, eine einzelne Akzentfarbe Rot für Anmerkungen, dünne Trennlinien und null Abhängigkeit von schweren clientseitigen Skripten.

So führen Sie die Prüfung selbst durch

Sie können das Projekt prüfen, ohne umfangreiche Pakete zu installieren. Der Scanner ist in reinem Node.js geschrieben und zieht keinen Abhängigkeitsbaum herein.

Um den Scan auszuführen, führen Sie einfach den Befehl im Terminal aus:

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

Wenn Sie strukturierte Ausgabe für CI oder externe Skripte benötigen, ist das maschinenlesbare Format-Flag praktisch:

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

Das Werkzeug analysiert nur Markup und Stile – es überschreibt keine Dateien ohne Ihre Erlaubnis. Wenn ein bestimmter visueller Akzent beabsichtigt ist und bleiben sollte, können Sie die Prüfung mit einem deslop-ignore Kommentar direkt im Code deaktivieren. Die Flags --only und --skip sind ebenfalls verfügbar, um bestimmte Regeln zu filtern, zusammen mit dem --rules Argument, um benutzerdefinierte Prüfungen hinzuzufügen.

Integration in Assistant-Workflows

Wenn Sie mit Cursor oder Claude Code programmieren, können Sie das Werkzeug direkt als externe Fähigkeit integrieren:

npx skills add yetone/kill-ai-slop

Dann müssen Sie dem Assistenten nur einen einfachen Textbefehl geben: „Entferne den gesamten AI-Slop aus dieser Komponente". Der Agent zieht Regeln aus dem Katalog, gleicht sie mit gefundenen Fragmenten ab und schreibt das CSS sauber um, indem er unnötige Schatten, ungerechtfertigte Transforms und aufgeblähte Abstände entfernt.

Wem dieses Repository nützen wird

Das Projekt wird Entwicklern gefallen, die häufig Prototypen mit LLMs erstellen, aber deren einheitlichen visuellen Stil leid sind. Das Werkzeug hilft, die Sauberkeit der Oberfläche wiederherzustellen, ohne mühsame manuelle Markup-Bereinigung.

Der Katalog auf der Website dient auch als Spickzettel für grundlegende Web-Ästhetik. Wenn Sie Schwierigkeiten haben, einem KI über einen Prompt zu erklären, warum eine vorgeschlagene Karte billig aussieht, bieten die Referenzbeispiele klare technische Richtlinien: welche Linienstärke zu wählen ist, wie man Hierarchie durch Abstände etabliert und warum man endlose Verläufe vermeiden sollte.