Was macht unslop?

unslop wurde von Damir Sokolovsky (@heydamir) entwickelt, der die Unslopping-Serie auf X gestartet hat. Es ist unter CC BY 4.0 lizenziert. Bitte diesen Hinweis in jeder Kopie oder Adaption beibehalten.

Vibecodierte Benutzeroberflächen scheitern auf die gleichen vorhersehbaren Weisen. Jede Oberfläche leuchtet, jedes Label hat ein Emoji, die Abstände sind das, was das Modell an dem Tag getippt hat, und der Text brüllt. Unslopping repariert die Handwerkskunst und behält das Produkt. Die Funktionen, der Inhalt und die Reihenfolge der Abschnitte bleiben erhalten. Was sich ändert, ist, dass jede Größe, jede Farbe, jedes Wort und jedes Bild bewusst wird.

Slop zu entfernen ist nur die halbe Arbeit. Ein Bildschirm, der sauber ist, aber zu jedem Produkt gehören könnte, ist die nächste Vorlage. Jeder Durchlauf endet mit einem Bildschirm, den nur dieses Produkt haben könnte.

Der Unterschied zwischen Slop und Handwerkskunst liegt darin, wohin die Fülle geht. Slop verteilt Farbe und Effekte auf das Beiwerk, die Hintergründe, Schaltflächen, Rahmen und Labels. Handwerkskunst hält das Beiwerk leise und legt die Fülle in einen oder zwei Momente des Inhalts, an die sich die Leute erinnern, wie ein gerendertes Objekt, eine schöne Grafik oder ein Bild aus der Welt des Produkts.

Arbeite wie ein Designer, der eine redline-Prüfung durchführt, eine Ebene nach der anderen, über den gesamten Bildschirm hinweg.

Wie gut aussieht

Ein helles Element. Jeder Bildschirm hat ein poliertes Ding, das die Farbe und die Handwerkskunst trägt, ein gerendertes Objekt, eine gemalte Szene oder eine reichhaltige Grafik. Alles drumherum ist ruhig, damit es sofort lesbar ist.
Ruhiges Beiwerk. Navigation, Schaltflächen und Text verwenden die getönten Neutraltöne und eine Akzentfarbe. Nichts leuchtet, nichts konkurriert mit dem hellen Element.
Eine klare Idee. Du kannst in einem Satz sagen, was das Bild zeigt und warum es zu diesem Produkt gehört.
Text auf ruhigem Raum. Die Überschrift sitzt auf einem Teil des Bildes oder Layouts, der dafür freigelassen wurde, kurz und spezifisch, mit einer primären und einer sekundären Aktion und nichts darunter gestapelt.
Echtes Produkt, echtes Material. Vorschauen sehen aus wie die echte App mit plausiblen Daten, und Objekte sehen aus wie echte Dinge mit Gewicht, Licht und Schatten.

Welche visuellen Stile tendenziell funktionieren und welche versagen, findest du in references/visuals.md. Fertige Beispiele zum Lernen findest du in references/refs.md, und Code-Behandlungen wie das Zeichnen eines Bildes in Glyphen findest du in references/effects.md.

Ausführen

