design-system
Installation
SKILL.md
Design System: DESIGN.md for AI Agents
Core Principle: DESIGN.md Describes WHAT It Looks Like, Not HOW to Build It
DESIGN.md is the visual equivalent of kits. It defines the project's visual language — colors, typography, spacing, components, responsive behavior — in a format AI agents can read and apply consistently. It is a parallel constraint layer that all Hunt phases consult.
| Document | Defines | Audience |
|---|---|---|
| CLAUDE.md | How to build the project | Coding agents |
| Kits | What must be true (behavior) | All agents |
| DESIGN.md | What it looks like (visual) | UI-building agents |
| Plans | How to build it (tasks) | Builder agents |
Why a Dedicated Design System Document?
Without DESIGN.md, visual decisions scatter across kits, plans, and code:
- Colors get hardcoded differently per component
- Typography choices vary between agents and sessions
- Spacing becomes inconsistent across the UI
Related skills