UI/UX Pro Max - Design Intelligence

UI/UX-Design-Intelligenz für Web, Mobile und Desktop. Dieser Skill sollte verwendet werden, wenn Schnittstellen entworfen, entwickelt, überprüft oder repariert werden, einschließlich Seiten, Komponenten, Designsysteme, Barrierefreiheit, Interaktion, responsives Layout, Typografie, Farbe, Diagramme und stackspezifische UI-Implementierung. Durchsuchbare lokale Daten: 79 durchsuchbare Stile (50 aktiv), 192 Produktpaletten und Reasoning-Profile, 74 Schriftkombinationen, 119 UX-Richtlinien, 105 Symbole, 17 GSAP-Voreinstellungen, 25 Diagrammtypen und 22 Stacks.

Wann anwenden

Wenn die Aufgabe UI-Struktur, visuelle Designentscheidungen, Interaktionsmuster oder UX-Qualitätskontrolle betrifft, sollte dieser Skill verwendet werden.

Primäre Anwendungsfälle

Dieser Skill ist am nützlichsten in folgenden Situationen:

Entwerfen neuer Seiten (Landing Page, Dashboard, Admin, SaaS, Mobile App)
Erstellen oder Refactoren von UI-Komponenten (Schaltflächen, Popups, Formulare, Tabellen, Diagramme usw.)
Auswählen von Farbschemata, Schriftsystemen, Abstandsnormen oder Layoutsystemen
Überprüfen von UI-Code auf Benutzerfreundlichkeit, Barrierefreiheit oder visuelle Konsistenz
Implementieren von Navigationsstrukturen, Animationen oder responsivem Verhalten
Treffen von produktspezifischen Designentscheidungen (Stil, Informationshierarchie, Markenausdruck)
Verbessern der wahrgenommenen Qualität, Klarheit oder Benutzerfreundlichkeit von Schnittstellen

Überspringen

Dieser Skill muss nicht verwendet werden in folgenden Situationen:

Reine Backend-Logik-Entwicklung
Nur API- oder Datenbankdesign
Leistungsoptimierung ohne Bezug zur Benutzeroberfläche
Infrastruktur- oder DevOps-Arbeiten
Nicht-visuelle Skripte oder Automatisierungsaufgaben

Entscheidungsregel: Wenn eine Aufgabe ändert, wie etwas aussieht, wie es verwendet wird, wie es sich bewegt oder wie es interagiert wird, sollte dieser Skill verwendet werden.

Regelkategorien nach Priorität

Für Menschen/KI: Priorität 1→10 entscheidet, auf welche Regeln zuerst geachtet wird; für Details --domain <Bereich> verwenden. Skript liest diese Tabelle nicht.

Priorität	Kategorie	Auswirkung	Bereich	Wichtige Prüfungen (Muss)	Anti-Patterns (Vermeiden)
1	Barrierefreiheit	KRITISCH	`ux`	Kontrast 4.5:1, Alternativtext, Tastaturnavigation, Aria-Labels	Entfernen von Fokusringen, Nur-Symbol-Schaltflächen ohne Beschriftung
2	Berührung & Interaktion	KRITISCH	`ux`	Min. Größe 44×44px, 8px+ Abstand, Lade-Feedback	Nur-Hover-Interaktion, Sofortige Zustandsänderungen (0ms)
3	Leistung	HOCH	`ux`	WebP/AVIF, Lazy Loading, Platz reservieren (CLS < 0.1)	Layout-Thrashing, Kumulative Layout-Verschiebung
4	Stilauswahl	HOCH	`style`, `product`	Passend zum Produkttyp, Konsistenz, SVG-Symbole (keine Emojis)	Mischen von flach & skeuomorph zufällig, Emojis als Symbole
5	Layout & Responsivität	HOCH	`ux`	Mobile-First Breakpoints, Viewport-Meta, kein horizontaler Scroll	Horizontaler Scroll, Feste px-Container-Breiten, Zoom deaktivieren
6	Typografie & Farbe	MITTEL	`typography`, `color`	Basis 16px, Zeilenhöhe 1.5, Semantische Farbeingaben	Text < 12px für Fließtext, Grau-auf-Grau, Rohe Hex-Werte in Komponenten
7	Animation	MITTEL	`ux`	Kontextabhängige Zeitsteuerung, Bewegung vermittelt Bedeutung, Räumliche Kontinuität	Eine Dauer für alle Übergänge, Animieren von Breite/Höhe, Kein reduced-motion
8	Formulare & Feedback	MITTEL	`ux`	Sichtbare Beschriftungen, Fehler nahe Feld, Hilfetext, Progressive Offenlegung	Nur Platzhalter-Beschriftung, Fehler nur oben, Überforderung von Anfang an
9	Navigationsmuster	HOCH	`ux`	Vorhersehbare Zurück-Schaltfläche, Bottom-Nav ≤5, Deep Linking	Überladene Navigation, Kaputtes Zurück-Verhalten, Keine Deep Links
10	Diagramme & Daten	NIEDRIG	`chart`	Legenden, Tooltips, Barrierefreie Farben	Nur Farbe zur Bedeutungserklärung verwenden

