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 "echo '# UI Designer - Design System Extraction'" Sleep 500ms Enter
Sleep 2s

Type "echo 'User: Extract design system from my SaaS dashboard screenshots'" Sleep 500ms Enter
Sleep 2s

Type "echo ''" Sleep 100ms Enter
Type "echo '✓ ui-designer activates automatically'" Sleep 500ms Enter
Sleep 2s

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

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

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

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

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

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