您可以免费在本地完成。Claude 自行编写动画 HTML，免费的 Edge TTS 处理语音，ffmpeg 渲染 MP4。无需订阅，无水印，不需要 API 密钥。下面的视频就是用它生成的 ↓ https://t.co/TOGuo0dJXJ https://t.co/Ir6ZtZEJDU

Mng-dev-ai/explainer-video

来源：https://github.com/Mng-dev-ai/explainer-video

explainer-video

一种 AI 技能，能将一个主题转化为完整的动画讲解视频。本地运行，永久免费，兼容任何 AI 编程代理。
许可证：MIT

成本

与……配合使用

您给代理一个主题，它会编写自定义动画页面、生成免费语音旁白、在无头浏览器中录制页面，并使用 ffmpeg 合并音频。最终得到一个完整的 MP4 文件。
无需 API 密钥，无需订阅，无水印。

演示

本仓库中的 demo.mp4 就是使用 Claude Code 通过该技能生成的。

# 完整的构建命令：
node lib/pipeline.js --config config.json --out demo.mp4

为什么存在这个项目

其他 AI 讲解视频工具每月收费 30–80，并且限制您使用一种视觉风格。本技能则反其道而行之：

• 代理编写视觉内容 —— 每个主题都生成全新的 HTML/CSS/GSAP 设计，无模板
• 语音旁白免费 —— 使用 Microsoft Edge 的神经 TTS，无需账户
• 全部本地运行 —— 无需上传，无需 SaaS，无水印
• 单一工件 —— 将文件夹放入任意代理的技能目录即可使用

工作原理

1. 代理撰写旁白脚本（分片）
2. 代理编写自定义 HTML 动画页面（GSAP + SVG）
3. 管道为每段调用 Microsoft Edge TTS → MP3
4. 管道测量时长并将其暴露给页面
5. 无头 Chromium 录制动画
6. ffmpeg 合入旁白 → 最终 MP4

每个场景的动画时间由 window.__SEGMENT_DURATIONS 控制，因此视觉与旁白保持同步——无需手动调整。

安装

本技能遵循开放的 SKILL.md 规范（https://code.claude.com/docs/en/skills），适用于任何支持该规范的代理。

Claude Code

git clone https://github.com/Mng-dev-ai/explainer-video.git \
  ~/.claude/skills/explainer-video

重启 Claude Code 会话。然后说“制作一个关于 X 的讲解视频”，技能便会触发。

Codex CLI

git clone https://github.com/Mng-dev-ai/explainer-video.git \
  ~/.codex/skills/explainer-video

重启 Codex。使用 $explainer-video 显式调用，或描述任务由 Codex 自动识别。

Cursor

Cursor 将技能限定在每个项目中。请克隆到您需要的项目里：

git clone https://github.com/Mng-dev-ai/explainer-video.git \
  .cursor/skills/explainer-video

然后重新加载窗口（Cmd/Ctrl+Shift+P → “Developer: Reload Window”）。

通用安装（一个位置，所有代理）

如果您使用多个代理，请安装到 ~/.agents/skills/，然后从各代理目录创建软链接：

git clone https://github.com/Mng-dev-ai/explainer-video.git \
  ~/.agents/skills/explainer-video
ln -s ../../.agents/skills/explainer-video ~/.claude/skills/explainer-video
ln -s ../../.agents/skills/explainer-video ~/.codex/skills/explainer-video

首次运行设置

克隆后安装 Node 依赖：

cd ~/.agents/skills/explainer-video/lib   # 或您克隆的位置
npm install --silent

还需要将 ffmpeg（https://ffmpeg.org/download.html）添加到 PATH（macOS 用 brew install ffmpeg，Debian/Ubuntu 用 apt install ffmpeg，Windows 用 choco install ffmpeg）。

使用方法

通过代理使用（推荐）

直接告诉它：

“帮我制作一个关于复利如何运作的讲解视频。”

代理会编写脚本、构建 HTML 并运行管道——您会得到一个 MP4 路径。

直接从命令行使用

node lib/pipeline.js \
  --html /path/to/page.html \
  --script /path/to/script.txt \
  --voice brian \
  --out /path/to/output.mp4

或者使用单一配置文件 JSON（推荐——支持按片段音频）：

{
  "title": "量子计算",
  "voice": "brian",
  "html": "page.html",
  "scriptSegments": [
    "如果一台计算机可以同时处于两个位置呢？",
    "这不是科幻小说，而是量子计算。",
    "..."
  ]
}

node lib/pipeline.js --config config.json --out video.mp4

语音

友好的名称通过 Edge TTS 映射到 Azure 神经语音：

您也可以直接传递任何 Azure 神经语音 ID（例如 en-AU-NatashaNeural、es-ES-ElviraNeural）。

HTML 契约

代理编写动画页面时，必须：

1. 设置视口为 1280×720（html, body { width: 1280px; height: 720px }）
2. 从 jsdelivr 加载 GSAP
3. 读取 window.__AUDIO_DURATION（秒，浮点数）——管道注入的总旁白长度
4. 可选读取 window.__SEGMENT_DURATIONS——每个片段时长的数组（使用 scriptSegments 时），用于帧完美同步
5. 在动画结束时设置 window.__done = true

这就是整个契约。其余一切——设计、调色板、动画语言——都根据主题全新创造。参见 examples/quantum.html 作为参考页面。

缓存

旁白 MP3 按 sha256(voice + text) 缓存在 ~/.cache/explainer-video/voice/.mp3。再次使用相同脚本会复用缓存的音频。您可以自由迭代视觉内容，无需再次调用 TTS 端点。

使用已有的音频文件（完全绕过 TTS）：

node lib/pipeline.js --html page.html --script script.txt --audio my-voice.mp3 --out video.mp4

项目结构

explainer-video/
├── SKILL.md          ← 技能规范（代理读取）
├── README.md         ← 您正在阅读
├── lib/
│   ├── pipeline.js   ← 编排 CLI
│   ├── edge-tts.js   ← 免费 TTS 封装
│   ├── render.js     ← 无头 Chromium 录制
│   └── package.json
└── examples/
    └── quantum.html  ← 参考 HTML 页面

贡献

欢迎提交 Issue 和 PR。特别感兴趣的方向：

• 更多语音提供者适配器（Piper、Coqui XTTS、OpenAI TTS 等）
• 垂直（9:16）渲染（适用于 TikTok/Shorts/Reels）
• 背景音乐支持
• 更多不同主题类别的参考示例

许可证

MIT——参见 LICENSE。

Sudip (YC P26) (@sudiprokaya):
今天，我们推出讲解视频版的 ChatGPT。

只需一个提示，Simi 就能生成白板风格的讲解视频，在几秒内真正教会您一些东西。

在我们最快的层级上，您的视频在 20 秒内即可观看。