Kurzreferenz

1. Barrierefreiheit (KRITISCH)

color-contrast - Mindestens 4.5:1-Verhältnis für normalen Text (großer Text 3:1); Material Design
focus-states - Sichtbare Fokusringe für interaktive Elemente (2–4px; Apple HIG, MD)
alt-text - Beschreibender Alternativtext für bedeutungsvolle Bilder
aria-labels - aria-label für Nur-Symbol-Schaltflächen; accessibilityLabel in nativen Apps (Apple HIG)
icon-context - Semantik hängt von der Verwendung ab: dekorative Symbole neben sichtbarem Text sind vor dem Accessibility-Baum verborgen; bedeutungsvolle Symbole benötigen einen Text-Ersatz; Symbolsteuerelemente benötigen einen barrierefreien Namen und einen anwendbaren Zustand
keyboard-nav - Tab-Reihenfolge entspricht der visuellen Reihenfolge; vollständige Tastaturunterstützung (Apple HIG)
form-labels- Mit label und for-Attribut verwenden
skip-links - Zum Hauptinhalt springen für Tastaturnutzer
heading-hierarchy - Sequentiell h1→h6, keine Ebenen überspringen
color-not-only - Information nicht nur durch Farbe vermitteln (Symbol/Text hinzufügen)
dynamic-type - Systemtextskalierung unterstützen; Kürzung bei Textvergrößerung vermeiden (Apple Dynamic Type, MD)
reduced-motion - prefers-reduced-motion respektieren; Animationen reduzieren/deaktivieren, wenn angefordert (Apple Reduced Motion API, MD)
voiceover-sr - Sinnvolle accessibilityLabel/accessibilityHint; logische Lesereihenfolge für VoiceOver/Bildschirmlesegeräte (Apple HIG, MD)
escape-routes - Abbrechen/Zurück in Modalen und mehrschrittigen Abläufen bereitstellen (Apple HIG)
keyboard-shortcuts - System- und A11y-Tastenkürzel erhalten; Tastaturalternativen für Drag-and-Drop anbieten (Apple HIG)
focus-not-obscured - Sticky-UI, Overlays und Banner dürfen das tastaturfokussierte Steuerelement nicht verbergen (WCAG 2.2 AA)
focus-not-obscured-enhanced - Die gesamte fokussierte Komponente sichtbar halten (WCAG 2.2 AAA)
focus-appearance - Fokusindikatorfläche und 3:1-Zustandskontrast überprüfen; sichtbarer Fokus allein ist nicht ausreichend (WCAG 2.2 AAA)
dragging-alternative - Jede autorgesteuerte Drag-Aktion benötigt eine Einzelzeiger- und Tastaturalternative (WCAG 2.2 AA)
web-target-size - Web-Zeigerziele benötigen 24×24 CSS-Pixel oder eine dokumentierte Ausnahme; nativen Einheiten nicht ersetzen (WCAG 2.2 AA)
consistent-help - Wiederholte Hilfemechanismen bleiben in derselben relativen Reihenfolge über eine Seite hinweg (WCAG 2.2 A)
redundant-entry - Bereits im selben Prozess bereitgestellte Informationen wiederverwenden, es sei denn, eine erneute Eingabe ist unerlässlich (WCAG 2.2 A)
accessible-authentication - Passwort-Manager und Einfügen erlauben; einen nicht-kognitiven Authentifizierungspfad bereitstellen (WCAG 2.2 Minimum, AA). Das erweiterte AAA-Kriterium ist im Datensatz nicht repräsentiert.
auto-rotation-controls - Karussells und bewegte Inhalte benötigen Pause/Stopp-Steuerungen und müssen bei Fokus oder reduced-motion anhalten (WAI)
contextual-live-badge-updates - Eine geänderte Anzahl/einen geänderten Status als vollständige kontextuelle Phrase ankündigen, ohne den Fokus zu verschieben; eine geeignete Live-/Statusregion verwenden und atomare Aktualisierungen nur bei Bedarf

