yonathan-boop/Claude – Antislop UI & Visual Skill

antislop-ui

Anti Slop: Regeln für KI-Codierungsagenten. UI & Visuelle Fertigkeit

Teil des antislop-Systems. Zusammen mit antislop.md (dem Kern) lesen. Diese Fertigkeit vertieft die UI/visuellen Aspekte: Farbe, Layout, Komponenten, Dekoration, Strukturfluss und Bewegung. Sie referenziert Kernregeln anhand ihrer Nummern und dupliziert oder nummeriert sie nie neu. Lade sie, wenn die Aufgabe eine Website, Web-App oder eine beliebige Oberfläche erstellt oder bearbeitet.

So verwendest du diese Fertigkeit

• Lade sie zusammen mit antislop.md, wann immer die Aufgabe UI- oder visuelle Arbeit umfasst. Der Kern enthält die Mechanik (den Zwecktest, die drei Stufen, das Delivery Gate); diese Fertigkeit enthält die UI-spezifische Tiefe.
• Jeder Eintrag hat die gleiche Struktur: Tell (das Muster), Why (warum es als Slop gelesen wird), Fix (was stattdessen zu tun ist), mit der zugrundeliegenden Kernregel als R-XX zitiert.
• Das Delivery Gate im Kern bleibt das Gate. Die "UI Skill Checkliste" am Ende dieser Datei ist die UI-spezifische Ergänzung, die parallel dazu ausgeführt wird.

Visuelles & Farbe

Generischer Blau-Lila-Verlauf

• Tell: Blau-nach-Lila, Blau-nach-Cyan oder Lila-nach-Pink-Verläufe, die als primäre Farbbehandlung oder als vollflächiger farbiger Glanz verwendet werden.
• Why: die am häufigsten vorkommende Farbbehandlung in Trainingsdaten. Sie signalisiert "keine Markenidentität", nicht "unsere Palette", und kennzeichnet das Design auf den ersten Blick als KI-generiert.
• Fix: Ziehe die Palette aus DESIGN.md oder der eigenen Identität des Produkts. Behalte einen Verlauf nur als Hierarchie-Funktion mit dokumentiertem Grund (R-01). Ein Verlauf, der eine Ebene von einer anderen trennt, ist Handwerk; der gleiche Verlauf in jedem Abschnitt ist ein Standard.
• Die gleiche Standardfamilie: Harsche oder Regenbogenverläufe, Lila-und-Schwarz-Schemata, Neon- oder Pastellpaletten und unscharfe radiale Orbs hinter dem Hero. Sie sind der gleiche Tell in anderer Kleidung: Farbe aus dem Standard des Modells, nicht von der Marke. Alle sind OHNE ZWECK ALS STANDARD VERBOTEN (R-01).

Übermäßiger Glas-Morphismus

• Tell: Blur/backdrop-filter auf Navbar, Karten, Modalen und Sidebar gleichzeitig.
• Why: Unschärfe entfernt Textur und setzt jede Oberfläche in die gleiche frostige Schicht, wodurch die Hierarchie eingeebnet wird. Wenn jede Oberfläche aus Glas ist, ist nichts Vordergrund.
• Fix: Behandle Glas als Akzent, nicht als Charaktereigenschaft. Dosierungsgrenze: höchstens 1-2 Elemente (R-10). Die Oberfläche, die Aufmerksamkeit braucht, bekommt das Glas; alles andere bleibt fest.

Übermäßiger Randradius

• Tell: jedes Element ist pillenförmig: Buttons, Eingabefelder, Karten, Badges, Modals.
• Why: Einheitliche Pillenformen löschen die visuelle Sprache von "das ist ein Eingabefeld, das ist eine Karte". Radius wird zur Dekoration statt zum Hierarchiewerkzeug.
• Fix: Lege einen kleinen Satz von Radien im Designsystem fest und wende sie bewusst an (R-11). Ein großzügiger Radius auf dem primären CTA wirkt beabsichtigt; der gleiche Radius auf jedem Element wirkt wie ein Standard.

Übermäßig weiche Schatten

• Tell: Jede Komponente trägt einen großen Schatten, sodass die gesamte Seite zu schweben scheint.
• Why: Wenn alles erhöht ist, kommuniziert Erhöhung nichts. Die Seite verliert ihre Grundebene und wird zu generischer Weichheit.
• Fix: Verwende Schatten nur als Höhenmarkierung und dokumentiere den Grund für die Erhöhung (R-12). Die meisten Elemente sollten flach bleiben; das eine oder zwei, die über die Seite hinausragen müssen, tragen den Schatten.

Glanz überall

