AI-Slop im Design: 22 Tools und 3 Stacks gegen Einheitsbrei (2026)

AI-Slop ist 2026 der Einheitslook KI-generierter Websites: ein Hero mit zentriertem Titel, Gradient-Blob links, Inter als Schrift, drei identische Karten. Öffne zehn Landingpages aus Claude, Cursor oder Lovable — du kannst sie nicht unterscheiden. Dieser Guide zeigt die Gegenmittel: 22 Tools, Skills und Methodiken, sortiert nach Wirkung, plus drei fertige Stacks.

Die Daten stammen aus dem im Juli 2026 erschienenen Anti-Slop-Guide des Designers Edvard Grishin (Futura AI), der jedes Tool selbst installiert und auf Kundenprojekten getestet hat — Sterne- und Installationszahlen per GitHub-API geprüft am 7. Juli 2026. Wir haben die Karte für den deutschsprachigen Vibe-Coding-Einsatz aufbereitet.

Warum Claude, Cursor und Lovable denselben Look generieren

Sprachmodelle haben auf Millionen Landingpages trainiert — und geben ohne Gegensteuerung deren statistischen Median zurück. Der Prompt "mach einen schönen, cleanen Auftritt" ruft exakt diesen Durchschnitt ab: Das ist kein Bug, sondern Mathematik. Grishins Formel bringt es auf den Punkt: Ohne Skills liefert das Modell Slop, mit Skills eine brauchbare Arbeitsversion — das Werkzeug ohne Regeln fällt immer ins Mittelmaß. Diese Slop-Muster erkennst du auf einen Blick:

• Ein Hero über die volle erste Sektion, Titel und einzelner Button zentriert
• Gradient-Blob links oder oben — taucht laut Guide in ~90 % der AI-Generierungen auf
• Inter, Roboto, Arial oder Space Grotesk in Produktion — die vier Default-Schriften
• Drei identische Karten mit gleichem Padding und Icon oben ("Features in drei Spalten")
• Grauer Text auf Weiß statt echter Palette mit semantischen Akzenten
• 8-px-Schatten auf allem, Animationen über width/height statt transform/opacity
• Zentrierter CTA ohne visuelle Hierarchie — kein Kontrast, keine Priorität

Die drei Anti-Slop-Mechaniken

Alle 22 Tools dieses Guides arbeiten mit einer von drei Mechaniken. Verbote: Slop-Muster werden auf Regel-Ebene geblockt — der Anthropic Frontend Design Skill verbietet Inter/Roboto/Arial direkt im Code, als harte Sperre statt Empfehlung. Brief vor Code: Das Modell bekommt Spezifikation und Design-System, bevor die erste Zeile entsteht — per DESIGN.md, importierten Design-Tokens oder expliziter Richtungswahl (Brutalist, Editorial, Retro-Futuristic, Glassmorphism, Swiss). Deterministische Detektoren: 44 Regeln in Impeccable fangen veraltetes Easing, generische Schatten und redundante Karten automatisch — nicht "das Modell versteht es schon", sondern Prüfungen, die immer greifen. Die dritte Mechanik ist die unterschätzteste: Ein Detektor kann nichts "vergessen", ein Modell schon.

Die Werkzeugkarte: 15 Tools in 5 Zonen

Zone	Tools	Kern
Plattformen (Canvas + AI)	Claude Design, Open Design, Open-pencil, SuperDesign, Open Lovable	Design-System → Canvas → Code → Deploy
Skills für Claude Code	Anthropic Frontend Design, Impeccable, Taste Skill, Designer Skills, ux-ui-agent-skills	Anti-Slop-Regeln direkt im CLI-Agenten
Standalone	AI Website Cloner, 21st.dev	Klonen, Komponenten-Marketplace
Bibliotheken	Motion, Transitions.dev, termcn	Animationen, Transitions, Terminal-UI
Methodik	Refactoring UI, Anthropic-Skills-Doku, awesome-design-md	Das Fundament unter allen Skills

Claude Design vs. Open Design: das Duell vom 17. Juni

Zwei Plattformen, zwei Philosophien — und ein bemerkenswertes Datum: Beide veröffentlichten ihr Major-Update am 17. Juni 2026, am selben Tag. Das ist Positionierung, kein Zufall: Open Design erklärt sich offen zur Alternative und kontert jeden Anthropic-Release.

Claude Design wurde mit dem Juni-Update vom Mockup-Generator zum Arbeitswerkzeug: Die Slash-Command /design-sync zieht die Design-System direkt in Claude Code, Design-Systeme lassen sich aus GitHub-Repos importieren (das Modell liest die Tokens statt zu raten), der Canvas ist direkt editierbar, exportiert wird nach Figma, Adobe, Canva, Lovable, Vercel und Wix. Der Haken: geschlossene Beta, kein Self-Host, voller Vendor-Lock-in — ohne Claude-Abo läuft nichts.

