Zum Inhalt springen
Codex DesignBETA

Taste Skill vs. Impeccable vs. UI UX Pro Max: Welcher Design-Skill macht KI-UIs weniger generisch?

Bitte einen KI-Coding-Agenten um eine Website, und du bekommst oft dieselbe Seite: ein lila Verlauf, ein Pill-Badge, drei identische Karten. Design-Skills sind die beliebteste Abhilfe, und die besten haben inzwischen jeweils über 100.000 GitHub-Sterne. Sie arbeiten allerdings sehr unterschiedlich. Diese Anleitung vergleicht sie anhand von Quellcode und Dokumentation, mit Stand 6. November 2026, damit du den wählst, der zu deinem Projekt passt.

Aktualisiert am 7. November 2026 · 10 Min. Lesezeit

Die kurze Antwort

  • Für eine neue Marketing- oder Firmenwebsite: Taste Skill. Er teilt dir eine Art Direction aus einer kuratierten Bibliothek zu und prüft die Seite in einem echten Browser.
  • Um eine bestehende UI oder eine App bzw. ein Dashboard zu verbessern: Impeccable. Er bietet 24 fokussierte Befehle, einen Detektor, den du in CI laufen lassen kannst, und Referenzen für iOS und Android.
  • Um ein Designsystem für ein Produkt auf jeder Plattform zu wählen: UI UX Pro Max. Es durchsucht eine Datenbank mit Stilen, Paletten und Schriftpaarungen, darunter SwiftUI, Jetpack Compose, React Native und Flutter.
  • Die leichteste Option: frontend-design von Anthropic, eine einzige Datei mit Anweisungen.
  • Ergänzungen, kein Ersatz: die Skills von Emil Kowalski für Motion und die web-design-guidelines von Vercel, um Barrierefreiheit und UX-Details zu prüfen.

Nutze jeweils nur einen Taste-Skill. Ihre Regeln widersprechen sich (einer empfiehlt einen Stil, den ein anderer verbietet), deshalb machen zwei gleichzeitig die Ergebnisse unberechenbarer, nicht besser.

Warum KI-UIs alle gleich aussehen

Ein Modell, das ohne Richtung um eine Seite gebeten wird, liefert den Durchschnitt der Seiten, die es gesehen hat. Jede Korrekturrunde wird dann zum nächsten Standard: Lila Verläufe und Inter wichen einem cremefarbenen Hintergrund mit Serifen-Überschrift und einem terrakottafarbenen Akzent, und sowohl der Skill frontend-design von Anthropic als auch Impeccable markieren diese Kombination inzwischen ebenfalls als Erkennungszeichen. Ein guter Design-Skill gibt dem Agenten vor dem Bauen eine Richtung und eine Möglichkeit, das Ergebnis zu prüfen. Die Muster selbst findest du in Der KI-Look im UI-Design – und wie du ihn vermeidest.

Auf einen Blick

SkillAnsatzPlattformenVoraussetzungenGitHub-Sterne
Taste Skill 2.5Teilt Richtung, Palette und Schriften aus Bibliotheken zu; prüft die Seite in einem BrowserFirmen- und Marketing-WebsitesNode.js 22+, Chrome~111K
Impeccable 4.8Designvokabular aus 24 Befehlen, dazu ein regelbasierter DetektorWeb, Apps, Dashboards, iOS und AndroidNode.js; lädt eine kleine Engine herunter~104K
UI UX Pro Max 2.15Durchsucht eine Datenbank, um ein Designsystem zu empfehlenWeb, Mobile (SwiftUI, Compose, React Native, Flutter), DesktopPython 3~146K
Anthropic frontend-designEine Datei mit Anweisungen zur Art DirectionWebNichtsTeil von anthropics/skills; über 1,1 Mio. Installationen

Sternzahlen und Versionen: Stand 6. November 2026. Alle vier sind kostenlos und Open Source: Taste Skill und UI UX Pro Max unter MIT, Impeccable und frontend-design unter Apache 2.0.

Taste Skill

Taste Skill von Leonxlnx ist der bekannteste „Anti-Slop“-Skill (siehe unser Taste-Skill-Tutorial). Version 2.5.0, veröffentlicht am 4. November 2026, ist ein kompletter Neubau mit Fokus auf Firmen- und Marketing-Websites.

So funktioniert er. Er ordnet das Projekt nach Art des Unternehmens ein und teilt dann Palette, Schriftpaarung und Hero-Layout aus kuratierten Bibliotheken zu (seine Regel lautet „zuteilen, nie nach Geschmack wählen“), mit einem Verlauf, damit sich Seiten nicht wiederholen. Er liefert echte Fotos mit Bildnachweisen, Markenicons und Abschnitts-Layouts, und ein Skript prüft die Seite in Headless Chrome in vier Breiten gegen mehr als 100 Regeln.

  • Stark bei: markanten ersten Entwürfen für Websites, mit echten Assets und einer Prüfung im Browser.
  • Beachte: Er ist groß (etwa 36 MB) und lädt vor der ersten Seite rund 140 KB an Anweisungen. Version 2.5 hat die App-Screen-Pipeline aus 2.1 gestrichen, und manche Entscheidungen verbietet er komplett, etwa Violett. Die Projekt-Website beschreibt noch immer Version 2.1.
