krutikkkkkkkkk/web-design-deslop

Web Design Deslop

„KI-Slop“ im Webdesign ist nicht eine einzige schlechte Entscheidung. Es ist der Durchschnitt von einer Million Landingpages: der Lila-rosa Farbverlauf, der zentrierte Hero mit Badge-Pille und zwei Buttons, die drei gleich großen Feature-Karten mit getöntem Icon-Quadrat, die Glaskarten auf fast schwarzem Hintergrund, der Text, der „Nahtlose Workflows freischalten“ sagt. Jedes Element für sich ist in Ordnung. Zusammen ergeben sie eine Seite, die zu jedem Unternehmen gehören könnte, und damit zu keinem.

Diese Fähigkeit erledigt drei Aufgaben:

1. Audit einer bestehenden Seite, eines Mockups oder einer Codebasis – mit konkreten Korrekturen für die aufgedeckten „Slop“-Merkmale.
2. Anleitung für einen neuen Bau, damit der „Slop“ gar nicht erst entsteht.
3. Umschreiben von Texten, die sich KI-generiert anhören.

Lies references/tells.md (visuelle, Layout-, Bewegungs- und Tailwind-Indikatoren mit dem jeweiligen Austausch), wann immer du ein Audit durchführst oder baust. Lies references/copy.md, wenn Überschriften, Zwischenüberschriften, Feature-Beschreibungen oder CTAs geschrieben oder überprüft werden.

Der eine Test, der zählt

Der Austausch-Test. Ersetze das Logo und den Produktnamen mit denen eines Mitbewerbers. Funktioniert die Seite immer noch? Wenn ja, ist es „Slop“, egal wie poliert. Eine gestaltete Seite ist aus Material aufgebaut, das nur diese Marke hat: ihr Produkt, ihre Leute, ihr Ort, ihr Prozess, ihre tatsächlichen Zahlen, ihre Stimme. Jede der folgenden Bewertungen ist ein Spezialfall dieses Tests.

Zwei unterstützende Tests:

• Der Kneif-Test. Schau leicht unscharf. Wenn du eine zentrierte Säule aus gleich großen, gleichmäßig gestapelten abgerundeten Rechtecken siehst, ist das Layout eine Vorlage. Gestaltete Seiten haben eine ungleichmäßige Silhouette: ein Abschnitt breit, der nächste schmal, eine Sache sehr groß, viele Dinge klein.
• Der Quellen-Test. Woher kommt jede Entscheidung? „Aus dem Material der Marke“ ist gut. „Weil Landingpages so aussehen“ ist der Indikator.

Modus 1: Audit

Anwenden, wenn der Benutzer eine URL, einen Screenshot, ein Figma-Frame, eine Komponente oder ein Repository teilt und eine Überprüfung wünscht oder sagt, es sehe generisch aus.

1. Lies zuerst alles. Bei Code: lies jede Seiten-/Abschnittskomponente sowie die Tailwind-Konfiguration oder das globale CSS. Bei Screenshots: betrachte die gesamte Seite, bevor du schreibst. Kommentiere nicht nur den Hero-Bereich.
2. Führe den Austausch-Test durch und nenne das Urteil in einem Satz. Sei ehrlich und konkret: „Das könnte die Startseite jedes Devtools-Startups sein“ ist nützlicher als eine Punktzahl.
3. Liste die Indikatoren auf, zuerst die schlimmsten. Für jeden: der Indikator, wo er ist (Datei und Zeile oder Abschnittsname), warum er als generiert wirkt, und die Korrektur. Ziehe aus references/tells.md, aber schreibe die Korrektur für diese Seite, nicht den generischen Austausch.
4. Nenne, was behalten werden soll. Jede Seite hat etwas, das funktioniert. Sag es, sonst wirft der Benutzer es mit dem „Slop“ weg.
5. Gib die drei Änderungen mit der größten Wirkung an. Normalerweise: eine typografische Entscheidung, eine Layout-Entscheidung, eine inhaltliche Entscheidung. Wenn der Benutzer nur diese umsetzt, sollte die Seite den Kneif-Test bereits bestehen.

Ausgabeformat für ein Audit:

## Urteil
Ein oder zwei Sätze. Ergebnis des Austausch-Tests. Gesamt: schablonenhaft / gemischt / gestaltet.

