| name | design-system |
| description | Code-first design exploration workflow. Product Planning → Section Design → Brand (optional) → Explore (HTML variants) → Refine → Decide (extract tokens) → Ship (Next.js components). Covers section screen design, brand discovery, variant generation, iterative refinement, token management, and production conversion. |
Design System
This skill provides the complete lifecycle for code-first design exploration. Variants are standalone HTML files — not mockups or prototypes — that open directly in any browser. Tokens extracted from chosen variants persist across sessions, creating a consistent design language. An optional brand discovery phase builds a coherent visual identity before exploration begins.
Lifecycle
PRODUCT PLANNING (/ds:product, /ds:data-shape, /ds:shell, /ds:section)
→ SECTION DESIGN (per section) (/ds:section design, /ds:section pick)
→ BRAND (optional) (/ds:brand)
→ EXPLORE (/ds:design)
→ refine loop (/ds:design-refine)
→ DECIDE (/ds:design-pick)
→ SHIP (/ds:design-ship)
Pre. PRODUCT PLANNING (recommended)
Define what you're building before exploring how it looks. See skills/product-planning/SKILL.md for the full product planning lifecycle.
Commands: /ds:product → /ds:data-shape → /ds:shell → /ds:section
Outputs:
.design/product/product-overview.md — Product name, description, problems, features.design/product/product-roadmap.md — Ordered section list.design/product/data-shape/data-shape.md — Data entities and relationships.design/product/shell/spec.md — App shell, navigation, layout.design/product/sections/{id}/spec.md — Feature section specs
0a. SECTION DESIGN (per section)
