Design-test — judge the rendered UI against the Design System

frontend-test proves behavior; this skill judges appearance. Same tooling (playwright-cli), different eye. Server rule: probe the stack's standard ports first (Vite/saferskills-Astro 5173, website Astro 4321, API 8000, Ladle 61000); reuse a live server, otherwise start one (pnpm dev in the webapp dir / repo root), track the PID, and kill only what you started.

1. Load the ground truth first

Discover the repo's Design System sources before judging anything — auditing from taste alone produces noise:

• Design tokens: saferskills ui/styles/tokens.css (single source of truth — colors, radii, spacing, type, motion); other repos' Tailwind @theme / token files.
• The repo's .claude/rules/design-system.md when present (repo identity — e.g. SaferSkills teal #0D9488 and its chamfered shape language live here).
• The vault's 03-Product/Brand and Design System/DESIGN.md (OpenLatch brand language — Editorial Precision: sharp 0px radius, 1px borders, no shadows, Emerald Teal).

The DS is the spec; your taste is only the tiebreaker where the DS is silent.

2. Browse and audit

Walk the affected pages like a user — both viewports (375×812, 1440×900), screenshots at each judged state. Audit four layers:

1. DS conformance — hardcoded colors/sizes where tokens exist, off-system components where the library has one, spacing/typography off the scale, wrong brand elements. Cross-check the rendered CSS (inspect computed styles) against the token file.
2. Readability — contrast too low to read, type too small, truncated/overlapping text, unreadable text over images. Anything a user would squint at.
3. Breakage — overflow, clipping, z-index collisions, misalignment, broken images/icons, layout collapse at either viewport.
4. Consistency — the changed UI versus its neighbors: same patterns for the same jobs (buttons, empty states, error surfaces), no one-off variants introduced.

3. Fix loop

Findings get fixed (3-strike loop) with a strong bias to reuse the DS solution — replace the hand-rolled thing with the token/component, don't tune the hand-rolled thing. Re-screenshot after each fix; before/after pairs are the evidence.

Output

DESIGN-TEST — <PASS | FINDINGS-FIXED | FAIL>
DS sources: <what was loaded>
<page × viewport>: <ok | [P0|P1|P2] fixed: what | [P0|P1|P2] FAILED: what + why unfixable in 3>
Evidence: <before/after screenshot paths>

Severity scale: P0 unusable/unreadable · P1 clear DS violation or broken visual · P2 polish.

Close browser contexts when done; kill any server you started.