## Diese zuerst korrigieren
1. [Indikator] / [Wo] / [spezifische Korrektur]
2. ...
3. ...

## Alles andere, nach Bereich
### Typografie  ### Farbe  ### Layout  ### Komponenten  ### Bewegung  ### Text  ### Inhalt/Bilder
(eine kurze Liste unter jedem; leere Bereiche auslassen)

## Behalten
Was bereits gut ist und warum.

Wenn der Benutzer dich bittet, die Korrekturen anzuwenden, bearbeite die tatsächlichen Dateien. Schreibe die gesamte Seite nicht von Grund auf neu, es sei denn, du wirst darum gebeten; gezielte Bearbeitungen bewahren, was funktioniert, und sind einfacher zu überprüfen.

Modus 2: Bauen ohne „Slop“

Anwenden, wann immer du eine Website, Seite, einen Abschnitt oder eine Vorlage generierst. Die Reihenfolge ist wichtig: früh getroffene Entscheidungen (Konzept, Typografie, Raster) verhindern „Slop“; späte Entscheidungen (diesen Farbverlauf austauschen) verstecken ihn nur.

Bevor du Markup schreibst

1. Finde das rohe Material der Marke. Was hat dieses Unternehmen tatsächlich? Ein Produkt mit einer echten Benutzeroberfläche, einen physischen Ort, ein Material, einen handwerklichen Prozess, einen Gründer mit einer Meinung, einen Datensatz, einen Kundenstamm mit einem Namen. Wähle eine Sache aus und lass sie die Seite bestimmen. Eine Kaffeerösterei kann ihre Seite um die Röstprofile herum aufbauen; ein Autohaus um den Ausstellungsraum; eine Rechnungs-App um eine echte Rechnung. Wenn der Benutzer dir nichts gegeben hat, stelle eine Frage oder nenne die Annahme, auf der du baust, am Anfang deiner Antwort.
2. Wähle eine Layout-Idee, keine Abschnittsliste. Entscheide dich für eine strukturelle Maßnahme der Seite: ein redaktionelles Zweispalten-Layout mit einer festen linken Spalte, ein bildbetonter Rhythmus mit Vollformat-Bildern, eine dichte Index-/Tabellenseite, eine einzige riesige Überschrift mit kleiner unterstützender Schrift, ein horizontaler Produkt-Scroll. Lass dann die Abschnitte daraus entstehen. Beginne nie mit „Hero → Logos → Features → Testimonials → Preise → FAQ → CTA → Footer“. Diese Liste ist die „Slop“-Vorlage; wenn die Seite einige dieser Abschnitte benötigt, sollten sie aussehen wie bei dieser Seite, nicht wie die Liste.
3. Setze die Typografie vor der Farbe fest. Wähle eine Auszeichnungsschrift mit Charakter und eine Arbeitsschrift für den Fließtext; lege eine echte Schriftgrößenskala mit großen Sprüngen fest (z. B. 14 / 18 / 32 / 72 / 140) anstatt Tailwinds sanfter Rampe von text-4xl bis text-6xl. Entscheide die Ausrichtung: linksbündig ist der Standard gestalteter Seiten; alles zentriert ist der Standard generierter Seiten.
4. Leite eine Palette aus dem Material ab. Ein oder zwei Markenfarben, ein Papier- oder Tintenhintergrund und der Akzent, der nur an wenigen Stellen verwendet wird. Farbverläufe sind nicht verboten, aber ein Farbverlauf, der von nichts abgeleitet ist (Lila→Rosa, Blau→Violett), ist derzeit der stärkste KI-Indikator im Web.

Während du Markup schreibst

