Design Setup Skill
Interactive design system setup with theme selection and AI recommendations.
Triggers
-
"/designsetup [@context-files...]"
-
"setup design system"
-
"create design system from extracted sites"
-
"สร้าง design system"
Prerequisites
Must have extracted at least 1 site first:
/extract https://airbnb.com
Quick Usage
With context files
/designsetup @prd.md @project.md
Without context (interactive mode)
/designsetup
Output Files
File Purpose Audience
design-system/data.yaml
Design tokens (~300 lines) Agents
design-system/README.md
Human-readable guide (~100 lines) Humans
design-system/patterns/*.md
Code patterns Agents
3-Round Interactive Process
Round 1: Style Selection ├── Present extracted styles with Match Scores ├── User selects (or "Mix/Custom" for adjustments) └── AI calculates fit based on brand personality
Round 2: Animation Selection ├── Show all available animations from references ├── User multi-selects desired patterns └── Include scroll animations, hover effects
Round 3: Theme & Decorative Direction ├── AI recommends 3-4 themes based on project ├── Each theme has USE and AVOID elements └── User selects or creates custom theme
Confirmation → Generate Files
What Gets Generated
data.yaml (For Agents)
-
Style classification + feel
-
Colors (primary, secondary, semantic)
-
Typography (fonts, weights, sizes)
-
Spacing (grid base, scale)
-
Animations (durations, easing, patterns)
-
Theme direction (use/avoid elements)
-
Psychology (emotions, target audience)
README.md (For Humans)
-
Overview and characteristics
-
Color palette guide
-
Typography guide
-
Spacing system
-
Theme direction
-
Critical rules
patterns/*.md (For Agents)
-
buttons.md
-
Button variants and sizes
-
cards.md
-
Card variants
-
forms.md
-
Form elements
-
scroll-animations.md
-
Scroll patterns
-
decorations.md
-
Decorative elements
Detailed Documentation
Reference Use When
references/interactive-workflow.md Understanding the 3-round loop
references/generation-steps.md File generation process
references/data-yaml-schema.md data.yaml structure
references/error-handling.md Handling failures
Next Steps After Setup
Plan pages (reads data.yaml)
/pageplan @prd.md
Setup development workflow
/csetup {change-id}
Start development (agents read data.yaml)
/cdev {change-id}