Frontend Design-Review
Überprüfe UI-Implementierungen anhand von Designqualitätsstandards und deinem Designsystem ODER erstelle von Grund auf unverwechselbare, produktionsreife Frontend-Oberflächen.
Zwei Modi
Modus 1: Design-Review
Bewerte bestehende UI auf Designsystem-Konformität, drei Qualitätssäulen (Reibungslosigkeit, Handwerkskunst, Vertrauenswürdigkeit), Barrierefreiheit und Codequalität.
Modus 2: Kreatives Frontend-Design
Erstelle unverwechselbare Oberflächen, die generische „KI-Schrott“-Ästhetik vermeiden, eine klare konzeptionelle Richtung haben und präzise umgesetzt werden.
Kreatives Frontend-Design
Lege vor dem Codieren eine ästhetische Richtung fest:
- Zweck: Welches Problem löst dies? Wer nutzt es?
- Ton: Minimalistisch, maximalistisch, retro-futuristisch, organisch, luxuriös, verspielt, editorial, brutalistisch, Art déco, sanft/pastellig, industriell usw.
- Einschränkungen: Framework, Leistung, Barrierefreiheitsanforderungen.
- Abgrenzung: Was macht dies unverwechselbar und kontextgerecht?
Richtlinien für Ästhetik
- Typografie: Herausragende Schriften, die die Ästhetik heben. Kombiniere eine Auszeichnungsschrift mit einer eleganten Fließtextschrift. Vermeide Inter, Roboto, Arial, Space Grotesk.
- Farbe & Thema: Kohärente Palette mit CSS-Variablen. Dominante Farben + scharfe Akzente > zurückhaltende, gleichmäßig verteilte Paletten.
- Bewegung: Bevorzugt CSS-only. Ein gut orchestrierter Seitenaufbau mit gestaffelten Einblendungen > verstreute Mikrointeraktionen.
- Räumliche Komposition: Asymmetrie, Überlappungen, diagonaler Fluss, rasterbrechende Elemente, großzügiger Negativraum ODER kontrollierte Dichte.
- Hintergründe: Verlaufsnetze, Rauschtexturen, geometrische Muster, geschichtete Transparenzen, dramatische Schatten, Körnungsoverlays.
VERMEIDE: Überbeanspruchte Schriften, klischeehafte Farbschemata, vorhersehbare Layouts, Einheitsdesign ohne kontextspezifischen Charakter.
Passe die Implementierungskomplexität an die Vision an. Maximalistisch = aufwendiger Code. Minimalistisch = Zurückhaltung und Präzision.
Design-Review
Arbeitsablauf mit dem Designsystem
Vor der Implementierung:
- Überprüfe die Komponente in deinem Storybook / deiner Komponentenbibliothek auf API und Nutzung
- Verwende den Figma Dev Mode, um genaue Spezifikationen (Abstände, Tokens, Eigenschaften) zu erhalten
- Implementiere mit Komponenten des Designsystems + Design-Tokens
Während des Reviews:
- Vergleiche die Implementierung mit dem Figma-Design
- Stelle sicher, dass Design-Tokens verwendet werden (keine hartcodierten Werte)
- Prüfe, ob alle Varianten/Zustände korrekt implementiert sind
- Markiere Abweichungen (benötigt Designfreigabe)
Wenn die Komponente nicht existiert:
- Prüfe, ob eine vorhandene Komponente angepasst werden kann
- Wende dich an das Designteam zur Erstellung einer neuen Komponente
- Dokumentiere Ausnahme und Begründung im Code
Review-Prozess
- Identifiziere die Benutzeraufgabe
- Überprüfe das Designsystem auf passende Muster
- Bewerte die ästhetische Richtung
- Bestimme den Umfang (Komponente, Funktion oder Ablauf)
- Bewerte jede Säule
- Bewerte und priorisiere Probleme (blockierend/wichtig/geringfügig)
- Gib Empfehlungen mit Beispielen aus dem Designsystem
Kernprinzipien
- Aufgabenerfüllung: Minimale Klicks. Jeder Bildschirm beantwortet „Was kann ich tun?“ und „Was passiert als nächstes?“
- Aktionshierarchie: 1–2 primäre Aktionen pro Ansicht. Progressive Offenlegung für sekundäre Aktionen.
- Onboarding: Erkläre Funktionen bei der Einführung. Intelligente Standardeinstellungen vor Konfiguration.
- Navigation: Klare Ein-/Ausstiegspunkte. Zurück/Abbrechen immer verfügbar. Breadcrumbs für tiefe Abläufe.
Qualitätssäulen
1. Reibungsloser Einblick zur Aktion
Bewerte: Ist die Aufgabe in ≤3 Interaktionen erledigbar? Ist die primäre Aktion offensichtlich und einzigartig?
Alarmzeichen: Übermäßige Klicks, mehrere konkurrierende primäre Buttons, vergrabene Aktionen, Sackgassen.
2. Qualität ist Handwerkskunst
Bewerte:
- Designsystem-Konformität: Entspricht Figma-Spezifikationen, verwendet Design-Tokens
- Ästhetische Richtung: Unverwechselbare Typografie, kohärente Farben, absichtsvolle Bewegung
- Barrierefreiheit: Mindestens Stufe C (WCAG 2.1 A), ideal Stufe B (WCAG 2.1 AA)
Alarmzeichen: Generische KI-Ästhetik, hartcodierte Werte, Implementierung entspricht nicht Figma, defekter Reflow, fehlende Fokus-Indikatoren.
3. Vertrauenswürdiges Bauen
Bewerte:
- KI-Transparenz: Haftungsausschluss bei KI-generierten Inhalten
- Fehlertransparenz: Umsetzbare Fehlermeldungen
Alarmzeichen: Fehlende KI-Haftungsausschlüsse, undurchsichtige Fehler ohne Anleitung.
Review-Ausgabeformat
Siehe references/review-output-format.md für die vollständige Review-Vorlage.
Review-Typ-Modifikatoren
Siehe references/review-type-modifiers.md für kontextspezifische Review-Schwerpunkte (PR, Kreativ, Design, Barrierefreiheit).
Kurzcheckliste
Siehe references/quick-checklist.md für die Vorabnahme-Checkliste, die Designsystem-Konformität, ästhetische Qualität, Reibungslosigkeit, Handwerkskunst und vertrauenswürdiges Bauen abdeckt.
Musterbeispiele
Siehe references/pattern-examples.md für gute/schlechte Beispiele kreativer Frontend- und Designsystem-Reviews.
Danksagungen
Kreative Frontend-Prinzipien inspiriert von Anthropics Frontend-Design-Skill. Design-Review-Prinzipien und Qualitätssäulen-Rahmenwerk erstellt von @Quirinevwm.