Unslop

Quellenstand: 6. November 2026. Aussagen des Herausgebers und Drittversuche sind getrennt; kein eigener AIDreamHub-Benchmark.

Designentscheidungen statt eines weiteren Website-Builders

Unslop von Damir Sokolovsky arbeitet über einen Coding-Agenten im vorhandenen Frontend. Es exportiert keine neue, separat gehostete Website. Entscheidend ist nicht das Entfernen violetter Verläufe, sondern eine nachvollziehbare Hierarchie bei erhaltener Funktion und einer zum Produkt passenden Gestaltung.

Geeignet sind funktionierende Dashboards, App-Ansichten oder Landingpages, deren Verantwortliche auch Codeänderungen prüfen können. Nutzerforschung, Designsystem, Barrierefreiheit und Regressionstests bleiben eigene Aufgaben. Bestehende Markenvorgaben sollten die Überarbeitung begrenzen, nicht einem beliebigen neuen Stil weichen.

Von AIDreamHub aufgenommene offizielle Projektseite, kein lokal ausgeführtes Produkt.

Warum Diagnose und Bearbeitung getrennt sind

Zuerst benennt der Skill Probleme samt Fundstellen, dann eine aus dem Produkt abgeleitete Richtung. Die Durchgänge behandeln Abstände, Farben, Icons, Text, Typografie, Layout, Details, Bildmaterial und Bewegung. Diese Reihenfolge hilft, Ursachen zu erkennen: Eine andere Textlänge verändert Umbrüche; bessere Abstände können zusätzliche Dekoration überflüssig machen.

Das README beschreibt außerdem ein quadratisches Änderungsvideo unter zehn Sekunden. Website-Aufnahmen und Videos benötigen Playwright und Chromium, Videos zusätzlich FFmpeg. Optionale Bilddienste können separat kosten. Ein Vorher-nachher-Video belegt sichtbare Änderungen, aber keine höhere Conversion oder bessere Aufgabenerfüllung.

Was ein unabhängiger Versuch tatsächlich zeigt

Der japanische Autor まさお verglich am 2. November 2026 eine normale Claude-Überarbeitung mit Unslop. Unterschiede sah er eher im Dashboard als auf der Landingpage, insbesondere bei Farbe und Formulierungen. Zugleich berichtete er über veränderte statische Zahlen. Das ist ein einzelnes Praxisbeispiel, kein kontrollierter Benchmark und kein von uns reproduzierter Test.

Daraus folgt eine konkrete Schutzmaßnahme: Preise, Kennzahlen, Kundennamen und Geschäftsaussagen ausdrücklich unveränderlich machen. Eine bessere Periodenüberschrift kann sinnvoll sein; ein anderer Umsatzwert wäre Datenverfälschung. Visuelle Qualität und sachliche Richtigkeit müssen getrennt abgenommen werden.

Anwendung: eine rücksetzbare Ansicht auswählen

Prüfen Sie die Skill-Dateien und installieren Sie sie projektlokal für den gewählten Agenten. Das folgende Beispiel verwendet das dokumentierte Claude-Code-Verzeichnis. Legen Sie vorher einen Branch oder eine andere wiederherstellbare Arbeitskopie an. Dies ist eine aufbereitete Anleitung, kein Bericht über eine von uns ausgeführte Installation.

Benennen Sie Route, Zielgruppe, Hauptaufgabe, bestehende Design-Tokens und geschützte Werte. Lassen Sie Diagnose und Richtung vor dem Bearbeiten bestätigen. Anschließend sowohl Screenshots als auch Code-Diff prüfen. Aufnahmeabhängigkeiten erst hinzufügen, wenn die entsprechende Funktion benötigt wird.

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

# Claude Code
/unslop this dashboard

Ein Abnahmeblatt für ein Dashboard

Bei einem beispielhaften Abo-Dashboard werden Preise, Summen, Vertragsformulierungen und Zieladressen eingefroren. Vorher und nachher müssen dieselben Daten und Ansichtsbreiten verwendet werden. Prüfen Sie Desktop und Mobilansicht, Tastaturfokus, Fehler, leere und ladende Zustände sowie irreversible Aktionen. Das ist ein vorgeschlagenes Prüfverfahren, kein gemessenes Ergebnis.

Weniger Farbe kann deaktivierte Zustände verschleiern; kürzerer Text kann Bedingungen entfernen. Eine Version, die Geschäftslogik oder Bedienbarkeit beschädigt, fällt auch bei ansprechender Komposition durch.

Normaler Agentenprompt oder Designreview?

Ein allgemeiner Coding-Agent entfernt bereits viele offensichtliche Gestaltungsklischees. Unslop ergänzt eine explizite Diagnose, abgestimmte Richtung und wiederholbare Reihenfolge. Bewerten Sie weniger übersehene Details statt eines pauschalen Geschmacksversprechens. Bei ungeklärter Positionierung oder produktübergreifender Konsistenz ist ein Designer der passendere Einstieg.

Für eine Dienstleistung ist ein begrenztes Paket nachvollziehbar: eine Ansicht, Funktionserhalt, responsive Aufnahmen und geprüfter Diff. Ein informationsdichtes Betriebsdashboard stellt andere Anforderungen als eine Werbeseite; genau dort liegt eine mögliche Branchenspezialisierung.

Lizenz und laufender Aufwand

Das Repository steht unter CC BY 4.0, nicht MIT. Beachten Sie bei Nutzung, Bearbeitung und Weitergabe die Namensnennung von Damir Sokolovsky (@heydamir) und den Repository-Link. Schriften, Bilder und externe Dienste können eigene Bedingungen haben.

Ein verfügbarer Skill macht Agentennutzung, Bildgenerierung oder Arbeitszeit nicht kostenlos. Prüfen Sie Abhängigkeiten und verwenden Sie keine erfundenen Referenzen. Die Handzeichnung erläutert den redaktionellen Gedanken; sie ist kein von Unslop erzeugtes Ergebnis.

Fragen vor dem Einsatz

Erstellt Unslop eine Website von Grund auf?

Der dokumentierte Schwerpunkt liegt auf bestehenden Oberflächen in Claude Code oder Codex. Beginnen Sie mit einer funktionierenden Route oder einer erlaubten Referenz. Anforderungen, Inhalte, Implementierung und Tests eines neuen Produkts werden durch einen Design-Durchgang nicht automatisch erledigt.

Kann der Skill Zahlen verändern?

Ein Coding-Agent kann statische Daten und Texte bearbeiten; ein Praxisautor berichtete genau davon. Markieren Sie geschützte Werte im Auftrag und prüfen Sie den Diff. Ein gutes Screenshot-Ergebnis belegt nicht, dass Geschäftsangaben unverändert blieben.

Brauche ich immer Playwright und FFmpeg?

Laut README dienen Playwright und Chromium den Live-Aufnahmen beziehungsweise Videos; FFmpeg kommt für Video hinzu. Diese optionalen Schritte sind nicht bei jeder lokalen Stiländerung nötig. Agentenumgebung und Nutzungskosten bleiben separat.

Geprüfte Quellen

• Damir Sokolovsky — Unslop README / CC BY 4.0
• まさお — hands-on comparison, 2026-11-02
• Unslop — skill and references

Ähnliche Werkzeuge finden

• Designwerkzeuge
• Coding-Werkzeuge