网页视频演示工坊
把文章或口播稿转成可点击、可录屏的电影感 16:9 网页视频。
文档要求多个用户确认节点，披露了本地文件产物、可选 TTS、API key 环境变量及外部 provider；但没有系统说明数据保留、隐私、依赖供应链、权限边界或回滚方案，且示例包含 rm -rf 删除操作而未配套恢复流程，因此扣分。
工作流、narrations 单一真相源、故障排查和降级路径较具体；但 README 与 SKILL.md 的阶段/检查点表述不完全一致，未提供所选路径的测试套件或 CI 执行证据，异常输入覆盖仍有限，因此静态评估不超过 10 分并扣分。
明确覆盖文章、口播稿、教程、产品演示和录屏场景，规定了输入、Vite/React/TS 输出及无素材时的 placeholder；但非适用边界、语义触发条件和不同运行环境说明不够完整，中文 TTS 主要依赖 MiniMax，另一内置 provider 也依赖 OpenAI，未说明中国大陆网络可达性，因此扣分。
信息架构、阶段性阅读指南、安装命令、参数约定、示例、故障排查、MIT 元数据和 manifest 版本均较完整；但未见清晰 changelog、维护责任人或更新责任路径，且 README 声称的部分参考资源未在所给材料中得到独立核实，因此扣分。
目标产物、章节节拍、音频文件布局和录屏流程描述具体，理论上可直接指导生成网页视频；但本次仅静态阅读，没有实际生成项目、代表性输出或可用性验证，无法确认动画、音频同步和最终录屏质量，因此按静态上限保守扣分。
存在 manifest、结构化规范、故障案例和历史章节示例，提供了一定可审计材料；但证据主要是作者文档和示例，未见覆盖关键路径的提交测试、CI 结果或第三方复核，无法静态独立复现，因此扣分。
- 外部 TTS provider 可能需要 API key 并涉及跨境网络与数据传输；在合成前确认服务可达性、费用、隐私政策和文本是否可发送。
- 不要未经用户确认执行示例中的 rm -rf；应先核对目标并提供可恢复方案。
- 文档要求执行 tsc 和浏览器检查，但本评估未执行，不能把这些要求视为已验证结果。
这个 Skill 能做什么，适合哪些场景？
web-video-presentation 面向希望把文章、课程、产品演示或演讲制作成视频的用户。它先生成口播稿和章节开发计划，再把口播节拍映射为逐步推进的全屏网页场景。最终产物是 Vite、React、TypeScript 项目，可选为每个节拍合成口播音频。它强调固定 1920×1080 舞台、内容驱动动画、逐步揭示和用户验收节点，并提供 23 个内置主题。
读取用户提供的文章或口播稿，生成 script.md 与 outline.md；按章节创建 Vite + React + TypeScript 演示项目；用 narrations.ts 保存每章的 step 数和口播文本；为每个 step 实现全屏 16:9 场景、CSS/SVG/Canvas/JavaScript 视觉演示和点击或键盘推进；扫描 narrations.ts 生成 audio-segments.json；可通过 MiniMax mmx-cli 或 OpenAI TTS 合成每步 MP3，并输出到 public/audio/；支持使用 ?auto=1 自动播放录屏。
- 内容创作者有一篇文章或视频脚本，想制作 B 站、YouTube、抖音或视频号的录屏视频。
- 讲师希望把课程材料转成按口播节拍逐步展开的动态演示。
- 产品团队需要把产品演示或技术 talk 做成具有电影感的网页视频。
- 设计或前端开发者希望制作固定 16:9、可交互、适合屏幕录制的动态 PPT 替代品。
这个 Skill 有哪些优点和局限？
- 流程清晰，包含内容编写、网页开发、音频合成和录屏阶段，并设置强制验收节点。
- 产出结构明确，包含 Vite + React + TypeScript 项目、章节代码、口播数据和可选音频。
- 支持 MiniMax 和 OpenAI TTS，并为其他 TTS 服务提供可扩展契约。
- 固定 1920×1080 舞台和隐藏式进度控件适合稳定录屏。
- 提供 23 个主题，同时要求针对内容重新设计视觉决策。
- 需要用户准备文章、口播稿或大纲；没有素材时不会替用户构思完整内容。
- 工作流需要多次人工确认，追求自动化一键生成的用户可能会觉得流程较长。
- 音频合成依赖外部 TTS provider；MiniMax 和 OpenAI 的使用条件、密钥或 CLI 配置需另行准备。
- 源文档没有展示视觉回归测试或完整的自动化测试套件。
如何安装这个 Skill？
使用仓库提供的 skills CLI 安装命令：npx skills add ConardLi/garden-skills -s web-video-presentation。也可以先 git clone https://github.com/ConardLi/garden-skills.git，再将 skills/web-video-presentation 复制到项目的 .claude/skills/、.agents/skills/ 或 .codex/skills/ 目录。该仓库以 MIT 授权发布。
如何使用这个 Skill？
准备一篇文章或口播稿，并向支持 Agent Skills 的编码代理提出类似“把这篇文章做成可录屏的 16:9 网页视频演示”的请求。技能会先生成 script.md 和 outline.md，然后要求一次确认稿子、计划、主题、素材和开发模式；第 1 章完成后必须验收。网页完成后，再选择是否合成音频；若合成，可运行 npm run extract-narrations，然后运行 npm run synthesize-audio，或设置 PRESENTATION_TTS=openai 使用 OpenAI TTS。没有文章、脚本或大纲时，技能会要求先提供素材。