← ClaudeAtlas

shipkit-design-systemlisted

Scaffold a tiered design system — principles, tokens, aesthetic direction from project context. Triggers: 'design system', 'design tokens', 'brand guidelines', 'visual direction', 'design principles'.
stefan-stepzero/shipkit · ★ 1 · Web & Frontend · score 78
Install: claude install-skill stefan-stepzero/shipkit
# shipkit-design-system — Tiered Design System Synthesizes design direction from upstream project context and scaffolds a design system that grows with the product — from tokens + principles on day 1 to a governed component library at maturity. Combines two approaches: - **Creative direction** (inspired by Anthropic's frontend-design plugin) — opinionated aesthetic guidance, but derived from YOUR project context instead of generic defaults - **Structural scaffolding** (from the maturity-tiered model) — principles, tokens, maturity tracking that persist across sessions --- ## When to Invoke **User triggers**: - "Set up design system", "Design tokens", "Brand guidelines" - "Visual direction", "Design principles", "How should this look?" **Workflow position**: - After `/shipkit-engineering-definition` (needs stack direction, component structure) - Before `/shipkit-product-goals` and `/shipkit-engineering-goals` (goals can reference design criteria) - Also useful standalone at any point for projects with UI --- ## Prerequisites **Required** (fail gracefully if missing): - `.shipkit/why.json` — vision, tone, brand identity (drives principles and direction) **Recommended** (enrich the output): - `.shipkit/product-discovery.json` — personas, accessibility needs - `.shipkit/product-definition.json` — features, UX patterns - `.shipkit/engineering-definition.json` — stack direction, component structure - `.shipkit/goals/strategic.json` — project stage **Optional**: - `.shipk