Design Review

This runs a structured design critique against your brief and built code. It's meant for the moment after you ship a feature and want to catch visual inconsistencies, accessibility gaps, or places where the implementation drifted from the design intent. The process is thorough: it reads your brief, explores every component and style file, captures responsive screenshots at mobile, tablet, and desktop widths using Playwright or browser tools, then audits visual hierarchy, token usage, and aesthetic fidelity against what you planned. Output is a prioritized refinement list saved as DESIGN_REVIEW.md. Honest take: the mandatory screenshot step makes this actually useful, not just a code linter pretending to review design.

skills.sh installs: 5.9K
GitHub stars: 601
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add julianoczkowski/designer-skills --skill design-review --agent claude-code

Installs into .claude/skills of the current project.

Files

This skill runs a structured design review of what has been built, measured against the design brief and the chosen aesthetic philosophy.

CRITICAL — Visual Screenshot Capture

You MUST capture screenshots of the running application as part of every design review. Code review alone is insufficient — you need to see what the user sees. Follow the screenshot capture protocol in Step 3 below. This is not optional.

Example prompts

"Review what I just built"
"Run a design critique on the landing page"
"Check this against the brief"
"Here's a screenshot. How does it look?" [paste screenshot]
"QA pass before I ship this"

Process

Read the brief. Look for the active feature's brief at .design/<feature-slug>/DESIGN_BRIEF.md. If multiple feature folders exist under .design/, ask the user which feature to review. If no .design/ folder exists, fall back to DESIGN_BRIEF.md in the project root. If neither exists, ask the user what the intended design direction was.

SKILL.md on GitHub