Skip to main content
skill CX Codex

design-review · plugin87 — Claude Code skill: scored UI audit in 6 dimensions

The skill scores a screen or flow across six weighted dimensions, runs Nielsen's heuristics and returns a prioritized findings table.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓
npx skills add plugin87/ux-ui-agent-skills --skill design-review -a claude-code
Open on GitHub

What design-review does

This skill reviews a screen or a whole flow and gives it a score. Six dimensions carry weights: visual hierarchy, consistency, accessibility and usability at 20% each, responsiveness and performance at 10%. The overall number is a weighted sum.

What sits behind it: a rubric file with the scoring guide, a WCAG checklist for the accessibility pass, and contrast.py for color pairs you are unsure about. There is also a check against the Banned Defaults list in taste/design-taste.md and Nielsen's ten heuristics, with violations flagged by number. You get two tables back — the scored dimensions and the findings, each row carrying a severity from Critical down to Enhancement plus a recommendation that points at tokens.

One thing to know upfront: npx skills add installs the skill folder alone. Run the kit check before your first review, or the skill will report it cannot find the files and stop there. The rest of the kit comes in with npx ux-ui-agent-skills init.

What it helps with

  • score a finished screen across six dimensions and get one number
  • flag Nielsen heuristic violations by number
  • check the contrast of a questionable color pair before handoff
  • sort findings by severity from Critical to Enhancement
  • catch stock design patterns from the Banned Defaults list

Example prompts for the agent

  • run design-review on this screen and show me the findings table
  • audit the checkout for accessibility and compute the weighted score
  • check the button and background contrast with the skill's script

How to install design-review

1Skills CLI (Vercel)

npx skills add plugin87/ux-ui-agent-skills --skill design-review -a claude-code

2Manually: put the files in place

~/.claude/skills/design-review/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/design-review/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about design-review

How do I install design-review in Claude?

Run npx skills add plugin87/ux-ui-agent-skills --skill design-review -a claude-code. The skill lands at ~/.claude/skills/design-review/SKILL.md.

What does design-review do?

It computes a weighted score across six dimensions, runs a WCAG accessibility pass, applies Nielsen's ten heuristics and collects the findings into a prioritized table.

Why does the skill report KIT_MISSING?

npx skills add installs only the skill folder, without the tokens, rubric and scripts. Install the kit with npx ux-ui-agent-skills init or through the plugin.

Source text

SKILL.md · MIT
---
name: design-review
description: Review or audit a design/UI across 6 weighted dimensions with Nielsen's 10 heuristics and a prioritized findings table. Use when the user wants a design critique, quality score, heuristic evaluation, or audit of an existing screen, page, or product before/after build.
---

# Skill: Design Review

> **Step 0: is the kit here?** This skill reads files from the kit. Check once:
> `ls ${CLAUDE_SKILL_DIR}/../../../tokens >/dev/null 2>&1 && echo KIT_OK || echo KIT_MISSING`
> On `KIT_MISSING` only the skill folders were installed, which is what
> `npx skills add` does. Say so plainly, point the user at
> `npx ux-ui-agent-skills init` or the plugin install, and stop. Do not guess the
> contents of a file you could not open.

Run a structured, scored review.

## Steps
1. Read `${CLAUDE_SKILL_DIR}/../../../workflows/design-review.md` (rubric, scoring guide, Nielsen heuristics, process).
2. Gather context: the screen(s)/flow, target users, platform, constraints.
3. Score the 6 dimensions (Visual Hierarchy 20%, Consistency 20%, Accessibility 20%, Usability 20%, Responsiveness 10%, Performance 10%); compute the weighted overall.
4. Run the accessibility lens with `${CLAUDE_SKILL_DIR}/../../../accessibility/wcag-checklist.md`; use `${CLAUDE_SKILL_DIR}/../../../scripts/contrast.py` for any color-pair doubts.
5. Check against the anti-slop tells in `${CLAUDE_SKILL_DIR}/../../../taste/design-taste.md` (Banned Defaults checklist).
6. Apply Nielsen's 10 heuristics; flag violations by number.

## Output
- The 6-dimension scored table + overall score.
- A prioritized findings table: # · Severity (Critical → Major → Minor → Enhancement) · Finding · Recommendation.
- Concrete, token-referenced fixes.

© plugin87 · MIT · plugin87/ux-ui-agent-skills

Similar skills

Everything for Design →

design-review by other authors comes first.

design-review nexu-io Audits UI visually, fixes flaws with atomic commits, and captures before/after screenshots. Useful for tightening shipped interface code right before launch. CX Codex +1 3,200installs design-review julianoczkowski Runs a structured design critique against the brief and the code: hierarchy, consistency, responsiveness, accessibility. Useful before you ship. CX Codex +1 5,800installs design-review Donchitos Reviews a design document before implementation, checking completeness, consistency, implementability and project design standards. CX Codex +1 522installs design-review jezweb Reviews the visual quality of a web page or app and produces a findings report with screenshots. Use it when an interface looks off and the cause is hard to spot. CX Codex +1 1,400installs ui-design PyModel Frontend design guidelines covering 42 rules across 8 categories. It steers interface code toward WCAG accessibility and Core Web Vitals standards. CX Codex +1 513installs ui-design-review mastepanoski Scores an interface across ten design dimensions: typography, color, spacing, hierarchy, consistency. Useful before design QA or a handoff to build. CX Codex +1 1,100installs plan-design-review garrytan Senior product designer review for plans before implementation begins. It spots missing UX decisions and updates the plan document directly. CX Codex +1 476installs design-like-im-5 Kiren Srinivasan A skill for designing and reviewing interfaces: keeps the user-facing core simple and checks states, inputs and screen sizes. CX Codex +1 304installs ui-ux-governance GanyuanRan A skill that gives the agent rules for interface work: how to pick flows, handle states and keep accessibility intact. CX Codex +1 ★ 1,384repo stars ux-design Mindrally A skill that hands your coding agent a set of UX rules, from user research to accessibility and responsive layout. Useful when you design or review an interface. CX Codex +1 1,100installs

From the same set16

image-to-code Reconstructs UI mockups and screenshots into token-driven accessible code with automated WCAG AA contrast validation. CX Codex +1 719installs a11y-audit Audits UI and design against WCAG 2.2 and ARIA patterns. It checks contrast, keyboard navigation, and screen-reader readiness with concrete severity ratings. CX Codex +1 550installs design-tokens Create, extend, and validate DTCG design tokens with a three-tier structure. Useful for palettes, typography, theming, and other interface values. CX Codex +1 538installs redesign This skill audits an existing interface and revises its design while preserving working features. Use it to refresh a website or app without changing its core behavior. CX Codex +1 535installs apply-aesthetic Picks a visual direction — an archetype or a named design system — and resolves it into your project's tokens. Useful when you want a specific look, not whatever the agent improvises. CX Codex +1 529installs design-code This skill generates component and screen code for a requested framework. Use it when you need token-based UI with accessibility checks. CX Codex +1 525installs design-component Produces UI component specifications covering anatomy, 8 interactive states, tokens, and accessibility. Useful when designing components in a design system before coding. CX Codex +1 522installs ux-writing Write or review interface text, from button labels to errors and empty states. The skill applies a project’s voice and checks copy against a pre-ship checklist. CX Codex +1 517installs

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor