Heim
frontend-design-review
microsoft/skills
UI-Implementierungen auf die Einhaltung von Designqualitätsstandards und die Konformität mit dem Designsystem überprüfen oder unverwechselbare, produktionsreife Frontend-Oberflächen von Grund auf neu erstellen.
...Alle erweiternFrontend-Design-Prüfung
Überprüfen Sie UI-Implementierungen anhand von Designqualitätsstandards und Ihres Designsystems ODER erstellen Sie von Grund auf unverwechselbare, produktionsreife Frontend-Oberflächen.
Zwei Modi
Modus 1: Design-Überprüfung
Bewerten Sie bestehende Benutzeroberflächen hinsichtlich der Einhaltung des Designsystems, der drei Qualitätssäulen (Reibungslos, Hochwertige Ausführung, Vertrauenswürdig), der Barrierefreiheit und der Codequalität.
Modus 2: Kreatives Frontend-Design
Entwerfen Sie unverwechselbare Benutzeroberflächen, die die generische „AI-Slop“-Ästhetik vermeiden, eine klare konzeptionelle Ausrichtung aufweisen und präzise umgesetzt sind.
Kreatives Frontend-Design
Legen Sie vor Beginn der Programmierung eine ästhetische Ausrichtung fest:
- Zweck: Welches Problem löst dies? Wer nutzt es?
- Stil: minimalistisch, maximalistisch, retro-futuristisch, organisch, luxuriös, verspielt, redaktionell, brutalistisch, Art déco, sanft/pastellfarben, industriell usw.
- Einschränkungen: Framework, Leistung, Anforderungen an die Barrierefreiheit.
- Differenzierung: Was macht das Design unverwechselbar und kontextgerecht?
Ästhetische Richtlinien
- Typografie: Markante Schriftarten, die die Ästhetik unterstreichen. Kombinieren Sie eine Display-Schrift mit einer raffinierten Grundschrift. Vermeiden Sie Inter, Roboto, Arial und Space Grotesk.
- Farbe & Thema: Einheitliche Farbpalette mit CSS-Variablen. Dominante Farben + kräftige Akzente > zurückhaltende, gleichmäßig verteilte Farbpaletten.
- Bewegung: Vorzugsweise ausschließlich CSS. Ein gut abgestimmter Seitenladevorgang mit gestaffelten Einblendungen > verstreute Mikrointeraktionen.
- Räumliche Komposition: Asymmetrie, Überlappungen, diagonaler Fluss, rasterbrechende Elemente, großzügiger Negativraum ODER kontrollierte Dichte.
- Hintergründe: Farbverlaufs-Meshes, Rauschtexturen, geometrische Muster, mehrschichtige Transparenzen, dramatische Schatten, Korn-Overlays.
VERMEIDEN: Überbeanspruchte Schriftarten, klischeehafte Farbschemata, vorhersehbare Layouts, Design nach Schema F ohne kontextspezifischen Charakter.
Passen Sie die Komplexität der Umsetzung an die Vision an. Maximalistisch = aufwendiger Code. Minimalistisch = Zurückhaltung und Präzision.
Design-Review
Workflow des Design-Systems
Vor der Implementierung:
- Überprüfen Sie die Komponente in Ihrem Storybook bzw. Ihrer Komponentenbibliothek hinsichtlich API und Verwendung
- Verwenden Sie den Figma Dev Mode, um genaue Spezifikationen (Abstände, Tokens, Eigenschaften) zu erhalten
- Implementieren Sie die Komponente unter Verwendung der Design-System-Komponenten und Design-Tokens
Während der Überprüfung:
- Vergleichen Sie die Umsetzung mit dem Figma-Design
- Überprüfen Sie, ob Design-Tokens verwendet werden (keine fest codierten Werte)
- Prüfen Sie, ob alle Varianten/Zustände korrekt implementiert sind
- Abweichungen kennzeichnen (Design-Freigabe erforderlich)
Falls die Komponente nicht vorhanden ist:
- Prüfen, ob eine vorhandene Komponente angepasst werden kann
- Wenden Sie sich an die Designabteilung, um eine neue Komponente erstellen zu lassen
- Ausnahme und Begründung im Code dokumentieren
Überprüfungsprozess
- Benutzeraufgabe identifizieren
- Prüfen Sie das Designsystem auf passende Muster
- Ästhetische Ausrichtung bewerten
- Umfang festlegen (Komponente, Funktion oder Ablauf)
- Jede Säule bewerten
- Probleme bewerten und priorisieren (blockierend/schwerwiegend/geringfügig)
- Empfehlungen mit Beispielen aus dem Designsystem geben
Kernprinzipien
- Aufgabenabschluss: Möglichst wenige Klicks. Jeder Bildschirm beantwortet die Fragen „Was kann ich tun?“ und „Was passiert als Nächstes?“
- Aktionshierarchie: 1–2 primäre Aktionen pro Ansicht. Schrittweise Offenlegung sekundärer Aktionen.
- Onboarding: Erläutern Sie Funktionen bei der Einführung. Intelligente Standardeinstellungen statt Konfiguration.
- Navigation: Klare Einstiegs- und Ausstiegspunkte. „Zurück“ und „Abbrechen“ sind immer verfügbar. Breadcrumbs für komplexe Abläufe.
Qualitätssäulen
1. Reibungsloser Übergang von der Erkenntnis zur Aktion
Bewertung: Lässt sich die Aufgabe in ≤3 Interaktionen erledigen? Ist die primäre Aktion offensichtlich und eindeutig?
Warnsignale: Übermäßige Klicks, mehrere konkurrierende Hauptschaltflächen, versteckte Aktionen, Sackgassen.
2. Qualität ist Handwerk
Bewertung:
- Einhaltung des Designsystems: entspricht den Figma-Spezifikationen, verwendet Design-Tokens
- Ästhetische Ausrichtung: unverwechselbare Typografie, einheitliches Farbschema, bewusste Bewegungselemente
- Barrierefreiheit: Mindestens Stufe C (WCAG 2.1 A), idealerweise Stufe B (WCAG 2.1 AA)
Warnsignale: Generische KI-Ästhetik, fest codierte Werte, Implementierung stimmt nicht mit Figma überein, fehlerhafter Reflow, fehlende Fokusindikatoren.
3. Vertrauenswürdiges Design
Bewertung:
- KI-Transparenz: Hinweis auf KI-generierte Inhalte
- Fehlertransparenz: umsetzbare Fehlermeldungen
Warnsignale: Fehlende KI-Haftungsausschlüsse, undurchsichtige Fehler ohne Hilfestellung.
Format der Überprüfungsergebnisse
Die vollständige Überprüfungsvorlage finden Sie unter „references/review-output-format.md“.
Modifikatoren für die Überprüfungsart
Kontextspezifische Schwerpunkte der Überprüfung (PR, Kreativ, Design, Barrierefreiheit) finden Sie unter „references/review-type-modifiers.md“.
Schnell-Checkliste
Siehe „references/quick-checklist.md“ für die Checkliste vor der Freigabe, die die Einhaltung des Designsystems, ästhetische Qualität, reibungslose Bedienung, handwerkliche Qualität und Vertrauenswürdigkeit abdeckt.
Musterbeispiele
Siehe references/pattern-examples.md für gute und schlechte Beispiele für die Überprüfung von kreativem Frontend und Designsystemen.
Danksagungen
Die Prinzipien für kreatives Frontend-Design wurden von den Frontend-Design-Kompetenzen von Anthropic inspiriert. Die Prinzipien für die Design-Überprüfung und das Rahmenwerk der Qualitätssäulen wurden von @Quirinevwm für die systematische Bewertung von Benutzeroberflächen entwickelt.
---
name: frontend-design-review
description: Review UI implementations against design quality standards and design system compliance, or create distinctive, production-grade frontend interfaces from scratch.
---
# Frontend Design Review
Review UI implementations against design quality standards and your design system **OR** create distinctive, production-grade frontend interfaces from scratch.
## Two Modes
### Mode 1: Design Review
Evaluate existing UI for design system compliance, three quality pillars (Frictionless, Quality Craft, Trustworthy), accessibility, and code quality.
### Mode 2: Creative Frontend Design
Create distinctive interfaces that avoid generic "AI slop" aesthetics, have clear conceptual direction, and execute with precision.
---
## Creative Frontend Design
Before coding, commit to an aesthetic direction:
- **Purpose**: What problem does this solve? Who uses it?
- **Tone**: minimal, maximalist, retro-futuristic, organic, luxury, playful, editorial, brutalist, art deco, soft/pastel, industrial, etc.
- **Constraints**: Framework, performance, accessibility requirements.
- **Differentiation**: What makes this distinctive and context-appropriate?
### Aesthetics Guidelines
- **Typography**: Distinctive fonts that elevate aesthetics. Pair a display font with a refined body font. Avoid Inter, Roboto, Arial, Space Grotesk.
- **Color & Theme**: Cohesive palette with CSS variables. Dominant colors + sharp accents > timid, evenly-distributed palettes.
- **Motion**: CSS-only preferred. One well-orchestrated page load with staggered reveals > scattered micro-interactions.
- **Spatial Composition**: Asymmetry, overlap, diagonal flow, grid-breaking elements, generous negative space OR controlled density.
- **Backgrounds**: Gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, grain overlays.
**AVOID**: Overused fonts, cliched color schemes, predictable layouts, cookie-cutter design without context-specific character.
Match implementation complexity to vision. Maximalist = elaborate code. Minimalist = restraint and precision.
---
## Design Review
### Design System Workflow
**Before implementing:**
1. Review component in your Storybook / component library for API and usage
2. Use Figma Dev Mode to get exact specs (spacing, tokens, properties)
3. Implement using design system components + design tokens
**During review:**
1. Compare implementation to Figma design
2. Verify design tokens are used (not hardcoded values)
3. Check all variants/states are implemented correctly
4. Flag deviations (needs design approval)
**If component doesn't exist:**
1. Check if existing component can be adapted
2. Reach out to design for new component creation
3. Document exception and rationale in code
### Review Process
1. Identify user task
2. Check design system for matching patterns
3. Evaluate aesthetic direction
4. Identify scope (component, feature, or flow)
5. Evaluate each pillar
6. Score and prioritize issues (blocking/major/minor)
7. Provide recommendations with design system examples
### Core Principles
- **Task completion**: Minimum clicks. Every screen answers "What can I do?" and "What happens next?"
- **Action hierarchy**: 1-2 primary actions per view. Progressive disclosure for secondary.
- **Onboarding**: Explain features on introduction. Smart defaults over configuration.
- **Navigation**: Clear entry/exit points. Back/cancel always available. Breadcrumbs for deep flows.
---
## Quality Pillars
### 1. Frictionless Insight to Action
**Evaluate:** Task completable in ≤3 interactions? Primary action obvious and singular?
**Red flags:** Excessive clicks, multiple competing primary buttons, buried actions, dead ends.
### 2. Quality is Craft
**Evaluate:**
- Design system compliance: matches Figma specs, uses design tokens
- Aesthetic direction: distinctive typography, cohesive colors, intentional motion
- Accessibility: Grade C minimum (WCAG 2.1 A), Grade B ideal (WCAG 2.1 AA)
**Red flags:** Generic AI aesthetics, hardcoded values, implementation doesn't match Figma, broken reflow, missing focus indicators.
### 3. Trustworthy Building
**Evaluate:**
- AI transparency: disclaimer on AI-generated content
- Error transparency: actionable error messages
**Red flags:** Missing AI disclaimers, opaque errors without guidance.
---
## Review Output Format
See [references/review-output-format.md](references/review-output-format.md) for the full review template.
## Review Type Modifiers
See [references/review-type-modifiers.md](references/review-type-modifiers.md) for context-specific review focus areas (PR, Creative, Design, Accessibility).
## Quick Checklist
See [references/quick-checklist.md](references/quick-checklist.md) for the pre-approval checklist covering design system compliance, aesthetic quality, frictionless, quality craft, and trustworthy pillars.
## Pattern Examples
See [references/pattern-examples.md](references/pattern-examples.md) for good/bad examples of creative frontend and design system review work.
---
## Acknowledgments
Creative frontend principles inspired by [Anthropic's frontend-design skill](https://github.com/anthropics/skills/tree/main/skills/frontend-design). Design review principles and quality pillar framework created by [@Quirinevwm](https://github.com/Quirinevwm) for systematic UI evaluation.
Alle Dateien
0 Dateienfrontend-design-review installieren
Laden Sie die Skill-Dateien herunter und entpacken Sie sie in Ihr Verzeichnis „.claude/skills/“.
ZIP herunterladenKlonen Sie das Repository und kopieren Sie die Skill-Dateien in Ihr Projekt.
git clone https://github.com/microsoft/skills/tree/main/.github/skills/frontend-design-review # Copy SKILL.md to your .claude/skills/ directory
Kopieren
