Zur Nutzungsanleitung springen
design-critiquevon Anthropic

Design Critique Skill.

Ein Claude Code und Codex Skill für Design-Review: strukturiertes Design-Feedback zu Usability, Hierarchie und Konsistenz.

  • Design Review & Accessibility
  • Review-Bericht
anthropics/knowledge-work-plugins · design/skills/design-critique/SKILL.mdSKILL.md
--- name: design-critique description: Get structured design feedback on usability, hierarchy, and consistency. Trigger with "review this design", "critique this mockup", "what do you think of this screen?", or when sharing a Figma link or screenshot for feedback at any stage from exploration to final polish. --- ## Usage ## What I Need From You ## Critique Framework ## How to Give Feedback ## Output ## Design Critique: [Design Name]
Front Matter und Abschnittsüberschriften aus der Quelldatei vom 14.09.2026 · 3.898 Zeichen insgesamt

01 Was es tut

Was der design-critique-Skill in Claude Code und Codex leistet

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

design-critique führt ein gemeinsames Design-Review für alle durch, die eine Figma-URL, einen Screenshot oder eine schriftliche Beschreibung vorlegen können – in jeder Phase, von der Exploration bis zum finalen Feinschliff. Es arbeitet nach einem fünfteiligen Rahmenwerk: erster Eindruck, Benutzbarkeit, visuelle Hierarchie, Konsistenz und Zugänglichkeit. Die Feedback-Regeln drängen den Agent über vage Kritik hinaus: das konkurrierende Element benennen, anhand von Designprinzipien oder Nutzerbedürfnissen begründen, eine Alternative vorschlagen und anerkennen, was funktioniert.

Die Ausgabe ist eine Markdown-Kritik mit einem Gesamteindruck, einer nach Schweregrad bewerteten Benutzbarkeitstabelle (Kritisch, Moderat, Gering), einer Konsistenztabelle, Hinweisen zur Zugänglichkeit, einer Liste „Was gut funktioniert“ und drei priorisierten Empfehlungen. Ist ein Designtool oder ein Nutzer-Feedback-Connector vorhanden, werden Komponenten und Tokens untersucht oder Support-Tickets abgeglichen.

Was er erzeugt

  • Eine Benutzbarkeitstabelle, die jeden Befund mit einem Schweregrad und einer empfohlenen Korrektur aufführt.
  • Eine Konsistenztabelle für Abweichungen bei Typografie, Abständen und Farben gegenüber dem Design System.
  • Eine abschließende Liste priorisierter Empfehlungen, sortiert nach Wirkung.
Siehe Beispiel-Prompt ↗

So funktioniert es

  1. 01
    Bringen Sie das Design davor

    Eine Figma-URL wird aus Figma abgerufen und eine referenzierte Datei wird gelesen; existiert keine von beiden, bittet der Agent den Nutzer, das Design zu beschreiben oder zu teilen.

  2. 02
    Beginnen Sie mit dem Zwei-Sekunden-Eindruck

    Noch vor jeder analytischen Betrachtung wird festgehalten, was zuerst ins Auge fällt, ob das richtig ist, welche emotionale Reaktion entsteht und ob der Zweck sofort klar wird.

  3. 03
    Gehen Sie die fünf Dimensionen der Reihe nach durch

    Nutzbarkeit, visuelle Hierarchie, Konsistenz und Barrierefreiheit erhalten jeweils eigene Fragenkataloge, von Leserichtung und Weißraum bis zu Kontrastverhältnissen und Touch-Zielen.

  4. 04
    Schreiben Sie Feedback gemäß den festgelegten Stilregeln

    Befunde müssen konkret, erklärt, mit einer vorgeschlagenen Alternative versehen und mit Dingen, die bereits funktionieren, ausgewogen sein.

  5. 05
    Füllen Sie die Markdown-Ausgabevorlage aus

    Die feste Struktur umfasst Gesamteindruck, eine Nutzbarkeitstabelle mit Schweregraden, Hinweise zur Hierarchie, eine Konsistenztabelle, Barrierefreiheit, was gut funktioniert, und priorisierte Empfehlungen.

02 Finden Sie Ihren Favoriten

