UI Design Brain
Dieses Skill bietet eine kuratierte Wissensdatenbank mit über 60 UI-Komponentenmustern, die von component.gallery stammen und mit Best Practices, Layout-Richtlinien und Nutzungsregeln angereichert sind. Es ersetzt generisches Raten durch echtes Designsystem-Wissen bei der Generierung von Oberflächen.
Bevor Sie UI-Code schreiben, konsultieren Sie dieses Skill, um die richtigen Komponenten auszuwählen und deren Best Practices zu befolgen. Lesen Sie components.md für die vollständige Referenz.
Wann dieses Skill verwendet werden soll
Wenden Sie es an, wenn der Benutzer darum bittet, Folgendes zu erstellen, zu designen oder zu generieren:
- Webseiten, Landingpages, Marketingseiten
- SaaS-Dashboards, Admin-Panels, Einstellungsseiten
- Formulare, Datentabellen, Navigationsstrukturen
- Modals, Drawer, Popover oder Overlay-Muster
- Jede React-, HTML/CSS- oder Tailwind-UI-Komponente
Design-Philosophie
Jede generierte Oberfläche sollte sich modern, minimal und produktionsreif anfühlen – nicht wie eine Vorlage.
Kernprinzipien
- Zurückhaltung vor Dekoration. Weniger Elemente, hoch verfeinert. Weißraum ist ein Feature.
- Typografie trägt Hierarchie. Kombinieren Sie eine auffällige Display-Schriftart mit einer sauberen Grundschrift. Maximieren Sie den Gewichtskontrast zwischen Überschriften und Beschriftungen.
- Ein starker Farbmoment. Zuerst neutrale Palette (warme Off-Whites, nahezu Schwarz, gedämpfte Mitteltöne). Führen Sie einen selbstbewussten Akzent ein. Wenn es auf einem Poster oder Buchcover erscheinen könnte, ist es wahrscheinlich zeitlos.
- Abstand ist Struktur. Verwenden Sie ein 8-Px-Raster. Engere Abstände gruppieren verwandte Elemente; großzügige Abstände lassen Hero-Inhalte atmen.
- Barrierefreiheit ist nicht verhandelbar. WCAG-AA-Kontrastmindestwerte. Fokus-Indikatoren. Semantisches HTML. Tastaturnavigation.
- Keine generische KI-Ästhetik. Vermeiden Sie: Lila-auf-Weiß-Verläufe, Inter/Roboto-Standardeinstellungen, gleichmäßig verteilte Kartenraster und Standardlayouts. Jede Oberfläche sollte für ihren spezifischen Kontext gestaltet sein.
Qualitätsmaßstab
Die Ausgabe sollte dem entsprechen, was man von einem Senior-Produktdesigner bei einem führenden SaaS-Unternehmen erwarten würde:
- Sauberer visueller Rhythmus mit bewusster Asymmetrie
- Offensichtliche interaktive Affordanzen (Hover-, Fokus-, Aktivzustände)
- Graceful Edge Cases (Leerzustände, Laden, Fehler)
- Responsive ohne Breakpoint-Artefakte
Arbeitsablauf
Schritt 1 — Komponenten identifizieren
Lesen Sie die Anfrage des Benutzers und bestimmen Sie, welche UI-Komponenten benötigt werden. Ziehen Sie components.md heran, um jede Komponente anhand ihres Namens oder Alias zu finden.
Häufige Zuordnungen:
- "Navigation" → Header, Navigation, Breadcrumbs, Tabs
- "Formular" → Formular, Texteingabe, Select, Checkbox, Radio-Button, Button
- "Datenanzeige" → Tabelle, Karte, Liste, Badge, Avatar
- "Feedback" → Alert, Toast, Modal, Spinner, Progress-Bar, Leerzustand
- "Eingabe" → Texteingabe, Textarea, Select, Combobox, Datepicker, Datei-Upload, Slider
- "Overlay" → Modal, Drawer, Popover, Tooltip, Dropdown-Menü
Schritt 2 — Best Practices anwenden
Befolgen Sie für jede Komponente in der Oberfläche deren Best Practices aus der Referenz. Wichtige Regeln, die allgemein gelten:
Layout
- Einspaltige Formulare — schneller zu scannen
- Konsistente vertikale Spalten in wiederholten Zeilen (Listen, Tabellen)
- Feste Breitenschlitze für Symbole und Aktionen, auch wenn sie leer sind
- Karten: Medien → Titel → Metadaten → Aktion-Hierarchie
Interaktion
- Buttons: Verb-zuerst-Beschriftungen ("Änderungen speichern", nicht "Absenden"), ein primärer Button pro Abschnitt
- Modals: Immer X, Abbrechen und Escape bereitstellen; Fokus einfangen; Fokus beim Schließen zurückgeben
- Toasts: Automatisches Ausblenden nach 4–6 s, manuelles Ausblenden erlauben, neueste oben stapeln
- Toggles: Nur sofortige Wirkung — Checkboxen in Formularen verwenden, die Speichern erfordern
Typografie & Abstände
- Strenge Überschriftenhierarchie (h1 → h2 → h3), ein h1 pro Seite
- Mindestens 44 Px Touch-Ziele auf Mobilgeräten
- Beschriftungen über Eingabefeldern (vertikale Formulare) oder daneben (horizontal)
- Platzhaltertext als Formathinweis, niemals als Ersatz für Beschriftung
Zustände
- Leere Zustände: Illustration + hilfreiche Überschrift + primärer CTA
- Laden: Skelettbildschirme > Spinner (nach 300 ms Verzögerung anzeigen)
- Validierung: Inline bei Unschärfe, nicht bei jedem Tastendruck
- Deaktivierte Elemente: visuell unterscheidbar, aber noch lesbar
Schritt 3 — Eine Designrichtung wählen
Wählen Sie die Stilvorgabe, die am besten der Absicht des Benutzers entspricht, oder fragen Sie, falls unklar:
Modernes SaaS (Standard)
- Neutrale Palette, ein starker Akzent
- 8 Px Raster, großzügiger Weißraum
- Sauber, professionell, geräumig
Apple-ähnlich Minimal
- Nahezu monochrom, warme Grautöne
- Große Typografie-Hierarchie, enger Laufweite bei Display-Text
- Reichlich Weißraum, Mikrointeraktionen (150–250 ms ease-out)
Unternehmen / Corporate
- Informationsdicht, klar abgegrenzte Bereiche
- Kompakte Abstandsskala (4/8/12/16/24 Px)
- Robuste Formularbehandlung, vollständig tastaturnavigierbar
Kreativ / Portfolio
- Mutig, ausdrucksstark, starke visuelle Persönlichkeit
- Asymmetrische Layouts, dramatischer Größenkontrast
- Redaktionelle Typografie, lebendige Akzentfarben
Daten-Dashboard
- Datendicht, optimiert für Lesbarkeit
- Konsistente vertikale Ausrichtung über Zeilen hinweg
- Klare Metrikhierarchie: KPI → Trend → Detail
Schritt 4 — Code generieren
Schreiben Sie produktionsreifen Code gemäß den folgenden Regeln:
Stack: React + Tailwind CSS (sofern vom Benutzer nicht anders angegeben)
Abstände: Tailwind-Abstandsskala (p-2, gap-4, etc.) auf einem 8-Px-Raster
Farben: CSS-Variablen oder Tailwind-Konfiguration für Palettenkonsistenz
Typografie: Tailwind-Text-Dienstprogramme; ausdrucksstarke Schriftkombinationen via Google Fonts
Zustände: Hover-, Fokus-, Aktiv- und Deaktiviert-Zustände für alle interaktiven Elemente implementieren
Responsive: Mobile-First; bei 375, 768, 1440 Px testen
Barrierefreiheit: Semantisches HTML, ARIA wo nötig, Fokusverwaltung
Komponenten-Kurzreferenz
Nachfolgend die 15 am häufigsten benötigten Komponenten. Für die vollständige Referenz mit über 60 Komponenten, einschließlich Best Practices, Aliassen und Layout-Beispielen, siehe components.md.
| Komponente | Wann verwenden | Wichtige Regel |
|---|---|---|
| Button | Aktionen auslösen | Verb-zuerst-Beschriftungen; ein primärer Button pro Abschnitt |
| Card | Eine Entität darstellen | Medien → Titel → Metadaten → Aktion; Schatten ODER Rahmen, nicht beides |
| Modal | Fokussierte Aufmerksamkeit | Fokus einfangen; X + Abbrechen + Escape zum Schließen |
| Navigation | Seiten-/Abschnittslinks | Maximal 5–7 Einträge; klarer Aktivzustand |
| Tabelle | Strukturierte Daten | Sticky-Header; Zahlen rechtsbündig; sortierbare Spalten |
| Tabs | Panels wechseln | 2–7 Tabs; aktiver Indikator; Accordion auf Mobilgeräten |
| Formular | Eingaben sammeln | Einspaltig; Beschriftungen oben; Inline-Validierung bei Unschärfe |
| Toast | Kurze Bestätigung | Automatisches Ausblenden nach 4–6 s; Rückgängig-Aktion für destruktive Vorgänge |
| Alert | Wichtiger Status | Semantische Farben + Symbol; maximal 2 Sätze |
| Drawer | Sekundäres Panel | Rechts für Details, links für Navigation; Desktop 320–480 Px |
| Sucheingabe | Inhalte finden | Cmd/Ctrl+K-Tastenkürzel; Entprellung 200–300 ms |
| Leerzustand | Keine Daten | Illustration + Überschrift + CTA; positive Rahmung |
| Skelett | Ladeplatzhalter | Der tatsächlichen Layoutform entsprechen; Schimmer-Animation |
| Badge | Status-/Metadaten-Label | 1–2 Wörter; Pillenform für Status; begrenzte Farbpalette |
| Dropdown-Menü | Aktions-/Navigationsoptionen | 7±2 Einträge; destruktive Aktionen zuletzt in Rot |
Zu vermeidende Anti-Patterns
Generieren Sie niemals die folgenden Muster — sie signalisieren generische, minderwertige UI:
- Regenbogen-Badges — jeder Status eine andere knallige Farbe ohne semantische Bedeutung
- Modal im Modal — verwenden Sie für komplexe Abläufe eine Seite oder einen Drawer
- Deaktivierter Submit ohne Erklärung — geben Sie immer an, was fehlt
- Spinner für vorhersagbare Layouts — verwenden Sie stattdessen Skelettbildschirme
- "Hier klicken"-Links — Linktext muss das Ziel beschreiben
- Hamburger-Menü auf dem Desktop — verwenden Sie sichtbare Navigation, wenn der Platz es erlaubt
- Automatisch vorrückende Karussells — lassen Sie Benutzer die Navigation steuern
- Nur-Platzhalter-Formularfelder — verwenden Sie immer sichtbare Beschriftungen
- Gleichgewichtige Buttons — etablieren Sie eine Primär-/Sekundär-/Tertiär-Hierarchie
- Winziger Text (< 12 Px) — Fließtext mindestens 14 Px, bevorzugt 16 Px