Was ist AI Slop? Websites ohne typischen KI-Look

Die meisten KI-generierten Websites erkennt man auf den ersten Blick: derselbe Farbverlauf, dieselben drei Karten, dieselbe Schrift, dasselbe Überschriftenmuster. Dafür gibt es einen Namen: AI Slop. In diesem Artikel zeige ich Ihnen die Symptome, den Grund dahinter und vier Ebenen, auf denen Sie das durchbrechen können — von der Designreferenz bis zum Text.

Dieser Artikel fasst das Video Claude Design Now Builds Beautiful $10,000 Websites (NO AI Slop) von Jack Roberts zusammen und erweitert es. Die Probleme im Hero-Bereich, die Checkliste für die Textprüfung und die Grenze zwischen Inspiration und Kopie sind Ergänzungen dieses Beitrags.

Was ist AI Slop und woran erkennt man ihn?

AI Slop ist das, was generative Modelle mit ihren Standardeinstellungen ausspucken: Ergebnisse, die sich nicht mehr voneinander unterscheiden lassen. Auf Websites sind die Symptome überdeutlich:

• Der Farbverlauf von Indigo nach Violett. Er ist praktisch zur Signatur geworden.
• Genau drei Feature-Karten. Nicht zwei, nicht vier — immer drei.
• Milchglaseffekt und überall derselbe Eckenradius.
• Immer dieselbe Schrift. Die Schrift ist das prägendste Element im Design und zugleich das, über das am wenigsten gesprochen wird.
• Floskelhafte Überschriften. Sätze wie „Bauen Sie die Zukunft schon heute“, die nichts aussagen.
• Unveränderter Text. Die meisten bearbeiten die Bilder, rühren den vom Modell geschriebenen Text aber nie an.

Nehmen Sie diese Liste als Checkliste: Wenn Sie auf Ihrer eigenen Seite drei Punkte abhaken können, fällt es auch den Besuchern auf.

Warum sieht alles gleich aus?

Der Grund ist einfach: Alle geben denselben Prompt ein. Und das Modell erzeugt zur selben Eingabe konsequent dieselbe Ausgabe. Da steckt kein Unvermögen dahinter, im Gegenteil — das ist extrem konsistentes Verhalten.

Der eigentliche Punkt ist: Das Modell weiß von sich aus nicht, was gutes Design ist. Wenn Sie ihm keinen Maßstab geben, produziert es den Durchschnitt der Verteilung, auf der es trainiert wurde. Und dieser Durchschnitt ist genau das, was Sie vor sich sehen.

Daraus ergibt sich auch die Lösung: Hören Sie auf, Prompts zu geben, und geben Sie ein System. Wie man dieses System Stufe für Stufe aufbaut, habe ich in den sieben Stufen des KI-Designs beschrieben.

Ebene 1: Die richtige Referenz wählen

Der erste Schritt besteht darin, Websites zu finden, die in Ihrer eigenen Nische wirklich gut aussehen. Award-Sammlungen, Designgalerien und Branchenübersichten sind genau dafür da. Wenn die Auswahl aus Hunderten Seiten zu mühsam ist, lassen Sie das Modell arbeiten: „Sieh dir diese Liste an und finde die drei Beispiele, die meinem Projekt am nächsten kommen“ liefert in Minuten ein Ergebnis.

Sobald die Referenz steht, wird die Arbeit konkret. Das Modell arbeitet nicht mehr auf ein vages Ziel wie „eine schöne Bildungsseite“ hin, sondern auf einen greifbaren Maßstab. Die Referenz neben die eigene Seite zu legen und die Unterschiede einzeln herauszuarbeiten, ist eine Aufgabe für sich; die habe ich im Design-Audit ausführlich beschrieben.

Eine Warnung: Arbeiten Sie nicht mit einer einzigen Referenz. Wenn Sie nur eine Seite als Vorlage nehmen, wird das Ergebnis eine blasse Kopie davon. Elemente aus mehreren Quellen zu kombinieren, ergibt dagegen eine Sprache, die Ihnen gehört.

Ebene 2: Eine eigene Bildsprache

Die zweite Ebene bricht das Stockfoto-Gefühl. Sobald Sie eigene Figuren, einen eigenen Illustrationsstil und eigene Animationen haben, hebt sich die Seite sofort ab.

Im Video fällt ein Prinzip, das man unterstreichen sollte: Die Aufgabe der KI ist es nicht, die Kreativität zu übernehmen, sondern die Wiederholung im kreativen Prozess. Sie entscheiden, wie die Figur aussieht und wofür die Marke steht; dreißig Varianten davon zu erzeugen, ist Maschinenarbeit. In dem Moment, in dem Sie diese Trennung verlieren, landen Sie wieder beim Durchschnitt.

