Critique Screen
Read a UI screenshot from a path or URL, run the fixed design critique checklist over it, and write the report to design/critiques/ without touching the design or the code.
/critique-screen[image path]A Claude Code slash command that reads the screenshot you point it at, applies the design-critique-checklist skill's seven areas, and writes a dated Markdown report to design/critiques/. If a critique of the same screen already exists it diffs against it, so you can see which findings were fixed and which came back.
%20skill's%20seven%20areas%20over%20the%20image%2C%20gives%20every%20finding%20a%20severity%20and%20a%20fix%2C%20and%20saves%20the%20report%20so%20the%20next%20round%20can%20be%20compared%20against%20it.%20Claude%20Code's%20%60Read%60%20tool%20renders%20image%20files%2C%20so%20a%20PNG%20or%20JPG%20in%20your%20repo%20is%20readable%20the%20same%20way%20a%20source%20file%20is.%20The%20command%20writes%20one%20file%20and%20nothing%20else%3A%20it%20never%20edits%20your%20components%2C%20your%20styles%2C%20or%20the%20image.%0A%0A%23%23%20Scope%0A%0AInterpret%20%60%24ARGUMENTS%60%20in%20this%20order%3A%0A%0A1.%20**One%20image%20path**%20(%60.png%60%2C%20%60.jpg%60%2C%20%60.jpeg%60%2C%20%60.webp%60%2C%20%60.gif%60)%3A%20%60Read%60%20it.%20That%20is%20the%20screen.%20The%20report%20name%20is%20the%20file's%20basename.%0A2.%20**Several%20image%20paths**%20separated%20by%20spaces%3A%20critique%20each%2C%20write%20one%20report%20per%20image%2C%20and%20add%20a%20short%20%22Across%20screens%22%20section%20at%20the%20end%20of%20the%20last%20report%20noting%20inconsistencies%20between%20them.%0A3.%20**A%20URL**%3A%20you%20cannot%20fetch%20it%20with%20the%20tools%20this%20command%20has.%20Reply%20with%20one%20line%20asking%20for%20the%20file%20to%20be%20saved%20into%20the%20project%2C%20and%20stop.%0A4.%20**A%20path%20plus%20a%20phrase**%20(%60login.png%20mobile%20onboarding%2C%20exploration%20stage%60)%3A%20the%20phrase%20is%20context.%20Use%20it%20for%20the%20Context%20line%20and%20to%20judge%20whether%20the%20visual%20hierarchy%20matches%20the%20screen's%20purpose.%0A5.%20**Empty**%3A%20%60Glob%60%20for%20%60design%2F**%2F*.png%60%2C%20%60**%2Fscreenshots%2F*.png%60%2C%20and%20%60**%2F*.png%60%20at%20the%20repo%20root%2C%20list%20at%20most%20ten%20of%20the%20most%20recently%20modified%20matches%2C%20ask%20which%20one%2C%20and%20stop.%20Never%20pick%20for%20the%20user.%0A%0AIf%20%60Read%60%20fails%20on%20a%20path%2C%20say%20so%20and%20continue%20with%20the%20others.%20Do%20not%20substitute%20a%20similar%20filename.%0A%0A%3E%20%5B!NOTE%5D%0A%3E%20This%20is%20a%20design%20critique%2C%20not%20an%20accessibility%20audit.%20Contrast%20observations%20are%20tagged%20CHECK%20and%20never%20stated%20as%20a%20pass%20or%20a%20failure.%20For%20WCAG%20measurement%20run%20%5B%2Faudit-accessibility%5D(%2Fcommands%2Fanalyze%2Faudit-accessibility)%20or%20the%20%5Baccessibility-auditor%5D(%2Fagents%2Fquality-security%2Faccessibility-auditor)%20agent%20against%20the%20implemented%20component%2C%20where%20ratios%20and%20focus%20order%20can%20actually%20be%20computed.%0A%0A%23%23%20Step%201%20%E2%80%94%20Read%20the%20image%20and%20set%20the%20context%0A%0ARead%20the%20image%2C%20then%20write%20the%20Context%20line%3A%20platform%20as%20it%20appears%2C%20apparent%20purpose%20of%20the%20screen%2C%20and%20the%20state%20shown%20(populated%2C%20empty%2C%20mid-flow).%20If%20a%20brief%20exists%2C%20%60Glob%60%20for%20%60design%2Fbriefs%2F*.md%60%20and%20read%20one%20whose%20name%20matches%20the%20image%3B%20judge%20hierarchy%20against%20the%20goal%20it%20states%20rather%20than%20against%20a%20general%20idea%20of%20a%20good%20screen.%20Say%20in%20the%20report%20whether%20a%20brief%20was%20found.%0A%0A%23%23%20Step%202%20%E2%80%94%20Run%20the%20checklist%0A%0AWork%20the%20seven%20areas%20in%20order%3A%20hierarchy%2C%20spacing%20and%20alignment%2C%20typography%2C%20color%20and%20contrast%20(observed%20only)%2C%20states%2C%20consistency%2C%20and%20copy.%20Assign%20severity%20deterministically.%20**High**%3A%20a%20user%20could%20fail%20the%20task%20or%20be%20misled%2C%20such%20as%20two%20competing%20primary%20actions%2C%20no%20error%20treatment%20on%20a%20form%2C%20or%20meaning%20carried%20by%20color%20alone.%20**Medium**%3A%20the%20task%20gets%20slower%20or%20more%20confusing.%20**Low**%3A%20polish.%20Every%20finding%20gets%20a%20location%20in%20the%20screen's%20own%20terms%20and%20one%20fix%20that%20addresses%20only%20that%20finding.%0A%0A%23%23%20Step%203%20%E2%80%94%20Diff%20against%20the%20previous%20critique%0A%0A%60Glob%60%20for%20%60design%2Fcritiques%2F%3Cbasename%3E*.md%60.%20If%20an%20earlier%20report%20exists%2C%20read%20it%20and%20compare%20finding%20by%20finding.%20Classify%20each%20previous%20finding%20as%20**Fixed**%20(no%20longer%20visible)%2C%20**Open**%20(still%20present)%2C%20or%20**Regressed**%20(was%20absent%20in%20a%20later%20round%20and%20is%20back)%2C%20and%20mark%20findings%20that%20appear%20for%20the%20first%20time%20as%20**New**.%20If%20no%20earlier%20report%20exists%2C%20say%20so%20in%20one%20line%3B%20do%20not%20invent%20a%20history.%0A%0A%23%23%20Step%204%20%E2%80%94%20Write%20the%20report%0A%0AWrite%20to%20%60design%2Fcritiques%2F%3Cbasename%3E-%3CYYYY-MM-DD%3E.md%60%20using%20the%20checklist's%20fixed%20format%3A%20title%2C%20Context%2C%20Summary%20counts%2C%20the%20findings%20table%2C%20Missing%20states%2C%20Works%20well%2C%20Not%20assessed%2C%20and%20the%20Since%20last%20critique%20section%20from%20step%203.%20Create%20%60design%2Fcritiques%2F%60%20if%20it%20does%20not%20exist.%20Never%20overwrite%20an%20existing%20report%3B%20the%20dated%20filename%20is%20what%20makes%20the%20diff%20possible.%0A%0A%23%23%20Output%0A%0AThe%20path%20written%2C%20the%20summary%20line%20(counts%20by%20severity)%2C%20the%20High%20findings%20inline%20in%20the%20reply%20so%20they%20are%20visible%20without%20opening%20the%20file%2C%20and%20the%20since-last-critique%20counts.%20Then%20one%20next-step%20line%3A%20hand%20the%20implemented%20component%20to%20the%20%5Baccessibility-auditor%5D(%2Fagents%2Fquality-security%2Faccessibility-auditor)%20agent%20for%20the%20checks%20this%20command%20deliberately%20leaves%20out.%20Setting%20the%20command%20up%20alongside%20the%20rest%20of%20a%20designer's%20Claude%20Code%20project%20is%20covered%20in%20%5BClaude%20Code%20for%20designers%5D(%2Fguides%2Fdesign%2Fclaude-code-for-designers)%2C%20and%20the%20skill%20it%20wraps%20in%20%5BClaude%20skills%20for%20designers%5D(%2Fguides%2Fdesign%2Fclaude-skills-for-designers).){kind=link}
Install to ~/.claude/commands/critique-screen.md
npx agentscamp add commands/critique-screenPoint this at a screenshot and get a written critique on disk. It runs the design-critique-checklist skill's seven areas over the image, gives every finding a severity and a fix, and saves the report so the next round can be compared against it. Claude Code's Read tool renders image files, so a PNG or JPG in your repo is readable the same way a source file is. The command writes one file and nothing else: it never edits your components, your styles, or the image.
Scope
Interpret $ARGUMENTS in this order:
- One image path (
.png,.jpg,.jpeg,.webp,.gif):Readit. That is the screen. The report name is the file's basename. - Several image paths separated by spaces: critique each, write one report per image, and add a short "Across screens" section at the end of the last report noting inconsistencies between them.
- A URL: you cannot fetch it with the tools this command has. Reply with one line asking for the file to be saved into the project, and stop.
- A path plus a phrase (
login.png mobile onboarding, exploration stage): the phrase is context. Use it for the Context line and to judge whether the visual hierarchy matches the screen's purpose. - Empty:
Globfordesign/**/*.png,**/screenshots/*.png, and**/*.pngat the repo root, list at most ten of the most recently modified matches, ask which one, and stop. Never pick for the user.
If Read fails on a path, say so and continue with the others. Do not substitute a similar filename.
NOTE
This is a design critique, not an accessibility audit. Contrast observations are tagged CHECK and never stated as a pass or a failure. For WCAG measurement run /audit-accessibility or the accessibility-auditor agent against the implemented component, where ratios and focus order can actually be computed.
Step 1 — Read the image and set the context
Read the image, then write the Context line: platform as it appears, apparent purpose of the screen, and the state shown (populated, empty, mid-flow). If a brief exists, Glob for design/briefs/*.md and read one whose name matches the image; judge hierarchy against the goal it states rather than against a general idea of a good screen. Say in the report whether a brief was found.
Step 2 — Run the checklist
Work the seven areas in order: hierarchy, spacing and alignment, typography, color and contrast (observed only), states, consistency, and copy. Assign severity deterministically. High: a user could fail the task or be misled, such as two competing primary actions, no error treatment on a form, or meaning carried by color alone. Medium: the task gets slower or more confusing. Low: polish. Every finding gets a location in the screen's own terms and one fix that addresses only that finding.
Step 3 — Diff against the previous critique
Glob for design/critiques/<basename>*.md. If an earlier report exists, read it and compare finding by finding. Classify each previous finding as Fixed (no longer visible), Open (still present), or Regressed (was absent in a later round and is back), and mark findings that appear for the first time as New. If no earlier report exists, say so in one line; do not invent a history.
Step 4 — Write the report
Write to design/critiques/<basename>-<YYYY-MM-DD>.md using the checklist's fixed format: title, Context, Summary counts, the findings table, Missing states, Works well, Not assessed, and the Since last critique section from step 3. Create design/critiques/ if it does not exist. Never overwrite an existing report; the dated filename is what makes the diff possible.
Output
The path written, the summary line (counts by severity), the High findings inline in the reply so they are visible without opening the file, and the since-last-critique counts. Then one next-step line: hand the implemented component to the accessibility-auditor agent for the checks this command deliberately leaves out. Setting the command up alongside the rest of a designer's Claude Code project is covered in Claude Code for designers, and the skill it wraps in Claude skills for designers.
Related
- Design Critique ChecklistCritique an attached screenshot or a described screen against a fixed seven-part checklist (visual hierarchy, spacing and alignment, typography, color and contrast as observed, empty, loading, and error states, consistency, and copy) and return findings in one set report format, each with a location, a severity, and a suggested fix, deferring every WCAG measurement to an accessibility audit. Use when you want a repeatable design review of a screen that reads the same from one round to the next.
- Claude Code for Designers: Prototype in Code Without Becoming an EngineerWhy a designer opens a terminal agent, how to set it up safely, connecting Figma, a CLAUDE.md for a design-system repo, and three workflows with prompts.
- Claude Skills for Designers: 5 to Upload TodayFive Claude skills for designers: brief, critique, token extraction, component spec, and UX copy review. What each returns, a prompt for each, and upload steps.
- Accessibility AuditorUse this agent to audit web UI against WCAG 2.2 AA — semantics, keyboard, ARIA, contrast, forms, and motion. Examples — auditing a new component for keyboard traps, checking a form for accessible errors, running a pre-ship a11y pass on a page.
- Audit AccessibilityAudit a component or page for accessibility against WCAG — semantics, names, keyboard, ARIA, contrast, forms, motion.
- Design Brief WriterTurn a messy design request you paste in (a Slack thread, an email chain, meeting notes, a ticket) into a one-page design brief: goal, audience, constraints, success criteria, scope and non-goals, references needed, open questions, and timeline placeholders, with every item the source did not state marked as an inference and no constraint or deadline invented. Use when a request has arrived in fragments and the brief has to exist before design work starts.
- Figma to Code with Claude Code and the Figma MCP ServerConnect Figma's MCP server to Claude Code and turn a selected frame into a component that uses your real design tokens and your existing components.