4ce0bb2ab4
**Critical fix for Image #1 issue:** **Root cause:** VHS interprets typed text as actual bash commands in a real shell. Text like "Create:", "Conclusion:", "12" caused "command not found" errors. **Solution:** Wrap all narrative text in `echo '...'` commands for proper bash execution. **Changes:** - ppt-creator demo: All stages now use `echo` for display - ui-designer demo: All steps now use `echo` for display - File sizes increased (proper animation rendering): - ppt-creator: 496KB → 2.2MB - ui-designer: 262KB → 2.6MB **Verification:** ✓ No "command not found" errors in VHS output ✓ Both GIFs render as valid 1400x800 GIF89a format ✓ All stage names and deliverables remain accurate per SKILL.md **Technical details:** - Before: `Type "# Stage 2: Storyline"` → bash error - After: `Type "echo '# Stage 2: Storyline'"` → clean output This fix ensures demos display workflow narratives without bash execution errors.
83 lines
2.8 KiB
VHS
83 lines
2.8 KiB
VHS
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
|