83.3K+Download
Zur Nutzungsanleitung springen
design-reviewvon Garry Tan

Design Review Skill.

Ein Claude Code- und Codex-Skill für Design-Review: Designer-QA einer fertigen Seite: Inkonsistenz, Abstände, Hierarchie, Schlampigkeitsmuster; behebt sie dann.

  • Design Review & Accessibility
  • Review-Bericht
OpenDesign herunterladenAnleitung ansehen
garrytan/gstack · design-review/SKILL.mdSKILL.md
--- name: design-review description: Designer's eye QA: finds visual inconsistency, spacing issues, hierarchy problems, AI slop patterns, and slow interactions — then fixes them. (gstack) --- ## When to invoke this skill ## Confusion Protocol ## Claimed Limitations Need Evidence ## Continuous Checkpoint Mode ## Context Health (soft directive) ## Question Tuning (skip entirely if QUESTION_TUNING: false)
Front Matter und Abschnittsüberschriften aus der vorgelagerten Datei vom 14.09.2026 · 126.647 Zeichen vollständig

01 Was es tut

Was die design-review Skill in Claude Code und Codex bewirkt

Zusammenfassung, Workflow und Ergebnisse — alles aus der SKILL.md des Skills ausgelesen.

Aus der SKILL.mdGelesen am 14.09.2026 · kein aufgezeichneter Durchlauf

In den eigenen Worten des Skills

Eine QA-Prüfung einer Live-Website mit dem Blick eines Designers. Sie öffnet Seiten im eigenen Browser des Nutzers, erstellt Screenshots bei 375, 768 und 1440, bewertet zehn Kategorien von visueller Hierarchie bis Interaktionszuständen, und bearbeitet dann den Quellcode, um die Befunde zu beheben – ein Commit pro Fix, mit erneuter Verifizierung durch Vorher- und Nachher-Screenshots.

Die Tiefe liegt standardmäßig bei 5-8 Seiten; ohne URL auf einem Feature-Branch wird sie diff-bewusst. Leser erhalten zwei Kopfnoten, einen gewichteten Design Score und einen eigenständigen AI Slop Score, plus 30 benannte Detector-Regeln wie [kicker-above-heading] und [gradient-text] hinter den Bewertungsentscheidungen.

Was er erzeugt

  • Ein strukturierter Markdown-Prüfbericht im Run-Verzeichnis.
  • Eine design-baseline.json-Datei, die für den Regressionsvergleich bei späteren Durchläufen geschrieben wird.
  • Vorher- und Nachher-Screenshot-Paare für jeden angewendeten Fix.
  • Ein optionales DESIGN.md, geschrieben aus den extrahierten Beobachtungen, falls der Nutzer das Phase-2-Angebot annimmt.
Siehe Beispiel-Prompt ↗

So funktioniert es

  1. 01
    Erst reagieren, dann analysieren

    Phase 1 öffnet das Ziel und erstellt einen vollflächigen Desktop-Screenshot, dann schreibt sie einen strukturierten ersten Eindruck, der benennt, wohin der Blick zuerst geht.

  2. 02
    Das gerenderte System extrahieren

    Phase 2 prüft Schriften, Farben, Überschriften-Skala und Touch-Ziele innerhalb der Seite und bietet dann an, die Befunde als DESIGN.md zu speichern.

  3. 03
    Seite für Seite prüfen

    Phase 3 führt pro Seite einen Console-Hook, einen interaktiven Snapshot und einen annotierten Screenshot aus und wiederholt dies bei drei Viewport-Breiten.

  4. 04
    Die Abläufe erfahren

    Phase 4 durchläuft 2-3 Nutzerflüsse, vergleicht den Snapshot nach jeder Aktion und verfolgt einen Goodwill-Score für Reibung und Wiederherstellung.

  5. 05
    Einen Befund nach dem anderen beheben

    Phase 8 nimmt die minimale Änderung vor, committet sie allein und testet erneut, bevor sie zum nächsten Befund übergeht.

  6. 06
    Zwei Kopfnoten bewerten

    Der Design Score ist ein gewichteter Durchschnitt über zehn Kategorien, während die AI-Slop-Note für sich steht.

02 Finden Sie Ihren Favoriten

Wann Sie die design-review Skill verwenden

Verwenden Sie den design-review Skill in Claude Code oder Codex, wenn die Aufgabe eine Designüberprüfung dieser Art ist. Eignung und Grenzen sind der eigenen Datei des Skills entnommen.

Gut geeignet

  • Eine Prüfung vor dem Launch oder nach einem Redesign, bei der die gesamte Website einen systematischen Durchgang benötigt, keine Stichprobe.
  • Arbeit an einem Feature-Branch, der die UI verändert, bei dem nur die betroffenen Routen geprüft werden sollen.
  • Wenn Sie visuelle Inkonsistenzen erwähnen oder eine Live-Website verfeinern möchten, sollte sich die Skill selbst vorschlagen.
  • Beurteilung, ob eine ausgelieferte Seite wie KI-generiert wirkt – etwas, das die meisten Entwickler nicht selbst einschätzen können.
  • Ein schneller Plausibilitätscheck, wenn keine Zeit für den vollständigen Durchlauf ist: Startseite plus zwei Kernseiten und eine verkürzte Checkliste.

