UI/UX Pro Max - Design-Intelligenz-Experte

Umfassender UI/UX-Designleitfaden für Web- und Mobilanwendungen. Bietet intelligente Designempfehlungen basierend auf Produkttyp, Branche und Benutzeranforderungen. Diese Richtlinien als Referenz verwenden beim Entwerfen neuer UI, Auswählen von Farben und Typografie, Überprüfen von Code auf UX-Probleme oder Implementieren von Funktionen.

Arbeitsablauf

Schritt 1: Benutzeranforderungen analysieren

Aus der Benutzeranfrage extrahieren:

Produkttyp: SaaS, E-Commerce, Portfolio, Dashboard, Landing Page usw.
Stil-Keywords: minimal, verspielt, professionell, elegant, Dark Mode usw.
Branche: Gesundheitswesen, Fintech, Gaming, Bildung, Beauty usw.
Tech-Stack: React, Vue, Next.js, Svelte, Flutter oder html-tailwind (Standard)

Schritt 2: Designsystem generieren

Die folgenden Referenzdaten (und CSV-Dateien in data/) konsultieren für:

Empfohlene Muster und Abschnittslayouts
Primären visuellen Stil mit Effekten
Farbpalette (Primär, Sekundär, CTA, Hintergrund, Text)
Typografie-Paarung (Überschrift + Fließtext-Schriftarten mit Google Fonts URL)
Wichtige Effekte und Anti-Patterns, die vermieden werden sollten

Schritt 3: Implementierungsrichtlinien

Stack-spezifische Best Practices aus den Referenzdaten anwenden:

HTML/Tailwind-Utilities, responsive Breakpoints
React-Hooks, State-Management, Performance-Patterns
Vue Composition API, Pinia State
Flutter-Widgets, Themes, Navigation
Barrierefreiheitsanforderungen (WCAG-Konformität)

Schritt 4: Vorab-Lieferprüfung

Vor der Auslieferung von UI-Code alle Checklisten durchgehen (visuelle Qualität, Interaktion, Hell-/Dark-Modus, Layout, Barrierefreiheit).

Prioritätsregeln

Priorität	Kategorie	Auswirkung
1	Barrierefreiheit	KRITISCH - Farbkontrast 4,5:1, Fokus-States, aria-labels
2	Touch & Interaktion	KRITISCH - 44x44px Touch-Ziele, cursor-pointer
3	Performance	HOCH - Bildoptimierung, Lazy Loading
4	Layout & Responsive	HOCH - Mobile-First, Viewport-Meta
5	Typografie & Farbe	MITTEL - Zeilenhöhe 1,5-1,75, lesbare Schriftarten
6	Animation	MITTEL - 150-300ms Dauer, nur transform
7	Stilauswahl	MITTEL - Stil an Produkttyp anpassen

Schnelle Stilauswahl nach Produkttyp

