html-explainer：一句话让 Agent 把主题做成讲解视频

知识类短视频，稿子定稿才是开工：配音要录，字幕要一句句对，画面要调，封面要做，一条一分钟的视频能耗掉大半天。html-explainer 是一个给 Claude Code、Codex 这类编程智能体用的开源 Skill，GitHubDaily 推荐过——说一句「把为什么天空是蓝色的做成 1 分钟的讲解视频」，它会带着 Agent 走完调研、解说词、配音、字幕、画面、渲染、封面全流程，产出真 MP4。最有意思的是它渲染画面的方式：不录屏，而是把 GSAP 时间轴逐帧 seek 到位再截图，音画同步不靠运气。

作者用这条流水线跑过港股早盘解读、量化简史两条成片，连下面的封面都是流水线自己排的版：

核心功能

• 逐帧 seek 渲染：渲染器把 GSAP 时间轴 pause 到目标时刻、同步所有 CSS 动画、等两个动画帧再截图。第 1204 帧和下一次渲染的第 1204 帧逐像素一致，单场景可以独立重渲，QC 能定点抽查。代价是每个动画必须可 seek，CSS transition 入场这类墙钟动画会被 lint_frames.py 直接拒绝。
• B() 节拍锚定：每块画面动画用 B(‘字幕文本’) 锚在「这几个字开始被念出」的时刻上。改一句解说词，重跑三条命令，全片自动重排对时。查不到节拍就让构建直接失败——B('x') || 3.2 这种兜底写法被明令禁止。
• 字级时间戳字幕：时序来自 TTS 引擎的字级时间戳，不按字数插值——中文里两个同字数的短语，时长能差 3 倍。
• 双配音引擎：默认 edge-tts，免费、免密钥、开箱可用；想要更自然的音色换火山引擎语音合成 2.0（豆包音色，按字符计费），两者产出的 manifest 结构一致，--provider 一个参数切换。火山 API Key 只存 tts.env，只有接口包读它，不进对话、不进仓库、不进日志。
• 23 种画面风格：8 个类别，从 NYT 编辑级数据图表到瑞士网格、故障艺术，每种都记录画布、字阶、时间轴与配色纪律，不用对着空白页从零设计。作者建议一个项目轮换 2–4 种。
• 封面多画幅重排：每条成片出 16:9（1920×1080）和独立重排的 3:4（1440×1080）——不是从横版裁切，居中裁切会丢掉 57.8% 的画面宽度；竖版投放再加 9:16（1080×1920）。check_cover.mjs 实测边距、钩子字号和孤字。

典型使用场景

• 财经、科普栏目作者：每天把一条行情或主题解读做成 1 分钟视频，16:9 给信息流、3:4 给主页栅格、9:16 给视频号和小红书，封面各画幅分别排版。
• 技术写作者：把文档或文章转成带配音的讲解视频，不用学动效软件，画面就是 HTML 和 CSS。
• 在意成本和数据去向的团队：全本地跑，核心链路零 API key、零按次计费，素材不出机器。

快速上手

需要 Python 3.9+、Node 18+、Chrome 或 Edge 和 ffmpeg，缺什么 setup_env.sh 会报出来，加 --install 代装。最省事的装法是把这句话发给你的智能体：

给当前本地环境安装该 Skill：https://github.com/OneMoh/html-explainer.git
安装到你的技能目录，并检测安装必要的运行环境（Python 3.9+ / Node 18+ / Chrome 或 Edge / ffmpeg）

手动装就是 clone 进技能目录（Claude Code 只认 ~/.claude/skills/）：

git clone https://github.com/OneMoh/html-explainer.git ~/.claude/skills/html-explainer
bash ~/.claude/skills/html-explainer/setup_env.sh --install

装完新开一个会话，说「把『为什么天空是蓝色的』做成一条 1 分钟的讲解视频」。智能体会先问你用哪个 TTS、列候选音色，然后一路跑到 out/：MP4、SRT/VTT 字幕、QC 报告和两张封面都在那里。

小结

适合已经在用编程智能体、想把文章或主题成规模做成解说视频的人；不适合实拍剪辑、真人口播，也不适合想要图形化拖拽编辑器的人——画面是代码，这是作者刻意的选择。MIT 许可，主体是 Python 加 Node 渲染脚本，2026-09-21 创建，一周迭代到 v1.4.1，更新很勤。几个要留意的点：每个动画必须可 seek，现成的 React 组件动画搬不过来（那是参考项目 anything2explainer 的领域）；每条成片约 2 GB 磁盘，帧 PNG 合成后要清；换豆包音色要自己去火山引擎开通服务、填 Key，按字符计费。README 对两个思想来源（anything2explainer 的音画同步方法论、nexu-io/html-video 的风格目录）逐条署名，references/lessons.md 里 56 条「成片看着正常其实是错的」踩坑记录，值得单独一读。