# Codex
codex plugin marketplace add Leonxlnx/taste-skill
codex plugin add taste-skill@taste-skill

# Claude Code
/plugin marketplace add Leonxlnx/taste-skill
/plugin install taste-skill@taste-skill

Die älteren Stil-Skills (soft, minimalist, brutalist, gpt-taste) sind nach Leonxlnx/taste-skill-classics umgezogen.

Impeccable

Impeccable von Paul Bakaus ging aus dem Skill frontend-design von Anthropic hervor und ist zu einem vollständigen Toolkit gewachsen (siehe unser Impeccable-Tutorial).

So funktioniert er. Statt eines langen Durchlaufs gibt er dem Agenten ein Designvokabular aus 24 Befehlen, etwa bolder, quieter, typeset, layout, critique, audit, polish und adapt, die du jeweils auf einen Screen oder eine Komponente anwendest. Sein Detektor prüft 62 Regeln (31 für KI-Slop, 31 für Qualität), ohne ein Modell aufzurufen, und läuft über die Kommandozeile oder in CI: npx impeccable detect src/.

  • Stark bei: eine bestehende UI Schritt für Schritt zu verbessern; Apps und Dashboards ebenso wie Websites; native Vorgaben für iOS und Android; eine messbare Checkliste.
  • Beachte: mehr bewegliche Teile, darunter ein Ordner .impeccable/, ein Editor-Hook und eine heruntergeladene Engine. Lies die Hinweise zu Hooks und Live-Modus in der README, bevor du sie aktivierst, denn beide können handeln, ohne vorher zu fragen.
npx impeccable install
# then, in Codex:   $impeccable init
# in Claude Code:   /impeccable init

Bestätige in Codex nach der Installation den Projekt-Hook unter /hooks.

UI UX Pro Max

UI UX Pro Max von nextlevelbuilder ist der Skill mit den meisten Sternen unter den dreien, und der mit dem eigenständigsten Ansatz (siehe unser UI-UX-Pro-Max-Tutorial).

So funktioniert er. Er ist eine durchsuchbare Datenbank statt eines Regelwerks: 80 Stile, 192 Produkttypen, 192 Paletten, 74 Schriftpaarungen und Richtlinien für 22 Stacks. Beschreibe dein Produkt, und er liefert ein Muster, einen Stil, eine Palette, Schriften, die Anti-Patterns, die du in deiner Branche vermeiden solltest, und eine Checkliste für die Abnahme, und kann das Ergebnis als Designsystem-Datei speichern.

  • Stark bei: schnell ein stimmiges Designsystem zu wählen; die größte Plattformabdeckung, von Web über SwiftUI, Jetpack Compose, React Native und Flutter bis Desktop; geringe Kosten für den Kontext, weil der Agent Daten abfragt, statt sie zu laden.
  • Beachte: Es gibt keine visuelle Prüfung des Ergebnisses, und manche Looks, die andere Skills verbieten, etwa Glassmorphism, behandelt er als normale Stile. Die Ergebnisse hängen davon ab, wie du das Produkt beschreibst.
npm install -g ui-ux-pro-max-cli
uipro init --ai codex    # or: uipro init --ai claude

Anthropic frontend-design

Der Skill frontend-design von Anthropic ist eine einzige Datei mit etwa 1.500 Wörtern. Er bittet den Agenten, das Design im Thema zu verankern, Farben und Schrift vor dem Programmieren zu planen, den Plan mit „dem generischen Standard, den du für jede ähnliche Seite erzeugen würdest“ zu vergleichen und die eigenen Screenshots zu kritisieren. Er nennt fünf Gruppen von KI-Standards, die es zu vermeiden gilt, vom Look aus Creme, Serifen und Terrakotta bis zum generischen SaaS-Kartenset.

  • Stark bei: ein kleiner, offizieller Ausgangspunkt, der dein Briefing nie überschreibt.
  • Beachte: keine Tools oder Prüfungen; er verlässt sich auf das Urteilsvermögen des Modells und sagt wenig zu mobilen Apps.
# Claude Code
/plugin install frontend-design@claude-plugins-official

# Codex and other agents
npx skills add https://github.com/anthropics/skills --skill frontend-design

Ergänzungen, die du kennen solltest

  • Die Skills von Emil Kowalski (npx skills@latest add emilkowalski/skills): 17 Skills, die vor allem um Motion und Feinschliff gehen, etwa Easing, Springs und wann man nicht animieren sollte. Sie legen weder Farben noch Schriften noch Layout fest, kombiniere sie also mit einem Taste-Skill.
  • Die web-design-guidelines von Vercel (npx skills add vercel-labs/agent-skills): ein Review-Skill, der mehr als 100 Regeln zu Barrierefreiheit, Fokus, Formularen und Typografie prüft und Probleme nach Datei und Zeile meldet. Er lädt seine Regeln beim Ausführen von GitHub.
  • baseline-ui von ibelick (npx skills add ibelick/ui-skills): eine kurze Liste mit Must- und Never-Regeln für Tailwind- und React-Projekte.