In der Praxis funktioniert dieser Ablauf: Die Idee für eine Figur oder ein visuelles Motiv bestimmen Sie selbst, die Varianten lassen Sie vom Modell erzeugen, und was Ihnen gefällt, wählen Sie aus und legen es als Asset-Bestand ab. Steht dieser Bestand erst einmal, können Sie dieselbe Figur immer wieder in neuen Szenen erzeugen — daher kommt die Konsistenz. Dieselbe Bestandslogik funktioniert auch bei Icons und Datengrafiken; genau darum geht es im Artikel über Motion Graphics und Icon-Automatisierung.

Ebene 3: Typografie

Die Schrift ist das Element, das die wahrgenommene Qualität mit einer einzigen Änderung am stärksten hebt. Und trotzdem ist es die Stelle, die am meisten vernachlässigt wird.

Ein paar Notizen aus der Praxis:

• Kommen Sie von den voreingestellten Systemschriften weg. Es gibt reichlich kostenlose und wirklich gute Alternativen.
• Sehen Sie sich die Schrift im echten Einsatz an. Nicht auf Musterseiten, sondern auf realen Websites. Das Video empfiehlt dafür Seiten wie Fonts In Use, die Schriften im echten Einsatz zeigen.
• Prüfen Sie unbedingt die Lizenz. Viele Schriften sind für den privaten Gebrauch kostenlos, für den kommerziellen nicht. Bei Kundenprojekten wird das schnell zu einem ernsten Problem.
• Für eine gute Schrift Geld auszugeben, ist eine sinnvolle Investition. Sie verändert die Wahrnehmung des Designs auf einen Schlag.

Wählen Sie danach aus, was Ihre Marke sagen will: Ein seriöses Unternehmensprodukt und eine verspielte Lern-App können nicht dieselbe Schrift verwenden.

Ebene 4: Text — die Stelle, die Sie wirklich verrät

Machen Sie das beste Design und erzeugen Sie die schönsten Bilder: Wenn der Text schlecht ist, kauft trotzdem niemand. Nichts verrät so deutlich, dass eine Seite aus der KI kommt, wie ihr Text.

Das im Video gezeigte System zur Textüberarbeitung stützt sich auf diese Prinzipien:

1. Lass mich nicht nachdenken. Benannt nach Steve Krugs Buch Don't Make Me Think: Besucher sollen keine geistige Mühe aufwenden müssen, um die Seite zu verstehen. Sobald der Satz kompliziert wird, haben Sie verloren.
2. Benennen Sie zuerst den Schmerz. Das Video führt diesen Grundsatz auf den Marketingansatz von Daniel Priestley zurück. Schreiben Sie im ersten Satz nicht, was Ihr Produkt tut, sondern welches Problem des Lesers es löst.
3. Eine Aufforderung pro Bildschirm. Ein Bildschirm, eine Idee, ein Call-to-Action. Wenn Sie zwei gleich gewichtete Buttons hinstellen, wird keiner davon geklickt.
4. Werden Sie konkret. „Schnell und einfach“ sagt nichts. „Einrichtung in 4 Minuten“ sagt etwas.
5. Führen Sie eine Liste verbotener Wörter. Legen Sie Ihre eigene an; Modelle kehren gern immer wieder zu denselben Floskeln zurück.

Im Beispiel des Videos läuft der Text einer erfundenen, Duolingo-ähnlichen App, die KI beibringt, durch dieses System. Einige der vorgeschlagenen Umformulierungen:

• Statt „Jetzt loslegen“ → „Starte deine erste Lektion“
• Statt „5 Minuten, wo immer Sie sind“ → „Auch die 5 Minuten im Bus zählen“
• Statt „Der einfache Weg, KI zu lernen“ → „Alle benutzen KI, nur die wenigsten benutzen sie gut“

In allen drei Fällen ändert sich dasselbe: Das abstrakte Versprechen verschwindet, und an seine Stelle tritt eine konkrete Szene, die der Leser sich im eigenen Alltag vorstellen kann.

Wenn Sie den Text vom Modell schreiben lassen, schicken Sie die Ausgabe durch eine zweite Runde und verlangen Sie ausdrücklich: Klischees streichen, jeden Satz konkret machen, die Handlungsaufforderungen spezifisch formulieren. In einem einzigen Durchgang entsteht selten guter Text. Um diese zweite Runde zur festen Gewohnheit zu machen, hilft Ihnen vielleicht eine Kritiker-Schleife.

Der obere Bereich: die Stelle, die am häufigsten misslingt

Ein großer Teil der Entscheidung fällt schon auf dem ersten Bildschirm — und dort sammelt sich der AI Slop am dichtesten. Vier Probleme, die im oberen Bereich immer wiederkehren:

• Das Bild konkurriert mit der Botschaft. Ein großes, bewegtes Bild zieht Aufmerksamkeit, erdrückt aber die Überschrift. Das Bild soll die Botschaft stützen, nicht gegen sie antreten.
• Zwei gleich gewichtete Buttons. Wenn „Kostenlos testen“ und „Demo anfragen“ dasselbe visuelle Gewicht haben, muss der Besucher sich entscheiden — und entscheidet sich meistens für gar nichts. Einer von beiden muss primär sein.
• Die Überschrift beschreibt das Produkt statt das Problem. „Die Projektmanagement-Plattform der neuen Generation“ ist eine Definition; „Wenn dein Team nicht weiß, wer gerade woran arbeitet“ ist ein Haken.
• Zu viel Kleingedrucktes. Drei Zeilen Erklärung, die unter die Überschrift gequetscht werden, leisten weniger als ein einziger klarer Satz.

