ux-proofsheet
Benchmark a UI/UX design against how real apps actually ship, in your industry and outside it.
A Claude Agent Skill. Point it at a design; it pulls real competitor screens for the same patterns and returns a scored, evidence-backed review. A UX benchmark, not a pixel diff.
See a sample review → · gallery · works with the Mobbin and Figma MCPs
What it does
Give it a Figma frame, a screenshot, or a plain description. It:
- reads the design and its own on-canvas notes,
- pulls real competitor screens from Mobbin for each pattern, deliberately mixing same-industry and cross-industry examples,
- returns a self-contained HTML report: a competitive-position scorecard, findings by dimension (navigation, UX copy, visual, accessibility) each tied to a real example and the exact Figma layer, a cross-industry prevalence table, and prioritized fixes,
- and, new in v1.3, measures the design's type ramp and spacing scale against Material 3 and Apple's HIG (the token layer, below).
It's a first pass. It compresses the "sign up for apps, screenshot, catalog how others solve this" research so your time goes to judgment, not gathering. You decide how much of the score to take: a junior designer can read it as guidance, a senior as a currency check.
Why it's different
Most design-review tooling does one of two things: it critiques a screen in isolation, or it generates UI from a spec. Neither answers the question you have before shipping, which is how this compares to what real competitors already do. ux-proofsheet grounds every finding in a real shipped screen, and it looks across industries on purpose, because a pattern that holds in fintech, travel, and social is a stronger signal than one that's just common in your niche.
How I use it in practice
I lead product and came up through design. The way I stay sharp is hands-on: I use apps in our space, screenshot them, and keep my own library. This skill extends that to the apps I can't sign up for and to completely different industries, and it goes down to the element level (every good navigation in the database, not just whole flows). I feed its first pass into my own design reviews, layer my hands-on research and product intuition on top, and make the call. It keeps me current and lock-step with designers who research full-time, and it lets me turn around specific, detailed feedback fast, which unblocks engineering and gives sales something to show. The judgment stays human. This compresses the part a machine does better.
How it thinks (the guardrails)
- Evidence over opinion. Every finding points to a real competitor screen or a cited source. No "I think."
- Convention isn't the goal, and popular isn't correct. It separates "you match the market" from "you deviate, and that's your edge" from "you deviate, reconsider," and it only calls something a convention when the direct set agrees.
- Never fake it. If it can't source a screen, a token, or a contrast number, it says so instead of inventing one.
- UX, not pixels. Screens in the report are clean recreations from the design's own tokens, self-contained and permanent; the exact pixels are one click away in Figma.
The token layer (v1.3)
Patterns are half of a design review. The other half is the system underneath: is the type ramp an actual scale, and does the spacing sit on a grid? Screenshots show that but can't measure it. v1.3 measures it.
scripts/token_check.py reads what the Figma MCP returns (get_variable_defs, get_design_context code, a node tree, or get_metadata geometry) and reports:
- the type ramp the design uses, its step ratio, and how many of its sizes match Material 3 and Apple's iOS text styles,
- the spacing scale and its base unit (8, 4, or irregular),
- findings for spacing off the 4dp grid, type sizes too close to tell apart, sizes that aren't baseline styles, and jumps that skip a step. Each one comes out in the same finding-card format as the rest of the review: severity, fix, the cited baseline, and an Open in Figma link.
It runs offline on the bundled fixture, no Figma account needed:
python skills/ux-proofsheet/scripts/token_check.py skills/ux-proofsheet/scripts/fixtures/home-nodes.json
Type ramp: 11 · 12 · 13 · 14 · 15 · 16 · 20 · 32
ratio: x1.165 overall (nearest Minor Third), median step x1.083, ...
baseline fit: Material 3 5/8, Apple HIG (iOS, Large default) 6/8 -> using hig_ios
Spacing scale: 2 · 4 · 6 · 8 · 10 · 12 · 14 · 16 · 24
base unit: irregular, closest 4 (on 8: 28%, on 4: 63%)
[T1 · MEDIUM] 4 spacing values sit off the 4dp grid (26 of 71 uses)
Fix: 2 -> 4 (already in use); 6 -> 8 (already in use); 10 -> 12 (already in use); 14 -> 16 (already in use)
...
In a Full review the skill runs it for you and the results land in the report's Token layer section, which is this exact output.
Limits, plainly:
This is the beginning of the README. Read the rest at the original. Read the full README ↗
