design-distilllisted

Distill a visual style from reference sites/products the user likes, then articulate it into a validated, dual-mode design system and a ready-to-run Claude Design ("Create Design System") handoff. Crystallized from the agents-dashboard run (checkit on handrovermeulen/Obsidian-Dashboard → moodboard → dual-mode tokens → Claude Design brief). It is a COMPOSITION skill — it fires existing tools (agent-browser capture, the Obsidian-Dashboard moodboard method, P18 format discipline, P11 dogfood validation, arcan-glass / ui-ux-pro-max) in sequence; it does not reimplement them. Core principle: MEASURED, NOT INFERRED — the palette and type come from computed styles extracted via headless browser, never from the model guessing at a screenshot. USE WHEN: distill a style, capture references, build a moodboard, "I like the look of X / use these as references", extract a palette from a site, design tokens from screenshots, create a design system from references, dual-mode (dark+light) design system, make a Claude Design b
broomva/skills · ★ 3 · Web & Frontend · score 72

Install: claude install-skill broomva/skills

# design-distill — references → design system → Claude Design Turn "I like the look of these sites" into a **measured**, dual-mode design system plus a **diff-ready Claude Design brief** — without ever inventing a colour or font. ## The one rule > **Measured, not inferred.** Never describe a reference's palette or type from > what a screenshot *looks like*. Extract the **computed styles** with a headless > browser and report the hex/font you measured. The moodboard method's > *"describe only what you see"* constraint is enforced by measurement, not by > the model's eye. A palette value with no `getComputedStyle` provenance is a > bug, not a description. Corollary (no-ask-back, inherited from checkit): when the user shares references with a terse directive ("use these", "a mix of those two"), infer the design intent, state it in one line, and proceed. Surface costly/irreversible forks (hero device, accent hue, scaffold target) as **ranked next steps with a recommended default** — proceed on the default for reversible token-level work. ## Pipeline (what `/design-distill <refs>` does) 1. **Ingest + declare intent** — one line: *"Distilling <refs> into a <dark|light|dual>-mode design system for <product>."* Name the originating method if there is one (e.g. the Obsidian-Dashboard moodboard step). 2. **Capture + MEASURE** (agent-browser) — for each reference, in each available mode: screenshot + `eval` a computed-style extractor (bg/surface/text/muted/ border, bu