Claude Code design-review for responsive UI consistency
Compare design requirements with screenshots, checking spacing, hierarchy, and breakpoint behavior. Tie each finding to a component.
中文Install in Claude Code
Open a project with a local UI preview in Claude Code. Provide DESIGN.md or an agreed design and screenshots for the relevant screen widths.
- Review `.claude/skills/design-review/SKILL.md` and its requirements at the pinned GitHub commit.
- Create `.claude/skills/design-review/` in your project and save the reviewed file as `.claude/skills/design-review/SKILL.md`.
- Start Claude Code from that project's root, then select `/design-review` in the slash menu.
Example task
In ui-26, the spec shows 1 column of event cards at a 360 px viewport. The screenshot shows 2 columns and horizontal scrolling at 360 px.What to check
Report {viewportPx: 360, expectedColumns: 1, actualColumns: 2, horizontalScroll: true}. Identify the event-card component and attach the relevant screenshot.
Original SKILL.md on GitHub · Updated
Frequently asked question
Does the review apply visual fixes automatically?
The default is a report with screenshots and component references. Apply changes after the user identifies which findings to fix.