这个技能支持哪些 AI 编程智能体？

支持 Claude Code、OpenAI Codex、WorkBuddy、Cursor、Gemini CLI、GitHub Copilot / VS Code、OpenCode、Windsurf 等遵循 Agent Skills 约定的宿主环境。

运行这个技能需要什么环境依赖？

需要 Python 3.9+、Node.js 18+、Chrome 或 Edge 浏览器（若无则会自动下载 playwright chromium），以及 ffmpeg。每条成片约需 2GB 磁盘空间。

如何安装 html-explainer？

可以直接告诉智能体 clone 仓库地址并安装，或者手动 git clone 到对应智能体的技能目录（如 ~/.claude/skills/ 或 ~/.workbuddy/skills/），然后运行 setup_env.sh --install。

配音是免费的吗？

默认使用的 edge-tts 引擎是免费且免密钥的。如果选择火山引擎语音合成 2.0 以获得更好音质，则需要填入 API Key 并按字符计费。

为什么不用浏览器录屏的方式生成视频？

录屏容易产生间歇性 Bug，例如动画提前播放或字体加载延迟。该技能采用 seek 机制，将时间轴定位到特定瞬间同步动画后截图，保证逐帧像素级一致。

API Key 会被智能体读取或泄露吗？

API Key 只存在本地的 tts.env 文件中，只有接口包读取。设计上保证密钥不进对话窗口、不进代码仓库、不出现在日志中，也不参与打包分发。

2026年10月27日

html-explainer

创意与多媒体视频生成19

获取资源

面向 AI 编程智能体的 Agent Skill，将任意主题生成带配音、字幕和封面的讲解视频。

MITClaude CodeCursorSelf-hosted文本图片音频视频

文案转视频文生视频

安装 / 调用方式bash

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

产品信息

形态: AI技能 & 智能体
分类: 创意与多媒体 › 视频生成
定价: 开源
平台: Claude Code · Cursor · Self-hosted
授权协议: MIT
首发日期: 2026年10月27日
收录时间: 2026年10月27日
官网: github.com

概览

GitHub GitHub

html-explainer 是一个 Agent Skill，用于将给定主题转化为带有配音、硬字幕、进度条和封面的讲解视频（MP4）。画面使用 HTML/CSS/GSAP 编写，通过确定性逐帧渲染生成，全链路在本地运行，核心流程不需要 API Key，也不产生按次计费。

它解决什么问题

传统的「HTML 转视频」工具通常采用浏览器录屏方式，容易因网络字体加载延迟或动画时序问题导致间歇性 Bug。html-explainer 不录制屏幕，而是通过 seek 机制将 GSAP 时间轴定位到特定瞬间并同步 CSS 动画后截图，确保每一帧的渲染结果逐像素一致，从根本上避免时序类错误。

主要能力

自动化流水线：用户只需输入一句话需求，技能会引导智能体完成调研、撰写解说词、配音、生成字幕与节拍、编排风格与画面、渲染、质检及生成封面。
动效库与模板编排：内置 40+ 动作词汇的可 seek 动效库和 23 种画面风格。模板编排器会根据解说词推断每场戏的角色，自动挑选主副风格并决定开场与转场。
双 TTS 引擎支持：默认使用免费的 edge-tts，也可切换至火山引擎语音合成 2.0（需 API Key）。两者产出的音频清单结构一致，下游无需修改。
高画质渲染：支持最高 4K60 分辨率、快门运动模糊以及多进程并行渲染，并提供断点续渲功能。
多画幅封面：自动生成 16:9、3:4 以及可选的 9:16 独立重排封面。

适合谁

适用于 Claude Code、OpenAI Codex、WorkBuddy、Cursor、Gemini CLI 等 AI 编程智能体宿主环境。遵循 Agent Skills 约定，可直接加载使用。内部由 Python 与 Node 脚本构成，也支持手工运行。

功能特性

自动化视频流水线：从调研、解说词、配音、字幕到渲染、封面，全流程由智能体自动执行。
确定性逐帧渲染：通过 seek 机制定位动画瞬间并截图，避免录屏带来的时序 Bug。
双 TTS 引擎：支持免费的 edge-tts 和火山引擎语音合成 2.0，产出结构一致可无缝切换。
可 seek 动效库：内置 40+ 动作词汇，将镜头语言转化为时间的纯函数，无状态且可组合。
主题驱动模板编排：读取解说词推断场景角色，自动搭配 23 种画面风格与转场。
节拍锚定解说词：画面按匹配字幕文本定位动画，修改解说词即可自动重排时间。
词边界字幕：利用 TTS 的字级时间戳生成字幕，而非按字数插值。
多画质档位：支持 draft 到 master 等多档配置，最高可达 4K60 分辨率。
快门运动模糊：在线性光下进行多样本积分实现运动模糊，非简单 blur 滤镜。
多进程并行渲染：支持启动多个独立浏览器进程并行截图，并提供断点续渲。
多画幅封面生成：为每条成片生成 16:9、3:4 及竖版 9:16 的独立重排封面。
密钥安全隔离：API Key 仅存于本地 tts.env，不进对话、仓库、日志或分发。

版本更新

新版本提醒我

首个版本 · html-explainer

2026年10月27日

Q&A

这个技能支持哪些 AI 编程智能体？由 AI 生成: 支持 Claude Code、OpenAI Codex、WorkBuddy、Cursor、Gemini CLI、GitHub Copilot / VS Code、OpenCode、Windsurf 等遵循 Agent Skills 约定的宿主环境。
运行这个技能需要什么环境依赖？由 AI 生成: 需要 Python 3.9+、Node.js 18+、Chrome 或 Edge 浏览器（若无则会自动下载 playwright chromium），以及 ffmpeg。每条成片约需 2GB 磁盘空间。
如何安装 html-explainer？由 AI 生成: 可以直接告诉智能体 clone 仓库地址并安装，或者手动 git clone 到对应智能体的技能目录（如 ~/.claude/skills/ 或 ~/.workbuddy/skills/），然后运行 setup_env.sh --install。
配音是免费的吗？由 AI 生成: 默认使用的 edge-tts 引擎是免费且免密钥的。如果选择火山引擎语音合成 2.0 以获得更好音质，则需要填入 API Key 并按字符计费。
为什么不用浏览器录屏的方式生成视频？由 AI 生成: 录屏容易产生间歇性 Bug，例如动画提前播放或字体加载延迟。该技能采用 seek 机制，将时间轴定位到特定瞬间同步动画后截图，保证逐帧像素级一致。
API Key 会被智能体读取或泄露吗？由 AI 生成: API Key 只存在本地的 tts.env 文件中，只有接口包读取。设计上保证密钥不进对话窗口、不进代码仓库、不出现在日志中，也不参与打包分发。