web-video-presentationlisted

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