LivePPT

---
name: LivePPT
description: Build click-through cinematic web showcase pages with dynamic transitions and runtime style switching. Use when users ask for PPT alternatives, interactive launch pages, or high-end storytelling websites with multiple visual styles.
---

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