Grenzen kennen

  • Ein Design vor der Umsetzung zu prüfen, ist eine eigene Skill im Plan-Modus.
  • Probleme außerhalb der Quelle, etwa Widgets von Drittanbietern oder Texte, die vom Team kommen müssen, werden als zurückgestellt statt als behoben markiert.
  • Ihr CI-Setup wird nicht angefasst, und bestehende Tests sind tabu; es dürfen nur neue Regressionstest-Dateien angelegt werden.

Was Sie bereitstellen sollten

  • Die Ziel-URLEine live erreichbare Adresse, localhost eingeschlossen. Ohne Angabe erkennt die Skill diese automatisch oder fragt auf main nach.
  • Eine BereichsüberschreibungBegrenzen Sie den Durchlauf auf eine einzelne Seite oder einen Bereich, wenn Sie nicht die vollständige Tour wünschen.
  • Ein TiefenflagStandard ist „standard“; --quick reduziert auf drei Seiten und --deep erweitert auf einen vollständigen Pre-Launch-Durchlauf.
  • Ihre DESIGN.md, falls vorhandenDesign-Dokumente im Repo-Root werden zuerst gelesen, damit jede Entscheidung am festgelegten System kalibriert wird und Abweichungen strenger bewertet werden.
  • Eine bereits angemeldete Browser-SitzungDas Audit läuft innerhalb der Sitzung, die der Nutzer bereits hat, sodass authentifizierte Seiten keinen Login-Ablauf benötigen.

03 Innerhalb des Skills

Regeln, die das design-review Skill Claude Code und Codex an die Hand gibt

8 konkrete Anweisungen, Standardwerte und Grenzen, die die SKILL.md für den Agent festlegt – der Teil der Datei, der das Ergebnis verändert.

  1. Beurteilen Sie das Render, nicht das Repo

    Das Audit liest niemals Implementierungsdateien: Befunde müssen von der gerenderten Seite stammen. Die einzige Ausnahme ist das Schreiben der DESIGN.md aus extrahierten Beobachtungen.

  2. Ein Commit pro Fix

    Jeder Fix wird einzeln committet, mit dem Nachrichtenformat style(design): FINDING-NNN plus einer kurzen Beschreibung.

  3. Sauberer Arbeitsbaum vor dem Start

    Ein unsauberer Arbeitsbaum stoppt den Lauf: Der Agent muss fragen, ob committet, gestasht oder abgebrochen werden soll, bevor ein Fix-Commit existiert.

  4. Vor Aktionen auf einem echten Account nachfragen

    Bei einem nicht lokalen Ziel benötigen verändernde Aktionen eine Zustimmungsfrage pro Lauf, die genau auflistet, was getan wird; Abmelde- und Löschpfade werden nie ausgeführt.

  5. Zugangsdaten bleiben dem Agent verschlossen

    Die bereits angemeldete Sitzung wird so genutzt, wie sie ist. Passwörter, Einmalcodes, Zahlungsdaten, Cookies, Tokens und localStorage sind alle tabu.

  6. Screenshots belegen jeden Befund

    Ein Befund ohne mindestens einen Screenshot zählt nicht, und Bilder werden kopiert und ausgelesen, damit der Nutzer sie inline sieht.

  7. Sofort zurücksetzen, sobald es sich verschlechtert

    Jede Regression löst sofort ein git revert HEAD aus, und der Befund wird als aufgeschoben markiert, statt improvisiert behoben zu werden.

  8. Stopp bei 30 Fixes

    Die Schleife eskaliert alle fünf Fixes und hält vollständig an, sobald das Design-Fix-Risiko 20 % übersteigt oder die Fix-Zahl 30 erreicht.

04 In Betrieb nehmen

Installieren Sie design-review in Claude Code oder Codex

Ein npx skills add-Befehl, dann eine erste Aufgabe in Ihrem Agent und eine Checkliste für das Ergebnis.

Fügen Sie design-review zu Claude Code, Codex oder Ihrem Agent hinzu

Im eigenen Projekt ausführen; der Installer fragt, welchem Agent er hinzugefügt werden soll.

Terminal
npx skills add https://github.com/garrytan/gstack --skill design-review

Generische skills-CLI-Form für design-review/SKILL.md; das Repository kann seinen eigenen Pfad dokumentieren.

Dem Skill eine erste Design-Review-Aufgabe geben

In den eigenen Begriffen des Skills verfasst; ersetzen Sie die Teile in Klammern durch Ihr Material.