Sieh dir den Bildschirm an. Finde die Dateien, die ihn rendern. Wenn du die App ausführen oder die Datei in einem Browser öffnen und einen Screenshot machen kannst, tu das, damit du beurteilst, was die Leute sehen, und nicht nur den Code.
- Nur ein Link zu einer Live-Seite, kein Code? Speichere die Seite mit node <skill folder>/scripts/snapshot.mjs <url> unslop/original.html und arbeite an einer Kopie dieser Datei. Füge --dark oder --light hinzu, um das Theme anzupassen, das der Benutzer sieht. Es speichert auch original.live.png, einen Screenshot der Live-Seite, also rendere die gespeicherte Kopie und vergleiche die beiden, bevor du beginnst. Animierte Hintergründe, die von Skripten gezeichnet werden, überleben nicht, also beschreibe sie im Audit anhand der Live-Seite.
- Nur ein Screenshot? Baue den Bildschirm zuerst als eine statische HTML-Datei neu auf, die ihm genau entspricht, und behandle diese als das Original.
- In beiden Fällen ist das Ergebnis eine neu gestaltete Seite im Code, die der Benutzer demjenigen geben kann, der die echte Seite besitzt, also sage das im Bericht.
Audit durchführen. Gehe references/signs.md durch und liste jedes Zeichen auf, das du findest, eine Zeile pro Zeichen mit Ort.
Entscheide, wie viel geändert werden soll. Lies das Audit ehrlich, bevor du etwas planst.
- Starker Slop, viele Zeichen in Farbe, Typografie, Symbolen und Text. Führe den vollständigen Prozess unten durch.
- Leichter Slop, ein Bildschirm, der größtenteils gestaltet ist, mit ein paar verbleibenden Zeichen. Poliermodus. Behebe nur, was das Audit gefunden hat, nimm die Richtung aus der bestehenden Marke, anstatt eine neue zu erfinden, und behalte die Palette, Typografie, das Layout und das Visuelle bei. Größere Ideen, wie ein fehlender Moment oder eine Szene für den Helden, kommen als Vorschläge in den Bericht, nicht als Änderungen.
- Kein Slop. Sage das deutlich und schlage maximal zwei oder drei kleine Verfeinerungen mit genauen Werten vor. Wende sie nur an, wenn der Benutzer zustimmt, und höre dann auf. Ändere niemals einen guten Bildschirm nur, um ihn anders zu machen.
Setze die Richtung und halte an. Schreibe die unten beschriebenen fünf Zeilen. Zeige dem Benutzer das Audit und die Richtung und warte auf seine Antwort, bevor du bearbeitest, da eine spätere Änderung der Richtung bedeutet, alles neu zu machen. Wenn du ein Tool hast, um den Benutzer Fragen zu stellen, frage darüber; ansonsten frage in Klartext und halte an. Überspringe das Warten nur, wenn der Benutzer bereits gesagt hat, einfach zu machen.
In neun Durchgängen korrigieren, in dieser Reihenfolge. Beende einen Durchgang über den gesamten Bildschirm, bevor du mit dem nächsten beginnst. Wenn sich fast jede Zeile ändert, plane die Durchgänge der Reihe nach und schreibe dann den neuen Bildschirm in einem Zug, solange jeder Durchgang angewendet wird. Abstände kommen zuerst, weil alles andere anders wirkt, sobald der Rhythmus richtig ist. Text kommt vor Typografie und Layout, weil die Länge der Überschrift ihre Größe und Position bestimmt. Visuals und Bewegungen kommen zuletzt, weil sie in einen Bildschirm passen sollten, der auch ohne sie funktioniert.
Prüfen. Führe die Checkliste am Ende dieser Datei aus, rendere erneut und vergleiche mit der Audit-Liste. Alles, was noch auf der Liste steht, wird behoben.
Bericht über die Richtung, ein paar Zeilen pro Durchgang darüber, was sich geändert hat, und jeden Bild-Prompt, den du geschrieben hast.
Aufzeichnen, wenn darum gebeten wird oder der Benutzer etwas zum Teilen möchte. Baue die Story-Datei und rendere das Video, das in Story-Video beschrieben ist. Wenn der Benutzer es von Anfang an möchte, schreibe jeden Durchgang während der Arbeit in die Story-Datei.

Halte einen Durchlauf kurz. Rendere den Bildschirm maximal dreimal zur Überprüfung. Wenn du ein Bild generierst, starte es direkt nach der Bestätigung der Richtung und mache währenddessen die ersten Durchgänge, anstatt darauf zu warten.

Genaue Werte für jeden Durchgang findest du in references/tokens.md.

Richtung

Bevor du etwas anfasst, schreibe fünf kurze Zeilen. Leite sie daraus ab, was die Seite über das Produkt sagt und für wen es ist. Niemals von dem, was gerade im Trend liegt.

