Design Distill

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 into a <dark|light|dual>-mode design system for ." 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, button + link colours, h1 font/size/weight, body font). Handle the three site classes (see references/capture-recipe.md):

   • respects set media → capture dark + light directly;
   • manual toggle (ignores media) → click the theme button, re-measure;
   • single-mode (pins theme) → record as a one-mode anchor, don't fake the other. View the screenshots to catalogue imagery/layout/motion (the part you genuinely must see); measure everything quantitative.

3. Distill — synthesize the references: find the shared DNA and the productive tension (the axis the user must decide on). Produce the moodboard files per the Obsidian-Dashboard method — Moodboard.md (per-ref catalogue, measured values, confidence tags), Design-Brief.md, Fonts.md (observed faces + self-hostable substitutions). Markdown (P18 substrate).

4. Articulate dual-mode (if asked) — map references to ONE warm/neutral palette with semantic tokens, dark + light variants. Pick anchors honestly (e.g. warm-dark from ref A, warm-light from ref B; reject a ref's own off-direction mode). State the mix in one line.

5. Generate the design system in-stack (Tailwind v4 + shadcn, arcan-glass aligned): colors_and_type.css (dual-mode tokens + type scale + radii/ spacing/motion), theme.css (@theme inline → utilities), shadcn JSX stubs (ui-kit/*.tsx, cva variants), and a self-contained HTML specimen that RUNS the palette (dogfood — the page is the spec), + a README.

6. Validate by interacting (P11) — render the specimen via agent-browser, screenshot both modes, confirm the toggle flips and console is clean. A design system you haven't watched render in both modes isn't validated.

7. Claude Design handoff — emit the upload manifest (curated, non-redundant reference images + the 3 moodboard .md) and a self-contained paste-ready prompt (templates/claude-design-prompt.template.md) that instructs Claude Design to refine, not diverge — so its output is a clean diff against the in-stack version, not a competing direction. Give absolute paths; offer a one-drag zip.

8. Document proactively (P6) — file/refresh the entity for any reusable insight; if the flow recurs, add/update the bstack-engine candidate-ledger row. Never ask permission — file, then report.

Composition map

Worked example (canonical instance)

~/broomva/docs/moodboard/agents-dashboard/ — the agents-dashboard run end to end: 11 captured refs (paperclip.ing / cofounder.co / linear.app / attio.com), moodboard.html, and design-system/ (tokens + theme + ui-kit + specimen + claude-design-prompt.md). Read it as the reference output shape.

Anti-rationalization

Scope

• In scope: any "I like the look of X → give me a design system" request; reference-driven moodboards; dual-mode token systems; Claude Design briefs.
• Out of scope: building the actual app from the system (hand to design-engineering / the scaffold step); brand-facing arcan-glass work; neutral research (checkit).

Validation (skill self-test)

A /design-distill run is complete iff: inferred-intent line stated, no bounce-back on reversible steps · every palette/type value has getComputedStyle provenance (measured, not inferred) · moodboard .md produced with confidence tags · dual-mode tokens with semantic names (if dual-mode asked) · specimen rendered + screenshotted in both modes with a clean console (P11) · Claude Design manifest + diff-ready prompt emitted with absolute paths · ≥1 insight filed proactively (P6).

References

• references/capture-recipe.md — the agent-browser measured-capture recipe (the load-bearing, reusable mechanism: dual-mode capture + the three site classes + the computed-style extractor + dogfood validation).
• templates/claude-design-prompt.template.md — parameterized Claude Design "Create Design System" prompt (refine-not-diverge).
• research/entities/pattern/measured-style-capture.md — the core insight.
• research/entities/pattern/obsidian-as-middle-layer.md — origin artifact.
• research/entities/pattern/bstack-engine.md — crystallization candidate row.