What is the design-review skill?
The design-review skill is a SKILL.md in the plugin87/ux-ui-agent-skills kit. It runs a structured critique of an existing screen: six weighted dimensions give an overall score, Nielsen's ten heuristics flag violations by number, and a findings table ranks issues from Critical to Enhancement with concrete fixes.
The design-review skill turns a vague request such as critique this page into a repeatable audit. It sits in the plugin87/ux-ui-agent-skills repository and applies the same scored rubric each time, so two reviews of two screens can be compared.
The SKILL.md says to use it for a design critique, quality score, heuristic evaluation or audit of an existing screen, page or product, either before or after the build.
The six scored dimensions
| Dimension | Weight |
|---|---|
| Visual hierarchy | 20% |
| Consistency | 20% |
| Accessibility | 20% |
| Usability | 20% |
| Responsiveness | 10% |
| Performance | 10% |
What you get back
- A table of the six dimension scores and one weighted overall score.
- A findings table with number, severity, finding and recommendation. Severities run Critical, Major, Minor, Enhancement.
- Nielsen heuristic violations flagged by number.
- Fixes that name design tokens instead of vague advice such as make the text darker.
Who the design-review skill is for
Best for
- A pre-merge check of a screen your agent just built, with a number you can track from one revision to the next.
- Teams that want accessibility counted as a fifth of the score rather than a separate afterthought.
- Spotting generic AI-built tells, since the skill checks a banned defaults list.
Not for
- Running outside the kit. Step zero checks that the kit's tokens folder exists and stops if only the skill folder was installed.
- A line-by-line source audit. For other review approaches, try bencium-design-audit or ui-design-review.
- Building the interface. It critiques, and other skills in the kit design components and tokens.
Use it with UiChemy
Review the screen first, then move it into WordPress. UiChemy AI to WordPress imports an AI build as editable pages, and Composer lets you apply the fixes inside Elementor or Gutenberg. For responsive follow-ups, see responsive design. Click Get Started on uichemy.com.
How to install Design Review Skill: Scored UI Audit with Nielsen Heuristics
/plugin marketplace add plugin87/ux-ui-agent-skillsclaude plugin details ux-ui-agent-skills.Add the marketplace
Run
/plugin marketplace add plugin87/ux-ui-agent-skillsin Claude Code.Install the plugin
Run
/plugin install ux-ui-agent-skills@ux-ui-agent-skills. The README lists design-review among the skills the model loads on its own when the work calls for it.Install the whole kit
The skill reads its rubric, WCAG checklist and contrast script from the kit. SKILL.md says that if only skill folders are present, the agent should point you at
npx ux-ui-agent-skills initor the plugin install.Hand it a screen
Give the agent a screen or flow plus the target users and platform, and ask for a design review or a heuristic evaluation.
Check that it loaded
Ask for a review of one page. The reply should contain a table of six dimension scores with a weighted overall score, followed by a findings table with severities. If it reports the kit as missing, install the full plugin.
Key features
- Weighted overall scoreVisual hierarchy, consistency, accessibility and usability carry 20 percent each, while responsiveness and performance carry 10 percent each. The agent computes the weighted total.
- Context firstBefore scoring, the agent gathers the screens or flow, the target users, the platform and the constraints, so scores reflect the real audience.
- Rubric from the kitThe agent reads a workflow file in the kit that holds the rubric, scoring guide, Nielsen heuristics and process, instead of inventing criteria each time.
- Accessibility lensA WCAG checklist from the kit drives the accessibility pass, and a contrast script settles any doubt about a color pair.
- Anti-slop checkThe agent compares the screen to a banned defaults checklist from the kit's design taste file to catch generic machine-made patterns.
- Nielsen's ten heuristicsEach violation is flagged by heuristic number, giving the findings a recognizable shared vocabulary for designers and engineers.
- Prioritized findings tableIssues are listed with number, severity, finding and recommendation, ordered from Critical down to Enhancement.
- Token-referenced fixesRecommendations point at concrete tokens, so the follow-up edit is a lookup and a change rather than a debate.
Frequently asked questions
What is the design-review skill?
It is a skill in the plugin87/ux-ui-agent-skills repository that makes an AI coding agent run a scored design critique. It rates six dimensions, applies Nielsen's ten heuristics, checks a banned defaults list and returns a prioritized findings table with concrete fixes.
How do I install design-review?
Add the marketplace with /plugin marketplace add plugin87/ux-ui-agent-skills, then run /plugin install ux-ui-agent-skills@ux-ui-agent-skills. Restart the session if the skill does not appear. Installing the skill folder without the kit leaves it unable to read its rubric.
How is the overall score calculated?
The SKILL.md gives weights: visual hierarchy, consistency, accessibility and usability at 20 percent each, responsiveness and performance at 10 percent each. The agent scores each dimension and computes the weighted overall, then lists findings by severity.
Does design-review fix the problems it finds?
The skill's output is the score table, a prioritized findings table and token-referenced fixes. It does not itself edit your files. After the report you can ask the agent to apply the listed changes, then run the review again to compare scores.
Which AI coding agents can use the design-review skill?
The README is written for Claude Code, with a plugin install and a route for any MCP client. It calls the kit a pure instruction and knowledge layer, but it does not list specific agents beyond those, so confirm your agent supports skill folders.
How is design-review different from other review skills?
Design-review is a rubric-driven critique that ends in a score and a ranked findings table. Other approaches exist, such as ui-design-review and bencium-design-audit. Running a second review skill on the same screen gives you another angle, and the scores here let you track progress between rounds.
What input does design-review need?
The SKILL.md asks the agent to gather the screens or flow, the target users, the platform and the constraints. It does not name a file format, so give the agent whatever represents the screen and say who it is for. The README lists a separate figma-integration skill for Figma work.