UI/UX Pro Max – Design Intelligenz
Umfassender Design-Leitfaden für Web- und mobile Anwendungen. Enthält 67 Stile, 96 Farbpaletten, 57 Schriftkombinationen, 99 UX-Richtlinien und 25 Diagrammtypen für 13 Technologie-Stacks. Durchsuchbare Datenbank mit priorisierten Empfehlungen.
Wann anwenden
Diese Richtlinien sollten herangezogen werden, wenn:
- Neue UI-Komponenten oder Seiten entworfen werden
- Farbpaletten und Typografie ausgewählt werden
- Code auf UX-Probleme überprüft wird
- Landing Pages oder Dashboards erstellt werden
- Anforderungen an die Barrierefreiheit umgesetzt werden
Regelkategorien nach Priorität
| Priorität | Kategorie | Auswirkung | Domäne |
|---|---|---|---|
| 1 | Barrierefreiheit | KRITISCH | ux |
| 2 | Touch & Interaktion | KRITISCH | ux |
| 3 | Leistung | HOCH | ux |
| 4 | Layout & Responsivität | HOCH | ux |
| 5 | Typografie & Farbe | MITTEL | typography, color |
| 6 | Animation | MITTEL | ux |
| 7 | Stilauswahl | MITTEL | style, product |
| 8 | Diagramme & Daten | NIEDRIG | chart |
Kurzreferenz
1. Barrierefreiheit (KRITISCH)
color-contrast– Mindestens 4,5:1 für normalen Textfocus-states– Sichtbare Fokusringe auf interaktiven Elementenalt-text– Beschreibender Alternativtext für aussagekräftige Bilderaria-labels– aria-label für Symbole ohne Textkeyboard-nav– Tab-Reihenfolge entspricht der visuellen Reihenfolgeform-labels– Verwende label mit for-Attribut
2. Touch & Interaktion (KRITISCH)
touch-target-size– Mindestens 44x44px Touch-Zielehover-vs-tap– Verwende Klick/Tipp für primäre Interaktionenloading-buttons– Deaktiviere Button während asynchroner Vorgängeerror-feedback– Klare Fehlermeldungen in der Nähe des Problemscursor-pointer– Füge cursor-pointer zu klickbaren Elementen hinzu
3. Leistung (HOCH)
image-optimization– Verwende WebP, srcset, Lazy Loadingreduced-motion– Prüfe prefers-reduced-motioncontent-jumping– Halte Platz für asynchrone Inhalte frei
4. Layout & Responsivität (HOCH)
viewport-meta– width=device-width initial-scale=1readable-font-size– Mindestens 16px Fließtext auf Mobilgerätenhorizontal-scroll– Stelle sicher, dass der Inhalt in die Viewport-Breite passtz-index-management– Definiere Z-Index-Skala (10, 20, 30, 50)
5. Typografie & Farbe (MITTEL)
line-height– Verwende 1,5–1,75 für Fließtextline-length– Beschränke auf 65–75 Zeichen pro Zeilefont-pairing– Stimme die Schriftpersönlichkeiten von Überschrift und Text aufeinander ab
6. Animation (MITTEL)
duration-timing– Verwende 150–300ms für Mikrointeraktionentransform-performance– Verwende Transform/Opacity, nicht width/heightloading-states– Skelettbildschirme oder Spinner
7. Stilauswahl (MITTEL)
style-match– Stimme den Stil auf den Produkttyp abconsistency– Verwende den gleichen Stil auf allen Seitenno-emoji-icons– Verwende SVG-Symbole, keine Emojis
8. Diagramme & Daten (NIEDRIG)
chart-type– Stimme den Diagrammtyp auf den Datentyp abcolor-guidance– Verwende barrierefreie Farbpalettendata-table– Stelle eine Tabellenalternative für Barrierefreiheit bereit
Verwendung
Durchsuche bestimmte Domänen mit dem untenstehenden CLI-Tool.
Voraussetzungen
Prüfe, ob Python installiert ist:
python3 --version || python --version
Wenn Python nicht installiert ist, installiere es je nach Betriebssystem:
macOS:
brew install python3
Ubuntu/Debian:
sudo apt update && sudo apt install python3
Windows:
winget install Python.Python.3.12
Wie man dieses Skill verwendet
Wenn der Benutzer UI/UX-Arbeiten anfordert (designen, erstellen, implementieren, überprüfen, verbessern), folge diesem Workflow:
Schritt 1: Benutzeranforderungen analysieren
Extrahiere Schlüsselinformationen aus der Benutzeranfrage:
- Produkttyp: SaaS, E-Commerce, Portfolio, Dashboard, Landing Page usw.
- Stil-Keywords: minimal, verspielt, professionell, elegant, Dark Mode usw.
- Branche: Gesundheitswesen, Fintech, Gaming, Bildung usw.
- Stack: React, Vue, Next.js oder Standard
html-tailwind
Schritt 2: Design-System generieren (ERFORDERLICH)
Beginne immer mit --design-system, um umfassende Empfehlungen mit Begründung zu erhalten:
python3 skills/ui-ux-pro-max/scripts/search.py "<Produkttyp> <Branche> <Keywords>" --design-system [-p "Projektname"]
Dieser Befehl:
- Durchsucht 5 Domänen parallel (product, style, color, landing, typography)
- Wendet Reasoning-Regeln aus
ui-reasoning.csvan, um die besten Treffer auszuwählen - Gibt ein komplettes Design-System zurück: Pattern, Stil, Farben, Typografie, Effekte
- Enthält Anti-Patterns, die vermieden werden sollten
Beispiel:
python3 skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --design-system -p "Serenity Spa"
Schritt 2b: Design-System persistent speichern (Master + Overrides-Muster)
Um das Design-System für hierarchische Abrufe über mehrere Sitzungen hinweg zu speichern, füge --persist hinzu:
python3 skills/ui-ux-pro-max/scripts/search.py "<Abfrage>" --design-system --persist -p "Projektname"
Dies erstellt:
design-system/MASTER.md– Globale Quelle der Wahrheit mit allen Designregelndesign-system/pages/– Ordner für seiten-spezifische Überschreibungen
Mit seiten-spezifischer Überschreibung:
python3 skills/ui-ux-pro-max/scripts/search.py "<Abfrage>" --design-system --persist -p "Projektname" --page "dashboard"
Dies erstellt zusätzlich:
design-system/pages/dashboard.md– Seiten-spezifische Abweichungen vom Master
Wie der hierarchische Abruf funktioniert:
- Wenn eine bestimmte Seite erstellt wird (z. B. „Checkout”), überprüfe zuerst
design-system/pages/checkout.md - Wenn die Seitendatei existiert, überschreiben ihre Regeln die Master-Datei
- Wenn nicht, verwende ausschließlich
design-system/MASTER.md
Schritt 3: Detail-Suchen durchführen (nach Bedarf)
Nachdem du das Design-System erhalten hast, verwende Domänensuchen, um weitere Details zu erhalten:
python3 skills/ui-ux-pro-max/scripts/search.py "<Keyword>" --domain <Domäne> [-n <max_ergebnisse>]
Wann Detail-Suchen verwendet werden sollten:
| Bedarf | Domäne | Beispiel |
|---|---|---|
| Weitere Stiloptionen | style | --domain style "glassmorphism dark" |
| Diagrammempfehlungen | chart | --domain chart "real-time dashboard" |
| UX-Best-Practices | ux | --domain ux "animation accessibility" |
| Alternative Schriftarten | typography | --domain typography "elegant luxury" |
| Landing-Struktur | landing | --domain landing "hero social-proof" |
Schritt 4: Stack-Richtlinien (Standard: html-tailwind)
Erhalte implementierungsspezifische Best Practices. Wenn der Benutzer keinen Stack angibt, verwende standardmäßig html-tailwind.
python3 skills/ui-ux-pro-max/scripts/search.py "<Keyword>" --stack html-tailwind
Verfügbare Stacks: html-tailwind, react, nextjs, vue, svelte, swiftui, react-native, flutter, shadcn, jetpack-compose
Suchreferenz
Verfügbare Domänen
| Domäne | Verwendung | Beispiel-Keywords |
|---|---|---|
product | Produkttyp-Empfehlungen | SaaS, E-Commerce, Portfolio, Gesundheitswesen, Beauty, Dienstleistung |
style | UI-Stile, Farben, Effekte | Glassmorphism, Minimalismus, Dark Mode, Brutalismus |
typography | Schriftkombinationen, Google Fonts | elegant, verspielt, professionell, modern |
color | Farbpaletten nach Produkttyp | saas, ecommerce, healthcare, beauty, fintech, service |
landing | Seitenstruktur, CTA-Strategien | Hero, Hero-centric, Testimonial, Pricing, Social-Proof |
chart | Diagrammtypen, Bibliotheksempfehlungen | Trend, Vergleich, Zeitleiste, Trichter, Kreis |
ux | Best Practices, Anti-Patterns | Animation, Barrierefreiheit, Z-Index, Laden |
react | React/Next.js-Leistung | Waterfall, Bundle, Suspense, Memo, Rerender, Cache |
web | Web-Oberflächenrichtlinien | Aria, Focus, Tastatur, Semantik, Virtualisieren |
prompt | KI-Prompts, CSS-Keywords | (Stilname) |
Verfügbare Stacks
| Stack | Fokus |
|---|---|
html-tailwind | Tailwind-Hilfsprogramme, responsiv, a11y (STANDARD) |
react | State, Hooks, Leistung, Patterns |
nextjs | SSR, Routing, Bilder, API-Routen |
vue | Composition API, Pinia, Vue Router |
svelte | Runes, Stores, SvelteKit |
swiftui | Views, State, Navigation, Animation |
react-native | Komponenten, Navigation, Listen |
flutter | Widgets, State, Layout, Theming |
shadcn | shadcn/ui-Komponenten, Theming, Formulare, Patterns |
jetpack-compose | Composables, Modifiers, State Hoisting, Recomposition |
Beispiel-Workflow
Benutzeranfrage: „Erstelle eine Landing Page für einen professionellen Hautpflegeservice”
Schritt 1: Anforderungen analysieren
- Produkttyp: Beauty/Spa-Dienstleistung
- Stil-Keywords: elegant, professionell, sanft
- Branche: Beauty/Wellness
- Stack: html-tailwind (Standard)
Schritt 2: Design-System generieren (ERFORDERLICH)
python3 skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service elegant" --design-system -p "Serenity Spa"
Ausgabe: Vollständiges Design-System mit Pattern, Stil, Farben, Typografie, Effekten und Anti-Patterns.
Schritt 3: Detail-Suchen durchführen (nach Bedarf)
# UX-Richtlinien für Animation und Barrierefreiheit abrufen
python3 skills/ui-ux-pro-max/scripts/search.py "animation accessibility" --domain ux
# Alternative Typografie-Optionen abrufen, falls benötigt
python3 skills/ui-ux-pro-max/scripts/search.py "elegant luxury serif" --domain typography
Schritt 4: Stack-Richtlinien
python3 skills/ui-ux-pro-max/scripts/search.py "layout responsive form" --stack html-tailwind
Dann: Synthetisiere Design-System + Detail-Suchen und implementiere das Design.
Ausgabeformate
Das Flag --design-system unterstützt zwei Ausgabeformate:
# ASCII-Box (Standard) – am besten für Terminal-Anzeige
python3 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system
# Markdown – am besten für Dokumentation
python3 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system -f markdown
Tipps für bessere Ergebnisse
- Sei spezifisch mit Keywords – „Gesundheitswesen SaaS Dashboard” > „App”
- Mehrfach suchen – Unterschiedliche Keywords decken unterschiedliche Erkenntnisse auf
- Domänen kombinieren – Stil + Typografie + Farbe = Vollständiges Design-System
- Immer UX prüfen – Suche nach „animation”, „z-index”, „accessibility” für häufige Probleme
- Stack-Flag verwenden – Erhalte implementierungsspezifische Best Practices
- Iterieren – Wenn die erste Suche nicht passt, versuche andere Keywords
Häufige Regeln für professionelle Benutzeroberflächen
Dies sind häufig übersehene Probleme, die UI unprofessionell aussehen lassen:
Symbole & Visuelle Elemente
| Regel | Tun | Nicht tun |
|---|---|---|
| Keine Emoji-Symbole | Verwende SVG-Symbole (Heroicons, Lucide, Simple Icons) | Verwende Emojis wie 🎨 🚀 ⚙️ als UI-Symbole |
| Stabile Hover-Zustände | Verwende Farb-/Transparenzübergänge bei Hover | Verwende Skalierungstransformationen, die das Layout verschieben |
| Korrekte Markenlogos | Recherchiere offizielle SVGs von Simple Icons | Rate oder verwende falsche Logopfade |
| Konsistente Symbolgrößen | Verwende feste viewBox (24×24) mit w-6 h-6 | Mische verschiedene Symbolgrößen willkürlich |
Interaktion & Cursor
| Regel | Tun | Nicht tun |
|---|---|---|
| Cursor-Zeiger | Füge cursor-pointer zu allen klickbaren/hoverbaren Karten hinzu | Belasse Standard-Cursor auf interaktiven Elementen |
| Hover-Feedback | Sichtbares Feedback geben (Farbe, Schatten, Rand) | Keine Angabe, dass das Element interaktiv ist |
| Sanfte Übergänge | Verwende transition-colors duration-200 | Sofortige Zustandsänderungen oder zu langsam (>500ms) |
Hell-/Dunkelmodus-Kontrast
| Regel | Tun | Nicht tun |
|---|---|---|
| Glaskarte Hellmodus | Verwende bg-white/80 oder höhere Deckkraft | Verwende bg-white/10 (zu transparent) |
| Textkontrast Hell | Verwende #0F172A (slate-900) für Text | Verwende #94A3B8 (slate-400) für Fließtext |
| Gedämpfter Text Hell | Verwende mindestens #475569 (slate-600) | Verwende gray-400 oder heller |
| Rand-Sichtbarkeit | Verwende border-gray-200 im Hellmodus | Verwende border-white/10 (unsichtbar) |
Layout & Abstände
| Regel | Tun | Nicht tun |
|---|---|---|
| Schwebende Navigationsleiste | Füge top-4 left-4 right-4 Abstand hinzu | Klebe Navbar an top-0 left-0 right-0 |
| Inhaltsabstand | Berücksichtige die Höhe der festen Navigationsleiste | Lasse Inhalte hinter festen Elementen verstecken |
| Konsistente max-width | Verwende gleiches max-w-6xl oder max-w-7xl | Mische verschiedene Containerbreiten |
Checkliste vor Auslieferung
Überprüfe vor der Auslieferung von UI-Code die folgenden Punkte:
Visuelle Qualität
- Keine Emojis als Symbole verwendet (stattdessen SVG verwenden)
- Alle Symbole aus einem konsistenten Symbolset (Heroicons/Lucide)
- Markenlogos sind korrekt (von Simple Icons verifiziert)
- Hover-Zustände verursachen keinen Layout-Shift
- Theme-Farben direkt verwenden (bg-primary), nicht var()-Wrapper
Interaktion
- Alle klickbaren Elemente haben
cursor-pointer - Hover-Zustände bieten klares visuelles Feedback
- Übergänge sind flüssig (150–300ms)
- Fokus-Zustände sind für Tastaturnavigation sichtbar
Hell-/Dunkelmodus
- Text im Hellmodus hat ausreichenden Kontrast (mindestens 4,5:1)
- Glas-/Transparente Elemente sind im Hellmodus sichtbar
- Ränder sind in beiden Modi sichtbar
- Beide Modi vor der Auslieferung testen
Layout
- Schwebende Elemente haben angemessene Abstände zu den Rändern
- Kein Inhalt, der hinter festen Navigationsleisten versteckt ist
- Responsiv bei 375px, 768px, 1024px, 1440px
- Kein horizontales Scrollen auf Mobilgeräten
Barrierefreiheit
- Alle Bilder haben Alt-Text
- Formular-Eingaben haben Labels
- Farbe ist nicht der einzige Indikator
-
prefers-reduced-motionwird respektiert