khan-explainer Skill 技能

khan-explainer - 让 Claude Code 生成可汗学院风格讲解视频的 Skill

技能简介

khan-explainer 是一款 Claude Code Skill，专门用来自动生成可汗学院（Khan Academy）风格的黑板讲解视频。手写字体在黑板上边画边讲，配合真人语音讲解，让 AI Agent 把任意抽象概念、UI 操作流程、或视频片段变成可发布的科普短片。整套流程 0 API Key、0 账号、0 编辑器门槛。

核心能力

• 三种创作模式：黑板讲解课（边画边讲抽象概念）、UI 教程（在你的产品截图上叠加箭头/编号/步骤圈）、真人音频剪辑（YouTube / 播客音轨作为旁白，输出竖屏短片）。
• 音画自动对齐：用一段"语音先讲 + 估时 + 卡画"机制，保证笔迹始终跟得上词，不需手打时间戳。
• 黑白板一键切换：同一段脚本可在黑板和白色板书之间切换，宽屏或竖屏都能出，支持单帧中段翻转。
• 本地零成本：用 macOS 内置 say 语音 + HTML canvas + Playwright + FFmpeg，无需任何 API 密钥。
• 多语言支持：阿拉伯语、乌尔都语、希伯来语等从右向左书写；印地语、泰语、中文、日语、韩语、俄语等从左向右，每种语言都使用专门的字形。
• 可选人类语音：可注入 ElevenLabs API Key 走真人录音并缓存复用；或装 Kokoro 跑免费本地人类语音。

安装配置

1. 环境要求：macOS；Node.js ≥ 20；FFmpeg（brew install ffmpeg）。
2. 克隆 Skill：git clone https://github.com/haiderfarooq3/khan-explainer ~/.claude/skills/khan-explainer。
3. 安装依赖：cd ~/.claude/skills/khan-explainer/scripts && npm install。
4. 安装 Playwright 内核：npx playwright install chromium。
5. 可选 ElevenLabs 人类语音：把 ELEVENLABS_API_KEY 写入环境变量。

使用步骤

1. 在 Claude Code 中告知要生成的视频主题，例如"讲清楚什么是 AI agent"。
2. Claude 读取 SKILL.md，按场景 API 写出 beat 列表（每段对应一句话 + 一段绘画）。
3. 运行渲染脚本生成 MP4（默认 macOS say 语音；启用 ElevenLabs 则走真人录音）。
4. 输出黑板视频 / UI 教程 / 真人音轨短片到 out/ 目录。
5. 如果不满意，告诉 Claude 哪个 beat 节奏不对或哪段画要重画，自动重渲染。

适用场景

• 科普短视频批量生产：把技术概念、产品特性、流程讲解转成可分享的短视频。
• 产品 UI 教程录制：在截图上画箭头 + 写步骤号，5 分钟生成一段标准操作教学。
• 播客 / 长视频二次创作：把 30 分钟播客切出 60 秒精华短片并配上主持人本人的音轨。
• 教学平台内容生成：可汗学院风格课程自动出片，老师备课 + 学生预习效率双双提升。
• 社媒运营：把产品发布、新功能上线、案例讲解做成视觉化短视频直接发到 X、YouTube Shorts、小红书。
• 零门槛视频教学：让不会剪辑的人也能用 AI 写出"画 + 说"分段脚本并直接得到成片。

适用人群

• 内容创作者 / 教育博主：希望做出 Khan Academy 风格科普视频，但没有动画师、录音棚或剪辑经验。
• 产品经理 / 客户成功：需要录制产品 UI 教程、案例讲解视频而不想每次都开 Camtasia。
• 播客主 / 长视频博主：希望把 30 分钟节目剪成 60 秒竖屏短片并保留原声。
• 教育工作者：备课、出题、讲新课都需要把抽象概念变成可视化素材。
• 任何不想为一句"画个图、讲句话"打开 Premiere 的懒人创作者。

工作原理

khan-explainer 的核心数据结构是 scene：scene({ beats: [{ say, draw }] })。每个 beat 是"一句话 + 一段画"的组合，渲染器先调用 say 朗读 beat、量出这段话的实际时长，再动态适配画的进度——这就是"笔迹跟着词走"的由来。绘图走 HTML canvas + Playwright 截图，FFmpeg 把帧连成 MP4，真人语音走 ElevenLabs 或 Kokoro，缓存复用同一段文本。所有 stage 都跑在你自己的 Mac 上，零账号、零费用。

官方链接

• 项目仓库：https://github.com/haiderfarooq3/khan-explainer
• 作者博客（创作流程）：https://haiderfarooq.dev/blog/claude-code-skills-for-content
• 参考风格来源：可汗学院（Khan Academy）；本项目与可汗学院无官方关联