Vibecodierte Oberflächen erkennen Nutzer heute auf den ersten Blick am KI-Slop. Die Produktdesignerin Maya Brennan zerlegt den Look in 18 Merkmale, vom Verlaufs-Button bis zum Neonrahmen auf Schwarz. Der Indigo-Button, den KI-Werkzeuge von Tailwind geerbt haben, verfehlt mit weißer Schrift knapp die Kontrastgrenze der WCAG.
drweb.de als bevorzugte Quelle auf Google hinzufügenQualitätsgeprüfte Inhalte direkt in Google News & DiscoverJetzt hinzufügen
Den Begriff Slop für minderwertige KI-Inhalte aus der Massenproduktion kürte Merriam-Webster zum Wort des Jahres 2025.[3] Maya Brennan, Produktdesignerin aus San Francisco, beschreibt im Magazin UX Collective vom 29. September, wie sich der Effekt in Einzelteile zerlegen und beheben lässt.[1]
Das Wichtigste in Kürze
- Maya Brennan listet 18 Merkmale von KI-Slop auf, darunter Emojis als Icons und Glasoptik.
- Die Indigo-Vorliebe vieler KI-Werkzeuge führte Tailwind-Erfinder Adam Wathan selbst auf die Standardbuttons von Tailwind UI zurück.
- Pauschale Bitten um weniger KI-Look helfen wenig, präzise Vorgaben zu Schrift und Farben wirken.
- Weiße Schrift auf Tailwinds Indigo-500 verfehlt mit 4,47:1 die WCAG-Mindestvorgabe von 4,5:1.
Woran erkennen Sie KI-Slop in einer Oberfläche?
KI-Slop erkennen Sie an Gestaltungsmustern, die einzeln sinnvoll sind, aber ohne Anlass kombiniert auftreten. Brennan zählt 18 davon, von Verlaufs-Buttons mit Glüheffekt über Emojis als Icons bis zu Neonrahmen auf dunklem Grund.[1]
Auf Brennans Spickzettel stehen außerdem schwere Schatten, Karten um jedes Element, dekorative Farbkugeln und unveränderte Farben aus Diagramm-Bibliotheken. Schwer zu benennen bleibt der Effekt, weil die KI echte Komponenten nur formelhaft kombiniert. Besonders stört die Designerin die visuelle Dichte: zu viel Text und zu viele Kennzahlen auf zu wenig Fläche.[1]
Adam Wathan, Erfinder des CSS-Frameworks Tailwind, entschuldigte sich im August 2025 dafür, fünf Jahre zuvor jeden Button in Tailwind UI in bg-indigo-500 gesetzt zu haben, weshalb nun jede KI-Oberfläche indigo sei.[2] Über Tutorials und Vorlagen wanderte der Platzhalter in den Trainingscode der Sprachmodelle. Wie Voreinstellungen den Einheitslook im Webdesign schon vor der KI verstärkten, belegt eine Studie zu über 10.000 Websites.
Wie bekommen vibecodierte Entwürfe Charakter?
Charakter entsteht durch präzise Vorgaben statt pauschaler Bitten. Die Anweisung „Make it look less vibecoded“ änderte an Brennans Quiz-Folie wenig. Konkrete Befehle zu Schrift, Farbpalette, Icons und überflüssigen Effekten nahmen dem Entwurf den KI-Look.[1]
Brennan unterscheidet vier Stufen. Ihr Aufräum-Prompt legte die Schrift Londrina Shadow und eine Palette aus sechs Hexwerten fest und verlangte flache Farben statt Verläufen, ohne Emojis und ohne Schatten. Danach folgt eine Stilreferenz; digitale Stile wie Pixel-Art trifft die KI zuverlässiger als organische. Für eine komplette Website rät Brennan, den Entwurf in Figma von Hand zu gestalten und die KI erst danach bauen zu lassen.[1]
Wie ernst KI-Anbieter das Muster nehmen, zeigt Anthropic. Die Design-Anleitung für den Coding-Agenten Claude Code zählt typische Merkmale generierter Seiten auf, etwa identische Karten mit demselben grauen Schatten und Einblend-Animationen an jedem Abschnitt. Vor dem Bauen soll der Agent seinen Plan gegen diese Liste prüfen.[4] Stripe bindet seine Agenten aus demselben Grund an ein Design-System mit kompletten Vorlagen.
Vom Ein-Zeilen-Prompt zum eigenen Entwurf
Weiße Schrift auf Tailwind-Standardfarben
Ein Prompt ersetzt keine Gestaltungsentscheidung, er überlässt sie den Voreinstellungen anderer Leute.
Markus Seyfferth, Chefredakteur Dr. Web
Was bedeutet KI-Slop für die Barrierefreiheit?
Mehrere Slop-Merkmale kollidieren mit den WCAG. Weiße Schrift auf Tailwinds Indigo-500 erreicht nach Berechnung von Dr. Web ein Kontrastverhältnis von 4,47:1, normaler Text braucht mindestens 4,5:1. Das Türkis Cyan-500 kommt nur auf 2,43:1.[5][7]
Für Online-Shops und viele digitale Dienste zählen solche Werte, seit das Barrierefreiheitsstärkungsgesetz am 28. Juni 2025 in Kraft trat. Technisch verweist das Gesetz über die Norm EN 301 549 auf WCAG 2.1 in Stufe AA. Schwebende Animationen brauchen nach Kriterium 2.2.2 eine Pausenfunktion, sobald sie automatisch starten, länger als fünf Sekunden laufen und neben anderen Inhalten stehen.[6] Auch Glasflächen schwächen den Kontrast, wie die Liquid-Glass-Komponenten zeigten.
Prüfen Sie KI-generierte Oberflächen vor dem Livegang mit einem Kontrastrechner und geben Sie dem Werkzeug Markenfarben und Schrift als feste Vorgabe mit. Welche Programme sich dafür eignen, zeigt der Vergleich der KI-Webdesign-Tools. Brennans Spickzettel taugt zugleich als Abnahmeliste für jede generierte Seite.[1]
Quellen
[1] Maya Brennan, UX Collective: „How to de-slopify your designs“
[2] Adam Wathan auf X: „I’d like to formally apologize for making every button in Tailwind UI bg-indigo-500 …“
[3] Merriam-Webster: „Word of the Year 2025“
[4] Anthropic, GitHub: „Frontend Design“ (Skill für Claude Code)
[5] W3C: „Understanding Success Criterion 1.4.3: Contrast (Minimum)“
[6] W3C: „Understanding Success Criterion 2.2.2: Pause, Stop, Hide“
[7] Tailwind CSS, GitHub: „colors.js“ (Farbpalette Version 3.4)
Mehr Newshunger?
- Ladezustand im Ladezustand: Warum Marcin Wichary bei Figma Tipps im Ladebildschirm ablehnte
- amazing-glass: Liquid-Glass-Webkomponenten mit echter Lichtbrechung für HTML, React und Vue
- Libraries.dev als Agent-Skill: Coding-Agenten lernen sieben UI-Effekte samt Einbauregeln
- Stripe-Designchefin Katie Dill: Wie sich mit KI Anspruch, Qualität und Kunstfertigkeit skalieren lassen
- Die Voreinstellung ist keine Designentscheidung: Warum SaaS-Oberflächen immer gleicher aussehen
- KI-Designer werden: Warum Designer heute ihren eigenen Code ausliefern