2. Berührung & Interaktion (KRITISCH)

touch-target-size - Min. 44×44pt (Apple) / 48×48dp (Material); Trefferfläche bei Bedarf über visuelle Grenzen hinaus erweitern
touch-spacing - Mindestens 8px/8dp Abstand zwischen Touch-Zielen (Apple HIG, MD)
hover-vs-tap - Klick/Tipp für primäre Interaktionen verwenden; sich nicht allein auf Hover verlassen
loading-buttons - Schaltfläche während asynchroner Vorgänge deaktivieren; Spinner oder Fortschritt anzeigen
error-feedback - Klare Fehlermeldungen in der Nähe des Problems
cursor-pointer - cursor-pointer zu klickbaren Elementen hinzufügen (Web)
gesture-conflicts - Horizontalen Wisch auf Hauptinhalt vermeiden; vertikalen Scroll bevorzugen
tap-delay - touch-action: manipulation verwenden, um 300ms-Verzögerung zu reduzieren (Web)
standard-gestures - Plattform-Standardgesten konsequent verwenden; nicht neu definieren (z.B. Wisch-zurück, Pinch-Zoom) (Apple HIG)
system-gestures - Systemgesten nicht blockieren (Kontrollzentrum, Zurück-Wischen usw.) (Apple HIG)
press-feedback - Visuelles Feedback bei Druck (Welle/Hervorhebung; MD-Zustandsebenen)
haptic-feedback - Haptik für Bestätigungen und wichtige Aktionen verwenden; übermäßigen Gebrauch vermeiden (Apple HIG)
gesture-alternative - Sich nicht auf Nur-Gesten-Interaktionen verlassen; immer sichtbare Steuerelemente für kritische Aktionen bereitstellen
safe-area-awareness - Primäre Touch-Ziele von Notch, Dynamic Island, Gestenleiste und Bildschirmrändern fernhalten
no-precision-required - Keine pixelgenauen Tipps auf kleine Symbole oder dünne Kanten erforderlich
swipe-clarity - Wischaktionen müssen eine klare Affordanz oder einen Hinweis zeigen (Pfeil, Beschriftung, Tutorial)
drag-threshold - Eine Bewegungsschwelle vor dem Starten eines Ziehvorgangs verwenden, um versehentliche Ziehungen zu vermeiden

3. Leistung (HOCH)

