design-system
Installation
SKILL.md
Design System Generator
Create complete visual design systems from scratch through guided discovery, documentation, and AI-generated asset production.
Workflow Overview
Execute these phases in strict order. Output Location must be asked first. Phase 0 is optional (skip if user has no references). Never skip Phases 1-5. Each phase builds on the previous.
| Phase | Name | Action | Output |
|---|---|---|---|
| — | Output Location | Ask where to save the design system | output_location = "local" or "user" |
| 0 | Reference Input | Collect + analyze user reference images | Visual analysis + smart defaults for discovery |
| 1 | Discovery | Interactive questionnaire | User preferences across 10 dimensions |
| 2 | Synthesis | Analyze + name the style | Style name, core principles, full spec |
| 3 | Documentation | Generate style guide | {style-name}-design-system.md |
| 4 | Asset Generation | Generate images via creator-stack:nanobanana | 8 PNG style board elements |
| 5 | Assembly | Organize + present | Complete design system directory |