Open Design (nexu-io) ist der Local-First-Konter: 75.900 GitHub-Sterne, Apache 2.0, 259 Skills ab Werk, 142 Design-Systeme als Referenzen und BYOK — der eigene API-Key funktioniert auf über 22 CLI-Agenten von Claude Code über Cursor bis Aider, auch mit GPT, Gemini oder lokalen Modellen. Läuft komplett offline auf dem Laptop. Dafür ist die UX roher, die Doku hinkt dem Code hinterher, und Brand-Compliance für Teams fehlt.

Kriterium	Claude Design	Open Design
Lizenz	Closed Beta (im Claude-Abo)	Apache 2.0, self-hosted
Modell-Bindung	Nur Claude	BYOK: 22+ CLI-Agenten, beliebige Modelle
Offline	Nein	Ja (Local-First)
Brand Compliance	Ja (Enterprise)	Selbst bauen
Für wen	Teams im Claude-Ökosystem	Privacy-First, NDA-Projekte, OSS-Fans

Grishins Praxis-Verdikt: beide behalten — Kundenprojekte mit NDA laufen lokal auf Open Design, interne Experimente auf Claude Design.

Die 5 Anti-Slop-Skills für Claude Code

Skills im SKILL.md-Format sind ein offener Anthropic-Standard mit Lazy Loading: Der Frontmatter beschreibt, wann ein Skill relevant ist, und nur dann wird er geladen — der Kontext bläht nicht auf. Genau deshalb funktionieren sie besser als System-Prompts. Die fünf wichtigsten:

Skill	Sterne/Installs	Stärke	Schwäche
Anthropic Frontend Design	1 Mio.+ Installationen	Offiziell, kostenlos, harte Font-Sperre, 8 Stacks, 21 Paletten	Nur Basis-Hygiene, kein Tiefen-Audit
Impeccable (Paul Bakaus)	44,1k ★ / 185k Installs	23 Kommandos, 44 deterministische Detektoren, ehrliches /critique	Lernkurve; /polish übersteuert manchmal
Taste Skill (Leon Lin)	59,8k ★	3 Regler (VARIANCE/MOTION/DENSITY), in 30 Min. gelernt, Vercel-Sponsoring	Keine Detektoren, Typografie-Lücke
Designer Skills (M. C. Dean)	1,7k ★	Größte Bibliothek: 239 Skills in 33 Plugins, von einer Designerin kuratiert	Nischig, Qualität uneben
ux-ui-agent-skills (plugin87)	442 ★	DTCG-Tokens, WCAG-2.2-AA/AAA-Autoaudit	Kleine Community, setzt Spec-Wissen voraus

Die Paar-Strategie aus dem Guide: Taste + Impeccable sind keine Konkurrenten, sondern ein Paar — Taste für Tempo und Schnellstart, Impeccable für Tiefe und Review. Darunter der offizielle Anthropic-Skill als Grundlinie, und für Enterprise-Projekte mit Accessibility-Anforderungen ux-ui-agent-skills obendrauf. Interessantes Detail am Rande: Impeccable-Autor Paul Bakaus (Ex-Google, jQuery-UI-Mitschöpfer) hat für sein Ein-Mann-Projekt einen Seed-Round von a16z eingesammelt — Anti-Slop ist 2026 ein Markt.

Standalone-Tools und Bibliotheken: Animationen sind die halbe Miete

Vier Werkzeuge außerhalb des Skill-Formats verdienen den Blick. AI Website Cloner (26,4k ★, MIT) inspiziert live-Websites über echtes Chrome — er liest DOM und Computed Styles statt HTML blind zu parsen, und parallele Builder-Agenten in Git-Worktrees bauen Sektionen gleichzeitig nach. 21st.dev kombiniert einen Komponenten-Marktplatz mit dem Magic MCP für Cursor und Windsurf (8 $/Monat für den Builder): echte Designer-Komponenten statt AI-Generierung, direkt ins Projekt. Motion (32,7k ★) ist das Framer-Motion-Rebranding und der Animations-Standard für React, Vue und Vanilla JS — compositor-freundliche transform/opacity-Animationen ab Werk, denn width/height-Animationen sind Slop in Bewegung. Transitions.dev liefert 21 kuratierte Produktions-Transitions mit eingebautem prefers-reduced-motion — von einem Designer von Hand ausgewählt, als Claude Skill installierbar (npx skills add jakubantalik/transitions.dev). Wer CLI-Tools oder TUIs baut, bekommt mit termcn (Shadcn Labs) das shadcn-Prinzip fürs Terminal auf Ink + OpenTUI.

