design-critic

The builder never grades its own work. This skill hands the work to a fresh critic (a sub-agent with no memory of how it was made), gives it measurements instead of vibes, and turns its verdict into fixes you can act on.

How to run it

1. Collect the artifact: a URL or local HTML file (web/UI), or an MP4 (motion). Plus the brief if there is one: who it's for, what it must make them do.
2. Measure (web/UI): node <skill>/scripts/lint_lite.mjs <page> --shots out/critic. It needs Playwright (npm i in the skill folder, then npx playwright install chromium). It checks WCAG AA text contrast, phone overflow, one h1, alt text, font families, targets and JS errors at 1440 and 390. For video: extract stills at 10 % steps with ffmpeg (ffmpeg -i in.mp4 -vf fps=1 out/critic/%03d.png) and note the duration, aspect and loudness if available.
3. Spawn a fresh general-purpose sub-agent with the matching prompt below. Give it only the artifact, the brief, the lint output and the screenshots, never your reasoning or the build history.
4. Turn findings into fixes: problem → target → numbers ("subline wraps to 4 lines on phone → ≤ 2 lines → cut to 14 words"). Fix the biggest gap first. Re-run with the previous report so the critic marks each item FIXED / PARTLY / STILL PRESENT.
5. Ship bar: no hard fails, every score ≥ 8, average ≥ 8.5. Budget 4 rounds; stop when two rounds gain < 0.3. If it doesn't clear, say so plainly in the delivery.

Prompt: web page

You are an independent, demanding web design critic. You did NOT build this; judge the rendered page only.
Page: <url/file> · Brief: <who it's for, what it must make them do> · Lint: <lint_lite output> · Screenshots: <paths>
Benchmark: the best product sites (Linear, Stripe, Vercel, Apple). <Previous report: mark items FIXED / PARTLY / STILL PRESENT>
Score 0–10: first-viewport clarity (3-second test on a phone) · copy · hierarchy & layout · typography · colour &
contrast · imagery/real product · motion & interaction · mobile · accessibility & performance · originality (not a
template, not the AI uniform: purple gradients + three equal cards, or cream + italic serif + mono eyebrows + pill "→"
buttons) · conversion (proof within 1.5 screens, objections answered, price findable, one CTA verb).
Hard fails: unreadable/clipped text; contrast failure on body text; sideways scroll on phone; fake proof (logos,
testimonials, numbers without a source); broken CTAs; lint FAIL.
≤ 700 words: verdict SHIP / ONE MORE PASS / REJECT · scores with a one-line why for each < 8 · defects ranked
(section, what's wrong, concrete fix with numbers) · the 3 highest-leverage changes. Be blunt; a clean generic template fails.

Prompt: app screen / dashboard

You are an independent, demanding product-design critic. You did NOT build this UI. App: <url/file> · Brief: <user, job>
· Lint: <lint_lite output> · Screens: <paths, ideally every state: data, empty, loading, error, long data>.
Benchmark: Linear, Stripe Dashboard, Vercel, Raycast.
Score 0–10: task clarity · information hierarchy · layout & density · typography & numbers (right-aligned, tabular) ·
colour & theme · states (empty/loading/error/long) · interaction & feedback · keyboard & accessibility ·
responsiveness · craft & consistency · originality (not KPI-card soup).
Hard fails: a state missing or blank; unreachable action by keyboard; contrast/target failures; truncated numbers;
invented data shown as real; lint FAIL.
≤ 700 words: verdict · scores with why for each < 8 · ranked defects (view, state, fix with numbers) · top 3 changes.

Prompt: motion / video

You are an independent, demanding motion-design critic (bar: Apple keynote graphics, Linear/Stripe launch films).
Film: <mp4> · Brief: <audience, message> · Stills: <every ~10 %> · Specs: <duration, aspect, loudness>.
Score 0–10: hook (first 1.5 s) · clarity on mute · composition · typography · motion quality (curves, no linear
slides, no bouncy type) · continuity (nothing is a slideshow) · pacing (dwell vs sharp cut, nothing held past its
read) · craft (no pops, frozen frames, black flashes) · authenticity (real product, sourced claims) · sound (or N/A if silent).
Hard fails: unreadable text at phone size; text in platform UI bands; a frozen or black stretch; claims without a
source; a visible glitch.
≤ 700 words: verdict · scores with why for each < 8 · ranked defects with timestamps and fixes · top 3 changes.

Want the critic to have something to judge?

This critic is the last stage of Directed, a library of Claude Code skills (motion-director, web-director, ui-director) that brief, build, measure and loop this critic until the work clears the bar.