Lokalisierter Leseleitfaden
frontend-design-reviewZweck, Verwendung und Quelle
Erstellen und bewerten Sie unverwechselbare, produktionsreife Frontend-Oberflächen mit hoher Designqualität und Designsystemkonformität. Die Bewertung erfolgt anhand von drei Kriterien: reibungslose Umsetzung von Erkenntnissen in Handlungsanweisungen, hochwertige Ausführung und zuverlässige Entwicklung. ANWENDUNG: PR-Reviews, Design-Reviews, Barrierefreiheitsprüfungen, Überprüfung der Designsystemkonformität, kreatives Frontend-Design, UI-Code-Reviews, Komponenten-Reviews, Responsive-Design-Prüfungen, Theme-Tests und die Entwicklung einprägsamer Benutzeroberflächen. NICHT ANWENDUNG: Backend-API-Reviews, Datenbank-Schema-Reviews, Infrastruktur- oder DevOps-Arbeiten, reine Geschäftslogik ohne Benutzeroberfläche oder Nicht-Frontend-Code.
Quelle abgerufen:
- Quell-Repository
- microsoft/skills
- SKILL.md
.github/skills/frontend-design-review/SKILL.md- Repository-Sterne
- 3,157
- Repository zuletzt aktualisiert
- 2026-10-31
- Fähigkeitskategorien
- Entwicklung
- Letzte Datenerfassung
Lizenz: MIT
Die Workflow-Auszüge dienen als Lesehilfe und sind keine ausführbaren Anweisungen von Codez. Für die Erstellung dieser Seite wurde keine Drittanbieter-Skill verwendet.
Die folgenden Abschnitte zu Zweck und Arbeitsablauf sind vorgelagertes Material, das zur besseren Lesbarkeit aufbereitet und übersetzt wurde. Sie unterscheiden sich von der separat gekennzeichneten redaktionellen Analyse von Codez.
Was diese Fähigkeit bewirkt
Erstellen und bewerten Sie unverwechselbare, produktionsreife Frontend-Oberflächen mit hoher Designqualität und Designsystemkonformität. Die Bewertung erfolgt anhand von drei Kriterien: reibungslose Umsetzung von Erkenntnissen in Handlungsanweisungen, hochwertige Ausführung und zuverlässige Entwicklung. ANWENDUNG: PR-Reviews, Design-Reviews, Barrierefreiheitsprüfungen, Überprüfung der Designsystemkonformität, kreatives Frontend-Design, UI-Code-Reviews, Komponenten-Reviews, Responsive-Design-Prüfungen, Theme-Tests und die Entwicklung einprägsamer Benutzeroberflächen. NICHT ANWENDUNG: Backend-API-Reviews, Datenbank-Schema-Reviews, Infrastruktur- oder DevOps-Arbeiten, reine Geschäftslogik ohne Benutzeroberfläche oder Nicht-Frontend-Code.
Wie der vorgelagerte Workflow funktioniert
Design-System-Workflow
Überprüfen Sie die Komponente in Ihrer Storybook-/Komponentenbibliothek hinsichtlich API und Verwendung. Nutzen Sie den Figma-Entwicklermodus, um genaue Spezifikationen (Abstände, Tokens, Eigenschaften) zu erhalten. Implementieren Sie die Komponente mithilfe von Designsystemkomponenten und Design-Tokens. Vergleichen Sie die Implementierung mit dem Figma-Design.
Aufwärtspassage · L54 ↗Überprüfungsprozess
Benutzeraufgabe identifizieren Designsystem auf übereinstimmende Muster prüfen Ästhetische Ausrichtung bewerten Umfang festlegen (Komponente, Funktion oder Ablauf)
Aufwärtspassage · L72 ↗Grundprinzipien
Aufgabenerfüllung: Minimale Klicks. Jeder Bildschirm beantwortet die Fragen „Was kann ich tun?“ und „Wie geht es weiter?“. Aktionshierarchie:1-2Primäre Aktionen pro Ansicht. Progressive Offenlegung sekundärer Aktionen. Onboarding: Funktionen bei der Einführung erklären. Intelligente Standardeinstellungen statt Konfiguration. Navigation: Klarentry/exitPunkte.Back/cancelImmer verfügbar. Wegweiser für tiefe Ströme.
Aufwärtspassage · L82 ↗Anforderungen und Einrichtung
Aus dieser Datei wurde kein Abschnitt mit kurzen Anforderungen ausgewählt. Dies bedeutet nicht, dass die Fertigkeit keine Abhängigkeiten hat. Überprüfen Sie die Anweisungen zur Repository-Einrichtung und die referenzierten Dateien.
Grenzwerte und Qualitätskontrollen
2Qualität ist Handwerkskunst
Designsystemkonformität: Entspricht den Figma-Spezifikationen, verwendet Design-Tokens. Ästhetische Ausrichtung: Unverwechselbare Typografie, stimmige Farben, gezielte Bewegung.
Aufwärtspassage · L99 ↗Beginnen Sie mit einem sicheren Testlauf
- Prüfen Sie den unterstützten Host und die Installationsanweisungen für das Repository. Halten Sie das Skill-Verzeichnis und die darin enthaltenen Skripte, Assets und Dokumentationen zusammen;SKILL.mdEine Einzelperson kann Abhängigkeiten außer Acht lassen.
- Geben Sie dem Agenten Ihre tatsächlichen Eingaben, die gewünschten Ausgaben und die Akzeptanzkriterien an. Aufrufsyntax und verfügbare Tools hängen vom Hostsystem ab; diese Website geht nicht von einem universellen Installationsbefehl aus.
- Testen Sie den Quellworkflow in einem temporären Projekt oder auf einer Kopie. Überprüfen Sie Vorgänge, die Dateien, Remote-Dienste oder abrechnungsfähige Ressourcen ändern, bevor Sie diese zulassen.
- Überprüfen Sie die Ausgabe anhand der Quellqualitätsprüfungen und Ihrer eigenen Anforderungen. Ein erfolgreicher Trigger oder eine hohe Anzahl von Sternen im Repository garantiert kein korrektes Ergebnis.
Lesen Sie mehr dazu in der Quelle.
- Frontend-Design-Überprüfung
- Modus1Designprüfung
- Modus2Kreatives Frontend-Design
- Kreatives Frontend-Design
- Ästhetikrichtlinien
- Design-System-Workflow
- Überprüfungsprozess
- Grundprinzipien
- 1Reibungsloser Übergang von der Erkenntnis zum Handeln
- 2Qualität ist Handwerkskunst
- 3Vertrauenswürdiges Gebäude
- Ausgabeformat der Überprüfung
- Überprüfungstypmodifikatoren
- Kurz-Checkliste
- Musterbeispiele
- Danksagungen
Verwandte Fähigkeiten
Übersetzung und Umfang
Dieser Leseleitfaden wählt Passagen aus dem markierten stromaufwärts gelegenen Abschnitt aus.SKILL.mdDie Übersetzung wurde unterstützt. Es handelt sich weder um ein vollständiges Handbuch noch um eine Garantie für geprüfte Kompatibilität. Lesen Sie vor der Verwendung das Original und die darin referenzierten Dateien.
Diese Einleitung bezieht sich auf die unten angepinnte Version; die aktuelle Repository-Aktivität und der Erfassungszeitpunkt werden separat angezeigt.
- Angeheftete Quelle
- Lesen Sie das Original ↗
- Quelle abgerufen
- Source-Commit
00d66a64919edca5bca2c673373444e36a4b5461- Quelle SHA-256
639b68cdc6f9b4cdd66a111851555afee2eb82d4de37bf9cbad3be845bb00c2d