YouTube AI Motion Graphics

# YouTube AI Motion Graphics

提供 74 个 HTML 动画讲解画板，用于 YouTube 视频，另附全部提示词和三个 Claude 技能，可把画板同步到你的声音并导出 MP4。

由 sirioberati 在 GitHub 上制作。这些说明是 Mindket 根据其 README 写的，项目自己的文件和许可证在它的仓库里。

## 简介

它是什么：YouTube AI Motion Graphics 是一套工具包，含 74 块用于讲解视频的动画画板，每块都是 1920 × 1080 的 HTML 页面。它还包含作者视频里的全部提示词和三个 Claude 技能。它们合在一起，能带你从自己配音的转写文字，一路做到画板随你的话语同步运动的 MP4。

适合谁：它适合用图表、示意图和简短动画场景讲解观点的 YouTube 博主和课程制作者。画板要由你自己来设计风格，因为它们自带的是一套朴素的起步主题。

```table
行业 | 谁在用 | 怎么用 | 例子
视频创作 | YouTube 博主和讲解频道 | 把动画画板同步到配音上，导出 MP4 | 一块跟着旁白走的 Timeline 画板
教育 | 老师和课程制作者 | 用动画画板展示对比、矩阵和图表 | 一块 2×2 矩阵或 Venn 画板
商业内容 | 讲解产品或观点的团队 | 用对比卡片和节点图梳理选项 | 一块 Versus cards 画板
```

如果你想要现成的样式，可以跳过它，因为这些画板本来就是要你重新设计风格的。

用在哪里：

- Chrome：打开任何一块画板的 HTML 文件，或者从一个索引页浏览全部画板
- Claude Code：三个技能装进它的技能文件夹
- Claude Design：用来根据参考素材找出你的风格
- Whisper：把你的视频逐词转写
- 配合 Chrome 的 FFmpeg：逐帧导出最终的 MP4

```table
用例 | 适合谁 | 你会得到什么
讲解图示 | 视频制作者 | 比如 Venn、Timeline、2×2 matrix 和 Node graph 这样的画板
图表和数据 | 视频制作者 | 比如 Slope chart、Heatmap 和 Chart focus 这样的画板
动效 | 设计师 | 比如 Scribble fill、Odometer 和 Magnifier lens 这样的画板
配音同步的成片 | 创作者 | 一个逐帧导出的 MP4，每块画板都和你的声音对上了时间
```

如何设置：开始之前，你需要先备好几样东西。

- Claude Code，因为技能要装进它的技能文件夹
- Chrome，用来打开画板和导出视频
- git，用来克隆仓库
- 安装检查报告缺少的其他工具

1. 从 GitHub 克隆仓库，进入它的文件夹。
2. 运行 board-sync 技能的安装脚本。
3. 把技能复制到你的 Claude 技能文件夹。
4. 运行安装检查。它会指出缺少的工具，并告诉你怎么获取。

```bash
cd YouTube-AI-Motion-Graphics
bash skills/board-sync/setup.sh
cp -R skills/* ~/.claude/skills/
bash tools/setup-check.sh
```

如何使用：在 Chrome 里打开任意一块画板就能看到它，也可以从索引页浏览全部画板。然后按九步工作流走，每一步都有一条提示词，从参考素材文件夹开始，到导出视频结束。

- 找灵感：把你欣赏的动画和界面收集到一个参考素材文件夹里
- 在 Claude Design 里，用你收集的素材确定自己的视觉风格
- 用实际的数字描述画布：尺寸、边距、留给摄像头的空白区域和结束画面
- 开始一份检查文件，修正画板，让 AI 自己检查它们
- 做模板，再把它们变成带有画板目录的技能
- 用 Whisper 转写视频，把每块画板对上你的语速，再导出 MP4

```table
工具 | 作用
explainer-board-brief | 决定一块画板上放什么
explainer-board-system | 定义画板的外观和动效，并保存一份用日常用语标注的画板目录
board-sync | 把画板同步到你的声音，并渲染视频
setup-check.sh | 报告缺少的工具，并说明怎么安装
checks.md | 你的 DO 和 DON'T 清单，由你的修正积累而成，用来逐帧复查
```

示例：在 Chrome 里打开 Timeline 画板，把它的颜色和字体改成你频道的风格。布局和动效保持原样。然后运行转写、同步和导出的提示词，得到一个画板与你的旁白对上时间的 MP4。

新手与专家：如果你是新手，就在 Chrome 里打开画板索引，随便点开几块画板看看。然后运行安装检查，看看你的电脑还缺什么。

如果你熟悉这个领域，它的构造很直接。画板是用 GSAP 做动画的 HTML 页面。Whisper 给出逐词的时间点，导出时驱动 Chrome 和 FFmpeg，所以成片是逐帧精确的。你的检查文件把每次修正变成一条规则，画板目录则用你自己的说法给每种布局打标签。

```flow
收集参考素材
在 Claude Design 里选一种风格
设定画布、检查文件和模板
把它们变成技能
转写并同步到你的声音
一帧一帧地导出 MP4
```

注意事项：

- 74 块画板用的是一套叫 Clean minimal 的朴素起步主题，所以请重新设计风格
- 一份 AGENTS.md 文件告诉编码智能体什么放在哪里、适用哪些规则
- README 里有一个许可证部分，复用画板之前请先看一下

## GitHub 上的数据（2026年11月7日）

- 星标：159
- 复刻：35
- 关注：1
- 未关闭的议题和拉取请求：0
- 语言：HTML
- 许可证：MIT
- 话题：ai-agents, ai-video, animation, claude, claude-code, claude-design, claude-skills, content-creation, data-visualization, explainer-boards, explainer-video, ffmpeg

## 链接

- 代码：https://github.com/sirioberati/YouTube-AI-Motion-Graphics
- 网站：https://tein.ai/
- 发布版本：https://github.com/sirioberati/YouTube-AI-Motion-Graphics/releases
- 议题：https://github.com/sirioberati/YouTube-AI-Motion-Graphics/issues
- 星标历史：https://www.star-history.com/#sirioberati/YouTube-AI-Motion-Graphics&Date

## 获取代码

```
git clone https://github.com/sirioberati/YouTube-AI-Motion-Graphics.git
```

然后按它的 README 完成设置。这个工具包里没有会自己运行的东西。

README.md  6 KB