Ein einfacher Test: Öffnen Sie die Seite drei Sekunden lang, schließen Sie sie wieder und schreiben Sie dann in einem Satz auf, was Sie verstanden haben. Wenn Sie das nicht können, funktioniert der obere Bereich nicht. Noch nützlicher wird der Test, wenn Sie ihn von jemand anderem machen lassen — Ihre eigene Seite kennen Sie ja bereits.

Checkliste für die Textprüfung

Gehen Sie diese Liste durch, bevor ein vom Modell geschriebener Text online geht:

1. Kommt im ersten Satz das Problem des Lesers vor?
2. Enthält jeder Abschnitt genau eine Idee?
3. Gibt es konkrete Zahlen, Zeitangaben oder Beispiele — oder sind es nur Adjektive?
4. Sind die Handlungsaufforderungen spezifisch („Starte deine erste Lektion“) oder generisch („Loslegen“)?
5. Wie viele Wörter aus Ihrer eigenen Verbotsliste haben es durchgeschafft?
6. Gibt es einen Satz, bei dem Sie beim lauten Vorlesen stolpern?

Punkt sechs klingt banal, erwischt aber eine Menge. KI-Text sieht geschrieben oft ordentlich aus und klingt laut gelesen künstlich; das merken Sie nur, wenn Sie ihn tatsächlich vorlesen.

Die Grenze zwischen Inspiration und Kopie

Diese Methode kann leicht in eine falsche Richtung kippen. Die Website einer Marke als Referenz zu nutzen, ist eine Sache; ihre visuelle Identität eins zu eins nachzubauen, eine ganz andere.

Der Maßstab, den ich empfehle: Was Sie aus der Referenz übernehmen, muss ein Prinzip sein, kein Asset. Den Rhythmus der Weißräume, den Umgang mit Kontrast, das Bewegungsgefühl — all das dürfen Sie mitnehmen. Sobald Sie Bildsprache, Palette und Typografie zusammen übernehmen, bauen Sie nicht mehr Ihre eigene Marke auf, sondern verwässern die eines anderen. Neben dem rechtlichen Risiko funktioniert das auch geschäftlich nicht — an die zweite Version erinnert sich niemand. Auch das Video betont, dass Duolingo nur als Demonstrationsreferenz dient und ein echtes Projekt mehrere Designs mischen sollte.

Kurz gefasst

AI Slop ist kein Talentproblem, sondern ein Eingabeproblem. Das Modell liefert den Durchschnitt, weil Sie ihm eine durchschnittliche Anweisung geben. Wenn Sie alle vier Ebenen überarbeiten — Referenz, Bildsprache, Typografie und Text — sieht das Ergebnis nicht mehr nach KI-Produktion aus, sondern nach Ihrer Arbeit.

Häufig gestellte Fragen

Ist AI Slop nur ein visuelles Problem?

Nein. Der sichtbarste Teil ist visuell, der teuerste ist der Text. Eine Seite mit durchschnittlichem Design kann mit gutem Text verkaufen; eine Seite mit perfektem Design und Floskeltext kann es nicht.

Löst ein Designsystem AI Slop von allein?

Zum großen Teil ja, denn ein System ersetzt die Voreinstellungen durch Ihre eigenen Entscheidungen. Wenn Sie das System allerdings aus einer generischen Ausgabe ableiten, machen Sie die Generik dauerhaft. Sorgen Sie erst für ein Ergebnis, das Ihnen gefällt, und bauen Sie dann das System darauf auf.

Wie wähle ich eine Schrift aus?

Beginnen Sie beim Ton der Marke, nicht bei der Schrift. Beschreiben Sie Ihr Produkt mit drei Adjektiven und suchen Sie dann Schriften, die zu diesen drei Adjektiven passen. Und testen Sie unbedingt mit Ihrem echten Text — eine Schrift, die im Mustersatz gut aussieht, kann in Ihrer Überschrift danebenliegen.

Darf man kostenlose Schriften kommerziell einsetzen?

Manche ja, manche nein. Setzen Sie keine Schrift in einem Kundenprojekt ein, ohne den Lizenztext gelesen zu haben. Das ist einer der Fehler, deren Korrektur im Nachhinein am teuersten wird.

Quelle

• Jack Roberts, Claude Design Now Builds Beautiful $10,000 Websites (NO AI Slop) (YouTube, August 2026). Die Symptome von AI Slop, der Ansatz mit vier Ebenen, die Textprinzipien und die Beispielumformulierungen beruhen auf diesem Video; die Probleme im Hero-Bereich, die Checkliste für die Textprüfung und die FAQ sind Ergänzungen dieses Artikels.