UI/UX Pro Max – Design Intelligence

Was macht UX Pro Max – Design Intelligence?

Durchsuchbare Datenbank mit UI-Stilen, Farbpaletten, Schriftpaarungen, Diagrammtypen, Produktempfehlungen, UX-Richtlinien und stack-spezifischen Best Practices.

Voraussetzungen

Prüfen, ob Python installiert ist:

python3 --version || python --version

Wenn Python nicht installiert ist, je nach Betriebssystem installieren:

macOS:

brew install python3

Ubuntu/Debian:

sudo apt update && sudo apt install python3

Windows:

winget install Python.Python.3.12

---

So verwenden Sie dieses Skill

Wenn der Benutzer UI/UX-Arbeiten anfordert (Design, Bauen, Erstellen, Implementieren, Überprüfen, Reparieren, Verbessern), gehen Sie wie folgt vor:

Schritt 1: Benutzeranforderungen analysieren

Extrahieren Sie Schlüsselinformationen aus der Benutzeranfrage:

• Produkttyp: SaaS, E-Commerce, Portfolio, Dashboard, Landingpage usw.
• Stil-Keywords: minimal, verspielt, professionell, elegant, Dark Mode usw.
• Branche: Gesundheitswesen, Fintech, Gaming, Bildung usw.
• Stack: React, Vue, Next.js oder Standardwert html-tailwind

Schritt 2: Relevante Domänen durchsuchen

Verwenden Sie search.py mehrmals, um umfassende Informationen zu sammeln. Führen Sie Suchen durch, bis Sie genügend Kontext haben.

python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<Schlüsselwort>" --domain <domain> [-n <max_results>]

Empfohlene Suchreihenfolge:

1. Produkt – Stilempfehlungen für den Produkttyp abrufen
2. Stil – Detaillierte Stilrichtlinien abrufen (Farben, Effekte, Frameworks)
3. Typografie – Schriftpaarungen mit Google Fonts-Imports abrufen
4. Farbe – Farbpalette abrufen (Primär, Sekundär, CTA, Hintergrund, Text, Rand)
5. Landingpage – Seitenstruktur abrufen (falls Landingpage)
6. Diagramm – Diagrammempfehlungen abrufen (falls Dashboard/Analytik)
7. UX – Best Practices und Anti-Patterns abrufen
8. Stack – Stackspezifische Richtlinien abrufen (Standard: html-tailwind)

Schritt 3: Stack-Richtlinien (Standard: html-tailwind)

Wenn der Benutzer keinen Stack angibt, standardmäßig html-tailwind verwenden.

python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<Schlüsselwort>" --stack html-tailwind

Verfügbare Stacks: html-tailwind, react, nextjs, vue, svelte, swiftui, react-native, flutter, shadcn

---

Suchreferenz

Verfügbare Domänen

Domäne	Verwendungszweck	Beispielschlüsselwörter
product	Produkttypempfehlungen	SaaS, E-Commerce, Portfolio, Gesundheitswesen, Schönheit, Dienstleistung
style	UI-Stile, Farben, Effekte	Glasform, Minimalismus, Dark Mode, Brutalismus
typography	Schriftpaarungen, Google Fonts	elegant, verspielt, professionell, modern
color	Farbpaletten nach Produkttyp	saas, ecommerce, healthcare, beauty, fintech, service
landing	Seitenstruktur, CTA-Strategien	hero, hero-centered, testimonial, pricing, social-proof
chart	Diagrammtypen, Bibliotheksempfehlungen	Trend, Vergleich, Zeitleiste, Trichter, Kreisdiagramm
ux	Best Practices, Anti-Patterns	Animation, Barrierefreiheit, z-index, Laden
prompt	KI-Prompts, CSS-Schlüsselwörter	(Stilname)

Verfügbare Stacks

Stack	Fokus
html-tailwind	Tailwind-Hilfsmittel, Responsive, Barrierefreiheit (STANDARD)
react	State, Hooks, Performance, Patterns
nextjs	SSR, Routing, Bilder, API-Routen
vue	Composition API, Pinia, Vue Router
svelte	Runes, Stores, SvelteKit
swiftui	View, State, Navigation, Animation
react-native	Komponenten, Navigation, Listen
flutter	Widgets, State, Layout, Theming
shadcn	shadcn/ui-Komponenten, Theming, Formulare, Patterns

---

Beispiel-Workflow

Benutzeranfrage: „Erstelle eine Landingpage für einen professionellen Hautpflegeservice“

KI sollte:

# 1. Produkttyp durchsuchen
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --domain product

# 2. Stil durchsuchen (basierend auf Branche: Schönheit, elegant)
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "elegant minimal soft" --domain style

# 3. Typografie durchsuchen
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "elegant luxury" --domain typography

# 4. Farbpalette durchsuchen
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness" --domain color

# 5. Landingpage-Struktur durchsuchen
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "hero-centric social-proof" --domain landing

# 6. UX-Richtlinien durchsuchen
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "animation" --domain ux
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "accessibility" --domain ux

