devgo.cn如果你做过内容生产，大概遇到过这种场景：想做一个讲解视频，用 AI 视频生成工具，要么按秒计费，要么生成的画面在六十秒后就开始变形；用 Manim 这类动画库，效果很美但要专门学一套 API；手动剪辑，一条三分钟的视频能磨掉一个下午。这篇文章的作者给出了一个完全不同的思路——他做了一个叫 khan-explainer 的开源技能（skill），让 Claude Code 根据一句自然语言提示，自动生成可汗学院风格的板书讲解视频：一支粉笔在黑板上边画边讲，全程跑在本地笔记本上，不花一分钱 API 费用。
先说清楚一个前提：这里说的 skill 是 Claude Code 的一种扩展机制，本质是一个 markdown 文件，里面写了触发条件和指令。作者在 LinkedIn 上直言大部分 skill 都是鸡肋，因为多数 skill 只是把一段提示词存起来，而 Claude 本身已经足够聪明，你直接说一句话它也能干同样的活，没必要为此搞一个仓库。但 khan-explainer 是例外，因为它打包了一个 Claude 无法靠即兴发挥一次搞定的东西——一个渲染器，以及一套从三十次失败输出里总结出来的规则。这种 skill 的本质是"带说明书的工具"，模型读的正是那本说明书。
整个视频生成管线里没有任何视频模型，四个平淡无奇的组件拼出了全部能力：HTML canvas 负责画手写笔迹，每个字母和图形都是一条路径，逐帧逐渐显现，配合手写字体和渐进式描边，看起来就像真人在写；Playwright（一个常用于浏览器自动化测试的工具）用无头 Chromium 打开页面逐帧截图，它不仅是测试工具，也是个完美的帧抓取器；macOS 自带的 say 命令把每句台词念成音频文件，声音机械但免费，而且能精确报告每句话的时长；最后 ffmpeg 把帧和音频合成 MP4。整套物料清单就这些，而市面上的商业工具要么按月收费，要么按秒计费，要么需要专门学习。
这个方案最巧妙的地方在于一个核心设计：让声音驱动时钟。作者观察到一个普遍失败模式——很多人写个脚本，猜一句台词大概三秒，就按三秒做动画，结果语音早到或晚到，到第四句时粉笔已经在画别的东西了。khan-explainer 从不猜。一个场景（scene）由一系列节拍（beat）组成，每个节拍是一句台词加上说这句台词时发生的绘制动作。渲染器先单独念出每个节拍，测量音频实际时长，然后给这个节拍的绘制分配恰好那么长的时间。没人需要手动输入时间戳，粉笔永远不可能跑在话语前面。代码里用 p 表示从 0 到 1 的进度，seg(p, 0, .4) 表示把节拍的前 40% 时间花在画椭圆上，剩下的时间写标签。这就是全部的计时模型，简单到 Claude 能轻松理解，所以它可以从一行提示词直接写出整个场景文件。
作者强调，渲染器只占这个 skill 价值的三分之一，剩下的是 skill 文件里的规则，而这些规则几乎可以迁移到任何内容生产类 skill 上。第一条规则是让 skill 自己给自己的输出打分。每次渲染都会打印一张联系表（contact sheet），把每个节拍结束时的黑板状态拼成一张图，同时输出警告信息，提示文字是否超出黑板边界或标签是否重叠。Claude 被要求先读联系表、修复所有警告，然后才把结果给你看。一次渲染只要几秒，所以它能迭代三四次，你只看到最后那次。无论你的 skill 产出什么，都要给模型一个廉价的方式看到结果，否则你就是那个质检员。
第二条规则是用免费语音做布局，最后再切换成付费语音。say 免费且即时，所有排版工作都用它完成。等黑板布局对了，再在场景里加上 ElevenLabs 的语音 ID，整段脚本一次性读完，听起来像同一个人在说话，然后按 API 返回的字符时间戳切回各个节拍。语音按脚本哈希缓存，所以改一个绘制动作不花钱，改一个字才需要重新生成语音。把付费步骤安排在最后执行一次。
第三条规则是把内容单元设计得足够小，方便局部重渲染。有老师在评论区问：如果解题步骤里某一步错了，能只改那一步吗？答案是能，编辑一个节拍重新渲染，几秒后新文件就出来了。这之所以可能，是因为一个节拍只是几行 JavaScript，而不是编辑器里的一条时间线。设计内容单元时，要让人能指着其中一个说"这个错了"。
第四条规则是测量，绝不靠肉眼猜。做 UI 叠加教程时，skill 用 Playwright 截图，并保存每个按钮和输入框的 getBoundingClientRect()（元素在页面上的精确位置矩形），从不直接读图片上的坐标。而且每个状态都要重新测量，因为元素在聚焦、输入或菜单弹出时会移动。早期让模型从截图猜坐标的教程，全都圈错了地方。
第五条规则是脚本只写一遍，保持主题无关，所有变体都从它裁剪。这篇文章里的视频有四个版本：深色、浅色、横屏、竖屏，它们共用一条语音，因为脚本里从不出现"黑板"或"左边"这类词。主题是一个标志位，宽高比是一个尺寸，语音缓存对两者都不关心。
这个思路能直接用到哪些场景？如果你在做任何需要"生成内容并反复修正"的工具，比如自动生成幻灯片、广告图、图表，核心启发是：不要试图让 AI 一步到位，而是给它一个能快速看到结果并自我纠错的闭环。最让我意外的是，整个方案里最值钱的部分不是某个炫酷的模型，而是"让模型能廉价地检查自己的输出"这个工程决策。坑也明显：免费语音的机械感是硬伤，如果对音色有要求，付费语音的缓存策略要提前设计好；另外这套管线依赖 Playwright 和本地环境，部署到服务器上需要额外处理无头浏览器的依赖。但作为个人创作者或小团队，用这个思路做教学视频、产品教程，成本几乎可以忽略不计。项目在 GitHub 上开源，克隆下来装好依赖，然后直接对 Claude Code 说"做一个 30 秒的 DNS 工作原理可汗风格讲解"就够了。
内容与图片版权归原作者所有 · 原文: https://dev.to/haiderfarooq3/claude-code-skills-for-content-how-i-make-khan-academy-style-videos-for-free-52e2