So nutzt du UI UX Pro Max in Codex und Claude Code.
UI UX Pro Max ist einer der meistbesternten Design-Skills auf GitHub. Statt eines festen Stils durchsucht er eine Datenbank mit Stilen, Paletten und Schriftpaarungen und empfiehlt ein Designsystem für dein Produkt. Dieses Tutorial zeigt, wie du ihn in Codex und Claude Code installierst, ein Designsystem erzeugst und speicherst und Ergebnisse bekommst, die nicht generisch aussehen.
Aktualisiert am 6. November 2026 · 7 Min. Lesezeit
Was UI UX Pro Max ist
UI UX Pro Max ist ein Open-Source-Skill (MIT-Lizenz) von nextlevelbuilder. Version 2.15 liefert eine durchsuchbare Datenbank mit 80 Stilen, 192 Produkttypen, 192 Farbpaletten, 74 Schriftpaarungen und Richtlinien für 22 Stacks mit, darunter React, Next.js, Tailwind, SwiftUI, Jetpack Compose, React Native und Flutter.
Wenn du deinen Agenten um UI-Arbeit bittest, beschreibt der Skill dein Produkt seinem Suchskript, das ein empfohlenes Designsystem zurückgibt: ein Seitenmuster, einen Stil, Farben, Schriften, Effekte, Anti-Patterns, die du in deiner Branche vermeiden solltest, und eine Checkliste für die Abnahme vor dem Release. Der Agent baut dann damit. Das Skript nutzt nur die Standardbibliothek von Python und macht keine Netzwerkaufrufe.
Installation
Du brauchst Python 3. Prüfe es mit python3 --version.
In Codex (und den meisten anderen Agenten) installierst du die CLI einmal und fügst den Skill dann deinem Projekt hinzu:
npm install -g ui-ux-pro-max-cli
cd my-project
uipro init --ai codex
In Claude Code nutzt du den Plugin-Marketplace:
/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill
Oder nutze die CLI mit uipro init --ai claude. Mit --global installierst du ihn für jedes Projekt. Später aktualisiert uipro update die Skill-Dateien, und uipro uninstall entfernt sie.
Per Anfrage nutzen
Der Skill aktiviert sich von selbst, wenn du um UI-Arbeit bittest, du brauchst in Codex oder Claude Code also keinen besonderen Befehl. Sei konkret bei Produkt, Zielgruppe und Plattform:
Baue den Startscreen einer mobilen App für [eine Nachbarschaftsbäckerei, die Vorbestellungen annimmt]. Die Kunden sind [vielbeschäftigte Eltern, die fürs Wochenende bestellen]. Nutze den Skill ui-ux-pro-max, um zuerst das Designsystem auszuwählen, zeig es mir und baue erst dann den Screen.
Das Designsystem vor dem Screen sehen zu wollen, ist die nützlichste Gewohnheit mit diesem Skill: So kannst du einen Stil ablehnen, bevor er in jede Seite eingebaut ist.
Ein Designsystem direkt erzeugen
Du kannst das Suchskript auch selbst ausführen. Der Ordner des Skills hängt vom Agenten ab: In Claude Code ist es .claude/skills/ui-ux-pro-max/, und Codex installiert ihn unter .agents/skills/ui-ux-pro-max/.
# Recommend a design system for a product, named "Crumb"
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "bakery pre-order mobile app" --design-system -p "Crumb"
# The same, as Markdown
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "bakery pre-order mobile app" --design-system -f markdown
# Search one area only: styles, typography, charts, UX rules, icons
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "elegant serif" --domain typography
# Guidelines for a specific stack
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "form validation" --stack react
Das eigene Beispiel der README stellt außerdem drei Regler ein, --density, --motion und --variance, für die Dichte, die Animation und die Ungewöhnlichkeit des Ergebnisses.
Das Designsystem für jede Sitzung speichern
Füge --persist hinzu, um das Ergebnis nach design-system/<name>/MASTER.md zu schreiben, und --page, um eine Abweichung für eine einzelne Seite zu ergänzen:
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "SaaS dashboard" --design-system --persist -p "MyApp"
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "SaaS dashboard" --design-system --persist -p "MyApp" --page "dashboard"
Bitte den Agenten von da an, vor dem Gestalten jedes Screens MASTER.md zu lesen. Wenn du auch andere Tools nutzt, lass ihn Farben, Schriften und Abstände in eine DESIGN.md im Stammverzeichnis deines Projekts kopieren und aus der AGENTS.md darauf verweisen, damit jeder Agent demselben System folgt.
Eine bestehende App neu einkleiden
Der Skill ist auch nützlich, um einer bestehenden App einen neuen Look zu geben, ohne sie neu zu schreiben. Nenne den Zielstil und bitte den Agenten, mit deinen vorhandenen Tokens zu arbeiten:
Nutze den Skill ui-ux-pro-max, um dieser App einen [Swiss-, minimalistischen] Look zu geben. Liste zuerst das Framework, die Styling-Bibliothek und die Theme-Tokens auf, die sie schon nutzt. Behalte Struktur und Verhalten jeder Komponente bei. Aktualisiere die vorhandenen Tokens für Farbe, Schrift, Abstand, Radius und Schatten, statt ein zweites Theme anzulegen, ersetze fest codierte Stile Komponente für Komponente und prüfe nach jedem Schwung Kontrast, Fokuszustände und Dunkelmodus.
Ergebnisse, die nicht generisch aussehen
- Sag, was du vermeiden willst. Die Datenbank behandelt manche Looks, die andere Skills als KI-typisch markieren, etwa Glassmorphism und Aurora UI, als normale Stile. Ergänze eine Zeile wie „kein Glassmorphism, keine Verläufe, keine Emoji-Icons“.
- Sieh dir das Ergebnis an. Der Skill hat keine visuelle Prüfung. Öffne die Seite in Smartphone- und Desktop-Breite oder vergleiche ein paar Richtungen nebeneinander, bevor du weitere Screens baust.
- Beschreibe das Produkt, nicht den Stil. Die Ergebnisse hängen von den Wörtern ab, mit denen du suchst. „Vorbestell-App einer Bäckerei für Eltern“ findet bessere Treffer als „moderne, cleane App“.
- Starte auf Wunsch mit einem fertigen System. Unsere Designsystem-Bibliothek hat komplette Web- und App-Systeme, die du dem Agenten stattdessen als DESIGN.md geben kannst.
Wie er sich zu Taste Skill, Impeccable und frontend-design von Anthropic verhält, steht in Taste Skill vs. Impeccable vs. UI UX Pro Max.
Häufige Fragen
Ist UI UX Pro Max kostenlos?
Ja. Der Skill im GitHub-Repository ist kostenlos und Open Source unter der MIT-Lizenz. Die README beschreibt außerdem eine Premium-Version mit zusätzlichen Tools für Marke, Logo und Folien, ohne genannten Preis.
Funktioniert UI UX Pro Max mit Codex?
Ja. Installiere die CLI mit npm install -g ui-ux-pro-max-cli und führe in deinem Projekt uipro init --ai codex aus.
Warum braucht der Skill Python?
Die Suche nach einem Designsystem läuft als kleines Python-Skript über die Datendateien des Skills. Es nutzt nur die Standardbibliothek, du musst also keine Pakete installieren.