# 7. Stack-Richtlinien durchsuchen (Standard: html-tailwind)
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "layout responsive" --stack html-tailwind

Dann: Alle Suchergebnisse synthetisieren und das Design umsetzen.

---

Tipps für bessere Ergebnisse

1. Seien Sie spezifisch mit Schlüsselwörtern – „Gesundheitswesen SaaS-Dashboard“ > „App“
2. Mehrfach suchen – Unterschiedliche Schlüsselwörter liefern unterschiedliche Erkenntnisse
3. Domänen kombinieren – Stil + Typografie + Farbe = Vollständiges Designsystem
4. Immer UX prüfen – Suche nach „Animation“, „z-index“, „Barrierefreiheit“ für häufige Probleme
5. Stack-Flag verwenden – Erhalten Sie implementierungsspezifische Best Practices
6. Iterieren – Wenn die erste Suche nicht passt, versuchen Sie andere Schlüsselwörter

---

Allgemeine Regeln für professionelle UI

Dies sind häufig übersehene Probleme, die UI unprofessionell wirken lassen:

Symbole und visuelle Elemente

Regel	Tun	Nicht tun
Keine Emoji-Symbole	SVG-Symbole verwenden (Heroicons, Lucide, Simple Icons)	Emojis wie 🎨 🚀 ⚙️ als UI-Symbole verwenden
Stabile Hover-Zustände	Farb-/Transparenzübergänge bei Hover verwenden	Skalierungstransformationen verwenden, die das Layout verschieben
Korrekte Markenlogos	Offizielle SVG von Simple Icons recherchieren	Erraten oder falsche Logopfade verwenden
Einheitliche Symbolgröße	Feste viewBox (24x24) mit w-6 h-6 verwenden	Verschiedene Symbolgrößen zufällig mischen

Interaktion und Cursor

Regel	Tun	Nicht tun
Cursor-Zeiger	cursor-pointer zu allen klickbaren/hoverbaren Karten hinzufügen	Standardcursor auf interaktiven Elementen belassen
Hover-Feedback	Visuelles Feedback (Farbe, Schatten, Rand) bereitstellen	Kein Hinweis, dass das Element interaktiv ist
Sanfte Übergänge	transition-colors duration-200 verwenden	Sofortige Zustandsänderungen oder zu langsam (>500ms)

Hell-/Dunkelmodus-Kontrast

Regel	Tun	Nicht tun
Glas-Karte heller Modus	bg-white/80 oder höhere Deckkraft verwenden	bg-white/10 verwenden (zu transparent)
Textkontrast hell	#0F172A (slate-900) für Text verwenden	#94A3B8 (slate-400) für Fließtext verwenden
Gedämpfter Text hell	Mindestens #475569 (slate-600) verwenden	Gray-400 oder heller verwenden
Rand sichtbar	border-gray-200 im hellen Modus verwenden	border-white/10 verwenden (unsichtbar)

Layout und Abstände

Regel	Tun	Nicht tun
Schwebende Navigationsleiste	top-4 left-4 right-4 Abstand hinzufügen	Navigationsleiste an top-0 left-0 right-0 kleben
Inhaltsabstand	Feste Navigationsleistenhöhe berücksichtigen	Inhalt hinter festen Elementen verstecken lassen
Einheitliche maximale Breite	Gleiche max-w-6xl oder max-w-7xl verwenden	Verschiedene Containerbreiten mischen

---

Checkliste vor Auslieferung

Überprüfen Sie diese Punkte, bevor Sie UI-Code ausliefern:

Visuelle Qualität

• Keine Emojis als Symbole verwendet (stattdessen SVG verwenden)
• Alle Symbole aus einem einheitlichen Symbolsatz (Heroicons/Lucide)
• Markenlogos sind korrekt (von Simple Icons verifiziert)
• Hover-Zustände verursachen keine Layoutverschiebung
• Themenfarben direkt verwenden (bg-primary) nicht var()-Wrapper

Interaktion

• Alle klickbaren Elemente haben cursor-pointer
• Hover-Zustände bieten klares visuelles Feedback
• Übergänge sind sanft (150-300ms)
• Fokus-Zustände sind für Tastaturnavigation sichtbar

Hell-/Dunkelmodus

• Text im hellen Modus hat ausreichenden Kontrast (mindestens 4.5:1)
• Glas-/transparente Elemente im hellen Modus sichtbar
• Ränder in beiden Modi sichtbar
• Beide Modi vor der Auslieferung testen

Layout

• Schwebende Elemente haben ordnungsgemäße Abstände zu den Rändern
• Kein Inhalt hinter festen Navigationsleisten versteckt
• Responsive bei 320px, 768px, 1024px, 1440px
• Kein horizontaler Scroll auf Mobilgeräten

Barrierefreiheit

• Alle Bilder haben Alt-Text
• Formulareingaben haben Beschriftungen
• Farbe ist nicht der einzige Indikator
• prefers-reduced-motion wird respektiert