Design audit skills compared: Impeccable, Vercel

Ask a coding agent to review a pricing page and the answer often reads like taste notes: the hierarchy could be stronger, the cards feel heavy, consider more whitespace. Nothing points at a file, and nothing says which note matters most. Several open skills turn that into a real review. For a deep audit of one component or route, I would install design-grill from molveau/skills: seven read-only lenses, a verifier for every objective finding, and one ranked report with a file:line for each flaw. It is also the most expensive option here, and for a quick pass on a branch or a check of a rendered page another skill fits better. The sections below say which.

The contenders

Skill	Author	Licence	Best at	Lacks
Impeccable (critique, audit)	Paul Bakaus	Apache-2.0	A scored UX critique, a P0 to P3 technical audit, a detector that also scans a rendered URL	A separate check of each finding; it wants an install, an init step and context files
skills (better-interface, interface-review)	Jakub Krehel	MIT	One ranked review of a screen, and a review scoped to what a branch changed	A script or a verifier; every finding is the model's judgment
web-design-guidelines	Vercel	MIT	A fast pass of files against Vercel's Web Interface Guidelines, in terse file:line output	Judgment on hierarchy or direction; it fetches its rules over the network on each run
web-quality-skills	Addy Osmani	MIT	Measured evidence from a running page: Lighthouse, performance traces, Core Web Vitals	Visual design judgment, which it does not claim
design-review	Patrick Ellis (OneRedOak)	MIT	A Claude Code subagent that clicks through a live preview with Playwright at three viewports	A skill install; you copy its files and need a running preview and the Playwright MCP
design-grill	Molveau Studio	MIT	Seven lenses on one target, objective findings verified, one ranked report against the project's own tokens	A view of the rendered page; its default path needs Claude Code's Workflow tool and many agent calls

Each one, fairly

Impeccable's critique and audit, by Paul Bakaus

critique scores a design against usability heuristics and ranks what to fix first. audit checks accessibility, performance, theming and responsive behaviour, with findings ranked from P0 (blocking) to P3 (polish). Its detector runs without a model or an API key, and pointed at a URL it also checks what only a rendered page shows, such as low contrast and tiny text. A Chrome extension overlays the same findings on any live page. Install Impeccable if you want the scored critique, the detector in CI or the overlay. When the page already runs, it is the review I would start with.

Jakub Krehel's better-interface and interface-review

better-interface sends a screen through each of his better-* skills (accessibility, layout, writing, typography, color, UI) and returns one ranked verdict, capped at 15 findings, with one row per root cause. It identifies the project's tokens and components first and writes every fix in the project's own idiom. interface-review asks a narrower question: did this branch, pull request or uncommitted change make the interface worse? It reads both sides of the diff and classifies each finding as introduced, a regression or pre-existing, which keeps a review before merging about the change itself. For that job, install his repo.

web-design-guidelines, by Vercel

A short skill that fetches Vercel's Web Interface Guidelines fresh on every run, reads the files you name and reports what breaks them in a terse file:line format. The rules are public in their own repo. It is cheap enough to run on every UI change. It checks rules, so it says little about hierarchy or whether the page has a point of view, and it needs network access to fetch them.

web-quality-skills, by Addy Osmani

Addy's collection is measurement first. web-quality-audit collects a live baseline before it searches the code: Lighthouse for accessibility, SEO and best practices, a performance trace for Core Web Vitals, real-user data where Chrome has it. It keeps measured findings apart from hypotheses found only in code, and uses Chrome DevTools MCP when it is available. Install it when the question is speed, accessibility scores or search. It leaves visual design to other skills.

design-review, by Patrick Ellis

This one is a Claude Code subagent and a /design-review slash command, published as templates in his workflows repo. It opens a live preview with the Playwright MCP, runs the main user flow, tests hover, active and disabled states, then checks the layout at 1440, 768 and 375 pixels before it reads the code. You copy its files into the project and keep your design principles in CLAUDE.md. Use it when you have a preview environment and want the review to click through the page the way a person would.

What design-grill adds

• Seven lenses with written boundaries. Tokens, craft, motion, layout, accessibility, copy and heuristics each have their own brief. The boundaries are explicit: tokens reports a value outside the declared scale, layout reports values that are all on the scale and still produce no rhythm.
• The project's own design system as the yardstick. A script discovers what the target declares (CSS custom properties, Tailwind config, theme modules) at run time. The grill ships no token values, so it runs on a stranger's repo with no setup, and a declared token always wins over the grill's opinion.
• Verification where it means something. Each objective finding goes to its own verifier agent. Taste calls from craft, layout and heuristics are never sent, because an adversarial verifier would refute every one of them. Objective findings end confirmed, refuted and dropped, or unverified and visibly marked, and the footer counts refuted and unverified separately.
• One ranked report from a tested merge. merge-findings.mjs collapses findings that share a file:line and a claim or topic, keeps the highest severity, lists every lens that caught it, and ranks blocker, major, minor, nit. The report lands in docs/design-grills/ and names any lens that failed to run.
• A platform check that asks. It detects web or mobile from the repo. When it cannot tell, it stops and asks, so a mobile app never receives web ARIA advice.
• A stated cost and a cheaper path. A Workflow run on a route can use dozens of agent calls, and the skill tells the agent to say so and get your go first. Without the Workflow tool, the agent applies the seven briefs one at a time and spot-checks each objective finding by hand: the same ground, slower and with less independent checking.
• Honest limits. It is read-only on source and writes one file. It is a static read that cannot see rendered output, real contrast or focus order, and the report ends by saying so. For those, run Impeccable's URL scan or Addy's audit.

Install

The skill alone, with the skills CLI:

npx skills add molveau/skills -s design-grill

The design bundle:

npx skills add molveau/skills -s anti-slop -s ui -s ux -s motion -s design-grill -s design-inspiration-index

In Claude Code, all eleven skills as one plugin:

/plugin marketplace add molveau/skills
/plugin install molveau-skills@molveau

Every skill and bundle is on the skills page, and the source is at github.com/molveau/skills. Related comparisons: anti-slop skills, UI skills, UX and accessibility skills.

Checklist

• The target is one component or route, not the whole app.
• You agreed to the cost before a Workflow run, or chose the manual path.
• The report lists the tokens it found, or says the project declares none.
• Unverified findings are marked and counted apart from refuted ones.
• Contrast, focus order and Core Web Vitals come from a tool that runs the page.
• A review of one branch before merging uses a change-scoped skill such as interface-review.