Design distill
Broomva agent-skills monorepo — 48 Tier-2 skills compatible with Claude Code, Codex, Cursor, Gemini CLI, Goose, Copilot. Layout follows anthropics/skills (agentskills.io spec). Install: npx skills add broomva/skills --skill <name>.
npx -y skills add broomva/skills --skill design-distillAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- 3 stars3 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
What its author says it does
Copied from the file, not written here
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.
SKILL.md
8.8 KB, as published. Nobody here has run it
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
getComputedStyleprovenance 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)
-
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).
-
Capture + MEASURE (agent-browser) — for each reference, in each available mode: screenshot +
evala computed-style extractor (bg/surface/text/muted/ border, button + link colours, h1 font/size/weight, body font). Handle the three site classes (seereferences/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.
- respects
-
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). -
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.
-
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. -
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.
-
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. -
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.