Produkt. Was es tut und für wen, in einem einfachen Satz.
Charakter. Zwei oder drei konkrete Wörter, wie ruhig, genau, ein wenig warm oder schnell, technisch, verspielt. Wörter wie sauber, modern, elegant, schlicht und erstklassig sind nicht erlaubt, weil sie jede Vorlage beschreiben.
Welt. Der Ort oder das Material, zu dem das Produkt natürlich gehört. Eine Notiz-App lebt in der Nähe von Papier und Tinte, ein Überwachungstool in der Nähe von Instrumenten und Nachtschichten, eine Reise-App in der Nähe von Karten und Fensterlicht. Diese Welt bestimmt den Farbton der Neutraltöne, die Akzentfarbe und das Visuelle.
Momente. Ein oder zwei Stellen, an denen der Bildschirm satte Farbe, Material und Detail erhält, ausgewählt aus dem, was das Produkt zeigt. Eine gerenderte Karte oder ein Gerät in der Vorschau, eine Grafik, deren Farben jeweils eine Reihe bedeuten, ein Objekt aus der Welt, das neben den Inhalt platziert wird. Schreibe, was sie sind.
Signatur. Ein kleines Detail, das nur dieses Produkt hätte und das konsequent verwendet wird. Ein Live-Statuspunkt für ein Überwachungstool, Tastenkappen für ein Entwicklertool, handgezeichnete Unterstreichungen für eine Lern-App, eine Routenlinie für eine Liefer-App. Ein Detail, nicht fünf.

Die Beispiele hier zeigen nur die Form einer Antwort. Leite deine aus dem Produkt vor dir ab, selbst wenn ein Beispiel zufällig passt.

Wenn das Produkt bereits eine echte Marke hat, wie eine Logodatei, eine Farbe oder eine Schriftart, die kein Slop ist, behalte sie und baue die Richtung darum herum auf. Ein Violett-zu-Blau-Verlauf, Glitzer und Leuchten sind Slop, selbst wenn sie im Logo sitzen, also zählen sie nicht als Marke, es sei denn, der Benutzer sagt das.

1. Abstände

Alles sitzt auf einem 4px-Raster. Ränder, Innenabstände, Abstände und feste Höhen sind Vielfache von 4, also sind 28 oder 104 in Ordnung, auch wenn sie nicht in der Token-Liste stehen. Ein 2px-Schritt ist in Ordnung für kleine Anpassungen innerhalb kleiner Steuerelemente, und ein ungerader Wert, der etwas exakt zentriert, bleibt.
Gleiches Ding, gleiche Größe. Alle Zeilen in einer Liste haben eine Höhe und einen Abstand, alle Karten in einer Zeile haben einen Innenabstand.
Abstand zeigt Gruppierung. Der Abstand innerhalb einer Gruppe ist kleiner als der Abstand zwischen Gruppen, sodass eine Liste als ein Block und Abschnitte als separate Blöcke gelesen werden.
Dinge sind ausgerichtet. Symbole sitzen in einer Spalte, Labels beginnen auf einer Linie, Zahlen sind rechtsbündig in einer Spalte. Nichts wird mit einem verirrten translate oder einem ungeraden Rand von der Linie geschoben.
Innenabstand folgt der Dichte. Kompakte Paneele und Seitenleisten um 16, Karten 20 bis 24, Seitenkanten 24 bis 32.
Die Navigation ist der dichteste Teil einer App. Zeilen sind 32 bis 36 hoch mit 2 bis 4 dazwischen, Symbole in einer Spalte, Labels auf einer Linie. Ein Abschnitts-Label sitzt näher an seinen eigenen Elementen als am Abschnitt darüber, z.B. 24 oben und 8 unten. Miss die Seitenleiste nach dem Durchgang, denn dort brechen Abstände am häufigsten.
Entferne einmalige Werte, die den Rhythmus brechen, wie mt-[13px] oder py-[11px], und ersetze sie durch Schritte aus der Skala.

