design-review
This skill executes a comprehensive design review by comparing your built application against the design brief and aesthetic direction. It captures screenshots across responsive breakpoints, analyzes visual hierarchy and consistency, and produces a prioritized refinement list organized by severity.
Design-review runs a structured design critique against your brief and codebase with visual verification.
AI-generated summary based on this skill's SKILL.md
Install
julianoczkowski/designer-skills/design-review
git clone https://github.com/julianoczkowski/designer-skills
cp -r designer-skills/design-review ~/.claude/skills/design-reviewFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
What does design-review do?
design-review executes a comprehensive design review by comparing your built application against the design brief and aesthetic direction. It captures screenshots across responsive breakpoints, analyzes visual hierarchy and consistency, and produces a prioritized refinement list organized by severity.
Can design-review check my website design?
Yes. design-review verifies visual hierarchy, consistency, and responsive behavior across your site. It captures screenshots at different breakpoints and identifies gaps between your implementation and the design brief, then organizes findings into must-fix, should-fix, and improvement opportunities.
Does design-review review landing page design?
Yes. design-review performs a design review against your brief for landing pages and other components. It runs structured design critique, checks visual hierarchy and consistency, verifies accessibility compliance, and captures screenshots to analyze aesthetic fidelity across all responsive sizes.
What accessibility checks does design-review perform?
design-review checks accessibility compliance as part of its comprehensive audit. It verifies that your design meets accessibility standards alongside visual hierarchy, consistency, and responsive behavior checks, ensuring your interface is both aesthetically sound and usable for all users.
How does design-review organize its findings?
design-review identifies and prioritizes findings into must-fix issues, should-fix improvements, and enhancement opportunities. This severity-based organization helps you focus refinement efforts efficiently, addressing critical design gaps before polish passes.
Can design-review check design consistency?
Yes. design-review verifies visual hierarchy, consistency, and responsive behavior as core functions. It analyzes your component design across breakpoints and produces a prioritized refinement list, ensuring your interface maintains consistent aesthetic direction throughout.
SKILL.md
rendered from the published skill — quoted content, verbatim
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
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 1 file
design-review/SKILL.md