Design Critique (critique)

An adversarial design critique that renders your UI, screenshots it, and argues for rejection with file-and-element level evidence.

Design & UIIntermediate★ 1,560⑂ 170AI score 8/10Last updated: Oct 8, 2026

What it does

Reviews the current work (a file or directory) inside a forked, fresh context that never saw the conversation that produced it — so it critiques the artifact, not the maker's argument.
Refuses source-only reviews: it must render the target and screenshot it at 1280px and 390px, light and dark, transitions off, then click every control and record what actually changed.
Runs the kit's heuristic scripts (taste_audit.mjs, slop_tells.mjs, verify_overflow.mjs, verify_responsive.mjs) to gather numbers it can cite.
Emits the format defined in .claude/agents/design-critic.md: a verdict, the three reasons a senior designer would send it back, and a findings table with evidence.
Bans vague feedback — findings must name the file and element ("the card's 12px internal gap equals the gap between cards, so the group reads as one block").

Who it's for

Frontend developers who want a blunt, objective design review of their own UI.
Solo builders filtering out the "plausible but bland" UI that AI tends to produce.
Teams already using the ux-ui-agent-skills gate scripts.

Examples

After /gate is green, run critique src/components/PricingCard.tsx to get three rejection reasons plus a findings table backed by light/dark screenshots.
Point it at a dashboard directory to get a report citing overflow results and responsive behaviour at 1.25x scale.
Fix every Critical and Major finding, re-run the critique, and stop only when the remainder are Minor or Enhancement.

· · · Install guide · · ·

Try it now, no install

Paste this into Claude to use the skill without installing anything.

Read the instructions in this file and follow them to help me:
https://raw.githubusercontent.com/plugin87/ux-ui-agent-skills/HEAD/.claude/skills/critique/SKILL.md

What I want: (describe your task here)

If Claude can't open the link, open it yourself and paste the contents instead.

↓ If it works for you, download the ZIP below and install it. Then it runs on its own — no pasting each time.

Install in the Claude app (no terminal)

Download the ZIP with the button below.
In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.

↓ Download ZIP

Install in Claude Code

Let Claude do it — paste this into Claude Code

Install the skill I found on Claude Skill Mart.
Copy the .claude/skills/critique folder from the GitHub repo plugin87/ux-ui-agent-skills into my ~/.claude/skills/critique/.
When it's done, tell me in one line what this skill can do.

Install with a command instead

git clone https://github.com/plugin87/ux-ui-agent-skills.git ~/ux-ui-agent-skills && cd ~/ux-ui-agent-skills && npx ux-ui-agent-skills init

⚠ This is a third-party skill. Check the source repository before installing.

Open a terminal and clone the repo: git clone https://github.com/plugin87/ux-ui-agent-skills.git ~/ux-ui-agent-skills
Enter the folder: cd ~/ux-ui-agent-skills
Important: copying only the skill folder will not work. From your project root run npx ux-ui-agent-skills init to install the full kit including tokens/, scripts/, and .claude/agents/design-critic.md (or install it as a Claude Code plugin).
Confirm Node.js is available (node -v) — the kit's audit scripts run on Node.
Make sure you are on Claude Code v2.1.218 or later, otherwise you'll get a "started" message instead of the critique.
Restart Claude Code and invoke it manually with a target, e.g. /critique src/App.tsx (model auto-invocation is disabled by design).
Fix the Critical/Major findings and re-run until only Minor/Enhancement items remain.

View source on GitHub ↗License: MIT