design-critiqueby Anthropic

Design Critique Skill.

A Claude Code and Codex skill for design review: structured design feedback on usability, hierarchy, and consistency.

Design Review & Accessibility
Review report

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 and section headings read from the upstream file on 2026-09-14 · 3,898 characters in full

01 What it does

What the design-critique Skill Does in Claude Code and Codex

Summary, workflow and outputs, all read from the skill's SKILL.md.

From the SKILL.mdRead 2026-09-14 · not a recorded run

In the Skill's Own Terms

design-critique runs a shared design review for anyone holding a Figma URL, screenshot, or written description, at any stage from exploration to final polish. It works through a five-part framework: first impression, usability, visual hierarchy, consistency, and accessibility. Feedback rules push the agent past vague complaints: name the competing element, explain why against design principles or user needs, propose an alternative, and acknowledge what works.

Output is a markdown critique with an overall impression, a severity-rated usability table (Critical, Moderate, Minor), a consistency table, accessibility notes, a What Works Well list, and three priority recommendations. When a design tool or user-feedback connector is present, it inspects components and tokens or cross-references support tickets.

What it produces

A usability table listing each finding with a severity level and a recommended fix.
A consistency table for typography, spacing and colour deviations against the design system.
A closing list of ranked priority recommendations ordered by impact.

See the example prompt ↗

How It Works

01
Get the Design in Front of It
A Figma URL is pulled from Figma and a referenced file is read; if neither exists, the agent asks the user to describe or share the design.
02
Start with the two-second Impression
Before anything analytical, it records what draws the eye first, whether that is correct, the emotional reaction, and whether purpose is immediately clear.
03
Walk the Five Dimensions in Order
Usability, visual hierarchy, consistency and accessibility each get their own set of prompts, from reading order and whitespace to contrast ratios and touch targets.
04
Write Feedback to the Stated Style Rules
Findings must be specific, explained, paired with a proposed alternative, and balanced with things that already work.
05
Fill the Markdown Output Template
The fixed structure is overall impression, usability table with severities, hierarchy notes, consistency table, accessibility, what works well, and ranked priority recommendations.

02 Find your fit

When to Use the design-critique Skill

Use the design-critique skill in Claude Code or Codex when the job is design review of this kind. Fit and limits below are taken from the skill's own file.

Good Fit

Pasting a Figma link or screenshot for feedback before the design is finished, from exploration through final polish.
A named, contextual flow such as a checkout flow for a B2B SaaS, where audience and purpose sharpen the feedback.
A scoped review, for example asking it to look only at the navigation to get more depth on one area.
Casual trigger phrases while working, such as asking it to critique a mockup or say what it thinks of a screen.

Know the Boundaries

It cannot pull a live Figma file unless a design tool connector is set up in the environment.
Cross-referencing decisions against real user complaints requires a connected user-feedback source.

What to Provide

The design itselfA Figma URL, a screenshot, or a detailed written description is the minimum required.
ContextWhat the thing is, who it is for, and what stage it is at, chosen from exploration, refinement, or final.
An optional focusYou can narrow the review, for example to mobile or to the onboarding flow, to get depth instead of breadth.
A slash-command argumentThe command accepts one argument, whatever form your design material takes.

03 Inside the skill

Rules the design-critique Skill Gives Claude Code and Codex

7 concrete instructions, defaults and limits the SKILL.md sets for the agent — the part of the file that changes the result.

Never Leave a Finding Vague
Feedback has to name the concrete element in conflict, for example saying the CTA competes with the navigation rather than calling the layout confusing.
Always Propose a Fix
Identifying a problem is not the deliverable; the critique must suggest alternatives alongside each issue.
Acknowledge What Works
Positive observations are a required part of good feedback, not optional politeness, and the output template has a What Works Well section for them.
Match Depth to the Stage
Early exploration receives different feedback than final polish, so the agent should calibrate rather than apply one standard everywhere.
Rate Every Usability Finding by Severity
The usability table uses three fixed levels: Critical, Moderate, Minor, each paired with a recommendation.
Cover Accessibility as Its Own Pass
The framework includes a dedicated accessibility dimension rather than folding contrast and target sizes into general usability notes.
Ask When the Design Is Missing
If no URL or file is supplied, the agent should request a description or screenshot instead of inventing a critique.

04 Put it to work

Install design-critique in Claude Code or Codex

One npx skills add command, then a first task in your agent and a checklist for the result.

Add design-critique to Claude Code, Codex or Your Agent

Run in your project; the installer asks which agent to add it to.

Terminal

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

Generic skills CLI form for design/skills/design-critique/SKILL.md; the repository may document its own path.

Give the Skill a First Design Review Task

Written in the skill's own terms; replace the bracketed parts with your 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.

Source: written from the SKILL.md in the skill's own terms.

Check the First Result

What the SKILL.md itself says a correct result looks like:

Accessibility should report a pass or fail on contrast for the key text specifically.

In OpenDesign import design-critique from its SKILL.md link: Plugins → Add → Skill → Import from link, then pick it in the top bar.

Download OpenDesign Read the quickstart

05 Open source, traceable

Source, License and Verification

Where this page's facts come from, and when they were last checked.

Author: Anthropic
Repository: github.com/anthropics/knowledge-work-plugins Branch main
Skill file: design/skills/design-critique/SKILL.md Content checksum recorded at verification; commit 8f877b6
License: Apache-2.0 From LICENSE.
Repository stars: 24,012 GitHub snapshot taken 2026-09-14 for the whole anthropics/knowledge-work-plugins repository, which contains 7 skills in this catalog. Not a rating or usage count for design-critique.
Verified by OpenDesign: 2026-09-14 Source file, path, license text and star count were checked. Not bundled in OpenDesign main (checked 2026-08-28); a live run has not been recorded on this page.

Inside the SKILL.md

UsageHow the slash command takes its argument and resolves the design source.
What I Need From YouThe design, the context, and an optional focus area.
Critique FrameworkFive ordered dimensions: first impression, usability, hierarchy, consistency, accessibility.
How to Give FeedbackFive style rules for phrasing findings, from specificity to stage matching.
OutputThe markdown template the critique must follow, tables included.
If Connectors AvailableExtra groundwork when a design tool or user-feedback source is connected.
TipsShare context, specify stage, and ask for a narrower focus.

The Skill's Own 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.”

Front-matter description from SKILL.md. The full file is about 3,898 characters. Read the full file on GitHub.

06 Before you install

Questions About the design-critique Skill

Answers come from the SKILL.md as read on 2026-09-14, not from a recorded run.

Do I need a Figma connector for this to work?

No. With a design tool connected it can pull the design directly from Figma and inspect components, tokens and layers. Without one, you can still paste a screenshot or describe the design in detail and get the same framework applied.

Design Critique

Run design-critique on a Real Design Review Task.

Download OpenDesign, import design-critique from its SKILL.md link, paste the prompt above, and read the plan before the result.

Download OpenDesign Browse all skills