Immutable. This exact content is served forever at /api/v1/blob/2967d748cad5fe1f.
---
name: design-distill
category: design
description: >
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 brief / "run this through Claude Design". NOT FOR: implementing
a UI from an existing design system (use design-engineering / impeccable /
ui-ux-pro-max), brand-facing Broomva styling (use arcan-glass), neutral
artifact research with no design intent (use checkit), or primitive promotion
(that's a bstack-engine act). Triggers on the phrases above + /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 <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, 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
| Step | Composes |
|---|---|
| Ingest + intent | **checkit** (no-ask-back artifact intake, P17) |
| Capture + measure | **agent-browser** (`set media`, `eval` computed styles, `screenshot`) — recipe in `references/capture-recipe.md` |
| Distill → moodboard | Obsidian-Dashboard **moodboard method** (`handrovermeulen/Obsidian-Dashboard`) |
| Dual-mode tokens | `[[obsidian-as-middle-layer]]` sibling design work; semantic-token discipline |
| Generate system | **arcan-glass** / **ui-ux-pro-max** (Tailwind v4 + shadcn), P18 (md substrate + HTML specimen) |
| Validate | **P11** dogfood (agent-browser render in both modes) |
| Claude Design handoff | this skill's prompt template; P18 Audience |
| Document | **P6** Bookkeeping + `[[measured-style-capture]]` |
## 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
| Excuse | Reality |
|---|---|
| "I can read the palette off the screenshot." | No. The model approximates colour; CSS is exact. Measure with `getComputedStyle` or it's invented. |
| "`set media light` didn't change it — guess the light mode." | The site pins its theme or uses a manual toggle. Click the toggle, or record it as a single-mode anchor. Never fabricate the missing mode. |
| "A markdown spec is enough." | The specimen must RENDER. Dogfood both modes (P11) or it isn't validated. |
| "Just give them the in-stack system, skip Claude Design." | If the user asked to run Claude Design, produce the manifest + diff-ready prompt. Don't substitute your output for the tool they chose. |
| "Ask which accent / hero they want." | Recommend a default, proceed on it (token-level = reversible), surface alternatives as ranked next steps. |
| "Should I file a KG entry?" | Never ask (P6). File the insight, report after. |
## 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.