pretty-ui (unser eigener Skill)

pretty-ui ist der Skill, den wir bei Codex Design gebaut haben. Lies diesen Abschnitt mit diesem Wissen. Er macht aus den Tipps unter „Bessere Ergebnisse“ einen geführten Ablauf: Der Agent baut drei echte Richtungen für deinen Screen mit deinen Inhalten, öffnet sie nebeneinander, speichert die gewählte als DESIGN.md, wendet sie Schritt für Schritt an und prüft das Ergebnis auf KI-Erkennungszeichen (violette Verläufe, Verlaufstext, Glassmorphism, Emoji-Icons, Füllwörter, Abstände außerhalb des Rasters und mehr).

  • Stark bei: Du wählst den Stil, nicht der Agent; eine bestehende Marke bleibt erhalten; spätere Screens bleiben einheitlich. Er deckt Websites, Web-Apps und mobile Apps (React Native, SwiftUI, Compose, Flutter) ab und bringt die 24 Systeme aus unserer Design-System-Bibliothek mit.
  • Achte auf: Er ist neu (veröffentlicht am 7. November 2026) und hat noch keine Erfolgsbilanz. Die Prüfung besteht aus einfachen Regeln und ersetzt keinen Blick auf den Screen.
# Codex
codex plugin marketplace add ummydev/pretty-ui
codex plugin add pretty-ui@pretty-ui

# Claude Code
/plugin marketplace add ummydev/pretty-ui
/plugin install pretty-ui@pretty-ui

# Other agents
npx skills add ummydev/pretty-ui

Er ist kostenlos und Open Source unter MIT.

Die Erkennungszeichen, bei denen sie sich einig sind

MusterTaste SkillImpeccableUI UX Pro Maxfrontend-design
Lila oder violette VerläufeVerbotenMarkiertJe nach Branche markiertAls Dekoration markiert
Emojis als IconsVerbotenVerbotenAuf der Checkliste—
Reihen identischer Karten—Markiert—Markiert
Kleine Versalien-Labels über ÜberschriftenVerbotenVerboten—Markiert
Creme, Serifen und Terrakotta—Markiert—Markiert
Glassmorphism—Als Dekoration verbotenAls Stil im Angebot—

Ein Strich bedeutet, dass die aktuellen Anweisungen des Skills das Muster nicht direkt behandeln.

Die Listen ändern sich laufend. Inter, Fraunces, Geist und Plus Jakarta Sans stehen alle auf der Liste überstrapazierter Schriften von Impeccable, und ältere Versionen von Taste Skill haben einige davon empfohlen. Betrachte jede Liste als Prüfwerkzeug, nicht als Geschmack.

Bessere Ergebnisse mit oder ohne Skill

  1. Gib eine Richtung vor, bevor der Agent baut. Ein Designsystem mit benannten Farben, Schriften, Radius und Abständen schlägt „mach es modern“. Wähle eines aus unserer Designsystem-Bibliothek oder schreibe deine eigene DESIGN.md.
  2. Bitte um drei Richtungen, nicht um eine. Generische Ergebnisse entstehen, wenn man den ersten Entwurf akzeptiert. Vergleiche einige Richtungen nebeneinander und wähle. pretty-ui erledigt das für dich und öffnet sie nebeneinander.
  3. Prüfe mit einer Checkliste. Lass einen Detektor laufen oder geh die Erkennungszeichen des KI-Looks selbst durch, und behebe die drei größten Probleme, bevor du feinschleifst.

Häufige Fragen

Was ist besser, Taste Skill oder Impeccable?

Für eine neue Marketing-Website liefert Taste Skill den stärkeren ersten Entwurf mit echten Assets. Für eine bestehende UI, eine App oder ein Dashboard passt Impeccable besser: Er arbeitet Befehl für Befehl und deckt native Mobile-Plattformen ab.

Funktionieren diese Skills in Codex?

Ja. Taste Skill und frontend-design lassen sich wie oben gezeigt in Codex installieren, Impeccable über npx impeccable install und $impeccable init, UI UX Pro Max mit uipro init --ai codex.

Welcher ist am besten für mobile Apps?

Impeccable hat Referenzen für iOS und Android, und UI UX Pro Max deckt SwiftUI, Jetpack Compose, React Native und Flutter ab. Taste Skill 2.5 konzentriert sich auf Websites.

Sind sie kostenlos?

Ja. Alle sind Open Source und kostenlos; du zahlst nur für die Nutzung des Agenten.

Weiterlesen

Ein unabhängiges Plugin für Codex. Nicht mit OpenAI verbunden und nicht von OpenAI unterstützt.