Design Critique
mohitagw15856/pm-claude-skills
Give structured, constructive feedback on any design using UX frameworks.
Review a web app or page for visual design quality — layout, typography, spacing, colour, hierarchy, consistency, interaction patterns, and responsive behaviour.
Install Design Review
$ npx skills add jezweb/claude-skills --skill design-review -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install jezweb/claude-skills design-review --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/jezweb/claude-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/plugins/frontend/skills/design-review .claude/skills/design-review && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "design-review" agent skill from https://github.com/jezweb/claude-skills/tree/main/plugins/frontend/skills/design-review into .claude/skills/design-review/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-review", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/jezweb/claude-skills/tree/main/plugins/frontend/skills/design-reviewType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add jezweb/claude-skills --skill design-review -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install jezweb/claude-skills design-review --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/jezweb/claude-skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/plugins/frontend/skills/design-review .agents/skills/design-review && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "design-review" agent skill from https://github.com/jezweb/claude-skills/tree/main/plugins/frontend/skills/design-review into .agents/skills/design-review/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-review", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add jezweb/claude-skills --skill design-review -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install jezweb/claude-skills design-review --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/jezweb/claude-skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/plugins/frontend/skills/design-review .cursor/skills/design-review && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "design-review" agent skill from https://github.com/jezweb/claude-skills/tree/main/plugins/frontend/skills/design-review into .cursor/skills/design-review/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-review", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/jezweb/claude-skills.git --path plugins/frontend/skills/design-review--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add jezweb/claude-skills --skill design-review -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install jezweb/claude-skills design-review --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/jezweb/claude-skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/plugins/frontend/skills/design-review .gemini/skills/design-review && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "design-review" agent skill from https://github.com/jezweb/claude-skills/tree/main/plugins/frontend/skills/design-review into .gemini/skills/design-review/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-review", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install jezweb/claude-skills design-reviewInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add jezweb/claude-skills --skill design-review -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/jezweb/claude-skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/plugins/frontend/skills/design-review .github/skills/design-review && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "design-review" agent skill from https://github.com/jezweb/claude-skills/tree/main/plugins/frontend/skills/design-review into .github/skills/design-review/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-review", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add jezweb/claude-skills --skill design-review -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install jezweb/claude-skills design-review --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/jezweb/claude-skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/plugins/frontend/skills/design-review .opencode/skills/design-review && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "design-review" agent skill from https://github.com/jezweb/claude-skills/tree/main/plugins/frontend/skills/design-review into .opencode/skills/design-review/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-review", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
design-review- GitHub stars
- 1.1k
- Token cost
- ~2.1k tokens
- SKILL.md length
- 975 words
- Files
- 1
- Skills in repo
- 52
- Repo updated
- First seen
- Licence
- MIT
At a glance
Review a web app or page for visual design quality — layout, typography, spacing, colour, hierarchy, consistency, interaction patterns, and responsive behaviour.
- Works in 7 steps: Layout and Spacing → Typography → Colour and Contrast → …
- Tasks that involve Design review and critique
- SKILL.md covers When to Use, Browser Tool Detection, URL Resolution and What to Check, plus 3 more sections
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
Design Review is an agent skill from jezweb/claude-skills. Review a web app or page for visual design quality — layout, typography, spacing, colour, hierarchy, consistency, interaction patterns, and responsive behaviour. Not a UX audit (that checks usability) — this checks whether it looks professional and polished. Produces a design findings report with screenshots. Triggers: 'design review', 'does this look good', 'review the design', 'check the layout', 'is this polished', 'visual review', 'design audit', 'make it look better', 'it looks off'.
Its SKILL.md is about 2.1k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts. Compatibility notes: claude-code-only
It sits in Frontend & Design, covering Design review and critique, UI design and UX design. The repository describes itself as: Skills for Claude Code CLI such as full stack dev Cloudflare, React, Tailwind v4, and AI integrations. The licence is MIT.
When your agent uses it
- Tasks that involve Design review and critique
- Tasks that involve UI design
- Tasks that involve UX design
Example prompts
- “design review”
- “does this look good”
- “review the design”
- “/design-review”
Requirements
- Compatibility (from SKILL.md): claude-code-only
Workflow steps
7 steps, taken from the step headings in SKILL.md.
What it can do on your machine
Read from SKILL.md and the folder at commit 1260fa7. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md (its code samples are markdown).
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Compatibility
claude-code-only
From compatibility in the SKILL.md frontmatter.
Context cost
Design Review loads about 2.1k tokens when it runs. Until then it costs about 127 tokens; SKILL.md has 975 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from jezweb/claude-skills at commit 1260fa7, republished under its MIT licence (© jezweb). 975 words, ~2,140 tokens.
Download SKILL.mdSave it as
.claude/skills/design-review/SKILL.md (or your agent's skills folder).- name
- design-review
- description
- Review a web app or page for visual design quality — layout, typography, spacing, colour, hierarchy, consistency, interaction patterns, and responsive behaviour. Not a UX audit (that checks usability) — this checks whether it looks professional and polished. Produces a design findings report with screenshots. Triggers: 'design review', 'does this look good', 'review the design', 'check the layout', 'is this polished', 'visual review', 'design audit', 'make it look better', 'it looks off'.
- compatibility
- claude-code-only
Design Review
Review a web app or page for visual design quality. This is not a UX audit (usability, workflow, friction) — this checks whether the design is professional, consistent, and polished.
The goal: would a design-conscious person look at this and think "this is well made" or "this looks like a developer designed it"?
When to Use
- Before showing something to a client or team
- When something "looks off" but you can't pinpoint why
- After building a feature, before calling it done
- Periodic quality check on a shipped product
- After a UX audit — this is the visual companion
Browser Tool Detection
Same as ux-audit — Chrome MCP, Playwright MCP, or playwright-cli.
URL Resolution
Same as ux-audit — prefer deployed/live over localhost.
What to Check
1. Layout and Spacing
| Check | Good | Bad |
|---|---|---|
| Consistent spacing | Same gap between all cards in a grid, same padding in all sections | Some cards have 16px gap, others 24px. Header padding differs from body |
| Alignment | Left edges of content align vertically across sections | Heading starts at one indent, body text at another, cards at a third |
| Breathing room | Generous whitespace around content, elements don't feel cramped | Text touching container edges, buttons crowded against inputs |
| Grid discipline | Content follows a clear column grid | Elements placed freely, no underlying structure |
| Responsive proportions | Sidebar/content ratio looks intentional at every width | Sidebar takes 50% on tablet, content is squeezed |
| Vertical rhythm | Consistent vertical spacing pattern (e.g. 8px/16px/24px/32px scale) | Random spacing: 13px here, 27px there, 8px somewhere else |
2. Typography
| Check | Good | Bad |
|---|---|---|
| Hierarchy | Clear visual difference between h1 → h2 → h3 → body | Headings and body text look the same size/weight |
| Line length | Body text 50-75 characters per line | Full-width text running 150+ characters — hard to read |
| Line height | Body text 1.5-1.7, headings 1.1-1.3 | Cramped text or excessive line height |
| Font sizes | Consistent scale (e.g. 14/16/20/24/32) | Random sizes: 15px, 17px, 22px with no relationship |
| Weight usage | Regular for body, medium for labels, semibold for headings, bold sparingly | Everything bold, or everything regular with no hierarchy |
| Truncation | Long text truncates with ellipsis, title attribute shows full text | Text overflows container, wraps awkwardly, or is cut off without ellipsis |
3. Colour and Contrast
| Check | Good | Bad |
|---|---|---|
| Semantic colour | Using design tokens (bg-primary, text-muted-foreground) | Raw Tailwind colours (bg-blue-500, text-gray-300) |
| Contrast ratio | Text meets WCAG AA (4.5:1 for body, 3:1 for large text) | Light grey text on white, or dark text on dark backgrounds |
| Colour consistency | Same blue means the same thing everywhere (primary = action) | Blue means "clickable" in one place and "informational" in another |
| Dark mode | All elements visible, borders defined, no invisible text | Elements disappear, text becomes unreadable, images look wrong |
| Status colours | Green=success, yellow=warning, red=error consistently | Green used for both success and "active" with different meanings |
| Colour overuse | 2-3 colours + neutrals | Rainbow of colours with no clear hierarchy |
4. Visual Hierarchy
| Check | Good | Bad |
|---|---|---|
| Primary action | One clear CTA per page, visually dominant | Three equally styled buttons competing for attention |
| Squint test | Squinting at the page, the most important element stands out | Everything is the same visual weight — nothing draws the eye |
| Progressive disclosure | Most important info visible, details available on interaction | Everything shown at once — overwhelming |
| Grouping | Related items are visually grouped (proximity, borders, backgrounds) | Related items scattered, unrelated items touching |
| Negative space | Intentional empty space that frames content | Empty space that looks accidental (uneven, trapped white space) |
Show full SKILL.md (421 more words)Show less
5. Component Consistency
| Check | Good | Bad |
|---|---|---|
| Button styles | One primary style, one secondary, one destructive — used consistently | 5 different button styles across the app |
| Card styles | All cards have the same border-radius, shadow, padding | Some cards rounded, some sharp, some with shadows, some without |
| Form inputs | All inputs same height, same border style, same focus ring | Mix of heights, border styles, focus behaviours |
| Icon style | One icon family (Lucide, Heroicons), consistent size and stroke | Mixed icon families, different sizes, some filled some outlined |
| Border radius | Consistent radius scale (e.g. 4px inputs, 8px cards, 12px modals) | Random radius values: 3px, 7px, 10px, 16px |
| Shadow | One or two shadow levels used consistently | Every component has a different shadow depth |
6. Interaction Design
| Check | Good | Bad |
|---|---|---|
| Hover states | Buttons, links, and clickable cards change on hover | No hover feedback — user unsure what's clickable |
| Focus states | Keyboard focus visible on all interactive elements | Focus ring missing or invisible against background |
| Active states | Nav items, tabs, sidebar links show current selection | Active item looks the same as inactive |
| Transitions | Subtle transitions on hover/focus (150-200ms ease) | No transitions (jarring) or slow transitions (laggy) |
| Loading indicators | Skeleton screens or spinners during async operations | Content pops in without warning, layout shifts |
| Disabled states | Disabled elements are visually muted, cursor changes | Disabled buttons look clickable, no cursor change |
7. Responsive Quality
| Check | Good | Bad |
|---|---|---|
| Mobile nav | Clean hamburger/sheet menu, easy to tap | Desktop nav squished into mobile, tiny tap targets |
| Image scaling | Images fill containers proportionally | Images stretched, cropped badly, or overflowing |
| Table responsiveness | Horizontal scroll on mobile, or stack to cards | Table wider than screen with no way to see columns |
| Touch targets | At least 44x44px on mobile | Tiny links, close buttons, checkboxes |
| Tablet | Layout works at 768px (not just desktop and phone) | Layout breaks at tablet widths, awkward gaps |
Severity Guide
| Level | Meaning | Example |
|---|---|---|
| High | Looks broken or unprofessional | Invisible text in dark mode, buttons different heights inline |
| Medium | Looks unpolished | Inconsistent spacing, mixed icon styles, truncation without ellipsis |
| Low | Nitpick | 1-2px alignment, slightly different border-radius, shadow too strong |
Output
Write findings to .jez/artifacts/design-review.md:
# Design Review: [App Name]
**Date**: YYYY-MM-DD
**URL**: [url]
## Overall Impression
[1-2 sentences — professional / unpolished / inconsistent / clean]
## Findings
### High
- **[issue]** at [page/component] — [what's wrong] → [fix]
### Medium
- **[issue]** at [page/component] — [what's wrong] → [fix]
### Low
- **[issue]** — [description]
## What Looks Good
[Patterns that are well-executed and should be preserved]
## Top 3 Fixes
1. [highest visual impact change]
2. [second]
3. [third]Take screenshots of findings where the issue is visual (most of them).
Tips
- Check dark mode AND light mode — most issues appear in one but not the other
- The squint test is the fastest way to find hierarchy problems
- Component inconsistency is the most common issue in dev-built UIs
- "Looks off" usually means spacing — check margins and padding first
- If you can't identify the issue, compare to a well-designed app in the same category
© jezweb, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
Just SKILL.md in plugins/frontend/skills/design-review of jezweb/claude-skills.
Open the folder on GitHubat commit 1260fa7
Compare with similar skills
Design Review next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Design Review this skilljezweb/claude-skills | 1.1k | — | ~2.1k | Automated safety check: Pass | MIT | |
| Design Critiquemohitagw15856/pm-claude-skills | 1.4k | — | ~1.5k | Automated safety check: Pass | MIT | |
| Interface Design for Dashboards and Appsholaboss-ai/holaOS | 11k | 3 repos | ~6k | Automated safety check: Pass | MIT | |
| Product Design Workflow BundleXiaomiMiMo/MiMo-Code | 14k | — | ~721 | Automated safety check: Pass | MIT | |
| UI Reviewespennilsen/pi | 122 | — | ~1.4k | Automated safety check: Pass | MIT | |
| Steve Jobs Design Reviewwondelai/skills | 2.4k | — | ~4.5k | Automated safety check: Pass | MIT |
Similar skills
Interface Design for Dashboards and Apps
holaboss-ai/holaOS
Pushes an agent past generic defaults when designing dashboards, admin panels, SaaS apps and tools, with attention to structure, type, navigation and how data is shown.
Product Design Workflow Bundle
XiaomiMiMo/MiMo-Code
Entry point to a bundle of product design workflows covering context, research, audits, ideation, URL or image to code, design QA and sharing a prototype.
UI Review
espennilsen/pi
Review UI designs and implementations for accessibility, consistency, usability, and visual quality.
Steve Jobs Design Review
wondelai/skills
Review designs, products, and features with Steve Jobs' standards: ruthless simplicity, focus, and end-to-end excellence.
Om UX Review PR
go-musicfox/go-musicfox
Evidence-first design review of a PR's UI. An agent skill from go-musicfox/go-musicfox.
More from jezweb/claude-skills
All 52 skills in this repoFavicon Gen
jezweb/claude-skills
Generate custom favicons from logos, text, or brand colours.
Tailwind Theme Builder
jezweb/claude-skills
Set up Tailwind v4 + shadcn/ui themed UI with dark mode. An agent skill from jezweb/claude-skills.
Elevenlabs Agents
jezweb/claude-skills
Build conversational AI voice agents on the ElevenLabs platform.
Responsiveness Check
jezweb/claude-skills
Test website responsiveness across viewport widths using browser automation.
MCP Builder
jezweb/claude-skills
Build MCP servers in Python with FastMCP. An agent skill from jezweb/claude-skills.
GitHub Release
jezweb/claude-skills
Prepare and publish GitHub releases. An agent skill from jezweb/claude-skills.
Related
Categories
Questions about Design Review
What does Design Review do?
Review a web app or page for visual design quality — layout, typography, spacing, colour, hierarchy, consistency, interaction patterns, and responsive behaviour. Design Review is an agent skill from jezweb/claude-skills. Review a web app or page for visual design quality — layout, typography, spacing, colour, hierarchy, consistency, interaction patterns, and responsive behaviour.
When should I use Design Review?
Design Review fits situations like: tasks that involve Design review and critique; tasks that involve UI design; tasks that involve UX design.
How do I install Design Review in Claude Code?
Run `npx skills add jezweb/claude-skills --skill design-review -a claude-code`. Or copy the skill folder (plugins/frontend/skills/design-review in jezweb/claude-skills) into .claude/skills/design-review in your project. Claude Code loads it when a task matches its description.
How do I install Design Review in Codex?
Run `npx skills add jezweb/claude-skills --skill design-review -a codex`. Or copy the skill folder (plugins/frontend/skills/design-review in jezweb/claude-skills) into .agents/skills/design-review in your project. Codex loads it when a task matches its description.
Can I use Design Review in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add jezweb/claude-skills --skill design-review -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/design-review, .gemini/skills/design-review, .github/skills/design-review and .opencode/skills/design-review in your project.
What does Design Review need to run?
SKILL.md names no scripts, command-line tools or credentials: Design Review is instructions for the agent only. Compatibility (from SKILL.md): claude-code-only.
Does Design Review access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Design Review safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Design Review use?
Design Review is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Design Review use?
About 2.1k tokens (SKILL.md is roughly 8.6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Design Review?
Skills that share tags, products or a category with Design Review: Design Critique (mohitagw15856/pm-claude-skills, 1.4k stars), Interface Design for Dashboards and Apps (holaboss-ai/holaOS, 11k stars), Product Design Workflow Bundle (XiaomiMiMo/MiMo-Code, 14k stars) and UI Review (espennilsen/pi, 122 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Design Review?
jezweb (a GitHub user) maintains it in jezweb/claude-skills, which has 1,055 GitHub stars. The repository holds 52 skills in this directory. The repository was last updated on October 9, 2026.
Source: jezweb/claude-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.