Whiteboard Teacher Video — Development skill for Claude Code

whiteboard-teacher-video

**图文讲解视频 skill** —— 把讲解稿变成「手绘会动的画面」讲解视频。

图形由代码逐笔绘出、文字逐字写出、讲到哪画到哪。五套风格可选，本地 Chrome 渲染，**零生图 API 成本**，任何改动秒级重渲。

B站效果：https://www.bilibili.com/video/BV1yYJ46PE5R/?vd_source=86926e418c83af75f6850b5546388a79

安装方法，直接给链接给你的ai就可以。 本项目不需要依赖其他api；edge-tts 已改走新域名（见 `references/tts-backends.md`），也可以装 https://apiz.ai 的 apiz-cli 作为备用语音后端。

---

它和普通 AI 生视频工具的区别

	AI 生视频工具	本 skill
画面怎么来	模型生成像素	代码逐笔绘制（rough.js）
改一句话	整段重生成	只重渲受影响片段（几秒）
画面质量	随机，有抖动	确定性，同一时刻渲染两次像素一致
API 成本	按次付费	零（只付 TTS 的钱）
能嵌真实数据	难	任意数字/图表/代码/真实网页截图

**核心原理**：整片是「时间的纯函数」——`renderAt(t)` 渲染第 t 秒的画面，与之前播放过什么无关。由此才能分段缓存、并行渲染、任意跳转、确定性校验。

---

依赖到底要下载什么

**是的，要下载。** 但只有**两步**，都很轻。

第一步：取得引擎（约 16MB）

引擎**不在 skill 包里** —— 它有 16MB / 38 万个文件（主要是展开的 three.js），打进来会让分发变得很重。

setup 自动从 GitHub 拉取，用 **sparse checkout 只取引擎那一个目录**（不会下载上游几百 MB 的 electron 和桌面端）：

git clone --filter=blob:none --no-checkout --depth 1 https://github.com/sitor-ai/frametell
git -C frametell sparse-checkout init --cone
git -C frametell sparse-checkout set packages/engine
git -C frametell checkout

没装 git 也可以：手动下载仓库，把 `packages/engine` 整个目录复制到 skill 根目录下的 `engine/`。

第二步：第三方依赖（约 130MB）

`npm install` 自动获取，共 10 个包：

包	体积	作用	必须？
ffmpeg-static	80 MB	音视频编码（自带 ffmpeg 二进制）	✅
lxgw-wenkai-webfont	30 MB	中文字体（缺了中文变豆腐块）	✅
playwright-core	13 MB	驱动本机 Chrome/Edge 截图	✅
katex	4.4 MB	公式排版（P.tex）	可选
@iconify-json/logos + simple-icons	~4 MB	品牌 logo（P.logo）	可选
roughjs	275 KB	手绘线条引擎	✅
@fontsource/*（3 个字体）	少量	英文手写体 / 圆体 / 等宽体	可选

**两点说明**：

• playwright-core 不含浏览器，它只驱动你本机已装的 Chrome/Edge —— 不会额外下载几百 MB 的 Chromium
• 依赖一律真实安装在 /node_modules，不做任何复用链接。复用必须建 junction，而那会形成目录环（详见 references/troubleshooting.md）——130MB 换来的代价是几十万文件和删不掉的目录，不值得

对照：上游 frametell 原版要 1.3GB

	上游 monorepo	本 skill