web-video-presentation

1# Web Video Presentation
2 
3把一篇文章或口播稿，一步步做成可录屏的"伪装成视频的网页"，可选合成
4口播音频。产出物 = Vite + React + TS 项目 + 按章节切分的音频。
5 
6## 适用场景
7 
8- "我有口播稿 / 一篇文章，帮我做成视频" —— 口播驱动的内容
9- 想做 "动态 PPT"
10- 16:9 横屏录屏，大字、留白、每屏都要有动效
11- 教学 / 产品演示 / keynote 想要电影感
12- B 站 / YouTube /抖音视频内容
13 
14本 Skill **以方法论 + 协作流程为核心**。脚手架模板提供 token 和原语，
15但每个美学决策（配色、字型、动效气质）都应该针对你的主题重新设计 ——
16不要照搬。
17 
18---
19 
20## 工作流总览
21 
22```
23Phase 1   内容编写
24   1.1  识别用户输入
25   1.2  一次产出 script.md + outline.md
26        （口播稿 + 开发计划）
27   ▼
28[Checkpoint Plan]      ← 必须停。一次对齐 5 件事：
29                         稿子 / outline / 主题 / 素材 / 开发模式
30   ▼
31Phase 2   网页开发
32   2.1  脚手架（按选定主题）
33   2.2  第 1 章 = 主线程 + 完整版本（强制 anchor）
34        ▼
35        [硬节点] 用户验收第 1 章 ← 不可跳过
36        ▼
37   2.3  第 2~N 章（按选定模式：A 逐章 / B 顺序 / C 并行）
38   ▼
39[Checkpoint Audio]     ← 必须停。是否合成音频
40   ▼
41Phase 3   音频合成（可选）
42   ▼
43Phase 4   录屏 + 后期
44```
45 
46工作目录约定（agent 在用户当前目录下创建 / 编辑）：
47 
48```
49my-video/
50├── article.md          # 用户给原文时必有 —— 不删！开发阶段画面信息源
51├── script.md           # 必有：保持原文语言的平台化口播稿（决定节拍）
52├── outline.md          # 必有：开发计划（章节切分 + 每步内容 + 信息池）
53└── presentation/       # 脚手架产出的 Vite + React + TS 项目
54    ├── src/chapters/<NN>-<id>/
55    │   ├── <Chapter>.tsx     # 视觉实现
56    │   ├── <Chapter>.css
57    │   └── narrations.ts     # ★ step 数 + 口播文本的唯一真相源
58    ├── scripts/
59    │   ├── extract-narrations.ts   # 扫所有 narrations.ts → audio-segments.json
60    │   ├── synthesize-audio.sh     # provider-agnostic runner（循环 segments）
61    │   └── tts-providers/          # 每 provider 一个 .sh（内置 2 个）
62…