design-systems
Installation
SKILL.md
A design system turns a one-off design DNA (DESIGN.md) into a machine that generates consistent, maintainable UI at scale. This skill starts where the core design skill ends — a locked DESIGN.md with semantic tokens from palette.mjs — and builds the component architecture, token tier hierarchy, and governance model on top of it.
Prerequisite: a locked DESIGN.md at the project root. If none exists, run the core design mode first to establish the visual DNA and generate base tokens via palette.mjs. This skill extends that foundation; it does not re-derive or replace it.
When this applies
- Promoting a one-off design (DESIGN.md) into a token system — defining the alias and component tiers on top of the global tokens that
palette.mjsgenerates. - Building or auditing a component library — applying Brad Frost's atomic design (atoms → molecules → organisms → templates → pages) to decompose UI into reusable, composable units.
- Designing for consistency at scale — when more than one team, product, or brand shares a visual language and needs governance to stay coherent.
- Defining a semantic token tier — mapping global design decisions (color, spacing, type) to alias tokens (color-text-primary, space-md) to component tokens (button-background, card-padding).
- Choosing a design-to-code pipeline — token delivery, code generation, component versioning, and what tooling earns the integration cost.
- Establishing governance — contribution models, ownership, versioning, deprecation, and how the system evolves without breaking consumers.
- Multi-brand theming — swapping the global token tier to produce distinct brand expressions from a shared component architecture.
Not for: authoring a project's visual DNA or generating the palette from scratch (use core design + palette.mjs); raw palette hex generation (use core color).