# Design System

> Assemble tokens, components, and rules into a design system the whole team can build on.

- Skill: `tinyhumansai/design-system` (Agent Skill)
- Install (CLI): `npx skillmds@latest add tinyhumansai/design-system`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tinyhumansai/design-system/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: tinyhumansai (https://skillmd.com/u/tinyhumansai)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/tinyhumansai/design-system

---


# Design System

Turn a set of designs into a reusable system — tokens, components, and the rules
that keep them consistent.

## When to use

- A brand's screens exist but nothing is systematized.
- Multiple surfaces are drifting out of visual sync.

## Steps

1. **Extract** the primitives: color, type, spacing, and radius tokens.
2. **Build** the core components from those tokens, with states.
3. **Document** each component's usage and the rules around it.
4. **Define** the patterns that compose components into layouts.
5. **Package** it so designers and engineers pull from one source.

## Output

A design system: tokens, documented components with states, and usage rules,
following the [[Design principles]]. Ready for the team to build on.