• Tell: Glanz auf Karten, Buttons, Icons, Badges, Hintergründen und Rahmen gleichzeitig.
• Why: Glanz ist ein Aufmerksamkeitsverstärker. Überall angewendet, verstärkt er nichts, und es ist einer der schnellsten Wege, "von KI gemacht" auszusehen.
• Fix: Reserve Glanz für maximal 1-2 wichtige Elemente als Fokusakzent (R-13). Alles andere bleibt matt.

Hintergrundraster

• Tell: Rasterquadrate, Blaupausenlinien, Millimeterpapier, Punktgitter oder dünne sich wiederholende Linien hinter Inhalten.
• Why: Es ist eine Standardmethode, um eine flache Seite "technisch" wirken zu lassen, ohne echte Arbeit zu leisten. Es wirkt wie Textur ohne Absicht.
• Fix: Verwende Textur oder Muster nur, wenn sie die Identität des Produkts wirklich unterstützen, mit dokumentiertem Grund (R-07). Ein echtes Identitätsmotiv (Kern Teil 3) schlägt jedes Standardraster.

Dunkelmodus als Standard ohne Grund

• Tell: Die gesamte Seite ist dunkel, nur weil es "technisch" aussieht, ohne Berücksichtigung der Marke.
• Why: Dunkel ist eine Entscheidung, kein Standard. Es aufzuzwingen wirkt wie das Befolgen eines Trends, nicht wie das Dienen des Produkts.
• Fix: Wähle das Theme basierend auf Markenidentität, Produkttyp und Zielgruppe (R-21). Entwickler- und Kreativtools haben legitime Gründe für Dunkel; ein inhaltsorientiertes Produkt normalerweise nicht. Wenn es keinen starken Grund für ein festes Theme gibt, baue einen funktionierenden Hell/Dunkel-Umschalter.

Zu viele Farben in der Palette

• Tell: 5-7 verschiedene Farben auf einer Seite ohne klares Designsystem.
• Why: Eine verstreute Palette hat keine Hierarchie. Wenn jedes Element jede Farbe haben kann, wird nichts hervorgehoben.
• Fix: Begrenze die aktive Palette auf 2-3 Kernfarben + 1 Akzent (R-29) und lass eine der Kernfarben die neutrale Basis sein. Zurückhaltung lässt den Akzent wirken.

Übermäßige Akzentfarbe

• Tell: Eine Akzentfarbe auf Buttons, Icons, Badges, Links, Linien, Hintergründen und Glanz gleichzeitig.
• Why: Der Akzent hört auf, ein Akzent zu sein, sobald er überall ist. Er wird zu einer weiteren Farbe, und das Design verliert seinen Fokuspunkt.
• Fix: Der Akzent gehört nur an den entscheidenden Moment (ein bewusster Akzent, Kern Teil 3). Null Akzente ist steril; ein Akzent überall ist Slop. Wähle die ein oder zwei Stellen, an denen es wichtig ist.

Steriler Standard

• Tell: Flachweiß oder fast weiß, dünne graue Rahmen, kleiner Radius, keine Textur, generische Schrift, keine Identität.
• Why: Dies ist das "sichere" Ergebnis von Überfilterung ohne Richtung. Es ist kein Slop, aber auch kein Design: Es ist eine Leere, wo ein Design sein sollte.
• Fix: Dies ist ein Richtungsproblem, kein Filterproblem. Füge DESIGN.md hinzu oder löse das Design-Read (Kern Teil 3), dann erhöhe die Lebendigkeitsregler. Die Lösung sind nie mehr Verbote; es geht darum, den Zweck zu benennen und Energie hinzuzufügen.

Layout & Komponenten

Monotones Vorlagenlayout

• Tell: Hero, Untertitel, 2 CTAs, Screenshot, Feature-Raster, Testimonials, FAQ, CTA, Footer, in dieser Reihenfolge, jedes Mal.
• Why: Die Reihenfolge ist der Trainingsdaten-Standard, nicht die Erzählung des Produkts. Abschnitte erscheinen, weil die Vorlage sie hat, nicht weil der Inhalt sie braucht.
• Fix: Baue die Struktur um die tatsächlichen Inhaltsanforderungen herum auf (R-05, C-3). Wenn das Produkt keine Testimonials hat, gibt es keinen Testimonials-Abschnitt. Die Abschnittsreihenfolge folgt der Geschichte des Produkts. Passe den RHYTHM-Regler an: Wenn er auf 3 steht, variieren die Abschnitte sichtbar.

Kopierte Feature-Karten

• Tell: Identische Größe, Höhe, Icon, Layout und Abstände bei allen Feature-Karten.
• Why: Einheitliche Karten ebnen den Inhalt ein. Wenn jedes Feature eine Karte mit einem Icon ist, sehen die Features mit echtem Gewicht und die ohne gleich aus.
• Fix: Erzeuge Variation, die die Inhaltshierarchie widerspiegelt, mit dokumentiertem Grund (R-14). Nicht jedes Feature muss eine Karte sein. Das Flaggschiff-Feature verdient vielleicht eine vollbreite Behandlung, die unterstützenden eine Liste.

