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.
Install with
Claude CodeCodexCursorGitHub CopilotGemini CLI
Supported by the Atlas install prompt. Skill-specific requirements vary.
Skill stats
Skills1CategoryGrowth & marketingStars0
About this skill
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.
Quick start
Copy the install prompt. Use the green button above this README.
Send it to your agent. Paste it into your coding agent’s chat and send.
Review the setup. Your agent checks the skill’s instructions, requirements, and installation scope.
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.
About this listing
Category
Growth & marketing
Reported license
MIT
Listing language (estimated)
English
Review status
Not individually reviewed
Agent compatibility
Atlas installation supports Claude Code, Codex, and Cursor. Skill-specific dependencies and features are checked during setup.
Claude Code
Codex
Cursor
GitHub Copilot
Gemini CLI