contextgo Design System Distillation
Use this skill to convert scattered design intent into a reusable, agent-readable design system.
Read ../../references/deliverables.md before drafting the output.
Use when
- The user needs a project-level
DESIGN.md. - The team has references but no coherent design system.
- Several pages need a shared visual language before implementation.
Do not use when
- The project already has a stable design system and only needs adaptation.
- The task is a single-page critique with no need for system-level output.
Distillation failures to avoid
- writing mood-board prose without real rules
- defining colors but not their roles
- naming typography without saying how it creates hierarchy
- giving component advice without stating spacing and layout discipline
- forgetting explicit do-not-do rules
Workflow
1. Lock the design intent
Collect:
- product goal
- audience
- trust and brand requirements
- chosen visual archetype
2. Define the system skeleton
Cover at minimum:
- atmosphere
- palette
- typography
- components
- layout
- motion
3. Make component behavior explicit
Name how:
- buttons should feel
- cards should behave
- navigation should read
- inputs, tables, or panels should rank visually
4. Add guardrails
Spell out:
- what should happen repeatedly
- what must not happen
5. Keep it implementable
The output should help a frontend implementer make consistent decisions without inventing a new style on every screen.
Output format
Return a DESIGN.md-style artifact with:
- visual theme and atmosphere
- color palette and roles
- typography rules
- component styling rules
- layout principles
- depth and elevation
- do and don't rules
- responsive behavior
- implementation notes for agents
Use together with
design-style-archetype-selectiondesign-system-adaptationdesign-handoff-brief