Was macht anti-slop?
Vibe-codierte UI scheitert auf dieselbe vorhersehbare Weise. Diese Fähigkeit vereint drei Dinge in einem Arbeitsablauf: die Schritt-für-Schritt-Methode von unslop, die Art-Direction-Mechanik von taste-skill und eine Liste mit 20 überholten Erkennungsmerkmalen inklusive eines Skripts, das die mechanischen Merkmale erkennt.
Credits und Lizenzen
- Die Methode ist adaptiert von unslop von Damir Sokolovsky (https://github.com/heydamir/unslop),
lizenziert unter CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/). Anpassung: kondensiert und zusammengeführt mit
taste-skill von Leonxlnx und Molveaus Erkennungsmerkmalen in
references/playbook.md. Dieser Hinweis muss in jeder Kopie oder Adaption erhalten bleiben. Das Original ist unverändert inreferences/vendor/unslop/abgelegt. - Der Art-Direction-Durchlauf, die Hausregeln und der Inspektor stammen von taste-skill von Leonxlnx
(https://github.com/Leonxlnx/taste-skill), MIT, unverändert abgelegt in
references/vendor/taste/. - Die Liste der 20 Erkennungsmerkmale und
scripts/detect-tells.mjssind Molveaus eigene Arbeit (MIT). scripts/story.mjsist adaptiert von unslops Renderer (CC BY 4.0, Änderungen im Header aufgeführt); es bleibt CC BY 4.0, ebenso wiescripts/story-server.mjs, sein lokaler Server.scripts/story-contrast.mjsist Molveaus eigene Arbeit (MIT).
Los geht's
Lesen Sie zuerst references/playbook.md, beginnend mit dem Abschnitt „Do this first“; öffnen Sie Vendor-Dateien nur für tiefergehende Informationen oder ausgearbeitete Beispiele. Das
Playbook ist die zusammengeführte Doktrin (Richtung, Durchgänge, Text, Abstände, Farbe, Schriftart, Icons, Details, Daten,
App-Bildschirme, Bildmaterial, Bewegung, Prüfungen) mit Quellenkennzeichnung und Entscheidungen bei widersprüchlichen Quellen.
Die Tabelle „Wann lese ich was“ weiter unten ist das Tiefenverzeichnis.
Überschneidung: Dies ist der KI-Look-Durchgang. Die ui-Fähigkeit listet in ihren Kritikpunkten die leichtere allgemeine Design-Review auf, und
design-grill ist die tiefgehende Multi-Linsen-Prüfung; verwenden Sie diese für Designqualität jenseits der Erkennungsmerkmale.
Richtungsprüfung
Führen Sie dies vor jedem Code für eine neue Seite oder einen neuen Bildschirm durch und als Schritt 3 jedes Heavy-Slop-Durchlaufs, selbst wenn die Anfrage nur eine Zeile umfasst oder „mach einfach“ sagt. Der Rest dieser Fähigkeit entfernt Fehler; er verleiht einem Bildschirm keinen Charakter. Wird dies übersprungen, ist das Ergebnis die Standardseite, die jedes Modell erstellt: technisch korrekt im Detail, aber niemandem gehörend.
- Fünf Zeilen. Produkt: was es tut, für wen. Charakter: zwei oder drei konkrete Wörter („ruhig, exakt, ein wenig warm“), niemals clean, modern, sleek, minimal oder premium. Welt: der Ort oder das Material, zu dem das Produkt gehört; es färbt die Neutraltöne und setzt den Akzent. Momente: die ein oder zwei Stellen, die reichhaltige Farbe und Details erhalten. Signatur: ein kleines Detail, das nur dieses Produkt hat und konsequent verwendet wird. Ein Moment wird mit Sorgfalt gestaltet, nicht nur gesäubert: ein Diagramm, das für das neu gezeichnet wird, was es aussagen muss (glatte Linien, ein gespiegelter Vergleich, ein echter Maßstab), oder das eigene Objekt des Produkts, dargestellt mit Gewicht und Licht.
- Inventur, dann die Idee. Listen Sie 8 bis 12 Dinge auf, die kein Wettbewerber teilt (Name, Straße, Zahlen aus dem Briefing, Materialien, Werkzeuge, Rituale, Dokumente, die der Beruf druckt). Schreiben Sie: „Auf diesem Bildschirm wird [ein Gegenstand] zu [dem Gerät]“. Dieses Gerät ist der Moment.
- Verweigern Sie die Zweitordnungs-Standards, es sei denn, die Marke besitzt sie bereits. Das sind die Dinge, die ein Modell
verwendet, sobald die offensichtlichen Erkennungsmerkmale verboten sind:
- eine cremefarbene, steinerne oder warme Off-White-Seite mit einem Akzent in verbranntem Orange, Terrakotta, Salbei oder Waldgrün, mit oder ohne Serifen-Überschrift (der „Papier und Tinte“-Look ist der neue Standard, keine Richtung);
- reflexartig Fraunces, Instrument Serif, Playfair oder Georgia als Überschriftsschrift; system-ui als einzige Schriftart;
- Inter oder Geist auf Weiß mit einem einzigen Indigo- oder Blauakzent;
- Hero, drei Features, Testimonials, Call-to-Action, in dieser Reihenfolge, ohne Begründung; auf einem App-Bildschirm vier gleich große Statistik-Karten über einem Balkendiagramm;
- eine zentrierte Eyebrow, Überschrift und zwei Buttons als gesamter erster Bildschirm.
- Austauschtest. Ersetzen Sie den Namen und die Branche durch die eines Wettbewerbers. Wenn der Bildschirm immer noch passt, ändern Sie das Versprechen, den Moment und die Signatur und testen Sie erneut.
- Zeigen und abwarten. Zeigen Sie die fünf Zeilen und die Idee und warten Sie auf den Entscheider. Wenn Sie nicht fragen können (der Benutzer hat gesagt, bau es einfach, oder Sie arbeiten ohne eine Person), schreiben Sie sie als Kommentar am Anfang der Hauptdatei und bauen genau das.
Tiefe: anti-slop Playbook §2 (Richtung) und §12 (App-Bildschirme); die design-inspiration-index-Fähigkeit für echte
Referenzen.
Die Kernidee
Slop verteilt Farbe und Effekte über das Chrome: Hintergründe, Buttons, Ränder, Labels. Qualität hält das Chrome ruhig und verlagert die Fülle in ein oder zwei Momente des Inhalts, an die sich die Leute erinnern. Slop zu entfernen ist die halbe Arbeit; ein sauberer Bildschirm, der 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.
Arbeitsreihenfolge
- Seite von Grund auf neu oder tiefgreifendes Redesign? Befolgen Sie den taste-skill-Durchlauf (
references/vendor/taste/taste-skill.md) mit den Überschreibungen des Playbooks. App-Bildschirme: Playbook §12. - Betrachten Sie den Bildschirm, gerendert wenn möglich, nicht nur den Code.
- Auditieren Sie anhand der Zeichenliste (
references/vendor/unslop/unslop/references/signs.md) und der 20 Erkennungsmerkmale (references/tells.md). Eine Zeile pro Zeichen, mit Angabe des Fundorts. - Schätzen Sie den Aufwand (stark, leicht, kein Slop) und schreiben Sie die Richtung, dann warten Sie auf den Entscheider (Playbook §1 und §2).
- Korrigieren Sie in neun Durchgängen, jeder über den gesamten Bildschirm: Abstände, Farbe, Icons, Text, Typografie, Layout, Details, visuelle Elemente, Bewegung (Playbook §3 bis §14).
- Prüfen Sie mit der Checkliste des Playbooks, führen Sie den Detektor aus, vergleichen Sie mit dem Audit (Playbook §15).
- Berichten Sie die Richtung, ein paar Zeilen pro Durchgang und jede Behauptung, die Sie entfernt haben oder nicht verifizieren konnten.
Die 20 Erkennungsmerkmale
Vollständige Tabelle mit Ersetzungen: references/tells.md. Zusammenfassung, mit dem, was das Skript erfasst:
| # | Erkennungsmerkmal | Skript |
|---|---|---|
| 1 | Violett/fuchsia/indigo Verlauf | ja |
| 2 | Verlaufstext | ja |
| 3 | Emoji im Text | ja |
| 4 | Inter oder Space Grotesk überall | nein |
| 5 | Farbiger Seitenstreifen-Rand | ja |
| 6 | Dekorativer Glassmorphismus | ja |
| 7 | Kontrastarmer Dunkelmodus | nein |
| 8 | Drei Icon-Boxen in einer Reihe | nein |
| 9 | Eyebrow-Pill über der Überschrift | nein |
| 10 | Lucide als Standard | ja |
| 11 | Unberührtes shadcn/ui | nein |
| 12 | Einblendung beim Scrollen | ja |
| 13 | Cursor-following Glühen | nein |
| 14 | Hover-Fade auf Buttons | ja |
| 15 | Inkonsistente Abstände | nein |
| 16 | Gedankenstriche im Text | ja |
| 17 | Buzzword-Text | ja |
| 18 | Serifen-italische Akzentwörter | nein |
| 19 | Space Grotesk mit seinem üblichen Display-Serif-Partner (Paar in references/tells.md) | ja |
| 20 | Körnung über einem Verlauf | nein |
Der Detektor
node <skill folder>/scripts/detect-tells.mjs [--json] [--include-tests] <pfade...>
Keine Abhängigkeiten, Node 20 oder neuer, keine Imports außerhalb dieses Skill-Ordners, funktioniert also auch, wenn der Skill
allein installiert ist. Exit 0 sauber, 1 Fundstellen, 2 Nutzungsfehler. Überspringt node_modules .git .next dist build .open-next coverage und Testdateien. Meldet pfad:zeile #tell label treffer. Grenzen sind am Ende von
references/tells.md aufgeführt; behandeln Sie einen Treffer als „Schau hier“.
Rückschritttest in einem Projekt
Ein Rückschritttest fixiert die heutige Anzahl und schlägt fehl, wenn sie steigt, sodass die Erkennungsmerkmale nur schrumpfen können. Vorlage für
node:test (passen Sie die Pfade und die Basislinie an):
import { test } from 'node:test';
import assert from 'node:assert/strict';
import { readFileSync, globSync } from 'node:fs'; // globSync benötigt Node 22; auf Node 20 die Ordner selbst durchlaufen
import { detectTells } from './.agents/skills/anti-slop/scripts/detect-tells.mjs';
const BASELINE = { 10: 8, 5: 1 }; // Erkennungsmerkmal-Nummer -> erlaubte Fundstellen heute
test('keine neuen Vibe-Coded-Erkennungsmerkmale', () => {
const files = globSync('{app,components}/**/*.{ts,tsx,css}').map((pfad) => ({ pfad, text: readFileSync(pfad, 'utf8') }));
const now = {};
for (const f of detectTells(files)) now[f.tell] = (now[f.tell] ?? 0) + 1;
for (const [tell, n] of Object.entries(now)) assert.ok(n <= (BASELINE[tell] ?? 0), `Erkennungsmerkmal ${tell}: ${n} Fundstellen, Basislinie ${BASELINE[tell] ?? 0}`);
});
Senken Sie die Basislinie, sobald Sie eines beheben; erhöhen Sie sie niemals.
Story-Video
Ein quadratischer Clip, etwa 10 Sekunden, in dem der Bildschirm Schritt für Schritt mit roten Markierungen ent-slopt wird. Erstellen Sie ihn nur, wenn
darum gebeten wird. Bauen Sie die Story-Datei genau so, wie unslops Abschnitt „Story video“ es beschreibt
(references/vendor/unslop/unslop.md: eine story.html, .s1 bis .s5 CSS oben, data-gap,
data-radius, data-slop, Swaps), rendern Sie sie dann mit dem angepassten Renderer dieser Fähigkeit:
node <skill folder>/scripts/story.mjs unslop-story/story.html unslop-story.mp4 # --wide für 16:9, --play zum Ansehen
Was es zu unslops Renderer hinzufügt:
- Ein Accessibility-Schritt. Ein Schritt, dessen Name Accessibility enthält, zeigt Live-Messungen. Fügen Sie
data-contrastauf zwei bis vier Textelemente, deren Kontrast sich ändert; jedes zeigt sein WCAG-Verhältnis, rot unter 4.5:1 (3:1 für großen Text), weiß mitAA, sobald es besteht, grau?, wenn eine Farbe nicht gelesen werden kann (wielab()odercolor(display-p3 ...)): verwenden Sie sRGB, hex oderoklch()-Farben auf diesen Elementen. Fügen Siedata-targetauf ein oder zwei Bedienelemente; jedes zeigt seine Größe, rot unter 24 x 24 px. Wählen Sie Elemente, die im Vorher-Zustand fehlschlagen; markieren Sie niemals ein Element, das im Nachher-Zustand immer noch fehlschlägt. - Ein Untertitel,
<meta name="story-caption" content="...">, unten links. Geben Sie nur an, was für den Durchlauf zutrifft, z. B. das Modell und dass der Bildschirm nicht von Hand bearbeitet wurde. - Der Credit
molveau/skills · unslop method by @heydamirwird auf jedem Frame eingeblendet, wie von der CC BY 4.0-Lizenz von unslop verlangt. Entfernen Sie ihn nicht.
Die Story ist eine Präsentation der echten Dateien: Schritt 0 ist der Vorher-Zustand wie er war, und der letzte Schritt entspricht der sauberen Datei, die Sie ausliefern. Polieren Sie die Story nicht über den ausgelieferten Bildschirm hinaus.
Wann lese ich was
| Bedarf | Lesen |
|---|---|
| Die zusammengeführten Regeln, Werte und Entscheidungen bei Konflikten | references/playbook.md |
| Die 20 Erkennungsmerkmale mit Ersetzungen und den Grenzen des Detektors | references/tells.md |
| unslops vollständige Methode, Richtung, neun Durchgänge, Checkliste, Story-Video | references/vendor/unslop/unslop.md |
| Exakte Werte (Abstände, Schriftskala, Rampen, Bewegungskurven) | references/vendor/unslop/unslop/references/tokens.md (seine Bewegungswerte sind ersetzt: ui Playbook §10 und motion §5 gewinnen, Playbook-Konflikt 19) |
| Die Audit-Liste der Zeichen | references/vendor/unslop/unslop/references/signs.md |
| Hero-Visuals, Bild-Prompts, welche Stile funktionieren | references/vendor/unslop/unslop/references/visuals.md |
| Glyph-, Halbton-, Dither- und Duotone-Code | references/vendor/unslop/unslop/references/effects.md |
| Fertige Referenzbildschirme (Bilder) | references/vendor/unslop/unslop/references/refs.md |
| Eine Live-URL als Schnappschuss, um an einer Kopie zu arbeiten | references/vendor/unslop/unslop/scripts/snapshot.mjs |
| Eine Seite von Grund auf neu oder ein tiefgreifendes Redesign: Inventur, ausgearbeitete Richtung, Idee, Hausregeln, Prüfung | references/vendor/taste/taste-skill.md |
| Dashboards, Admin- und Einstellungsbildschirme im Detail | references/vendor/taste/taste-skill/references/app-screens.md |
| Textsammlung, Zweizeilen-Arithmetik, Beweis ohne Erfindung | references/vendor/taste/taste-skill/references/copy.md |
| Schriftskala, Display-Einstellung, Schriftartenladen | references/vendor/taste/taste-skill/references/type.md |
| Palettenrollen, Felder, dunkle Seiten, Kontrast | references/vendor/taste/taste-skill/references/colour.md |
| Ränder, Leerraum, der Rahmen, Abschnitte, das Telefon | references/vendor/taste/taste-skill/references/layout.md |
| Finden, Kreditieren, Platzieren und Bearbeiten von Bildern und Videos | references/vendor/taste/taste-skill/references/imagery.md |
Bewegungsrezepte (Opt-in: motion Playbook §9) und Scroll-Szenen | references/vendor/taste/taste-skill/references/motion.md, references/vendor/taste/taste-skill/references/scenes.md |
| Beurteilen eines Ergebnisses mit einer Bewertungsmatrix | references/vendor/taste/taste-skill/references/critique.md |
| Das Register überholter Erkennungsmerkmale nach Welle | references/vendor/taste/taste-skill/references/tells.md |
| Die Studie hinter tastes Zahlen | references/vendor/taste/taste-skill/references/research.md |
Die abgelegten Dateien behalten ihr ursprüngliches Layout bei, daher könnten einige relative Links darin hier
nicht funktionieren. taste-skills Skripte lesen ihren library/-Ordner (nicht vollständig lesen; draw.mjs ausführen);
einige Skripte benötigen Node 22, einen Browser, Playwright, ffmpeg oder Netzwerkzugriff. Welche visuellen Prüfungen durchgeführt werden sollen,
wird im ui Playbook, Konflikt 14, entschieden (dieses Playbooks Konflikt 14 verweist dorthin).