Was macht stop-design-slop?
Lesen Sie dies vor allem anderen
Hinter dem Satz "Das sieht KI-generiert aus" verbergen sich zwei verschiedene Aufgaben, deren Vermischung Seiten zerstört.
Das Entfernen von Artefakten ist immer sicher. Ein Builder-Wasserzeichen, Lorem Ipsum, ein erfundenes Testimonial, ein toter Link, ein Hero-Bild mit sechs Fingern: Diese sind unabhängig von der Designrichtung falsch, und ihr Entfernen kann die Seite nur verbessern. Dies ist der CLEAN-Durchlauf und der Standardmodus.
Ein Redesign ist nicht sicher, wenn es stückweise erfolgt. Die Schriftart, die Palette, die Radius-Skala, die Hero-Komposition: Jede davon ist eine Entscheidung, die zufälligerweise dem aktuellen Trend entspricht. Ändert man eine isoliert, entsteht Inkohärenz, die schlechter wirkt als konsistente Durchschnittlichkeit. Diese benötigen eine Richtung, daher meldet CLEAN sie und lässt sie in Ruhe.
Das Entfernen von Design-Voreinstellungen einzeln führt nicht zu gutem Design. Es führt zu langweiligem Design, das ebenfalls als KI-generiert wahrgenommen wird.
Eine frühere Version dieses Skills hat genau das vorgeschrieben und Seiten verschlechtert – die Gründe sind in references/method.md dokumentiert:
- Eine Verbotsliste mit 284 Einträgen schränkt 284 von Tausenden Entscheidungen ein, die eine Seite trifft. Jede uneingeschränkte Entscheidung fällt auf die Standardeinstellung des Modells zurück.
- Das Verbieten der häufigsten Option befördert die zweithäufigste. Alle landen beim gleichen Zweitplatzierten, sodass das Anti-Slop-Ergebnis einheitlicher ist als der ursprüngliche Slop.
- Dreißig als unabhängige Änderungen behobene Merkmale erzeugen dreißig unzusammenhängende Entscheidungen. Das generische Original war zumindest kohärent – Inkohärenz wirkt kaputt.
- Die Optimierung auf die wenigsten Merkmale konvergiert zu einer flachen grauen Seite mit einer System-Schriftart. Null Merkmale, null Entscheidungen.
Daher treiben die Merkmale im REDESIGN-Modus niemals die Lösung an. Sie erscheinen als Diagnose vor der Arbeit und als Lint-Assertionen danach, während zwischen ihnen eine festgelegte Richtung und ein Token-Layer-Neubau liegen. Im CLEAN-Modus treiben die Merkmale nur die Artefakt- und Inhaltskorrekturen an, die kein derartiges Risiko bergen, da sie nichts Systemweites ändern.
Wenn Sie hier sind, um eine Seite zu reparieren, die ein vorheriger De-Slop-Durchlauf beschädigt hat, lesen Sie zuerst den Wiederherstellungsabschnitt von references/method.md. Rückgängig machen ist meist besser als vorwärts reparieren.
Modi
Der Standardmodus ist CLEAN, der die Seite nicht neu gestaltet. Ein Redesign ist eine größere Verpflichtung, als die meisten Leute eingehen wollen, wenn sie sagen, eine Seite sehe KI-generiert aus. Daher erfordert es ein explizites Wort.
| Aufruf | Modus |
|---|---|
/stop-design-slop <url> oder ohne Parameter | CLEAN, Stufen 1 bis 4 (Standard) |
essential in Argumenten | Nur Stufe 1. Kann die Seite unter keinem Geschmack verschlechtern. |
tier N in Argumenten | Stufen 1 bis N |
redesign / rebuild / direction in Argumenten | Stufen 1 bis 4, dann Festlegung auf eine Richtung und Neubau aus Tokens |
build in Argumenten oder beim Erstellen neuer UI | PREVENT: Spezifikation schreiben, bevor Code existiert |
audit-only / report in Argumenten | Nur Diagnose und Bewertung, keine Dateiänderungen |
quick in Argumenten | Die 63 instant-Merkmale, schnelle Diagnose |
copy / visual / code in Argumenten | Diagnose auf diese Kataloge eingrenzen |
Entscheiden Sie zwischen CLEAN und PREVENT, anstatt nachzufragen: Vorhandene UI geht zu CLEAN, ein leeres Blatt zu PREVENT. Eskalieren Sie niemals eigenständig zu einem Redesign. Schließen Sie den CLEAN-Durchlauf ab, berichten Sie, was eine Richtung korrigieren würde, und lassen Sie den Benutzer entscheiden.
Die Stufen
Lesen Sie references/clean-pass.md für die detaillierte Aufschlüsselung pro Merkmal.
| Stufe | Name | Was sie tut | Kann sie die Seite verschlechtern? |
|---|---|---|---|
| 1 | ESSENTIAL | Behebt, was kaputt, übrig oder fehlend ist: Builder-Badges, Standardtitel, Platzhaltertext, tote Links, Geisterformulare, Konsolenfehler, fehlender Fokus und Alt-Text, unzureichender Kontrast, fehlende Meta-Angaben | Nein. Bei jedem Geschmack, jeder Richtung. |
| 2 | HONEST | Entfernt falsche Inhalte: erfundene Testimonials, erfundene Statistiken, Platzhalter-Logobalken, nicht verifizierte Bewertungen, KI-Bild-Artefakte | Nein, aber benötigt Fakten von Ihnen |
| 3 | QUIET | Entfernt dekorative Ergänzungen: Umgebungsanimationen, Partikel, Glüheffekte, Laufbänder, Zähler, Hover-Skalierung, Gradienten-Keywords, Emoji-Symbole | Nur, wenn Ihnen die Dekoration gefallen hat |
| 4 | CRAFT | Fügt menschliche Details hinzu: echte Zeichensetzung, text-wrap, Tracking nach Größe, Fokusring im vorhandenen Akzent, tabellarische Ziffern, echte Zustände, spezifische Kopie | Nein, ändert jedoch das Erscheinungsbild geringfügig |
| 5 | DIRECTION | Schriftart, Palette, Radius-Skala, Hero-Komposition, Abschnittsreihenfolge | Ja, stückweise. Gemeldet, nie angewendet. |
Stufe 4 verhindert, dass ein CLEAN-Durchlauf in Richtung Langeweile tendiert: Entfernen senkt den Slop Score, und Handwerkskunst erhöht den Commitment Score.
Die Einschränkung, die die Stufen 1 bis 4 sicher hält: Keine Stufe unter 5 darf Theme-Tokens, font-family, die Palette, die Radius- oder Schattenskala oder die Layout-Struktur bearbeiten. Inkohärenz entsteht durch die isolierte Änderung einer Systemeigenschaft, daher ändert CLEAN keine davon. Überprüfen Sie vor dem Abschluss, dass der Diff keine solche Änderung enthält.
Dateien
Lesen Sie zuerst immer method.md. Lesen Sie dann, was Ihre Phase benötigt.
| Datei | Zweck |
|---|---|
references/clean-pass.md | Der Standardmodus. Fünf Entfernungsstufen, Aufschlüsselung pro Merkmal, was CLEAN nicht berühren darf, der Stufe-5-Bericht |
references/method.md | Warum reine Entfernung scheitert, das korrigierte Modell, der REDESIGN-Workflow, die DESIGN.md-Vorlage, duale Bewertung |
references/redesign.md | Stufe 5 Ausführung. Die Designanalyse, drei Stellschrauben, der Kategorie-Reflex-Check, die Build-gegen-Verbotsliste und die Pre-Flight-Checkliste |
references/art-direction.md | Der Prozess, der zu einer Festlegung führt: Briefing, Attributabgrenzung, Wettbewerbsanalyse, Divergenz, Propagation |
references/directions.md | 13 vollständig spezifizierte Richtungen mit echten Schriftarten und Beispielseiten, plus Attributkarte und ein Regal für freie Schriften |
references/derivation.md | Ausführbare Mathematik: Farbtonquellen, OKLCH-Rampen, APCA-Kontrastlösung, Schriftauswahl und -kombination, Skalierung und Abstände, Radius- und Schattensysteme |
references/craft-details.md | 64 umsetzbare Details (C1–C64), die eine menschliche Hand verraten |
references/signals.md | Berechenbare Signale. Was gemessen werden sollte, statt nur hinzusehen: Layout-Zähler, Kontrast, Phrasendichte, unsichtbare Zeichen, Build-Greps und der normalisierte Slop Index |
references/structure-layout.md | Merkmale #1–63: Architektur, Heroes, Abschnitte, Raster, Abstände, Navigation, Footer, IA, Mobil |
references/color-effects.md | Merkmale #64–93: Paletten, Verläufe, Glühen, Glas, Rahmen, Radius, Schatten |
references/typography.md | Merkmale #94–121: Schriftauswahl, Paarung, Hierarchie, Überschriften-Stil, Groß-/Kleinschreibung |
references/imagery-icons.md | Merkmale #122–153: KI-Bild-Artefakte, Stock-Illustrationen, Symbole, Logos |
references/motion-interaction.md | Merkmale #154–183: Scroll-Enthüllungen, Hover-Effekte, Umgebungsschleifen, Bewegungssysteme |
references/copy-content.md | Merkmale #184–251, #287: Überschriftenformeln, Wort-Blacklist, Vertrauensbehauptungen, Testimonials |
references/code-meta-tells.md | Merkmale #252–284, #286: Builder-Wasserzeichen, Framework-Überbleibsel, tote Verkabelung, Barrierefreiheit |
287 Merkmale (64 sofort, 154 stark, 69 mild) und 64 Handwerksdetails.
CLEAN-Arbeitsablauf (Standard)
DIAGNOSE + STUFE → S1 ESSENTIAL → S2 HONEST → S3 QUIET → S4 CRAFT → MELDEN S5 → PRÜFEN
Ausführliche Details in references/clean-pass.md. Diagnose wie unten, ordnen Sie jeden Treffer einer Stufe zu. Arbeiten Sie die Stufen der Reihe nach ab und stoppen Sie bei der vom Benutzer gewünschten. Melden Sie Stufe 5, ohne sie anzuwenden, und überprüfen Sie dann, ob kein Diff ein System-Token berührt hat.
Ein durchgängiges Beispiel befindet sich in examples/: hero-before.html und hero-clean.html sind dieselbe Seite vor und nach den Stufen 1 bis 4, wobei Schriftart, Hintergrund, Akzentfarbe, Radius und Layout zwischen ihnen identisch sind.
REDESIGN-Arbeitsablauf (nur auf Anfrage)
DIAGNOSE → BRIEFING → SPEZ. → NEUBAU → LINT → BEWERTEN
Lesen Sie references/redesign.md vor dem Bauen. Es enthält die Designanalyse, die drei Stellschrauben, den Zwei-Höhen-Kategorie-Reflex-Check und die Verbotsliste, die erfasst, was einen CLEAN-Durchlauf überlebt: drei gleichwertige Feature-Karten, div-basierte Fake-Produkt-UI, Gradiententext, Augenbrauen in jedem Abschnitt, Seitenstreifen-Rahmen, Geisterkarten, übermäßig abgerundete Ecken. examples/hero-redesign.html ist ein ausgearbeitetes Ergebnis.
1. DIAGNOSE (beide Modi)
Erfassen Sie den aktuellen Zustand und gehen Sie dann die Merkmalskataloge durch. Notieren Sie jeden Treffer als #N, wo er auftritt, Schweregrad, plus seine Stufe im CLEAN-Modus. Notieren Sie, was bereits funktioniert, als Liste der Nicht-Antasten.
Erfassen Sie mit dem, was der Host bereitstellt. Für eine Live-URL: Screenshot in voller Höhe bei Desktop-Breite und erneut bei ~375px, Seitentext extrahieren, Tab-Titel und Favicon prüfen. Ohne Browser: HTML und CSS abrufen, diese prüfen, den Benutzer um Screenshots bitten und angeben, welche visuellen Merkmale Sie nicht überprüfen konnten. Für eine Codebasis: Einstiegsseiten, globales CSS und Theme-Konfiguration, Layout-Komponenten lesen, dann den VOCAB-Grep-Durchlauf am Ende jedes Katalogs ausführen. Beurteilen Sie die gerenderte Seite, wann immer möglich.
Führen Sie den 5-Sekunden-Test explizit durch: Beschreiben Sie Ihren ersten Eindruck vom Desktop-Screenshot in einem Satz, vor der Analyse. Enthält er "generisch", "Vorlage" oder einen Tool-Namen, ist dieser Satz die Schlagzeile des Berichts.
Halten Sie hier im Modus audit-only an, nach den Ergebnissen und dem Plan.
Hören Sie im CLEAN-Modus hier auf zu lesen und folgen Sie clean-pass.md. Die folgenden Schritte gestalten die Seite neu und gehören zu REDESIGN.
2. BRIEFING
Führen Sie art-direction.md aus. Es endet mit einem Ein-Satz-Konzept, einer benannten Zielgruppe, drei bis fünf abgegrenzten Attributen, einer Ausschlussliste und einer aus directions.md gewählten Richtung.
Weigern Sie sich, ohne ein Konzept und eine Zielgruppe fortzufahren. Art Direction ist das, was tausend kleine Entscheidungen in Einklang bringt. Ohne Konzept stimmen sie durch Voreinstellung überein. Wenn der Benutzer keins liefert, generieren Sie drei Kandidatenrichtungen und erzwingen Sie eine Auswahl.
Wählen Sie die Richtung durch die drei Filter in directions.md: Ihre Attribute, was Wettbewerber bereits besetzen, und was Ihr Inhalt tatsächlich unterstützen kann. Der dritte Filter eliminiert die meisten Kandidaten, und ihn zu ignorieren erzeugt eine leere Vorlage.
3. SPEZIFIKATION
Schreiben Sie DESIGN.md in das Projekt mit der Vorlage aus method.md. Zwanzig bis fünfzig Zeilen, exakte Werte, keine Adjektive. Leiten Sie die Werte, die projektspezifisch sein müssen, mit derivation.md ab: Beziehen Sie den Farbton aus dem eigenen Material der Marke, lösen Sie Kontrast anstatt ihn zu schätzen, wählen Sie Schriften anhand der gemessenen Grenzwerte.
Eine leere Zeile in der Spezifikation ist eine an das Modell zurückgegebene Entscheidung. Füllen Sie jede.
Die Spezifikation enthält fünf benannte Festlegungen: den Brennpunkt, die eine Spannungsbewegung, ein charakteristisches Asset in drei Rollen, die Entscheidung, die Wettbewerber nicht treffen würden, und eine bewusste Ausnahme vom eigenen System.
Diese Datei ist ein Ergebnis. Der Benutzer bearbeitet sie, und sie regelt jede zukünftige Änderung.
4. NEUBAU
Zuerst die Token-Ebene als eine atomare Änderung, dann Komponenten, dann Inhalt, dann Handwerksdetails.
Machen Sie Voreinstellungen unerreichbar statt nur davon abzuraten. Definieren Sie in Tailwind colors: statt extend:, damit die Framework-Palette nicht referenziert werden kann. Die Umbenennung von indigo zu primary ändert nichts Wahrnehmbares.
Reihenfolge: Typ-Tokens → Farb-Tokens → Geometrie-Tokens → Raum und Skalierung → Bewegungs-Tokens → Komponenten → Inhalt und Kopie → Handwerksdetails aus craft-details.md.
Verteilen Sie niemals Änderungen über Komponenten, bevor die Tokens übereinstimmen. Das ist das Flickwerk-Syndrom.
5. LINT
Maschinell überprüfbare Assertionen, ausgeführt in CI. Zuerst Warnungen, dann Fehler.
Hex-Werte außerhalb der Whitelist. Verbotene Utility-Klassen. Abstände außerhalb der Skala. Verbotene Kopie-Einleitungen. Berechneter Kontrast unter 4,5:1. Rohe Elemente, wo eine Systemkomponente existiert.
Regeln müssen vom Agenten gegen seine eigene Ausgabe überprüfbar sein. Eine Anweisung, die der Agent nicht verifizieren kann, erzeugt Überkorrektur statt Compliance. Daher gehört alles, was "sehen Sie sich das Rendering an" erfordert, in die BEWERTEN-Phase.
6. BEWERTEN
Schreiben Sie eine Bewertungsmatrix für dieses Briefing, die beschreibt, wie gut aussehen, und bewerten Sie dann die gerenderte Seite dagegen. Eine Checkliste kann die Generierung nicht steuern; Kritik definiert Qualität, ohne Exaktheit zu verlangen, und sie bewertet das Rendering, nicht den Quellcode.
Erstellen Sie erneut Screenshots von Desktop und Mobil, führen Sie den 5-Sekunden-Test erneut durch und bewerten Sie beide Achsen.
Bewertung
raw = 3×instant + 2×strong + 1×mild
Slop Index = round(100 × raw / (raw + 40)) 0 bis 100, niedriger ist besser
Commitment Score = ausgefüllte, propagierte, benennbare Entscheidungen höher ist besser
Geben Sie die Aufschlüsselung pro Kategorie neben dem Index an, da eine Zahl verbirgt, welche Hälfte kaputt ist. Eine Seite mit Index 47, deren Kopie 23 davon ausmacht, benötigt einen Kopie-Durchlauf, kein Redesign. Siehe references/signals.md.
| Slop | Commitment | Fazit |
|---|---|---|
| hoch | niedrig | Generische Vorlage. Der Startpunkt. |
| hoch | hoch | Laut aber abgeleitet. Beheben Sie die Merkmale. |
| niedrig | niedrig | Langweilig. Der Fehler, den dieses Skill verhindern soll. |
| niedrig | hoch | Ausliefern. |
REDESIGN-Auslieferungskriterium erfordert beides: Slop Score 0 bis 8, Commitment Score 5 oder mehr, jede obligatorische Positive aus method.md vorhanden, und keine Regression bei Kontrast, Fokussichtbarkeit, Seitengewicht, Funktionalität oder mobilem Layout.
CLEAN erwartet ein anderes Ergebnis. Der Slop Score fällt stark, während der Commitment Score nur wenig steigt – durch die Handwerkszusätze. Er wird das Redesign-Kriterium nicht erreichen, und das ist korrekt: CLEAN entfernt die Beweise, dass eine Maschine die Seite erstellt hat, während eine Richtung sie so aussehen lässt, als hätte sie ein Mensch gewählt. Melden Sie beide Zahlen und sagen Sie, welche Lücke ein Redesign schließen würde.
Leitplanken
- Jede Entfernung erhält einen Ersatz. Nennen Sie die Aufgabe eines Elements (orientieren, überzeugen, beweisen, konvertieren) und stellen Sie sicher, dass diese Aufgabe abgedeckt bleibt.
- Entfernen Sie niemals alle drei Interaktionssignifikanten. Schatten, Radius und Füllung sind Slop-Merkmale und gleichzeitig die primären Klickbarkeitshinweise. Ein interaktives Element behält mindestens zwei von Rahmen, Füllung und einem Hover- oder Fokus-Delta. Das Entfernen aller drei lässt die Seite sowohl unfertig als auch langweilig wirken.
- Konventionen bleiben. Navigation, Formulare, Hierarchie und Checkout sind tragend. Weichen Sie stattdessen bei Schrift, Farbe, Abschnittsreihenfolge, Bildsprache, Mikrokopie und Bewegung ab.
- Barrierefreiheit hat Vorrang vor einer niedrigen Punktzahl.
…
[gekürzt für die Übersetzung]