2. Farbe

Baue von einer neutralen Rampe auf, die in Richtung der Welt aus der Richtung getönt ist. Wähle Graphit, Warm oder Tinte aus den Tokens oder töne deine eigene auf die gleiche Weise. Hintergrund, erhöhte Oberflächen, Rahmen und Text kommen alle von dieser Rampe.
In Apps und Dashboards bleiben Hintergründe, Oberflächen, Rahmen und Text neutral, die Graphit-Rampe oder etwas ähnlich Graues. Leute schauen stundenlang darauf, und der Inhalt muss die Farbe tragen. Ein Bildschirm, dessen Hintergrund als Orange, Braun, Blau oder Grün wahrgenommen wird, ist zu weit gegangen. Die Welt zeigt sich in der Akzentfarbe, den Grafiken und den Momenten, nicht in den Oberflächen. Landing Pages können ihre Oberflächen weiter in Richtung der Welt tönen.
Drei Textrollen: primär, sekundär und deaktiviert. Nicht zehn leicht unterschiedliche Lavendeltöne.
Im Beiwerk eine Akzentfarbe, sparsam verwendet. Sie markiert die primäre Aktion, die Auswahl oder die eine Zahl, die zählt.
Die Momente aus der Richtung sind die Ausnahme. Innerhalb von ihnen kann Farbe reichhaltig sein, mehrere Farbtöne in einer Grafik, ein gerendertes Objekt mit echten Materialien, ein Bild mit eigenem Licht, solange es in der Welt bleibt und jede Farbe etwas bedeutet.
Wenn die Marke eine echte Farbe hat, wird sie zur Akzentfarbe und verlässt die Oberflächen. Wenn es keine echte Markenfarbe gibt, nimm die Akzentfarbe aus der Welt.
Akzentfarbe mit Text darauf erreicht einen Kontrast von 4,5:1. Wenn nicht, dunkle sie ab oder setze dunklen Text darauf. Akzentfarbe, die als Text oder Tinte auf einer hellen Oberfläche verwendet wird, benötigt den gleichen Kontrast, verwende also einen dunkleren Farbton davon.
In dunklen Themes kann der primäre Button ein gebrochenes Weiß von der Rampe mit dunklem Text sein, und die Akzentfarbe kann an einer kleineren Stelle wie der Auswahl oder einer Schlüsselfigur leben. Das wirkt oft durchdachter als ein farbiger Button.
Semantische Farben tragen nur Bedeutung, wie Grün für eine gute Änderung und Rot für einen Fehler, und sie werden gedämpft, um in die Palette zu passen.
Entferne Farbverläufe auf Oberflächen, Verlaufstext, farbige Leuchteffekte und farbige Schatten, radiale Farbverläufe und Blobs hinter Inhalten und Neonrahmen.
Rahmen sind leise Haarlinien, die Textfarbe der Rampe bei 6 bis 10% Deckkraft.
In dunklen Themes kommt Tiefe von Oberflächenabstufungen und Haarlinien, nicht von Schatten. Ein Fenster oder Objekt, das über einem Bild schwebt, kann einen weichen neutralen Schatten behalten. In hellen Themes sind Schatten neutral, weich und klein.
Ein Farbverlauf ist nur als kleiner Tonwechsel innerhalb eines Neutraltons erlaubt, wie eine aktive Zeile, die von #2b2b2b zu #1f1f1f wechselt. Niemals von einem Farbton zu einem anderen.

3. Symbole