image-optimization - WebP/AVIF verwenden, responsive Bilder (srcset/sizes), nicht-kritische Assets laden (Lazy Loading)
image-dimension - width/height deklarieren oder aspect-ratio verwenden, um Layoutverschiebungen zu verhindern (Core Web Vitals: CLS)
font-loading - font-display: swap/optional verwenden, um unsichtbaren Text (FOIT) zu vermeiden; Platz reservieren, um Layoutverschiebung zu reduzieren (MD)
font-preload - Nur kritische Schriftarten vorladen; übermäßiges Vorladen jeder Variante vermeiden
critical-css - Above-the-fold-CSS priorisieren (Inline-kritisches CSS oder früh geladenes Stylesheet)
lazy-loading - Nicht-Hero-Komponenten via Dynamic Import / Routen-Aufteilung laden (Lazy Load)
bundle-splitting - Code nach Route/Feature aufteilen (React Suspense / Next.js dynamic), um initiale Ladezeit und TTI zu reduzieren
third-party-scripts - Drittanbieter-Skripte async/defer laden; unnötige prüfen und entfernen (MD)
reduce-reflows - Häufige Layout-Lese-/Schreibzugriffe vermeiden; DOM-Lesevorgänge dann Schreibvorgänge bündeln
content-jumping - Platz für asynchrone Inhalte reservieren, um Layoutsprünge zu vermeiden (Core Web Vitals: CLS)
lazy-load-below-fold - loading="lazy" für Bilder und schwere Medien unterhalb des sichtbaren Bereichs verwenden
virtualize-lists - Listen mit 50+ Elementen virtualisieren, um Speichereffizienz und Scroll-Leistung zu verbessern
main-thread-budget - Arbeit pro Frame unter ~16ms halten für 60fps; schwere Aufgaben vom Hauptthread fernhalten (HIG, MD)
progressive-loading - Skeleton-Bildschirme / Shimmer anstelle von langen blockierenden Spinnern für >1s-Operationen verwenden (Apple HIG)
input-latency - Eingabelatenz unter ~100ms für Tipps/Scrolls halten (Material-Responsivitätsstandard)
tap-feedback-speed - Visuelles Feedback innerhalb von 100ms nach einem Tipp bereitstellen (Apple HIG)
debounce-throttle - Debounce/Throttle für hochfrequente Ereignisse verwenden (Scroll, Resize, Input)
offline-support - Offline-Statusmeldungen und grundlegende Fallbacks bereitstellen (PWA / mobil)
network-fallback - Abgestufte Modi für langsame Netzwerke anbieten (niedrigere Bildauflösung, weniger Animationen)

4. Stilauswahl (HOCH)

style-match - Stil an Produkttyp anpassen (--design-system für Empfehlungen verwenden)
consistency - Denselben Stil auf allen Seiten verwenden
no-emoji-icons - SVG-Symbole (Heroicons, Lucide) verwenden, keine Emojis
color-palette-from-product - Palette aus Produkt/Branche wählen (suche --domain color)
effects-match-style - Schatten, Unschärfe, Radius passend zum gewählten Stil (Glas / Flach / Ton usw.)
platform-adaptive - Plattform-Idiome respektieren (iOS HIG vs Material): Navigation, Steuerelemente, Typografie, Bewegung
state-clarity - Hover/Gedrückt/Deaktiviert-Zustände visuell unterscheidbar machen, während der Stil beibehalten wird (Material-Zustandsebenen)
elevation-consistent - Eine konsistente Erhebungs-/Schattenskala für Karten, Sheets, Modale verwenden; zufällige Schattenwerte vermeiden
dark-mode-pairing - Helle/dunkle Varianten gemeinsam entwerfen, um Marke, Kontrast und Stil konsistent zu halten
icon-style-consistent - Ein Symbolset/eine visuelle Sprache verwenden (Strichstärke, Eckradius) im gesamten Produkt
system-controls - Native/Systemsteuerelemente gegenüber vollständig benutzerdefinierten bevorzugen; nur anpassen, wenn das Branding es erfordert (Apple HIG)
blur-purpose - Unschärfe verwenden, um das Schließen von Hintergrundelementen anzuzeigen (Modale, Sheets), nicht als Dekoration (Apple HIG)
primary-action - Jeder Bildschirm sollte nur eine primäre CTA haben; sekundäre Aktionen visuell untergeordnet (Apple HIG)

5. Layout & Responsivität (HOCH)

