tomevault-io LivePPT
Overview
把线性 PPT 请求升级为“点击切换的动态网页演示”。 默认产出中文内容，支持多主题切换、电影感转场、场景化叙事和可部署 Demo。
Trigger Scenarios
- 用户说“不要传统 PPT，要网页演示、可点击翻页、酷炫高级感”。
- 用户要“同一份内容切换不同视觉风格（商务/科技/极简）”。
- 用户要“产品发布页、路演页、课程讲义页、案例展示页”且强调互动感。
- 用户要“开源模板 + 演示站 + 可复用主题系统”。
Input Contract
先收集以下最小输入：
- 主题和目标受众（例如“AI 产品发布给技术决策者”）。
- 场景数量（建议 6-12 屏）。
- 视觉偏好（如
neo-luxury、cyber-pulse、minimal-editorial）。 - 必须展示的信息（产品亮点、数据、CTA、联系入口）。
Workflow
Step 1: Define Narrative Spine
- 输出一句话叙事：
谁在什么场景下遇到什么问题，我们如何带来可量化结果。 - 固定页面结构：封面 -> 痛点 -> 方案 -> 证据 -> 架构 -> 价格/计划 -> CTA。
- 每屏只承载一个核心信息点，减少信息噪音。
Step 2: Scaffold Project
- 默认技术栈：
React + Vite + Framer Motion + CSS Variables。 - 使用
scripts/generate_showcase_plan.py先产出阶段执行清单。 - 根据风格需求建立主题令牌：
color,typography,radius,shadow,motion。
Step 3: Build Scene System
- 页面抽象为
Scene组件，统一支持进入/退出动效。 - 必须支持三种切换方式：点击按钮、键盘方向键、目录跳转。
- 提供进度指示器与“当前屏序号/总屏数”。
Step 4: Implement Theme Switching
- 主题使用 CSS 变量和
data-theme驱动。 - 风格切换不改文案和结构，只替换视觉令牌和动效参数。
- 使用
scripts/add_theme.py生成新主题变量文件。
Step 5: Add Premium Motion
- 必选动画：页面过渡、元素分层入场、hover 反馈。
- 可选动画：视差、光晕、3D rotate、颗粒背景。
- 控制节奏：默认 350-700ms，避免过快或眩晕。
Step 6: QA and Publish
- 校验移动端和桌面端适配。
- Lighthouse 目标：Performance >= 85, Accessibility >= 90。
- 产出 Demo 链接和 README 截图/GIF 后再发布。
Quality Bar
- 视觉一致性：同一主题内颜色、字体、阴影语义稳定。
- 交互一致性：所有 Scene 切换逻辑一致，避免跳屏。
- 可访问性：文本对比度达标，提供
prefers-reduced-motion降级。 - 可复用性：新主题可以在 10 分钟内接入现有场景。
AI Delegation
- AI 主导：结构草案、文案压缩、组件骨架、主题变量生成。
- 人类主导：品牌调性、最终审美判断、公开发布文案。
- AI 辅助：性能优化建议、动效微调建议、KPI 复盘建议。
Standard Deliverables
showcase-outline.md：逐屏大纲和核心信息。theme-spec.md：主题令牌定义和视觉说明。demo-url：可在线访问的演示页面。release-note.md：版本更新与用户价值说明。
Resources (optional)
scripts/
scripts/generate_showcase_plan.py：生成阶段化构建与发布执行清单。scripts/add_theme.py：根据参数生成主题 CSS 变量文件。scripts/generate_release_note.py：生成版本发布说明模板。scripts/validate_skill.py：执行必需文件检查和脚本 smoke test。
references/
references/design-system-playbook.md：设计与动效规范。references/style-presets.md：预设主题定义与适配建议。
assets/
assets/templates/scene-map.md：场景结构模板。assets/templates/theme-spec.md：主题定义模板。
examples/
examples/use-cases.md：路演、课程、产品发布三类示例请求。
Source: AIPMAndy/LivePPT — distributed by TomeVault.