Jedes Emoji, das als Symbol oder als Dekoration in einem Label verwendet wird, wird zu einem Linien-Symbol aus einer Sammlung. Verwende die Sammlung, die das Projekt bereits hat, ansonsten Lucide.
Eine Größe und eine Strichstärke überall, 16 oder 18px mit einem 1,5er Strich.
Symbole nehmen die Farbe ihrer Textrolle an, normalerweise sekundär oder deaktiviert. Sie bekommen nie ihre eigenen Farben.
Die Symbol-Box hat in jeder Zeile die gleiche Breite und der Abstand zum Label ist fest, 8 oder 10, sodass Labels ausgerichtet sind.
Entferne Symbole, die nichts hinzufügen, wie ein Emoji in jedem Kartentitel oder vor jedem Abschnitts-Label. Kategorien, die Farbe benötigen, bekommen einen kleinen Statuspunkt.

4. Text

Überschriften sagen, was das Produkt für wen tut, in einfachen Worten, sodass sie zu keinem anderen Produkt passen würden. Verwende die Fakten, die bereits auf der Seite stehen, und erfinde keine neuen.
Keine Ausrufezeichen in Oberflächentexten und niemals !!.
Keine Begrüßungsüberschriften wie Willkommen zurück, Damir! 👋. Der Titel benennt den Kontext, wie den Seitennamen oder den Zeitraum, zum Beispiel Oktober 2026.
Kurze Labels. Suchen, nicht Irgendetwas suchen....
Eine Änderung sagt, womit sie verglichen wird, wie +12% vs. letzten Monat oder 3 weniger als letzter Monat.
Überschriften, Untertitel, Labels, Buttons und Bildunterschriften enden ohne Punkt. Nur Absätze mit mehreren Sätzen behalten ihre Punkte.
Keine Hype-Wörter wie optimieren, nahtlos, freischalten, magisch, revolutionieren oder bahnbrechend, und kein KI-gestützt bei allem.
Behauptungen, die nicht überprüfbar sind, wie Geliebt von über 10.000 Teams oder 10x schneller, werden ruhig und spezifisch, wenn der Benutzer bestätigt, dass sie echt sind, und werden ansonsten entfernt. Frage nach und liste sie im Bericht auf.
Mock-Daten sehen echt aus, mit plausiblen Zahlen und Namen, niemals [X] oder 123.456.
Abzeichen wie PRO, Neu ✨ oder Beta 🚀 verschwinden, es sei denn, das Produkt braucht sie wirklich, und dann sind sie leiser Text.

5. Typografie

Wähle die Schriftart für den Charakter in der Richtung aus den Schriftfamilien in den Tokens. Behalte die Schriftart des Projekts bei, wenn sie Teil einer echten Marke ist. Eine Standard-Schriftart wie Inter, die niemand ausgewählt hat, kann ausgetauscht werden, wenn eine andere Familie besser zum Charakter passt. Eine Familie für die Oberfläche, plus maximal eine Partner-Schriftart aus einer Zeile der Tokens, eine Mono für Zahlen und Metadaten oder eine Display-Schriftart für große Überschriften.
Einige Größen aus einer Skala und zwei Stärken, 400 und 500, mit 600 höchstens für seltene Betonungen. Keine 700 bis 900 Überschriften, kein Verlaufstext.
Hierarchie kommt von Größe und Farbe, nicht von der Stärke.
Satzfall überall. Labels wie NAVIGATION oder PAID THIS MONTH mit weitem Tracking werden zu Navigation und Bezahlt diesen Monat.
Kleiner Text bekommt nie negative Laufweite. Lesbarkeit bei kleinem Text bedeutet größer, etwas fetter oder etwas weiter. Enges Tracking ist nur für großen Display-Text.
Zahlen verwenden tabular-nums und ein Format auf dem gesamten Bildschirm. Wenn eine Zahl ...

[gekürzt für die Übersetzung]

6. Layout

