What is the Jezweb design-review skill?
The design-review skill from Jezweb checks whether a web app or page looks professional and polished, not whether it is usable. The agent inspects layout, typography, colour, hierarchy, components, interaction states and responsive behaviour in a browser, then writes a report with High, Medium and Low findings and a top three fixes list.
The skill asks one question: would a design-conscious person look at this page and think it is well made, or that a developer designed it? It sits in the frontend plugin of Jezweb's skills repository.
It is explicitly not a UX audit. Usability, workflow and friction belong to a separate ux-audit skill in the same repository. This one only judges how professional, consistent and polished the design looks.
What gets reviewed
- Layout and spacing: equal gaps inside grids, aligned left edges, a visible column grid and a steady spacing scale such as 8, 16, 24 and 32 pixels.
- Typography: a clear h1 to h3 hierarchy, body lines of 50 to 75 characters and body line height between 1.5 and 1.7.
- Colour: design tokens instead of raw Tailwind colours, plus WCAG AA contrast of 4.5:1 for body text and 3:1 for large text.
- Hierarchy: one dominant primary action, checked with the squint test, where the most important element should still stand out.
- Components: one primary, one secondary and one destructive button style, with consistent radius, shadow and icon family.
- Interaction: hover, focus, active and disabled states, transitions of 150 to 200ms and loading indicators.
- Responsive quality: mobile navigation, table behaviour, touch targets of at least 44x44px and a layout that holds at 768px.
What you get back
Findings are written to .jez/artifacts/design-review.md. The report holds an overall impression, findings grouped as High, Medium and Low, a What Looks Good section and a top three fixes list. Visual issues get screenshots.
Severity has a definition. High looks broken or unprofessional, such as invisible text in dark mode. Medium looks unpolished, such as mixed icon styles. Low is a nitpick, such as a 1 to 2px misalignment.
Who the design-review skill is for
Best for
- A pass before showing work to a client or team, or before calling a finished feature done.
- Pages that look off when you cannot say why. The skill's own tip is to check margins and padding first, because that is usually spacing.
- A periodic check on a shipped product, or as the visual companion after a UX audit.
Not for
- Usability testing, workflow review or friction analysis. The skill states it is not a UX audit.
- Checking code against fixed rules. This skill judges the rendered page. For rule based code review, see web-design-guidelines.
- Setups with no browser tool. It expects Chrome MCP, Playwright MCP or playwright-cli to look at the page.
- A numeric score. The report uses severity levels and a top three list. For deeper contrast and keyboard work, see fixing-accessibility.
Use it with UiChemy
The skill works from a rendered page, so it can review a WordPress page after UiChemy has produced it. Build with Figma to WordPress or import an AI build with AI to WordPress, then review the live URL. Click Get Started on uichemy.com.
Once the report lists issues, apply the top three fixes first and re-run it. A polish pass or a second opinion from critique can follow.
How to install Jezweb Design Review Skill: Audit Visual Polish
/plugin install frontend@jezweb-skillsAdd the marketplace
In Claude Code, run
/plugin marketplace add jezweb/claude-skillsonce. The README gives this as the one-time setup.Install the frontend plugin
Run
/plugin install frontend@jezweb-skills. The README lists design-review among the skills in the frontend plugin.Or copy it by hand
Run
git clone https://github.com/jezweb/claude-skills.gitand copy plugins/frontend/skills/design-review into the folder your agent loads skills from.Make a browser tool available
Have Chrome MCP, Playwright MCP or playwright-cli ready, because the skill looks at the rendered page and takes screenshots.
Ask for a review
Use a trigger phrase such as design review, does this look good, check the layout, is this polished or it looks off, and give a URL.
Check that it loaded
Ask for a design review of one page URL. The agent should open it with a browser tool, check the seven areas and write .jez/artifacts/design-review.md with findings grouped by severity.
Key features
- Layout and spacing checksCompares gaps, padding and alignment across sections, looks for breathing room, grid discipline and a consistent vertical rhythm, and flags random values such as 13px in one place and 27px in another.
- Typography checksLooks at heading hierarchy, line length, line height, a consistent size scale, weight usage and long text that truncates without an ellipsis.
- Colour and contrast checksPrefers semantic tokens such as bg-primary over raw colours, applies WCAG AA contrast, checks that status colours keep one meaning and warns about a rainbow of colours without hierarchy.
- Visual hierarchy checksUses the squint test to find the element that draws the eye, wants one clear call to action, and looks at grouping, progressive disclosure and negative space.
- Component consistency checksFlags five different button styles, mixed card radii and shadows, uneven input heights, mixed icon families and random border radius values.
- Interaction state checksVerifies hover feedback, visible keyboard focus, an active state for the current nav item, subtle transitions, skeletons or spinners during loading and visibly muted disabled elements.
- Responsive quality checksReviews mobile navigation, image scaling, tables that scroll or stack, touch targets of 44x44px and a tablet layout at 768px, not only desktop and phone.
- Severity guideEach finding is ranked High, Medium or Low, from invisible text in dark mode down to a slightly different border radius, so the worst problems come first.
- Findings report with screenshotsWrites .jez/artifacts/design-review.md with an overall impression, findings and fixes, what looks good and a top three list, with screenshots for visual issues.
- Browser tool detectionDetects Chrome MCP, Playwright MCP or playwright-cli, and resolves the URL the same way as the ux-audit skill, preferring a deployed page over localhost.
Frequently asked questions
What is the Jezweb design-review skill?
It is a skill in the frontend plugin of Jezweb's skills repository. It reviews a web app or page for visual design quality: layout, typography, spacing, colour, hierarchy, consistency, interaction patterns and responsive behaviour. It produces a findings report with screenshots.
How do I install the design-review skill?
Run /plugin marketplace add jezweb/claude-skills once, then /plugin install frontend@jezweb-skills. To install by hand, clone the repository and copy plugins/frontend/skills/design-review into the folder your agent loads skills from. Then ask for a design review with a URL.
What is the difference between a design review and a UX audit?
A UX audit checks usability, workflow and friction. This design review checks whether the page looks professional, consistent and polished. The skill calls itself the visual companion to a UX audit, so you can run both on the same product.
What does the design review report contain?
The file .jez/artifacts/design-review.md has the app name, date and URL, an overall impression of one or two sentences, findings under High, Medium and Low, a What Looks Good section and a top three fixes list. Screenshots are taken where the issue is visual.
Does the design-review skill need a browser tool?
Yes, in practice. SKILL.md says to detect Chrome MCP, Playwright MCP or playwright-cli, the same way the ux-audit skill does. It also prefers a deployed or live URL over localhost, so the agent can look at a real rendered page.
Which AI coding agents can use the design-review skill?
The SKILL.md frontmatter marks compatibility as claude-code-only, and the repository describes itself as skills for Claude Code. Another agent that loads SKILL.md folders and has a browser tool might work, but the repository does not confirm it.
What do High, Medium and Low mean in the design review?
High means the page looks broken or unprofessional, for example invisible text in dark mode. Medium means it looks unpolished, such as inconsistent spacing or mixed icon styles. Low is a nitpick, like a 1 to 2px alignment difference or a shadow that is slightly too strong.
Which phrases trigger the design-review skill?
The description lists design review, does this look good, review the design, check the layout, is this polished, visual review, design audit, make it look better and it looks off. Mentioning one of these while naming a page or URL should load the skill.