Bento-Raster

• Tell: Ein Abschnitt aus einem Mosaik unterschiedlich großer Karten, einige über zwei Spalten oder zwei Zeilen, die den Raum wie ein gekacheltes Dashboard füllen.
• Why: Es ist das Standard-"App-ähnliche" Landing-Layout der letzten Jahre, also signalisiert es nichts über das Produkt. Wenn jeder Abschnitt ein Bento sein könnte, ist das Layout eine Vorlage, keine Entscheidung.
• Fix: Verwende ein Bento-Raster nur, wenn der Inhalt wirklich Elemente unterschiedlicher Größe zu zeigen hat (R-05). Wenn jede Zelle ungefähr gleich ist, ist ein einfaches Raster oder eine Liste ehrlicher. Der RHYTHM-Regler entscheidet, ob Abschnitte überhaupt variieren.

Einheitliche Abstände

• Tell: Padding, Margin und Abstände sind in jedem Abschnitt identisch.
• Why: Rhythmus ist ein Werkzeug, und ein einzelner Abstandswert entfernt ihn. Abschnitte hören auf, sich aufeinander zu beziehen; die Seite liest sich wie ein flacher Streifen.
• Fix: Verwende Weißraum als Struktur (Kern Teil 3) und variiere ihn mit dem RHYTHM-Regler. Lege eine Abstandsskala fest und verwende dann verschiedene Stufen zum Trennen und Verbinden. Einheitlicher Rhythmus ist nur dann eine bewusste Entscheidung, wenn der Regler es sagt (R-05).

"So funktioniert's" immer 3 Schritte

• Tell: Rundes Icon + Nummer 1, 2, 3 + kurzer Text, immer drei Schritte, immer die gleiche Form.
• Why: Der echte Prozess des Produkts ist selten eine ordentliche Dreischrittliste. Die Vorlage zwingt den Prozess in ihre Form, nicht umgekehrt.
• Fix: Präsentiere den Prozess so, wie er tatsächlich ist (R-05). Drei Schritte mit runden Icons ist in Ordnung, wenn es der tatsächliche Prozess ist; ansonsten verwende die Form, die der echte Workflow annimmt, einschließlich zwei Schritten oder fünf.

"Trusted By"-Logo-Leiste

• Tell: Eine Reihe generischer Firmenlogos direkt unter dem Hero.
• Why: Es ist ein Vertrauensanspruch ohne Beweis: generische Logos, keine echten Kunden genannt, kein Nutzungsnachweis.
• Fix: Zeige nur echte, überprüfbare Logos (R-18, R-36, C-5). Wenn das Produkt noch keine solchen Kunden hat, erfinde keine Logo-Leiste. Echter sozialer Beweis schlägt jeden generischen.

"Am beliebtesten"-Preiskarte

• Tell: Die mittlere Preisstufe wird immer mit einem Capsule-Badge hervorgehoben.
• Why: Es ist das Standardmuster, also ist es keine Entscheidung. Wenn jeder Preisabschnitt es tut, hört die hervorgehobene Stufe auf, etwas zu bedeuten.
• Fix: Hebe die Stufe hervor, die tatsächlich den Zielen des Produkts dient, und dokumentiere warum (R-31). Wenn keine Stufe Betonung verdient, hebe keine hervor.
• Drei Spalten sind Teil des Tells: Preisgestaltung als drei Stufen, unabhängig von der tatsächlichen Struktur, die mittlere hervorgehoben. Diese Form ist der Standard, also ist sie keine Entscheidung (R-05). Verwende so viele Stufen, wie das Produkt wirklich hat, und hebe die hervor, die ihm dient.

Demo ohne Produkt

• Tell: Die Seite verkauft ein Produkt, das nie funktionierend gezeigt wird: keine echte Demo, keine AGB, keine Datenschutzerklärung, nur Versprechungen.
• Why: Es ist eine Demo, die die Kleidung eines Produkts trägt. Jede Behauptung ist Vertrauen ohne Hintergrund, und die fehlenden Rechtsseiten sind der leise Hinweis, dass noch nichts Reales existiert.
• Fix: Zeige das echte Produkt funktionierend oder sage ehrlich, dass es noch nicht ausgeliefert ist (R-38, C-5). Wenn die Seite nach Anmeldungen oder Zahlung fragt, müssen die AGB und Datenschutzerklärung existieren. Ein ehrliches "Coming Soon" schlägt eine überzeugende Demo.

4-Spalten-Vorlagen-Footer

• Tell: Produkt / Unternehmen / Ressourcen / Rechtliche Spalten ohne Variation.
• Why: Die Spalten existieren, weil Vorlagen sie haben, nicht weil die Seite so viele Linkgruppen hat.
• Fix: Strukturiere den Footer um das, worauf das Produkt tatsächlich verlinkt (R-05). Eine einzelne Spalte mit Links kann nützlicher sein als vier halbleere.