Ein Spaltensystem. Alles auf dem Bildschirm folgt entweder einem definierten Raster oder einer konsistenten Struktur aus einer oder zwei Spalten. Keine Elemente, die willkürlich schweben.
Klarer Scanpfad. Das Auge des Benutzers wird zuerst zum wichtigsten Inhalt geführt, dann zur sekundären Aktion. Verwende Größe, Position und Negativraum, um diesen Pfad zu schaffen.
Inhaltsblöcke. Logisch zusammengehörige Elemente werden in Containern mit einheitlichem Innenabstand gruppiert. Browser-ähnliche Karten für unabhängige Einheiten.
Keine überlappenden Elemente. Elemente überlappen sich nur, wenn es einen funktionalen Grund gibt, wie ein Tooltip oder eine Modalschicht. Vermeide dekorative Überlappungen.
Vollständige Höhe. Elemente erstrecken sich, um den verfügbaren Platz zu nutzen, ohne Leerraum unten, es sei denn, dies ist beabsichtigt (z.B. hero section).

7. Details

Leere Zustände. Wenn ein Bereich keine Daten hat, zeige eine hilfreiche Nachricht anstelle eines leeren Rahmens. Die Nachrichtung kann sanft und informativ sein.
Zustände der Schaltflächen. Schaltflächen haben deutliche Hover-, Fokus- und aktive Zustände, die subtil sind, aber Feedback geben. Keine standardmäßigen Browser-Fokusringe, es sei denn, sie sind gestylt.
Formulare. Eingabefelder haben Labels, konsistente Polsterung und klare Fehlerzustände. Platzhaltertext ist optional und sollte nicht wie ein Label aussehen.
Listen und Tabellen. Zeilen haben abwechselnde Hintergrundfarben für Lesbarkeit (zebra striping) oder eine dünne Trennlinie. Kopfzeilen sind fett und am oberen Rand fixiert.
Aufzählungszeichen. Verwende sie sparsam, hauptsächlich in Listenpunkten, und stelle sicher, dass sie gestylt sind, um zur Oberfläche zu passen.

8. Visuals

Ein heroisches Element. Wenn möglich, platziere ein hochwertiges, gerendertes Objekt, eine Illustration oder eine Grafik, die die Aufmerksamkeit erregt. Es sollte die Essenz des Produkts einfangen.
Konsistente Bildsprache. Wenn Bilder verwendet werden (Icons, Illustrationen, Fotos), folgen sie einem Stil. Keine Mischung aus flachen Icons und detaillierten Fotos ohne ein verbindendes Prinzip.
Datenvisualisierung. Diagramme und Graphen sehen professionell aus mit klaren Farben, Beschriftungen und Gitternetzlinien, die dezent sind.
Keine generischen Stockfotos. Verwende, wenn möglich, echte Produkt-Screenshots oder maßgeschneiderte Grafiken, die den Kontext widerspiegeln.

9. Bewegung

Subtile Übergänge. Wenn Bewegung verwendet wird, ist sie sanft und zweckmäßig, z.B. ein leichtes Aufhellen beim Hover oder eine sanfte Einblendung.
Keine unnötigen Animationen. Vermeide ständige, sich wiederholende Animationen (wie Pulsieren oder sanftes Schimmern), es sei denn, sie zeigen einen Live-Status an.
Fokus auf Interaktion. Bewegung sollte die Interaktion leiten, nicht ablenken. Ein Menü könnte z.B. sanft nach unten gleiten.
Performance. Alle Animationen sind leichtgewichtig und verwenden CSS-Übergänge, wo möglich, anstatt JavaScript.

Überprüfung

Überprüfe vor dem Abschluss:

Story-Video

Wenn der Benutzer darum bittet, baue eine Video-Datei, die den Bildschirm vor und nach der Neugestaltung zeigt, mit einer sanften Überblendung und einem Voiceover oder Text, der die Änderungen erklärt.

Referenzen

references/signs.md – Liste der Slop-Zeichen
references/tokens.md – Design-Token-Werte
references/visuals.md – Leitfaden zu visuellen Stilen
references/refs.md – Beispiele für fertige Arbeiten
references/effects.md – Code-Behandlungen für Effekte

Lizenz

CC BY 4.0

Shijiuwei/unslop

Was ist unslop?

In Ihrer bevorzugten KI fragen

Dokumentation