fix: Correct ppt-creator demo errors and add ui-designer demo

**ppt-creator demo fixes:**
- Fixed incorrect stage grouping: "Stage 1-7" → accurate stages (2, 3, 4, 6, 7, 8)
- Corrected file descriptions:
  - refs.md: "speaker notes" → "citations & sources" ✓
  - notes.md: Now correctly shown as speaker notes ✓
- Added missing deliverable: notes.md (was omitted before)
- Removed incorrect sub-stage numbering (8b-8c, 8d, 8e)
- Added /output/ path prefix for all deliverables
- Increased height: 700 → 800 for better visibility
- File size: 295KB → 496KB (more comprehensive animation)

**Detailed error analysis:**
1. Line 21: "Stage 1-7: Content Preparation" was factually wrong
   - Stage 1: Structure Goals
   - Stage 2: Storyline (Pyramid Principle)
   - Stage 3: Outline & Slide Titles
   - Stage 4: Evidence & Charts
   - Stage 5: Layout & Accessibility (skipped in demo for brevity)
   - Stage 6: Speaker Notes
   - Stage 7: Self-Check & Scoring
   - Fixed by showing individual stages with accurate descriptions

2. Line 27: refs.md described as "speaker notes" - WRONG
   - Actual: refs.md = citations and data sources (SKILL.md line 37)
   - Actual: notes.md = speaker notes
   - Fixed by showing both files with correct descriptions

3. Missing /output/ path: All deliverables should show /output/ prefix
   - Fixed: All files now show as /output/slides.md, etc.

**ui-designer demo created:**
- 6-step workflow visualization
- Shows complete design system extraction process
- Accurate file paths and Task tool usage
- Demonstrates all key deliverables:
  - documents/designs/saas-dashboard_design_system.md
  - documents/ux-design/app_design_prompt_{timestamp}.md
  - React component implementations
- File size: 262KB

**Verification:**
✓ All stage numbers match SKILL.md workflow (lines 60-78)
✓ All deliverable filenames match SKILL.md line 33-38
✓ All ui-designer steps match SKILL.md lines 22-100
✓ Both demos tested and rendering correctly

demos/ppt-creator/create-presentation.tape

@@ -2,7 +2,7 @@ Output demos/ppt-creator/create-presentation.gif
 
 Set FontSize 18
 Set Width 1400
-Set Height 700
+Set Height 800
 Set Theme "Catppuccin Mocha"
 Set Padding 30
 Set TypingSpeed 50ms
@@ -18,42 +18,59 @@ Type "# ✓ ppt-creator activates automatically" Sleep 500ms
 Enter
 Sleep 2s
 
-Type "# Stage 1-7: Content Preparation" Sleep 500ms
+Type "# Stage 2: Storyline (Pyramid Principle)" Sleep 500ms
 Enter
 Sleep 1s
-Type "  → slides.md (Marp format)" Sleep 500ms
+Type "  → Conclusion: Renewable energy adoption is accelerating" Sleep 500ms
 Enter
 Sleep 1s
-Type "  → refs.md (speaker notes)" Sleep 500ms
+
+Type "# Stage 3: Outline & Slide Titles (Assertions)" Sleep 500ms
+Enter
+Sleep 1s
+Type "  → 12 slides with assertion-style headings" Sleep 500ms
 Enter
 Sleep 2s
 
-Type "# Stage 8b-8c: Data & Charts" Sleep 500ms
+Type "# Stage 4: Evidence & Charts" Sleep 500ms
 Enter
 Sleep 1s
-Type "  → synthetic_data.csv" Sleep 500ms
+Type "  → Selecting charts via VIS-GUIDE.md" Sleep 500ms
 Enter
 Sleep 1s
-Type "  → chart_energy_adoption.png" Sleep 500ms
+Type "  → scripts/chartkit.py generates PNG charts" Sleep 500ms
 Enter
 Sleep 2s
 
-Type "# Stage 8d: Dual-Path PPTX Creation" Sleep 500ms
+Type "# Stage 6: Speaker Notes (45-60s per slide)" Sleep 500ms
 Enter
 Sleep 1s
-Type "  → Path A: Marp CLI" Sleep 500ms
+Type "  → Opening → Assertion → Evidence → Transition" Sleep 500ms
-Enter
-Sleep 1s
-Type "  → Path B: document-skills:pptx" Sleep 500ms
 Enter
 Sleep 2s
 
-Type "# Stage 8e: Chart Insertion" Sleep 500ms
+Type "# Stage 7: Self-Check & Scoring (RUBRIC.md)" Sleep 500ms
 Enter
 Sleep 1s
-Type "  ✓ presentation_marp_with_charts.pptx" Sleep 500ms
+Type "  → Score: 82/100 (target: ≥75)" Sleep 500ms
+Enter
+Sleep 2s
+
+Type "# Stage 8: Package Deliverables (/output/)" Sleep 500ms
 Enter
 Sleep 1s
-Type "  ✓ presentation_pptx_with_charts.pptx" Sleep 500ms
+Type "  ✓ slides.md (Marp/Reveal.js format)" Sleep 500ms
+Enter
+Sleep 1s
+Type "  ✓ notes.md (speaker notes)" Sleep 500ms
+Enter
+Sleep 1s
+Type "  ✓ refs.md (citations & sources)" Sleep 500ms
+Enter
+Sleep 1s
+Type "  ✓ assets/*.png (generated charts)" Sleep 500ms
+Enter
+Sleep 1s
+Type "  ✓ presentation.pptx (if python-pptx available)" Sleep 500ms
 Enter
 Sleep 3s

demos/ui-designer/extract-design-system.tape

@@ -0,0 +1,103 @@
+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