Starter prompt
Audit the design of [https://myapp.com/dashboard] at standard depth. Focus on the settings page. I'm signed in as [[email protected]] in Aside. Flag the AI slop patterns and anything that breaks the spacing scale, then fix what you can.

Quelle: verfasst aus der SKILL.md in den eigenen Begriffen des Skills.

Das erste Ergebnis prüfen

Was die SKILL.md selbst als korrektes Ergebnis beschreibt:

  • Testen Sie die betroffene Seite nach jedem Fix erneut und bestätigen Sie, dass die Liste der Konsolenfehler leer ist oder nicht schlechter als die Baseline.
  • Wenn ein Ziel-Mockup erzeugt wurde, vergleichen Sie den korrigierten Screenshot damit und protokollieren Sie bestanden oder nicht bestanden.
  • Jeder Fix wird klassifiziert: verifiziert, wenn der erneute Test ihn ohne neue Fehler bestätigt.
  • Phase 9 prüft die betroffenen Seiten erneut und warnt deutlich, wenn die finalen Bewertungen unter der Baseline liegen.
  • Der Bericht gibt die Detector-Anzahl als Delta von Anfang bis Ende an oder vermerkt, dass der Detector nicht installiert oder deaktiviert war.

In OpenDesign ist design-review vorinstalliert: Plugins → Skills, wählen Sie es in der oberen Leiste aus.

OpenDesign herunterladenQuickstart lesen

05 Open Source, nachvollziehbar

Quelle, Lizenz und Verifizierung

Woher die Fakten auf dieser Seite stammen und wann sie zuletzt geprüft wurden.

Author
Garry Tan
Repository
github.com/garrytan/gstack Branch main
Skill-Datei
design-review/SKILL.md Content-Prüfsumme bei Verifikation aufgezeichnet; Commit 71f6048
License
MIT Aus LICENSE.
Repository-Sterne
132.921 GitHub-Snapshot vom 14.09.2026 für das gesamte Repository garrytan/gstack, das 7 Skills in diesem Katalog enthält. Keine Bewertung oder Nutzungszahl für design-review.
Verifiziert von OpenDesign
14.09.2026 Quelldatei, Pfad, Lizenztext und Sternanzahl wurden geprüft. In OpenDesign main gebündelt (geprüft am 28.08.2026); ein Live-Lauf wurde auf dieser Seite nicht erfasst.

In der SKILL.md

  1. SetupParst URL, Scope, Tiefe und Auth; prüft DESIGN.md, saubere Baumstruktur, Browser, Tests.
  2. ModiFull, Quick, Deep, Diff-Aware und Regression-Scopes entscheiden, welche Seiten besucht werden.
  3. Phase 1: Erster EindruckGanzseitiger Desktop-Screenshot, dann eine strukturierte Bauchgefühl-Reaktion und ein Seitenbereichstest.
  4. Phase 2: Design-System-ExtraktionUntersucht Schriften, Farben, Überschriftenskala und Touch-Ziele, und bietet dann an, eine DESIGN.md zu speichern.
  5. Phase 3: Seitenweise visuelles AuditSnapshots, annotierte und responsive Aufnahmen, Trunk-Test, dann eine 10-Kategorien-Checkliste.
  6. Phase 4: Interaktionsfluss-ReviewDurchläuft 2-3 Flows, vergleicht jeden Schritt per Diff und bewertet einen Goodwill-Meter ab 70.
  7. Phase 5: Seitenübergreifende KonsistenzVergleicht Navigation, Footer, Komponenten, Tonalität und Abstandsrhythmus über alle Seiten hinweg.
  8. Phase 6: Bericht erstellenBewertet jede Kategorie mit A-F und schreibt den Bericht sowie die design-baseline.json.
  9. Phase 7: TriageSortiert Befunde nach Wirkung und stellt zurück, was sich durch Quelländerungen nicht beheben lässt.
  10. Phase 8: Fix-SchleifeFindet die Quelle, nimmt den minimalen Fix vor, committet, testet erneut, klassifiziert, reguliert sich selbst.
  11. Phase 9: Finales Design-AuditPrüft die betroffenen Seiten erneut, berechnet Bewertungen und Detector-Anzahlen neu und warnt bei Regressionen.
  12. Phase 10: BerichtSchreibt den vollständigen Bericht, die Projektindex-Zusammenfassung, die PR-Zeile und das Detector-Delta.
Die eigene Beschreibung des Skills
„Designer's-Eye-QA: findet visuelle Inkonsistenzen, Abstands-Probleme, Hierarchie-Fehler, KI-Slop-Muster und langsame Interaktionen — und behebt sie. (gstack)"

Front-Matter-Beschreibung aus SKILL.md. Die vollständige Datei umfasst etwa 126.647 Zeichen. Lesen Sie die vollständige Datei auf GitHub.

Design Review

Führen Sie design-review für eine echte Design-Review-Aufgabe aus.

Das Skill design-review ist in OpenDesign enthalten. Laden Sie die App herunter, wählen Sie das Skill unter Plugins → Skills, fügen Sie den obigen Prompt ein und lesen Sie den Plan vor dem Ergebnis.

OpenDesign herunterladenAlle Skills durchsuchen
Terminal
npx skills add https://github.com/garrytan/gstack --skill design-review