Das Methodik-Fundament: Refactoring UI, SKILL.md und DESIGN.md

Ohne Methodik bleiben Skills "Magie, die manchmal funktioniert". Drei Primärquellen tragen alles darüber. Refactoring UI von Adam Wathan und Steve Schoger (Tailwind Labs, 99–149 $, 30.000+ verkaufte Exemplare in 8 Jahren) ist der Kanon: Hierarchie über gezielten Größen-Kontrast, echte Paletten mit semantischen Farben, Schatten mit Absicht statt "8 px auf alles", Spacing mit Rhythmus, Typografie mit Pairing-Strategie. Drei der fünf Community-Skills bauen direkt darauf auf. Die Anthropic-Skills-Dokumentation definiert den offenen SKILL.md-Standard: kompatibel über Claude Code, Cursor, Codex und Aider hinweg, versionierbar, kombinierbar (fünf Skills parallel ohne Konflikt dank Lazy Loading), Community-getrieben ohne Anthropic-Gatekeeping. Und awesome-design-md (96,5k ★, MIT) liefert 73 fertige DESIGN.md-Dateien echter Marken — Claude, Stripe, Apple, Figma, Tesla. Der Workflow: Stripe- DESIGN.md ins Projekt legen, "baue die Seite im Stripe-Stil" sagen — das Modell baut nach Spezifikation statt zu raten. Grishins Einordnung: Ohne diesen Brief arbeiten Skills bei etwa 60 % ihres Potenzials, mit bei 95 %.

Drei fertige Stacks für drei Nutzertypen

Stack 1 — Solo-Frontend mit Claude Code: Anthropic Frontend Design Skill als Basis (installieren und vergessen), Impeccable für Audit und Polish obendrauf, Motion für Animationen, Refactoring UI als Nachschlagewerk. Für alle, die keine Zeit haben, ein Design-System von Hand zu pflegen.

Stack 2 — Team auf Claude Pro/Max/Enterprise: Claude Design mit dem Juni-Update, /design-sync zieht das bestehende Design-System aus GitHub, Brand Compliance auf Plattform-Ebene, Impeccable prüft jeden Merge-Request auf Slop, bevor er main erreicht, Transitions.dev als Bewegungs-Standard.

Stack 3 — OSS/Privacy-First: Open Design lokal (NDA-sicher, kein fremdes Cloud-Ufer), Taste Skill für den Schnellstart, ux-ui-agent-skills für DTCG-Tokens und WCAG 2.2 — bezahlt wird pro Token statt pro Abo.

Geschmack trainieren: 4 Quellen für den täglichen Blick

Skills filtern Slop am Ausgang — der zweite Schutzlayer sitzt im Kopf, vor dem ersten Prompt. Vier Quellen für die tägliche Sichtung: recent.design aggregiert die besten aktuellen Arbeiten mehrerer Plattformen (5 Minuten beim Morgenkaffee; nach einem Monat erkennst du Schablonen in 2 Sekunden). bestdesignsonx.com kuratiert stündlich starke Designer von X — Stand Juli 2026 war der Feed allerdings zeitweise leer, vor Nutzung prüfen. hano.so rendert fertige Screens in 30 Sekunden als 3D-Mockup auf iPhone, MacBook oder Watch — sitzt ein Layout auf dem Gerät nicht, stimmt die Hierarchie nicht. Und styles.refero.design ist die Brücke zurück zur Maschine: über 2.000 Design-Systeme echter Produkte (Apple, Notion, Anthropic) in AI-lesbarem Format inklusive fertigem DESIGN.md und Refero MCP für die IDE — der "Brief vor dem Code" zum Kopieren.

Fazit: Richtung wählen, Brief schreiben, Detektoren scharf stellen

Der Kern des Anti-Slop-Prinzips passt in einen Satz: Zwing das Modell, sich vor der ersten Zeile Code auf eine visuelle Richtung festzulegen — und lass deterministische Regeln fangen, was trotzdem durchrutscht. Der Einstieg kostet eine Stunde: offiziellen Anthropic-Skill installieren, ein DESIGN.md aus awesome-design-md ins Projekt legen, Impeccable oder Taste dazu, Motion für die Animationen. Wer tiefer will, liest Refactoring UI — einmal gelesen, ein Berufsleben lang genutzt. Und wer wissen will, wie sich das mit einem kompletten Claude-Code-Workflow verbindet, findet in unseren 50 Claude Code Best Practices die passende Werkzeugkiste drumherum.