gabrielciprianoo/design-review

Design Review (Refactoring UI)

Das Wissen befindet sich in references/. Lade niemals alles. Folge der Kette: SKILL.md → INDEX.md → nur die benötigte(n) Datei(en).

1. Klassifiziere die Anfrage

Aufgabenart	Signale	Laden
Komponentenfix	„Überprüfe diese Karten / dieses Formular / die Navigationsleiste“	references/components/INDEX.md → 1–2 components/<name>.md
Bildschirmprüfung	„Überprüfe diese Seite / diesen Bildschirm / diese App“	references/principles/INDEX.md → hierarchy.md, layout-spacing.md, typography.md, color.md; füge depth.md, images.md, finishing.md nur hinzu, wenn relevant
Redesign	„Gestalte neu / schlage eine bessere Version vor“	Satz für Bildschirmprüfung + personality.md + systems.md (+ process.md)
Verfeinerung	„Mach es professioneller / letzter Schliff“	finishing.md, depth.md, images.md
Neues Design	„Entwirf … von Grund auf“	process.md, personality.md, systems.md, dann Themendateien nach Bedarf

Identifiziere außerdem, welche Komponenten auf dem Bildschirm zu sehen sind (siehe components/INDEX.md-Beschreibungen); öffne bei einer Bildschirmprüfung die Komponentendateien für die 1–2 dominierenden Komponenten.

2. Erfasse die Oberfläche

Verwende, was verfügbar ist, in dieser Reihenfolge:

1. Browser-Tool (Claude in Chrome, eingebauter Browser, Playwright MCP): öffne die Seite, mache einen Screenshot, führe dann scripts/measure_styles.js mit der JavaScript-Ausführung des Tools aus. Um auf einen Bereich zu beschränken, führe zuerst window.__DR_ROOT = '<css-selektor>' aus.
2. Shell + Playwright (Claude Code): python3 scripts/capture.py <url|datei> [--selector ".karte"] [--out verzeichnis] → Screenshot, Graustufen-Screenshot, measurements.json.
3. Nur Screenshot: nur visuelle Prüfungen; gib an, dass Messungen nicht verfügbar waren.
4. Nur Code: lies das CSS/Markup und berechne die gleichen Signale manuell.

Führe immer den Graustufentest durch (PRO-03): betrachte eine entsättigte Version (capture.py erstellt eine; in einem Browser-Tool wende document.documentElement.style.filter='grayscale(1)' an, mache einen Screenshot, entferne den Filter dann wieder).

3. Analysiere

• Ordne jeden Befund einer Prinzip-ID zu. Verwende Messungen als Belege (die Schlüssel von measurements.json verweisen auf IDs in Kommentaren von measure_styles.js).
• Prüfe in dieser Reihenfolge der Auswirkung: Hierarchie → Abstände/Layout → Typografie → Farbe/Kontrast → Tiefe → Bilder → letzter Schliff.
• Messungen sind Hinweise, keine endgültigen Urteile: bestätige jeden Befund anhand des Screenshots, bevor du ihn meldest.
• Respektiere die bestehende Marke/den Charakter, es sei denn, eine Änderung wird gewünscht (PER-*). Gib bei Redesigns zuerst den angestrebten Charakter an.
• Grundsätze aus [process] leiten Redesigns; melde sie nicht als Mängel in einer Prüfung.

4. Liefere

A. Befunde – nach Auswirkung geordnet, maximal ~10, jeder als: [ID] Problem — Beleg (gemessener Wert oder Sichtbares) → Lösung (konkrete Werte aus den Skalen des Buches)

B. Korrigiertes Design – sofern der Nutzer nicht nur die Kritik wünscht:

• Baue den Bildschirm / die Komponente als eigenständige HTML/CSS-Seite neu auf, die die Korrekturen anwendet, und verwende die Skalen aus den Prinzipiendateien (Abstände 4/8/12/16/24/32/48/64…, Schriftgrößen 12/14/16/18/20/24/30/36/48…, 5-stufige Schatten, Farbnuancen 100–900). Zeige nach Möglichkeit Vorher (Screenshot) und Nachher nebeneinander.
• Oder, wenn der Nutzer Code-Änderungen wünscht, gib einen CSS/Markup-Patch.

C. Systemzusammenfassung (bei Redesigns) – die verwendete Schriftgrößenskala, Abstandsskala, Palette (Grautöne + Primärfarbe + Akzente in HSL) und Schatten, damit das Team sie übernehmen kann.

Regeln

• Zitiere IDs; erfinde keine Prinzipien über die Referenzen hinaus. Wenn etwas nicht abgedeckt ist, sage, dass es außerhalb des Buches liegt.
• Bevorzuge wenige, wirkungsvolle Änderungen gegenüber langen Listen.
• Kopiere keinen Text aus dem Buch; die Referenzen sind paraphrasierte Zusammenfassungen.

Wartung

Prinzipiendateien sind die Quelle der Wahrheit. Nach Bearbeitung generiere Indizes und Komponentendateien neu: python3 tools/build_indexes.py skills/design-review (das Skript liegt im tools/-Verzeichnis des Quell-Repositorys, nicht im installierten Skill).