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

• 默认路径：现有 Markdown 用 scripts/render_plan_to_html.py，README 用 scripts/build_from_readme.py，生成无需前端构建的单文件 HTML。
• 只有明确需要复杂组件或应用状态时，再选 assets/templates/starter 里的 React/Vite 模板。
• 没有内容时用 scripts/generate_showcase_plan.py 先生成草稿，再渲染。
• 单文件生成器当前内置 neo-luxury、cyber-pulse、minimal-editorial 和 prism-command 四套主题。

Step 3: Build Scene System

• 页面抽象为 Scene 组件，统一支持进入/退出动效。
• 必须支持三种切换方式：点击按钮、键盘方向键、目录跳转。
• 提供进度指示器与“当前屏序号/总屏数”。

Step 4: Implement Theme Switching

• 单文件 HTML 生成器通过 --theme 切换内置主题；修改主题需要重新生成 HTML。
• React/Vite Starter 使用 CSS 变量和 data-theme，可实现运行时主题切换。
• scripts/add_theme.py 只生成主题 token CSS，并不会自动注册到 Python HTML 生成器。

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：路演、课程、产品发布三类示例请求。