What is the design-review skill?
The design-review skill checks what has been built against its design brief. It insists on screenshots of the running app at 375, 768 and 1280 pixel widths, runs a ten part checklist, and writes DESIGN_REVIEW.md with Must fix, Should fix and Could improve lists. Code reading alone is not accepted.
The skill's own header marks screenshot capture as critical. A review of what you built is not allowed to rest on code alone, because the agent needs to see what a user sees. It runs on request, after something exists to look at.
Where the review starts
The agent looks for the feature's brief at .design/<feature-slug>/DESIGN_BRIEF.md, falls back to DESIGN_BRIEF.md in the project root, and asks you for the intended direction if neither exists. It then reads the built components and styles.
The screenshot protocol
- Mobile at 375 by 812, tablet at 768 by 1024 and desktop at 1280 by 800, as full-page captures.
- Interactive states where relevant: hover, focus, open menus, form errors, loading and empty states.
- Dark mode variants if the project supports them.
- Tool order: Playwright MCP first, the Cursor IDE browser second, then a request that you supply screenshots.
The ten checklist areas
Visual hierarchy, consistency, aesthetic fidelity, component quality, states and interactions, responsive behavior, accessibility, typography, dark mode and mobile-first are each checked, and findings name the exact component, file or screenshot.
Who the design-review skill is for
Best for
- A quality pass after an agent finishes building a screen, before shipping.
- Projects that already have a design brief to judge against.
- People who want a critique tied to named screenshots and a ranked fix list.
Not for
- Agents without any browser tool, unless you will paste screenshots yourself.
- Writing the brief or the code. This skill only judges. See critique for a lighter critique.
- Rule-by-rule code linting. web-design-guidelines works from source.
Use it with UiChemy
Once a design has been converted into a WordPress page with UiChemy Figma to WordPress, or imported with AI to WordPress, repeat the viewport sweep on the live page. Click Get Started on uichemy.com. For the final polish pass, see polish.
How to install Design Review Skill: Screenshot Critique Against a Brief
The skills CLI add command pointed at julianoczkowski/designer-skillsRun the installer
Run the skills CLI add command pointed at julianoczkowski/designer-skills. The interactive CLI walks you through which skills to install, which agents to target, and whether to install at project or global scope.
Select design-review
Pick design-review in the list of skills, or install all eight, and choose your agent. The skill sits in the design-review folder of the repository.
Give the agent a browser
Set up Playwright MCP or the Cursor IDE browser so the agent can capture screenshots. Otherwise be ready to supply them.
Ask for a review
Use a phrase such as review what I just built, or run a design critique on the landing page, with the app running locally.
Check that it loaded
Ask for a review of one page. The agent should capture screenshots at three widths, save them under .design, and write DESIGN_REVIEW.md.
Key features
- Mandatory screenshotsCapturing the running app is not optional. If no tool is available, the agent must ask you for screenshots and wait.
- Three viewportsMobile, tablet and desktop are captured at 375 by 812, 768 by 1024 and 1280 by 800, each with a filename suffix.
- Organised output folderScreenshots are saved to a screenshots folder inside the feature's .design directory, with names such as review-homepage-mobile-375.png.
- Brief based critiqueFindings are measured against the brief and its chosen aesthetic philosophy, not against general taste.
- Ten part checklistHierarchy, consistency, aesthetic fidelity, components, states, responsiveness, accessibility, typography, dark mode and mobile-first.
- Accessibility checksIncludes WCAG AA contrast at 4.5:1 and 3:1, keyboard reach, focus rings, semantic HTML, alt text and a reduced-motion query.
- Responsive checksLooks for 44 by 44 pixel touch targets, layouts that reorganise instead of shrinking and lines no wider than 65 to 75 characters.
- Dark mode checksAsks whether colours use CSS variables, shadows are adjusted and the dark palette feels designed, not inverted.
- Severity groupsIssues are grouped as Must fix, Should fix and Could improve, each with a concrete suggested fix.
- Saved review fileThe result is saved as DESIGN_REVIEW.md next to the brief, with a Screenshots Captured table and a What Works Well section.
Frequently asked questions
What is the design-review skill in designer-skills?
It is the last skill in the eight skill designer-skills flow. It critiques a built interface against the design brief by capturing screenshots of the running app, running a structured checklist and writing a prioritised review file. It runs on request, not automatically.
How do I install it?
Run the skills CLI add command pointed at julianoczkowski/designer-skills. The interactive CLI asks which skills to install, which agents to target and whether to install at project or global scope. If you use Claude Code, the README also offers a plugin route: /plugin marketplace add julianoczkowski/designer-skills, then /plugin install designer-skills@designer-skills.
Why does it insist on screenshots?
The skill says code review alone is insufficient, because rendering problems such as failed font loading, broken images, overflow and z-index errors do not show up in source. If no browser tool exists, it asks you to provide screenshots at three widths.
Which screenshot tools does it use?
It tries Playwright MCP first, using the plugin-playwright-playwright server. If that is missing it uses the Cursor IDE browser. As a last resort it asks you for desktop, tablet and mobile screenshots, plus dark mode and interactive states where relevant.
What does DESIGN_REVIEW.md contain?
A summary, a table of screenshots captured, then Must fix, Should fix and Could improve lists, and a What Works Well section. It is saved beside DESIGN_BRIEF.md in the feature's .design folder, or in the project root if there is no .design folder.
Does it need a design brief?
It looks for .design/<feature-slug>/DESIGN_BRIEF.md first, then DESIGN_BRIEF.md in the root. If neither exists, it asks what the intended design direction was. A brief makes the aesthetic fidelity check far more specific, so write one first when you can.
Which AI agents does the skill work with?
The README says the collection works with Claude Code, Cursor, Codex, Windsurf and 40 or more other agents. This skill's screenshot step names Playwright MCP and the Cursor IDE browser, so an agent needs a similar browser tool or you must supply the images.
What license does the repository use?
GitHub and the README both give Apache-2.0. The README adds a security note recommending that you review skills before using them in sensitive or production contexts, which applies here because the skill drives a browser and writes files into your project.