Wann der design-critique Skill verwendet werden sollte

Verwenden Sie den design-critique Skill in Claude Code oder Codex, wenn es um Design-Review dieser Art geht. Einsatzbereich und Grenzen sind der eigenen Datei des Skills entnommen.

Gut geeignet

  • Das Einfügen eines Figma-Links oder Screenshots für Feedback, bevor das Design fertig ist – von der Exploration bis zum finalen Feinschliff.
  • Ein benannter, kontextbezogener Ablauf wie ein Checkout-Flow für ein B2B-SaaS, bei dem Zielgruppe und Zweck das Feedback schärfen.
  • Eine eingegrenzte Überprüfung, zum Beispiel die Bitte, nur die Navigation zu betrachten, um mehr Tiefe in einem Bereich zu erhalten.
  • Beiläufige Aufforderungen während der Arbeit, etwa die Bitte, ein Mockup zu kritisieren oder zu sagen, was er von einem Screen hält.

Grenzen kennen

  • Er kann keine Live-Figma-Datei abrufen, sofern in der Umgebung kein Design-Tool-Connector eingerichtet ist.
  • Um Entscheidungen mit tatsächlichen Nutzerbeschwerden abzugleichen, ist eine angebundene Nutzerfeedback-Quelle erforderlich.

Was Sie bereitstellen sollten

  • Das Design selbstEine Figma-URL, ein Screenshot oder eine detaillierte schriftliche Beschreibung sind das Minimum.
  • KontextWas es ist, für wen es bestimmt ist und in welcher Phase es sich befindet – Exploration, Verfeinerung oder final.
  • Ein optionaler FokusSie können die Überprüfung eingrenzen, etwa auf Mobile oder den Onboarding-Flow, um Tiefe statt Breite zu erhalten.
  • Ein Slash-Command-ArgumentDer Befehl akzeptiert ein Argument, unabhängig davon, in welcher Form Ihr Designmaterial vorliegt.

03 Innerhalb des Skills

Regeln, die der design-critique Skill Claude Code und Codex vorgibt

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

  1. Lassen Sie einen Befund niemals vage

    Das Feedback muss das konkrete Element benennen, das im Konflikt steht – etwa, dass der CTA mit der Navigation konkurriert, statt das Layout allgemein als verwirrend zu bezeichnen.

  2. Immer einen Lösungsvorschlag machen

    Ein Problem zu identifizieren ist nicht das Ergebnis; die Kritik muss zu jedem Punkt auch Alternativen vorschlagen.

  3. Anerkennen, was funktioniert

    Positive Beobachtungen sind ein notwendiger Bestandteil guten Feedbacks, keine optionale Höflichkeit, und die Ausgabevorlage enthält dafür einen Abschnitt „Was gut funktioniert“.

  4. Die Tiefe an die Phase anpassen

    Frühe Exploration erhält anderes Feedback als der finale Feinschliff, daher sollte der Agent kalibrieren, statt überall denselben Maßstab anzulegen.

  5. Jeden Usability-Befund nach Schweregrad bewerten

    Die Usability-Tabelle verwendet drei feste Stufen: Kritisch, Moderat, Gering, jeweils mit einer Empfehlung verknüpft.

  6. Barrierefreiheit als eigenen Durchgang behandeln

    Das Framework enthält eine eigene Dimension für Barrierefreiheit, statt Kontrast und Zielgrößen in allgemeine Usability-Hinweise einzubetten.

  7. Nachfragen, wenn das Design fehlt

    Wird keine URL oder Datei bereitgestellt, sollte der Agent stattdessen um eine Beschreibung oder einen Screenshot bitten, anstatt sich eine Kritik auszudenken.

04 In Betrieb nehmen

design-critique in Claude Code oder Codex installieren

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

design-critique zu Claude Code, Codex oder Ihrem Agent hinzufügen

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

Terminal
npx skills add https://github.com/anthropics/knowledge-work-plugins --skill design-critique

Generische skills-CLI-Form für design/skills/design-critique/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
Review this design: [Figma URL]. It's the onboarding flow for [product], aimed at [audience], and we're at final polish rather than exploration. Focus on the mobile screens.

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:

  • Die Barrierefreiheit sollte speziell für den zentralen Text einen Kontrast-Pass oder -Fail melden.