viewport-meta - width=device-width initial-scale=1 (Zoom niemals deaktivieren)
mobile-first - Mobil zuerst entwerfen, dann auf Tablet und Desktop skalieren
breakpoint-consistency - Systematische Breakpoints verwenden (z.B. 375 / 768 / 1024 / 1440)
readable-font-size - Mindestens 16px für Fließtext auf Mobilgeräten (vermeidet iOS-Auto-Zoom)
line-length-control - Mobil 35–60 Zeichen pro Zeile; Desktop 60–75 Zeichen
horizontal-scroll - Kein horizontaler Scroll auf Mobilgeräten; sicherstellen, dass Inhalte in die Viewport-Breite passen
spacing-scale - 4pt/8dp-Inkrement-Abstandssystem verwenden (Material Design)
touch-density - Komponentenabstand für Berührung komfortabel halten: nicht zu eng, keine Fehltipps verursachend
container-width - Konsistente max-width auf Desktop (max-w-6xl / 7xl)
z-index-management - Gestaffelte Z-Index-Skala definieren (z.B. 0 / 10 / 20 / 40 / 100 / 1000)
fixed-element-offset - Fixed-Navbar/Bottom-Bar müssen sicheren Abstand für darunterliegende Inhalte reservieren
scroll-behavior - Verschachtelte Scroll-Bereiche vermeiden, die das Haupt-Scroll-Erlebnis beeinträchtigen
viewport-units - min-h-dvh gegenüber 100vh auf Mobilgeräten bevorzugen
orientation-support - Layout lesbar und bedienbar im Querformat halten
content-priority - Kerninhalte zuerst auf Mobilgeräten anzeigen; sekundäre Inhalte einklappen oder verstecken
visual-hierarchy - Hierarchie durch Größe, Abstand, Kontrast herstellen – nicht nur durch Farbe
compact-label-overflow - Badge, Status-Tag, Filter-Chip oder entfernbaren Wert basierend auf seiner Semantik wählen; wichtige Beschriftungen verfügbar halten und unvermeidbare Kürzung für Zeiger- und Tastaturnutzer offenlegen
chip-collection-reflow - Die Sammlung vor dem Verkleinern von Beschriftungen umbrechen; eine +n-Überlaufszusammenfassung zu einem bedienbaren Offenlegungselement machen, anstatt Werte zu verstecken

6. Typografie & Farbe (MITTEL)

line-height - 1.5-1.75 für Fließtext verwenden
line-length - Auf 65-75 Zeichen pro Zeile begrenzen
font-pairing - Schriftenpersönlichkeiten von Überschrift und Fließtext aufeinander abstimmen
font-scale - Konsistente Schriftgrößen-Skala (z.B. 12 14 16 18 24 32)
contrast-readability - Dunklerer Text auf hellem Hintergrund (z.B. slate-900 auf weiß)
text-styles-system - Plattform-Typographiesystem verwenden: iOS 11 Dynamic Type Stile / Material 5 Typ-Rollen (display, headline, title, body, label) (HIG, MD)
weight-hierarchy - Schriftgewicht zur Hierarchieverstärkung verwenden: Fette Überschriften (600–700), Normale Fließtexte (400), Mittlere Beschriftungen (500) (MD)
color-semantic - Semantische Farbtokens definieren (primary, secondary, error, surface, on-surface) nicht rohe Hex-Werte in Komponenten (Material-Farbsystem)
color-dark-mode - Dunkelmodus verwendet entsättigte / hellere Tonvarianten, keine invertierten Farben; Kontrast separat testen (HIG, MD)
color-accessible-pairs - Vorder-/Hintergrundpaare müssen 4.5:1 (AA) oder 7:1 (AAA) erfüllen; Tools zur Überprüfung verwenden (WCAG, MD)
color-not-decorative-only - Funktionale Farbe (Fehlerrot, Erfolgsgrün) muss Symbol/Text enthalten; farbige Bedeutung allein vermeiden (HIG, MD)
truncation-strategy - Umbruch vor Kürzung bevorzugen; bei Kürzung Ellipsen verwenden und vollständigen Text via Tooltip/Expand bereitstellen (Apple HIG)
letter-spacing - Standard-Laufweite pro Plattform respektieren; enge Laufweite bei Fließtext vermeiden (HIG, MD)
number-tabular - Tabellen-/Monospace-Ziffern für Datenspalten, Preise und Metriken verwenden, damit

ElKrapulito/calucha-landing

Was ist calucha-landing?

In Ihrer bevorzugten KI fragen

Dokumentation