acd4bb2dfc
**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
104 lines
2.3 KiB
VHS
104 lines
2.3 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 "# 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
|