AI技能，将一个主题变成全动画、旁白解说视频。本地运行。永久免费。可与任何AI编码代理配合使用。

---

你给你的经纪人一个主题。它会写一个自定义动画页面，生成免费配音，在无头浏览器中录制页面，并将音频与ffmpeg合并。你得到一个完成的MP4。

没有API密钥。没有订阅。没有水印。

演示

该仓库中的demo.mp4是由技能本身通过Claude代码生成的。

为什么会有这样的存在

其他所有AI解说视频工具每月收费30到80美元，并且把你锁定在一种视觉风格。而这项技能则采取了相反的做法：

• 代理编写视觉图 — 每个主题都需全新 HTML/CSS/GSAP 设计，无需模板
• 配音免费 — 使用Microsoft Edge的神经TTS，无需账户
• 所有程序都运行本地 — 无上传，无SaaS，无水印
• 一个工件 — 将文件夹放入任意代理的技能目录，它就能正常工作

它是如何运作的

每个场景的动画时间点由window.__SEGMENT_DURATIONS驱动，因此视觉效果与旁白保持同步——没有手动同步。

安装

此技能紧随开放技能之后。

explainer-video

AI skill that turns a topic into a fully animated, narrated explainer video. Runs locally. Free forever. Works with any AI coding agent.

---

You give your agent a topic. It writes a custom animation page, generates a free voiceover, records the page in a headless browser, and merges the audio in with ffmpeg. You get a finished MP4.

No API keys. No subscriptions. No watermarks.

Demo

The demo.mp4 in this repo was generated by the skill itself, using Claude Code.

# the entire build command:
node lib/pipeline.js --config config.json --out demo.mp4

Why this exists

Every other AI explainer video tool wants $30–$80/month and locks you into one visual style. This skill takes the opposite approach:

• The agent writes the visuals — fresh HTML/CSS/GSAP design for every topic, no templates
• The voiceover is free — uses Microsoft Edge’s neural TTS, no account needed
• Everything runs locally — no upload, no SaaS, no watermark
• One artifact — drop the folder into any agent’s skills directory and it just works

How it works

1. Agent writes the narration script (split into segments)
2. Agent writes a custom HTML animation page (GSAP + SVG)
3. Pipeline calls Microsoft Edge TTS per segment → MP3
4. Pipeline measures durations and exposes them to the page
5. Headless Chromium records the animation
6. ffmpeg muxes in the voiceover → final MP4

Each scene’s animation timing is driven by window.__SEGMENT_DURATIONS so the visuals stay locked to the narration — no manual sync.

Install

This skill follows the open SKILL.md spec and works with any agent that supports it.

Claude Code

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

Restart your Claude Code session. Then say “make an explainer video about X” and the skill will trigger.

Codex CLI

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

Restart Codex. Invoke explicitly with $explainer-video or describe the task and Codex will pick it.

Cursor

Cursor scopes skills per-project. Clone into the project where you want it:

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

Then reload the window (Cmd/Ctrl+Shift+P → “Developer: Reload Window”).

Universal install (one location, all agents)

If you use multiple agents, install once in ~/.agents/skills/ and symlink from each agent dir:

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