In OpenDesign importieren Sie design-critique über den SKILL.md-Link: Plugins → Add → Skill → Import from link, und wählen es dann in der oberen Leiste aus.

05 Open Source, nachvollziehbar

Quelle, Lizenz und Verifizierung

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

Author
Anthropic
Skill-Datei
design/skills/design-critique/SKILL.md Inhalts-Checksum bei Verifikation aufgezeichnet; Commit 8f877b6
License
Apache-2.0 Aus LICENSE.
Repository-Sterne
24.012 GitHub-Snapshot vom 14.09.2026 für das gesamte Repository anthropics/knowledge-work-plugins, das 7 Skills in diesem Katalog enthält. Keine Bewertung oder Nutzungszahl für design-critique.
Verifiziert von OpenDesign
14.09.2026 Quelldatei, Pfad, Lizenztext und Sternezählung wurden geprüft. Nicht in OpenDesign main gebündelt (geprüft 28.08.2026); ein Live-Durchlauf wurde auf dieser Seite nicht erfasst.

In der SKILL.md

  1. VerwendungWie der Slash-Befehl sein Argument entgegennimmt und die Design-Quelle auflöst.
  2. Was ich von Ihnen benötigeDas Design, den Kontext und optional einen Schwerpunkt.
  3. Kritik-FrameworkFünf geordnete Dimensionen: erster Eindruck, Usability, Hierarchie, Konsistenz, Barrierefreiheit.
  4. Wie man Feedback gibtFünf Stilregeln für die Formulierung von Befunden, von Spezifität bis Phasenabgleich.
  5. AusgabeDie Markdown-Vorlage, der die Kritik folgen muss, inklusive Tabellen.
  6. Falls Connectors verfügbar sindZusätzliche Vorarbeit, wenn ein Design-Tool oder eine Quelle für Nutzerfeedback verbunden ist.
  7. TippsKontext teilen, Phase angeben und um einen engeren Fokus bitten.
Die eigene Beschreibung des Skills
„Erhalten Sie strukturiertes Design-Feedback zu Usability, Hierarchie und Konsistenz. Auslösen mit „Überprüfe dieses Design", „Kritisiere diesen Entwurf", „Was hältst du von diesem Screen?" oder beim Teilen eines Figma-Links oder Screenshots für Feedback in jeder Phase von Exploration bis finaler Ausarbeitung."

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

06 Vor der Installation

Fragen zum design-critique Skill

Die Antworten stammen aus der SKILL.md, gelesen am 14.09.2026, nicht aus einem protokollierten Lauf.

Benötige ich einen Figma-Connector, damit das funktioniert?

Nein. Mit angebundenem Design-Tool kann das Design direkt aus Figma abgerufen werden, um Komponenten, Tokens und Ebenen zu untersuchen. Ohne Connector können Sie stattdessen einen Screenshot einfügen oder das Design ausführlich beschreiben und erhalten dasselbe Framework angewendet.

Design-Kritik

design-critique für eine echte Design-Review-Aufgabe ausführen.

Laden Sie OpenDesign herunter, importieren Sie design-critique über seinen SKILL.md-Link, fügen Sie die obige Eingabe ein und lesen Sie den Plan vor dem Ergebnis.

Terminal
npx skills add https://github.com/anthropics/knowledge-work-plugins --skill design-critique

OpenDesign Desktop

Ein Designsystem. Jeder Output unverkennbar deine Marke

Im vollständigen Vibe Design Workspace gelten dieselben Markenregeln für Websites, Slides, interaktive Prototypen, Dashboards, Bilder und HTML-Videos. Verbinde Codex, Claude Code, Cursor und weitere lokale Coding-Agents und gestalte kostenlos.

  • Web, Slides, Prototypen, Dashboards, Bilder und Video
  • 140+ Designsysteme plus die vollständige Vorlagen- und Skill-Bibliothek
  • Lokales Codex und 21+ Coding-Agents verbinden · Kostenlos

Für macOS und Windows