design-ref
Reference: $ARGUMENTS
1. Capture the reference
URL: screenshot it with the shared toolkit at 1440 and 375, then read the sheets:
node ${CLAUDE_SKILL_DIR}/../ui-audit/scripts/audit.mjs <url> --widths 375,1440 --no-axe --out /tmp/design-ref/<host>
Pull the computed styles with --inject, or a one-off CDP script importing ${CLAUDE_SKILL_DIR}/../ui-audit/scripts/cdp.mjs (launch() → navigate() → evaluate()). Sample getComputedStyle of body, h1–h3, p, a, button, the primary CTA, a card, an eyebrow/kicker, an input, and the footer. Collect font-family/size/weight/line-height/letter-spacing, color, background, border-radius, box-shadow, padding and gap.
Pasted HTML / email: save it to /tmp/design-ref/ref.html, render with render-html.mjs, and read the inline styles directly.
2. Distil the system
- Colour roles: canvas, surface, ink, muted ink, accent, accent-ink, border, success/warn. Give hex values and where each appears.
- Type: families (and the nearest free equivalent if a font is licensed), scale steps with px/line-height/weight/tracking, and casing (eyebrows uppercase + tracked?).
- Spacing: the rhythm actually used (e.g. 8/16/24/40/64), section padding, and card padding.
- Shape: radii per element class, shadow recipes, and the border weight.
- Anatomy: button (height, padding, radius, weight, icon), card, eyebrow, and the hero composition.
- Tone: 3 adjectives plus what the copy does (short sentences? second person? numbers?).
3. Map onto the project (don't fork it)
Read the project's tokens (app/globals.css @theme/:root, tailwind.config, or the theme file) and its existing components. Produce:
| Role | Reference | Project token now | Proposal |
|---|---|---|---|
| accent | #FF5A1F | --color-brand #… | keep / retune value / new (justify) |
Rules:
- Retune existing tokens before adding new ones. Every new token needs a one-line reason.
- Brand-locked items aren't touched: logo, the brand colour if the project has one, and fonts already licensed or in use.
- Check accent-on-canvas and ink-on-surface contrast for every proposal (≥ 4.5:1 text, ≥ 3:1 UI).
- If the project keeps a Figma file in sync with code, the token changes go into Figma in the same task.
Exit criteria
- Token table complete, with each row marked keep, retune or new.
- Contrast checked for the proposed pairs.
- No code changed yet. That's
design-pass, after the user agrees to the table. - One-sentence summary to the user with the table below it.