• Variiere den Rhythmus. Nicht jeder Abschnitt ist py-24 max-w-7xl mx-auto. Lass einen Abschnitt den Container durchbrechen, einen in einem schmalen Maß sitzen, einen eine hauchdünn geteilte Liste anstelle von Karten sein.
• Bevorzuge Linien und Abstände gegenüber Karten und Schatten. Hauchdünne Ränder (border-b border-neutral-200), Weißraum und Schriftgröße vermitteln Hierarchie besser als rounded-2xl shadow-lg-Boxen. Verwende eine Karte, wenn das Objekt tatsächlich ein diskretes Objekt ist (ein Produkt, ein Plan), nicht als Standard-Wrapper.
• Verwende echte Inhalte oder ehrliche Platzhalter. Schreibe die echte Überschrift aus dem Material der Marke. Wenn eine Tatsache unbekannt ist, schreibe {{TODO: echte Zahl}}, anstatt „10.000+ zufriedene Kunden“ zu erfinden. Gefälschte Logos, gefälschte Fünf-Sterne-Bewertungen und runde Statistikzahlen sind inhaltsbezogener „Slop“ und schlimmer als ein fehlender Abschnitt.
• Symbole: wenige oder keine. Emojis sind niemals Symbole. Eine Feature-Liste benötigt kein Lucide-Symbol pro Zeile. Wenn Symbole verwendet werden, sollten sie aus einem einheitlichen Satz stammen, klein sein und gegenüber dem Text zurücktreten.
• Bewegung mit Grund. Kein Staffel-Einblenden von unten für jedes Element. Ein oder zwei bewusste Bewegungen, die mit dem Inhalt verbunden sind (ein Produktbild, das beim Scrollen erscheint, ein Hover, das ein Detail zeigt), wirken gestaltet. Standardübergänge sollten schnell und schlicht sein.
• Bilder: spezifisch statt abstrakt. Keine 3D-Blobs, keine Farbverlaufs-Orbs, keine Stockfotos „Laptop auf Schreibtisch“. Ein echter Screenshot, ein Produktfoto, eine Karte, ein Dokument, eine Textur aus dem Material. Wenn nichts existiert, ist ein gut gesetzter typografischer Block besser als ein Platzhalterbild.
• Prüfe auch auf „Second-Order“-Slop. Die Reaktion auf den Farbverlaufs-Slop hat ihre eigene Vorlage: riesige Serife, Kornüberlagerung, (01) nummerierte Abschnitte, überall Etiketten in Großbuchstaben in Mono, Laufschrift-Reihen, Cursor-folgende Blobs, „© 2026 — Alle Rechte vorbehalten“ in Mono. Es ist genauso erkennbar. Verwende diese Mittel nur, wenn sie von der Marke kommen, nicht weil sie „gestaltet“ signalisieren.

Vor der Übergabe

Führe schnell ein Audit deiner eigenen Ausgabe durch: Austausch-Test, Kneif-Test, überfliege references/tells.md. Korrigiere, was du findest. Erkläre dem Benutzer dann in ein oder zwei Zeilen, warum die Seite so aussieht, wie sie aussieht (aus welchem Material sie gebaut wurde, was die Layout-Idee ist), damit er die Entscheidung beurteilen kann und nicht die Pixel.

Modus 3: Text

Lies references/copy.md. Die Kurzversion: Generierte Texte sind abstrakt, adjektivreich und symmetrisch. Gestaltete Texte sind konkret, spezifisch und ungleichmäßig. Ersetze jede Behauptung durch eine Tatsache, jedes „nahtlos“ durch das, was tatsächlich passiert, jeden Dreier-Satz durch die eine Sache, die zählt. Überschriften sollten sagen, was die Sache ist oder tut, in der Stimme der Marke, in Worten, die der Kunde verwenden würde. Der CTA sagt, was als Nächstes passiert („Die Röstungen sehen“, „Probefahrt buchen“), nicht „Loslegen“.

Kalibrierung

• Nicht jedes Muster ist in jedem Kontext falsch. Eine Preistabelle mit drei Stufen ist für ein Produkt mit drei Stufen korrekt; der Indikator ist das Badge „Am beliebtesten“ auf der mittleren Stufe, wenn nichts dafür spricht. Beurteile nach dem Austausch-Test, nicht nach einer Checkliste.
• Der Benutzer wünscht sich möglicherweise ein konventionelles, vertrauenserweckendes Layout (eine Bank, eine Klinik, ein Autohaus). „Deslop“ bedeutet nicht komisch. Es bedeutet spezifisch. Eine konventionelle Struktur, die aus echtem Material aufgebaut ist, besteht den Test; ein experimentelles Layout voller generischer Karten tut das nicht.
• Wenn der Benutzer ein Designer oder Entwickler ist, gib Korrekturen als Code oder genaue Werte an. Wenn nicht, beschreibe die Änderung in einfacher Sprache und biete an, sie umzusetzen.
• Schmeichle nicht und hacke nicht auf jemandem herum. Ein ehrliches Urteil, eine geordnete Liste und ein Weg nach vorne.