design-review

Überblick über die design-review skill

Was design-review macht

design-review ist eine Design-QA-skill zum Aufspüren von visuellen Inkonsistenzen, Abstandsproblemen, Hierarchiefehlern, AI-Slop-Mustern und träge wirkender Interaktions-Politur in einer echten Codebasis – und zum schrittweisen Beheben mit Verifikation. Sie eignet sich besonders für Teams, die eine design-review skill suchen, die von „irgendwas wirkt komisch“ zu konkreten Quellcode-Änderungen und Vorher/Nachher-Validierung kommt.

Für wen sie gedacht ist

Nutze die design-review skill, wenn du einen UX-orientierten Agenten brauchst, der eine live Oberfläche prüft, eine bestehende Implementierung verfeinert oder eine UI in Code reviewt, die bereits existiert. Sie passt besonders gut für Produktdesigner, Frontend-Ingenieure und Agents, die an Apps arbeiten, bei denen visuelle Konsistenz wichtiger ist als komplett neue Layouts zu entwerfen.

Was sie von anderen Ansätzen unterscheidet

Anders als ein generischer Prompt für UX Audit ist dieser design-review-Leitfaden workflow-bewusst: Er ist darauf ausgelegt, Probleme zu erkennen, atomare Fixes vorzunehmen und das Ergebnis erneut zu prüfen. Außerdem unterstützt er die Trennung im Plan-Mode, was wichtig ist, wenn du erst eine Review und nicht sofort Änderungen willst.

So verwendest du die design-review skill

Installieren und die Aufgabe weiterleiten

Starte mit dem Installationsbefehl für design-review aus deinem Skills-Manager und gib dem Agenten dann das Repo an, das die UI enthält, die geprüft werden soll. Wenn du im Plan-Mode arbeitest, leite auf /plan-design-review weiter; wenn du Codeänderungen willst, nutze den in der skill beschriebenen aktiven Review-Pfad.

Gib der skill den richtigen Input

Ein guter Prompt für design-review nennt den Screen, den User Flow und den Fehler, der dir wichtig ist. Besser: „Prüfe das Checkout-Modal auf Abstände, Hierarchie und Button-Klarheit auf Mobile und behebe dann die gravierendsten Probleme.“ Schlechter: „Mach das hübscher.“ Der erste Prompt gibt der skill ein Ziel, eine Einschränkung und ein Erfolgskriterium.

Diese Dateien zuerst lesen

Wenn du einen design-review-Leitfaden lesen willst, der dir wirklich bei der Fit-Entscheidung hilft, lies zuerst SKILL.md und danach – falls vorhanden – eine generierte Template-Datei wie SKILL.md.tmpl. Sieh dir außerdem den Repo-Baum auf Prompt-Routing- oder Helper-Konventionen an, weil dieses Repository auf den Skill-Body ausgerichtet ist und nicht auf unterstützende Skripte oder Doku.

Wie ein Review-Loop funktioniert

Nutze die skill in kurzen Zyklen: prüfen, patchen, verifizieren, wiederholen. Lass dir zeigen, was geändert wurde und warum, und bevorzuge pro Durchlauf nur eine Problemklasse, etwa Typografie, Abstände oder Interaktionslatenz. So bleibt der Review fokussiert und Regessionen sind leichter zu erkennen.

Häufige Fragen zur design-review skill

Ist design-review nur für den finalen Feinschliff?

Nein. Die design-review skill eignet sich für Feinschliff auf Live-Seiten, Aufräumen in der Codebasis und UX-Audit-ähnliche Checks, bei denen die visuelle Qualität schon vorhanden ist, aber nachgeschärft werden muss. Für frühe Konzeptideen ist sie weniger nützlich als für das Beheben und Validieren einer bereits implementierten Oberfläche.

Muss ich Designer sein, um sie zu nutzen?

Nein, aber du musst Screen und Problem klar beschreiben. Nicht-Designer erzielen bessere Ergebnisse, wenn sie genau sagen, was sich falsch anfühlt, wer die Nutzer sind und wie Erfolg aussieht, statt einfach eine vage Neugestaltung zu verlangen.

Worin unterscheidet sie sich von einem normalen Prompt?

Ein normaler Prompt liefert möglicherweise nur Vorschläge; design-review ist darauf ausgerichtet, Probleme im Code zu finden, sie zu ändern und das Ergebnis zu prüfen. Wenn du nur Rat willst, ist die skill womöglich mehr, als du brauchst; wenn du messbare UI-Reparaturen möchtest, passt sie deutlich besser.

Wann sollte ich design-review nicht verwenden?

Lass sie weg, wenn die Aufgabe rein strategisch, auf Branding-Ebene oder nur auf Inhalte bezogen ist und es keine Oberfläche zu prüfen gibt. Sie passt auch schlechter, wenn du keinen Zugriff auf die Codebase hast oder Screenshots nach Änderungen nicht verifizieren kannst, weil der Wert der skill aus iterativer Validierung entsteht.

So verbesserst du die design-review skill

Starte mit einem klar abgegrenzten Review-Ziel

Die besten design-review-Ergebnisse entstehen mit einem engen Ziel: eine Seite, eine Komponente oder ein einzelner User Flow. Gib der skill den Viewport, den Geräte-Kontext und die Hauptsorge an, etwa „Desktop-Einstellungsseite, Fokus auf Ausrichtung und Scanbarkeit“ oder „Mobile-Preiskarte, Fokus auf Tap-Klarheit“.

Sag, worauf optimiert werden soll

Wenn dir Konsistenz, Barrierefreiheit, Conversion-Klarheit oder Interaktionsgeschwindigkeit am wichtigsten sind, sag das gleich am Anfang. So kann die design-review skill zwischen konkurrierenden Fixes besser abwägen, besonders wenn eine Änderung einen Bereich verbessert, aber einen anderen schwächt.

Achte auf typische Fehlermuster

Typische schwache Eingaben sind „mach es sauberer“, „verbessere das Design“ und „prüfe alles“. Solche Prompts erzeugen breite, aber wenig aussagekräftige Ergebnisse. Stärkere Eingaben benennen die Fehlerklasse, die Komponente und die Änderungsgrenze; das reduziert unnötige Eingriffe und verbessert den design-review-Workflow.

Mit Belegen iterieren

Bitte nach dem ersten Durchlauf um die wichtigsten verbleibenden Probleme, die exakt geänderten Dateien und eventuell noch sichtbare Screenshot-basierte Regressionen. Wenn das Ergebnis nah dran ist, aber noch nicht reicht, schärfe das Briefing mit einer klareren Einschränkung nach: „Layout unverändert lassen“, „Farbpalette nicht ändern“ oder „nur Hierarchie und Abstände beheben“.