Produkttyp	Primärer Stil	Sekundäre Stile	Farbstimmung
SaaS (Allgemein)	Minimalismus	Flat Design, Glassmorphismus	Vertrauensblau + Akzentkontrast
E-Commerce	Neo-Brutalismus	Bento Grid, Dark Mode	Marken-Primär + Erfolgsgrün
E-Commerce Luxus	Luxuriöser Minimalismus	Dark Mode, Elegant	Premium-Schwarz + Goldakzente
Gesundheitswesen	Weicher Minimalismus	Flat Design, Organisch	Ruhiges Blau + Gesundheitsgrün
Fintech/Krypto	Cyberpunk	Dark Mode, Glassmorphismus	Dunkles Tech + Lebendige Akzente
Gaming	Neon Glow	Cyberpunk, Dark Mode	Lebendig + Neon + Immersiv
Portfolio/Kreativ	Editorial	Brutalismus, Asymmetrisch	Marken-Primär + Künstlerisch
Dashboard	Corporate Tech	Flat Design, Datendicht	Kühl→Warm Verläufe + Neutral
AI/Chatbot	Aurora-Verläufe	Glassmorphismus, Dark Mode	Neutral + AI Lila (#6366F1)
Beauty/Spa/Wellness	Organische Formen	Weicher Minimalismus, Elegant	Sanfte Pastelle + Natürliche Töne

Farbpaletten nach Branche

SaaS / Business

Rolle	Hex	Tailwind
Primär	#2563EB	blue-600
Sekundär	#3B82F6	blue-500
CTA	#F97316	orange-500
Hintergrund	#F8FAFC	slate-50
Text	#1E293B	slate-800
Rand	#E2E8F0	slate-200

E-Commerce Luxus

Rolle	Hex	Tailwind
Primär	#1C1917	stone-900
Sekundär	#44403C	stone-700
CTA	#CA8A04	yellow-600
Hintergrund	#FAFAF9	stone-50
Text	#0C0A09	stone-950
Rand	#D6D3D1	stone-300

Gesundheitswesen

Rolle	Hex	Tailwind
Primär	#0891B2	cyan-600
Sekundär	#22D3EE	cyan-400
CTA	#059669	emerald-600
Hintergrund	#ECFEFF	cyan-50
Text	#164E63	cyan-900
Rand	#A5F3FC	cyan-200

Fintech / Krypto

Rolle	Hex	Tailwind
Primär	#F59E0B	amber-500
Sekundär	#FBBF24	amber-400
CTA	#8B5CF6	violet-500
Hintergrund	#0F172A	slate-900
Text	#F8FAFC	slate-50
Rand	#334155	slate-700

Gaming

Rolle	Hex	Tailwind
Primär	#7C3AED	violet-600
Sekundär	#A78BFA	violet-400
CTA	#F43F5E	rose-500
Hintergrund	#0F0F23	custom-dark
Text	#E2E8F0	slate-200
Rand	#4C1D95	violet-900

AI / Chatbot-Plattform

Rolle	Hex	Tailwind
Primär	#7C3AED	violet-600
Sekundär	#A78BFA	violet-400
CTA	#06B6D4	cyan-500
Hintergrund	#FAF5FF	violet-50
Text	#1E1B4B	indigo-950
Rand	#DDD6FE	violet-200

Beauty / Spa / Wellness

Rolle	Hex	Tailwind
Primär	#DB2777	pink-600
Sekundär	#F472B6	pink-400
CTA	#059669	emerald-600
Hintergrund	#FDF2F8	pink-50
Text	#831843	pink-900
Rand	#FBCFE8	pink-200

Typografie-Paarungen

Professionell / Corporate

Überschrift: Inter | Fließtext: Inter

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

Am besten geeignet für: SaaS, Dashboards, Business-Apps

Elegant / Luxus

Überschrift: Playfair Display | Fließtext: Lato

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700&family=Lato:wght@400;700&display=swap');

Am besten geeignet für: Luxusmarken, Editorial, High-End-E-Commerce

Modern / Tech

Überschrift: Space Grotesk | Fließtext: DM Sans

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=DM+Sans:wght@400;500;700&display=swap');

Am besten geeignet für: Tech-Startups, Fintech, KI-Produkte

Freundlich / Verspielt

Überschrift: Poppins | Fließtext: Open Sans

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&family=Open+Sans:wght@400;600&display=swap');

Am besten geeignet für: Bildung, Consumer-Apps, Lifestyle-Marken

Editorial / Kreativ

Überschrift: Fraunces | Fließtext: Source Sans 3

@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@500;600;700&family=Source+Sans+3:wght@400;600&display=swap');

Am besten geeignet für: Blogs, Magazine, Portfolios

Gesundheitswesen / Wellness

Überschrift: Outfit | Fließtext: Nunito

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@500;600;700&family=Nunito:wght@400;600&display=swap');

Am besten geeignet für: Gesundheitswesen, Wellness, Medizin-Apps

Referenz für visuelle Stile

Minimalismus

Farben: Monochrom + 1 Akzent, viel Weißraum
Effekte: Subtile Schatten, saubere Ränder, Mikrointeraktionen
Am besten geeignet für: SaaS, Produktivität, professionelle Apps
Keywords: sauber, einfach, Weißraum, subtil, elegant

Glassmorphismus

Farben: Transluzente Ebenen, Unschärfeeffekte, Verlaufshintergründe
Effekte: backdrop-blur, bg-white/10, weiche Schatten
Am besten geeignet für: Moderne Dashboards, Musik-Apps, Portfolios
Keywords: Glas, Unschärfe, transluzent, matt, geschichtet

Neumorphismus

Farben: Sanfte Pastelle, Schatten im gleichen Farbton (dunkel/hell)
Effekte: Inset-Schatten, extrudierte Elemente, sanfte Tiefe
Am besten geeignet für: Bedienfelder, Taschenrechner, Musikplayer
Keywords: weich, geprägt, extrudiert, taktil, 3D-weich

Dark Mode

Farben: Dunkle Hintergründe (#0F172A), helle Texte, Akzentfarben
Effekte: Subtile Ränder, Leuchten bei Fokus, reduzierte Augenbelastung
Am besten geeignet für: Entwickler-Tools, Medien-Apps, Gaming
Keywords: dunkel, Nacht, wenig Licht, Kontrast, modern

Bento Grid

Farben: Kartenbasiert mit unterschiedlichen Hintergründen pro Abschnitt
Effekte: Rasterlayouts, variierende Kartengrößen, klare Hierarchie
Am besten geeignet für: Feature-Showcases, Portfolios, Dashboards
Keywords: Raster, Karten, modular, organisiert, Präsentation

Aurora / Gradienten-Netz

Farben: Mehrfarbige Verläufe, Netzüberblendung, lebendig
Effekte: Animierte Verläufe, Farbübergänge, Tiefe
Am besten geeignet für: KI-Produkte, kreative Tools, Landing Pages
Keywords: Aurora, Verlauf, Netz, farbenfroh, fließend

Brutalismus

Farben: Hoher Kontrast, rohe Farben, kräftige Primärfarben
Effekte: Schwere Ränder, rohe Typografie, bewusst grob
Am besten geeignet für: Kreativagenturen, Kunstportfolios, kühne Marken
Keywords: roh, kühn, markant, ungeschliffen, auffällig

Landing-Page-Muster

Hero-zentriert (Conversion-Fokus)

Abschnitte: Hero > Social Proof > Funktionen > CTA

Primärer CTA oberhalb der Falz
Vertrauenssiegel in der Nähe des CTA
Einzelne fokussierte Botschaft

Feature-voran (Produktdemo)

Abschnitte: Hero > Feature-Raster > So funktioniert's > Preise > CTA

Visuelle Produktdemos
Vorteile gegenüber Funktionen
Vergleichstabellen für Preise

Geschichtengetrieben (Markenaufbau)

Abschnitte: Hero > Problem > Lösung > Reise > Team > CTA

Emotionale Verbindung zuerst
Kundenerfolgsgeschichten
Markenerzählungsfluss

Social Proof schwer (Vertrauensaufbau)

Abschnitte: Hero > Logos > Testimonials > Fallstudien > CTA

Kundenlogos prominent
Video-Testimonials
Statistiken und Zahlen

Diagrammtyp-Auswahl

Datentyp	Bester Diagrammtyp	Wann verwenden
Trend über Zeit	Liniendiagramm	Zeitreihen, Wachstum, Fortschritt
Kategorien vergleichen	Balkendiagramm	Rangfolgen, Vergleiche
Teil-vom-Ganzen	Ringdiagramm	Prozentsätze, Anteile (≤5 Elemente)
Korrelation	Streudiagramm	Beziehungen, Muster
Geografisch	Choroplethenkarte	Regionale Daten, Standorte
Trichter/Fluss	Trichterdiagramm	Conversion, Prozessschritte
Leistung	Messanzeige/Zielanzeige	KPIs, Ziele
Hierarchisch	Treemap	Verschachtelte Kategorien, Anteile

Diagrammfarben-Leitfaden:

Primärdaten: #2563EB (blue-600)
Erfolg/Wachstum: #22C55E (green-500)
Warnung/Alarm: #F59E0B (amber-500)
Fehler/Rückgang: #EF4444 (red-500)
Neutral: #94A3B8 (slate-400)

Für detaillierte Diagrammdaten (25 Diagrammtypen mit Bibliotheksempfehlungen, Barrierefreiheitshinweisen und Interaktionsstufen) siehe data/design-data.csv.

Barrierefreiheitsanforderungen (KRITISCH)

Farbkontrast

Normaler Text: Mindestverhältnis 4,5:1
Großer Text (18px+): Mindestverhältnis 3:1
Interaktive Elemente: Klare Fokus-States

Touch-Ziele

Mindestgröße: 44x44px für Touch-Geräte
Abstand: Mindestens 8px zwischen Zielen

Fokus-States

/* Immer sichtbarer Fokus-Ring */
:focus-visible {
  outline: 2px solid #2563EB;
  outline-offset: 2px;
}

Reduzierte Bewegung

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

Formular-Labels

Jede Eingabe MUSS ein zugehöriges Label haben
<label for="id"> oder aria-label verwenden
Fehlermeldungen in der Nähe des Problemfelds

Häufige UX-Anti-Patterns (VERMEIDEN)

Icons

NEIN: Emojis als UI-Icons verwenden
JA: SVG-Icons verwenden (Heroicons, Lucide, Simple Icons)

Hover-States

NEIN: Skalierungstransformationen, die das Layout verschieben
JA: Nur Farb-/Deckkraftübergänge

Cursor

NEIN: Standard-Cursor auf klickbaren Elementen
JA: cursor-pointer auf allen interaktiven Elementen

Hellmodus-Glas

NEIN: bg-white/10 (zu transparent, unsichtbar)
JA: bg-white/80 oder höhere Deckkraft

Z-Index

NEIN: Zufällige z-index-Werte (999, 9999)
JA: Definierte Skala: 10 (Standard), 20 (Dropdown), 30 (Modal), 50 (Toast)

Animationen

NEIN: Langsame Animationen (>500ms) oder Layoutverschiebungen
JA: 150-300ms Dauer, nur transform/opacity

Stack-spezifische Richtlinien

HTML + Tailwind CSS

Utility-Klassen verwenden, benutzerdefiniertes CSS vermeiden
Responsive: sm:, md:, lg:, xl: Breakpoints
Dark Mode: dark: Variante
Immer cursor-pointer auf Schaltflächen/Links einfügen

React

memo() für teure Komponenten verwenden
useMemo/useCallback für stabile Referenzen bevorzugen
Inline-Funktionen im Render vermeiden
Suspense für Code-Splitting verwenden

Next.js

next/image für automatische Optimierung verwenden
Dynamische Imports für schwere Komponenten implementieren
next/font für optimierten Schriftarten-Ladevorgang verwenden
Server-Komponenten wo möglich nutzen

Vue 3

Composition API mit <script setup> verwenden
Pinia für State-Management
defineProps mit TypeScript
Routen mit dynamischen Imports lazy laden

Flutter

const-Konstruktoren für statische Widgets verwenden
ListView.builder für lange Listen
Controller in dispose() entsorgen
Theme.of(context) für konsistentes Theming verwenden

SwiftUI

@State für lokalen State, @StateObject für Referenztypen verwenden
.task gegenüber .onAppear für asynchrone Vorgänge bevorzugen
LazyVStack für lange Listen verwenden
Dynamic Type für Barrierefreiheit unterstützen

Für umfassende Stack-spezifische Richtlinien (99 Regeln für Flutter, SwiftUI und mehr) siehe data/stack-guidelines.csv.

Antwortstil

Beim Entwerfen von Benutzeroberflächen:

Zuerst das Designsystem mit allen Empfehlungen präsentieren
Farbmuster mit Hex-Werten und Verwendung anzeigen
Google Fonts Import-Code bereitstellen, der sofort verwendbar ist
Codebeispiele gemäß den Stack-Best Practices bereitstellen
Designentscheidungen mit Begründung erläutern

Checkliste vor der Auslieferung

Visuelle Qualität

Keine Emojis als Icons (SVG verwenden: Heroicons, Lucide, Simple Icons)
Alle Icons aus einem konsistenten Icon-Set
Markenlogos aus offiziellen Quellen verifiziert
Hover-States verursachen keine Layoutverschiebung

Interaktion

Alle klickbaren Elemente haben cursor-pointer
Hover-States geben klares visuelles Feedback
Übergänge sind flüssig (150-300ms)
Fokus-States für Tastaturnavigation sichtbar

Hell-/Dark-Modus

Hellmodus-Text hat ausreichenden Kontrast (mindestens 4,5:1)
Glas-/Transparente Elemente im Hellmodus sichtbar
Ränder in beiden Modi sichtbar

Layout

Schwebende Elemente haben korrekte Abstände zu den Rändern

...

[Zur Übersetzung abgeschnitten]

In Ihrer bevorzugten KI fragen

Dokumentation