Output demos/ui-designer/extract-design-system.gif

Set FontSize 18
Set Width 1400
Set Height 800
Set Theme "Catppuccin Mocha"
Set Padding 30
Set TypingSpeed 50ms

Type "# UI Designer - Design System Extraction" Sleep 1s Enter
Sleep 2s

Type "Extract design system from my SaaS dashboard screenshots" Sleep 1s
Enter
Sleep 2s

Type "# ✓ ui-designer activates automatically" Sleep 500ms
Enter
Sleep 2s

Type "# Step 1: Gather Inputs" Sleep 500ms
Enter
Sleep 1s
Type "  → Reference images: reference-images/saas-dashboard/" Sleep 500ms
Enter
Sleep 1s
Type "  → Project idea: ideas/project-management-app.md" Sleep 500ms
Enter
Sleep 2s

Type "# Step 2: Extract Design System (Task tool)" Sleep 500ms
Enter
Sleep 1s
Type "  → Analyzing 5 screenshots..." Sleep 500ms
Enter
Sleep 1s
Type "  → Color palette: #2563EB, #DC2626, #059669" Sleep 500ms
Enter
Sleep 1s
Type "  → Typography: Inter, 14-40px" Sleep 500ms
Enter
Sleep 1s
Type "  → Spacing: 4-48dp grid system" Sleep 500ms
Enter
Sleep 1s
Type "  ✓ documents/designs/saas-dashboard_design_system.md" Sleep 500ms
Enter
Sleep 2s

Type "# Step 3: Generate MVP PRD (Task tool)" Sleep 500ms
Enter
Sleep 1s
Type "  → Interactive refinement with user..." Sleep 500ms
Enter
Sleep 1s
Type "  → Features: kanban, timeline, team chat" Sleep 500ms
Enter
Sleep 1s
Type "  ✓ PRD completed (saved to variable)" Sleep 500ms
Enter
Sleep 2s

Type "# Step 4: Compose Implementation Prompt" Sleep 500ms
Enter
Sleep 1s
Type "  → Using vibe-design-template.md" Sleep 500ms
Enter
Sleep 1s
Type "  → Combining design system + PRD" Sleep 500ms
Enter
Sleep 1s
Type "  ✓ documents/ux-design/app_design_prompt_20251026.md" Sleep 500ms
Enter
Sleep 2s

Type "# Step 5: Verify React Environment" Sleep 500ms
Enter
Sleep 1s
Type "  → Checking for package.json with react..." Sleep 500ms
Enter
Sleep 1s
Type "  ✓ React project found" Sleep 500ms
Enter
Sleep 2s

Type "# Step 6: Implement UI" Sleep 500ms
Enter
Sleep 1s
Type "  → Creating 3 mobile variations" Sleep 500ms
Enter
Sleep 1s
Type "  → Creating 2 web variations" Sleep 500ms
Enter
Sleep 1s
Type "  ✓ Components: solution-a/pages/Dashboard.jsx" Sleep 500ms
Enter
Sleep 1s
Type "  ✓ Components: solution-b/pages/Dashboard.jsx" Sleep 500ms
Enter
Sleep 1s
Type "  ✓ Showcase page with all variations" Sleep 500ms
Enter
Sleep 3s