1实现原理 · 为什么它能做到
产出物是「可录屏的伪装成网页的视频」：Vite + React + TS 项目 + 按章节切分的音频，HTML 验证通过后默认直接合成口播音频。
skills/web-video-presentation/SKILL.md
把一篇文章或口播稿，一步步做成可录屏的"伪装成网页的视频"，HTML 验证完成后默认直接合成口播音频。产出物 = Vite + React + TS 项目 + 按章节切分的音频。
注：这里在做什么：把「做视频」变成「做网页 + 音频 + 录屏」，因此可以用前端工具链（章节组件、token 主题）而不需要视频编辑器。
narrations.ts 是 step 数与音频合成的唯一真相源：章节代码里出现的最大 step + 1 必须等于 narrations.length。
skills/web-video-presentation/SKILL.md
> **关键**：`narrations.ts` 是 step 数和音频合成的**唯一真相源**。
注：这里在做什么：让 script / outline / 章节代码 / chapters.ts / 音频文件这五处永不漂移——旧版「网页 step 与音频文件数对不上」的问题靠这条单一真相源根治。
硬性自检协议覆盖三个产出（script.md / outline.md / 单章实现），且要求先修 fail 项再汇报。
skills/web-video-presentation/SKILL.md
下面三个产出，每一个**完成后必须走自检 → 修复 → 再汇报 / 推进**：
注：这里在做什么：把自检做成流程闸门，并按能力降级（Agent Teams → subAgent → 自检），铁律是「直接拿原始结论汇报但不修复 = 违规」。
outline 刻意不写动画：写死动画会让 chapter agent 退化为翻译机，留白才有真正的视频感。
skills/web-video-presentation/SKILL.md
> **outline 不写动画的理由**：写死动画 = chapter agent 退化为翻译机；
注：这里在做什么：把「什么时候该具体、什么时候该留白」写成设计决策——outline 只管节奏/内容/信息池（章节切分、step 数、估时、每步屏幕内容、章节级信息池），动画留给章节实现按 CHAPTER-CRAFT.md 的内容驱动决策树现场定。
Checkpoint Plan 是硬节点：稿子、outline、素材、开发模式四件事一次对齐；主题默认 d2-editorial-grid。
skills/web-video-presentation/SKILL.md
## Checkpoint Plan —— 4 件事一次对齐（**硬节点**）
注：这里在做什么：把人类介入压到少数几个高价值节点（另两个是第 1 章验收与中途切换模式），避免逐章反复问答。
第 1 章强制主线程 + 用户验收：它是 CHAPTER-CRAFT 指引在当前主题/题材下的第一次落地，且是后续章节的代码风格锚点。
skills/web-video-presentation/SKILL.md
**第 1 章无论哪种模式都必须主线程做完 + 用户验收**（强制 anchor）。
注：这里在做什么：承认「没有骨架版概念」——第一章就要做出用户能直接验收的完整样板，因为指引盲区/主题 token 不足只会在第一章暴露，越早改成本越低。
Phase 3 默认不停下来问是否合成音频：HTML 全部完成且验证通过后直接进入音频合成，只在四种例外（用户说不要/鉴权缺失/要换本地 TTS）才收口。
skills/web-video-presentation/SKILL.md
**默认不要停下来问是否合成音频**。Phase 2 全部 HTML 已完成且验证通过后， agent 直接进入本阶段。
注：这里在做什么：把「是否配音」从默认提问改成默认执行——因为音频是 Auto 模式一镜到底录屏的前提（master 音轨 + timeline 驱动 HTML）。
默认 TTS 配置写死为火山/豆包：engine=volcengine、seed-tts-2.0、voice_type zh_male_liufei_uranus_bigtts、speed 1.2、speech_rate 20。
skills/web-video-presentation/SKILL.md
engine=volcengine resource_id=seed-tts-2.0 voice_type=zh_male_liufei_uranus_bigtts voice_name=刘飞 2.0 speed=1.2 speech_rate=20
注：这里在做什么：给出可直接落地的中文男声默认（刘飞 2.0），并把增量、跳过已存在的合成脚本与响度标准化串成流水线。
Phase 4 录屏默认走 CDP 自动录制，并明确拒绝用 screencli 跑本流程（会启动 AI agent、消耗 tokens）。
skills/web-video-presentation/SKILL.md
默认不要用 screencli 做本流程：它会启动 AI agent、消耗 tokens
注：这里在做什么：给出更可控的替代路径（CDP/Playwright 自动录制 / 手工录 ?auto=1&record=1 / 跳过音频手动点击），并配字幕烧录与 2x 母版两条后期分支。
视觉层面有十条一句话原则作为索引（16:9 固定舞台、全局 step 计数器、每步独占整屏、口播节拍=step、内容驱动动画、逐步揭示、双源原则等）。
skills/web-video-presentation/SKILL.md
| 10 | 双源原则 | script 定节拍，**article 定画面密度**（落到信息池） |
注：这里在做什么：把长文档压成一页索引（详细展开在 CHAPTER-CRAFT.md Part 0），并规定 16:9 是「内容 1920×1080 + transform scale，没有响应式」。
2核心能力
01文章/口播稿/漫画 panels → 点击驱动 16:9 网页演示（Vite + React + TS 项目 + 按 step 切分的音频）
02一键脚手架（含主题选择与内置 01-example demo 的删除指引）与真实依赖安装
03章节开发主入口（CHAPTER-CRAFT.md）：十条原则 / 开工 5 问 / 关系→动作决策树 / 视觉工具箱 / 反 AI 味反模式 / 代码硬规则 / 完工自检
04Comic Panels Mode：manifest.json + panel_*.png → 16:9 motion comic（每 panel 拆 1-N step、镜头推进、局部放大、对白字幕与转场）
05自动音频合成流水线：extract-narrations → synthesize-audio（默认火山/豆包，增量跳过已存在）→ normalize-audio → build-master-audio（master + timeline）
06CDP 自动录屏（puppeteer-core 驱动本机 Chrome，Page.startScreencast 抓帧后 ffmpeg 合成）与字幕烧录
0710 个内置主题（d2-editorial-grid 默认、bauhaus-bold、blueprint、chalk-garden、midnight-press、monochrome-print、newsroom、paper-press、sunset-zine、terminal-green、warm-keynote）与自定义主题流程
08富视觉工具箱参考（从 frontend-slides / slide-deck-generator / marp-slides 抽出的 React 组件、SVG 图表、dashboard primitives 与依赖边界）
3外部依赖
| 类型 | 依赖 |
|---|---|
| cli | npm / Vite 脚手架与依赖安装（npm create vite、npm install、npm install --save-dev tsx puppeteer-core、npx tsc --noEmit） |
| api | 火山/豆包语音合成（默认引擎；鉴权仅从环境变量读，curl 调 unidirectional 接口） |
| api | MiniMax CLI（可选 TTS 路径，走 mmx auth login --api-key；key 在平台获取） |
| cli | MeloTTS 本地路径（可选：调 ../../.venv-tts/bin/melotts 生成 wav 再用 ffmpeg 转 mp3） |
| package | puppeteer-core + 本机 Chrome（CDP 录屏与字幕烧录；headless 启动参数不含任何反自动化绕过） |
| network | Google Fonts（主题 CSS 引用，浏览器端/录屏期拉取）与本地 dev server 端口 |
4风险提醒 风险提醒：橙色 · 评估后使用
风险提醒：橙色 · 评估后使用
- 默认无二次确认地调用付费 TTS，且会读本机凭证文件 — synthesize-audio.sh 在 env 缺失时 source $HOME/.config/doubao-tts/env；文档又明确「默认不要停下来问是否合成音频」。使用前应确认额度与是否允许把稿件逐段发给火山/豆包（见 second_pass 的 discrepancy 条）。
- 分章节并行开发造成风格分散 — 模式 C 下每个 subagent 看不到彼此产出，文档承认风格会有差异（靠主题 token 兜底）；若项目要求高度统一，应改用模式 A/B 或人工统一关键视觉。
- 稿件与原文内容直接进入生成上下文与 subagent prompt — article.md / outline 信息池 / 第 1 章代码都会拼进 subagent prompt；若素材含指令式文本，理论上可影响章节实现（本 skill 未提供消毒/隔离条款）。
- 主题与字体资产带第三方依赖 — themes 与 fonts.css 通过 @import 引 Google Fonts（浏览器/录屏期拉取，执行期不外发）；商用发布需自行核对字体许可。
- 录屏依赖本机 Chrome 与 ffmpeg，平台假设偏 macOS — record-cdp-screencast.mjs 默认 chromePath 指向 /Applications/Google Chrome.app/Contents/MacOS/Google Chrome，其他平台需用 --chrome 覆盖；Windows/Linux 使用者需自行改路径。
- 流程文档很长，长会话易漂移 — 文档自身承认「长会话里 agent 容易遗忘原则」，要求在每次实现单章前重读 CHAPTER-CRAFT.md；缺失这一步会退化成模板堆砌。
风险提醒：橙色，评估后使用。触发橙档的两点都在 skill 自身目录内可定位：① **读凭据文件**——templates/scripts/synthesize-audio.sh 在环境变量缺失时会 source 本机凭证文件 $HOME/.config/doubao-tts/env，并把 DOUBAO_TTS_API_KEY / VOLCENGINE_TTS_API_KEY 作为鉴权头 curl 到 openspeech.bytedance.com（火山/豆包 TTS）；可选路径还包含 MiniMax CLI 的 mmx auth login --api-key。② **用户素材/文案外送 + 消耗账号额度**——按 step 切分的口播文本会逐段发给外部 TTS 合成；脚手架步骤会从 npm registry 安装依赖（vite/react/tsx/puppeteer-core）。均属「为自身声明用途读凭据 + 把用户内容送外部服务/后端」的橙档特征，且都给了降级/替代（MeloTTS 本地路径、可显式跳过合成只出 HTML）。未发现安全降级（无 TLS 关闭、无 --no-verify）、反自动化绕过（CDP 启动参数仅 --autoplay-policy/--hide-scrollbars/--window-size，无 AutomationControlled、无 remote-allow-origins=*、无真实键击替身）、沙箱关闭或任意代码执行面。
5第二遍独立确认
- [ok] TTS 凭证读取与外发是否真实（橙档关键证据） — synthesize-audio.sh 原文：'# 2. DOUBAO_TTS_API_KEY or VOLCENGINE_TTS_API_KEY for default Volcengine/Doubao TTS'；'DEFAULT_VOLCENGINE_ENV_FILE="$HOME/.config/doubao-tts/env"'；缺失时 source 该文件；取到后作为鉴权头 curl 到 https://openspeech.bytedance.com/api/v3/tts/unidirectional。调用点与降级说明（AUDIO.md 的「缺少 API Key 时不要假装合成成功」）一致。
- [ok] 是否存在反自动化绕过或安全降级（红档排除） — record-cdp-screencast.mjs 的 puppeteer.launch 只有 headless: true 与 args=[--autoplay-policy=no-user-gesture-required, --hide-scrollbars, --window-size=…]，无 AutomationControlled、无 remote-allow-origins=*、无 webdriver 伪装；全目录 grep --no-verify / --sandbox / dangerouslyDisableSandbox 零命中。CDP 只连本机回环页面（默认 http://127.0.0.1:5175/?auto=1&record=1&autostart=1）。
- [discrepancy] 「默认不停下问」会不会导致未经同意的付费合成 — ［判定：设计取舍，非缺陷］SKILL.md 明写 '**默认不要停下来问是否合成音频**。Phase 2 全部 HTML 已完成且验证通过后，agent 直接进入本阶段。'，并列出四种收口例外（用户说不要/鉴权缺失/换本地 TTS）。即：默认路径会消耗 TTS 账号额度且不再二次确认——属有意的流程设计（音频是一镜到底前提），但使用者应在开始前知情并配好额度与凭证。
- [ok] 脚手架是否真的安装 puppeteer-core（录屏能力来源） — scripts/scaffold.sh 内含 `npm install >/dev/null 2>&1` 与 `npm install --save-dev tsx puppeteer-core >/dev/null 2>&1`，随后跑 `npx tsc --noEmit` 自检；即录屏/字幕脚本的依赖由脚手架负责安装，而非假定全局存在。
- [unlocatable] 并行章节开发（模式 C）带来的风格与质量分散 — 文档声称主题 token 兜底、章节 CSS 物理隔离、风格不一致等于「人手写视频的呼吸感」；但 pin 仓库内没有多章并行产出的成品或验收记录可用于验证该主张，本次只读侦查不运行生成，故仅作「文档声明」记录，不当作已核事实。
- [ok] 「?auto=1 一镜到底」的机制描述是否与代码一致 — AUDIO.md 与 build-master-audio.mjs 的描述一致：分段合成后拼成 master.mp3 + timeline.json，运行时 Auto 模式优先播 master 音轨并按 timeline 驱动 HTML 节点；RECORDING.md 的 CDP 路径以 --audio=<normalized master> 复用同一条母版，避免分段交接造成尾字截断。
6结论
适合：适合已有文章/口播稿（或已切好的漫画 panels）要做「看起来像视频」的 16:9 讲解演示的人：动态 PPT、技术教程/talk demo 录屏、motion comic HTML 版。要求机器上有 Node/npm、本机 Chrome 与 ffmpeg，且接受默认使用火山/豆包 TTS（或改用本地 MeloTTS）。给内容生产者一条从写稿到成片的完整流水线。
不适合：不适合：① 想用视频编辑器做真实剪辑而非网页演示的项目（本 skill 产出的是可录屏的网页 + 音频）；② 完全不能把稿件交给外部 TTS 且不愿配本地 TTS 的环境；③ 要求各章视觉高度统一但不接受人工统一（并行模式会带来风格差异）；④ 期望零文档投入、直接出片的用户——Checkpoint、第 1 章验收与每章自检都是流程前置；⑤ 非 macOS 且不愿改 Chrome 路径的环境（需先覆盖 --chrome）。
安装 agent 直装可复制
① 本站镜像 更新 2026-09-28
方式 A · 人下载镜像包下载 web-video-presentation.tar.gz
sha256:
方式 B · JSON 格式安装指南，复制给 agent6c6b9cedf0142114…agent 读 JSON 指南后会自动从本站下载安装，无需更多说明。
② 上游 GitHub · 原始来源
来源信息 GitHub 原始
作者 / 仓库hideaway007 / hideaway007/codex-video-skills
原始 GitHubhideaway007/codex-video-skills ↗
Stars0
最近推送2026-05-30
本 skill commit
f2c70b812b许可MIT（仓库根 LICENSE 为 MIT License, Copyright (c) 2026 D2；README 亦标 License: MIT；GitHub API license.spdx_id = MIT）
本站信息
收录日期2026-09-06
分类内容创作
侦查报告AI 侦查 · 2 遍 · 2026-09-06
本站镜像与 GitHub 原始是不同来源：本站锁定 commit 快照经 /r2 分发；GitHub 为实时上游，内容可能已更新。