Einheitlicher Abschnittsrhythmus

• Tell: Jeder Abschnitt ist zentrierter Titel + Untertitel + identisches Kartenraster, ohne Variation.
• Why: Identische Komposition lässt Abschnitte verschwimmen, und die Seite wirkt repetitiv und flach.
• Fix: Variiere die Komposition mit dem RHYTHM-Regler (R-05). Wechsle zwischen textlastigen und visuellen Abschnitten, asymmetrischen und symmetrischen Layouts. Eine Seite, in der jeder Abschnitt der gleichen Vorlage folgt, ist eine Seite, die von einer Vorlage entworfen wurde.

Dekorative Elemente

Generische KI-Icons

• Tell: Funkeln, Stern, Magie, Blitz, Diamant, Würfel, Roboter oder KI-Orb als Feature-Icons.
• Why: Diese Glyphen sind das generische Vokabular von "KI-Produkt". Sie kommunizieren nichts über das spezifische Feature.
• Fix: Verwende Icons, die wirklich relevant für den Inhalt sind, mit dokumentierter Relevanz, wenn die Glyphe generisch ist (R-04). Wenn kein passendes Icon existiert, verwende keins. Die Feature-Bezeichnung leistet die Arbeit.

Lucide-Icons

• Tell: Jedes Icon stammt aus derselben dünnstrichigen, abgerundeten Bibliothek (Lucide oder ein visueller Klon), sodass alle Icons einen erkennbaren Look teilen.
• Why: Eine einzige Standard-Icon-Bibliothek macht die Icons aller KI-Seiten identisch, sodass die Icons aufhören, dir etwas über das Produkt zu sagen. Die Glyphen mögen relevant sein; der einheitliche Bibliotheks-Look ist der Tell.
• Fix: Das Icon-Set ist eine visuelle Wahl, kein Standard (R-04). Wähle Icons zuerst nach Relevanz; entscheide dann, ob die Strichstärke und der Stil der Bibliothek zum Charakter des Produkts passen. Zwei Icons, die "gleich aussehen", können dennoch wie deine wirken, wenn das Set eine Entscheidung und kein Import ist.

Emoji als Dekoration

• Tell: Wörtliche Emojis, die im Text, in Überschriften, Badges und Buttons verstreut sind: 🚀 in einer Schlagzeile, ✅ neben jedem Feature-Bullet, 🔥 auf einem CTA, 📈 über einem Diagrammtitel.
• Why: Emoji ist die lauteste Abkürzung für "dies wurde generiert, nicht geschrieben". In einer UI konkurriert es mit dem Inhalt um Aufmerksamkeit und ebnet die Stimme des Produkts auf den gleichen fröhlichen Standard wie jede andere KI-Seite ein.
• Fix: Entferne Emojis aus UI-Texten. Wenn ein Konzept eine Markierung braucht, verwende ein echtes, relevantes Icon mit dokumentiertem Grund (R-04) oder gar keine Markierung. Der Text trägt die Bedeutung; das Emoji fügt nichts hinzu.

Kleine Pfeile auf jedem Button

• Tell: → oder ↗ auf fast jedem Button als reine Dekoration platziert.
• Why: Der Pfeil wird zu einem Muster, nicht zu einem Signal. Wenn jeder CTA einen hat, zeigt keiner auf etwas Bestimmtes.
• Fix: Pfeile sind nicht die Standard-Identität für Buttons (R-08). Behalte sie für die Aktion, die wirklich von einem Richtungshinweis profitiert, proportional dimensioniert, mit dokumentiertem Zweck.

Farbiger linker Streifen

• Tell: Ein dünner farbiger vertikaler Balken am linken Rand von Karten, Listenzeilen oder Abschnittsüberschriften, verwendet als Dekoration.
• Why: Der Streifen fügt Farbe hinzu, ohne Bedeutung zu verleihen. Es ist der billigste Weg, eine Karte "designed" aussehen zu lassen, also erscheint er überall und sagt nichts.
• Fix: Der Streifen ist Dekoration; er muss Information tragen oder weg (R-01, R-31). Ein linker Rand, der einen echten Status markiert (aktiv, Warnung, neu), ist ein Signal. Ein Streifen, der existiert, um designed auszusehen, ist ein Standard.

KI-Capsule-Badges

• Tell: Pillenform, dünner Rand, Glanz, kleiner Punkt, Großbuchstaben, mit "AI Powered", "Beta", "Neu".
• Why: Die Kombination aus Capsule-plus-Glanz-plus-Punkt ist ein selbstreferenzielles Badge, das sagt "von KI gemacht, über die Tatsache, von KI gemacht zu sein".