大家有没有刷到一些讲解类视频整体画面像是一套能动的 HTML 版PPT刚好这段时间我们在研究 HyperFrames 玩法它的原理也是用 HTML生成画面然后组合成视频。于是我们想能不能让 HTML 负责前端画面HyperFrames 负责时间轴和渲染沿着这个思路我们用 WorkBuddy 成功复刻了同款视频。先看两段最终成片大家可以看出哪一条是 WorkBuddy 制作的吗视频一Codex口播视频视频二WorkBuddy整套流程分为4步文案、音频、SRT字幕文件、HTML视频。文案、配音和 SRT 可以生成逐句同步的 HTML 画面再直接渲染成 MP4。正式开始前先把需要的工具和素材准备完整。01 开始前工具准备一个AI智能体WorkBuddy、Codex或Claude CodeHyperFrames插件负责把HTML逐帧渲染成MP4剪映识别字幕、导出 mp3 口播录音、出SRT口播稿Node.js 22及以上版本运行HyperFrames配置交给AIFFmpeg最后编码视频配置交给AI。最后在生成视频前要有三份素材xxx.mp3 最终配音 xxx.srt 带时间戳的字幕 xxx.png、xxx.png 视觉参考图工具就这些接下来讲这套方法里真正巧妙的地方。02 SRT会给画面“排期”普通的AI视频做法是把整篇文案丢进去让AI自己猜每一页该停多久。猜得准还好。猜不准时配音已经讲到下一段画面还卡在上一页或者一句话还没念完标题先飞走了。这套方法没有让AI猜直接把SRT字幕交给AI。AI拿到它就像拿到了一张画面排期表。卡片什么时候弹出来哪一秒切场景都能直接固定在时间戳上。03 第一步先写一份“能变成画面”的口播稿先把文案写完这一步暂时不用考虑动画。这里有个小窍门你写的每一小段最好都能找到一个明确的视觉重点。比如这一句「整套流程只有四步文案、音频、字幕和HTML渲染。」很自然就能拆成「展示四步流程」画面。所以文案写完后一定要自己读一遍拗口的地方改掉。如果等音频录完再动文案后面的时间戳又要跟着重做。04 第二步录好音频固定节奏接下来做声音。音频可以自己录制也可以使用AI配音。手机录音、剪映或其他AI语音工具都能完成。录完后把明显口误、过长停顿和多余空白剪掉。但别剪得太狠画面也需要给观众留一点看字的时间。05 第三步导出SRT然后使用剪映的“识别字幕”功能。字幕出来后先逐句校对。HyperFrames、Workbuddy这类词很容易识别错需要重点检查。然后检查字幕切分。字幕太长容易做出一页塞满字的画面。我们要的是清楚的时间节点不是把每个逗号都做成一次转场。检查完导出xxx.srt文件。用文本编辑器打开看一眼。只要有编号、起止时间和文字这份“画面排期表”就做好了。到这里前期准备结束。接下来终于能看到前面三份素材开始变成画面了。06 第四步把素材交给WorkBuddy在WorkBuddy 中接入 HyperFrames一条命令即可。准备工作空间先新建专属文件夹层级结构可以是这样AI口播/ ├── input/ │ ├── xxx.mp3 │ ├── xxx.srt │ ├── xxx.png │ └── xxx.png ├── output/ └── project/把配音、SRT、参考图放进 input。建议通过“设置工作空间”选择整个 AI口播 文件夹然后工作模式选 Plan 模式模型可以选择 auto。然后复制这段提示词交给WorkBuddy。请在当前工作空间完成一条“中文口播转 HTML 动画视频”的完整制作任务。 输入文件 - input/xxx.mp3最终配音必须原样使用不得重新生成 - input/xxx.srt最终字幕和时间轴不得擅自改写时间码 - input/xxx.png、input/xxx.png视觉参考 制作要求 1. 检查 MP3 时长、SRT 内容和结束时间。 2. 分析参考图先生成 project/DESIGN.md明确颜色、字体、版式和动画规则。 3. 根据 SRT 内容划分场景生成 project/index.html。 4. 使用 HTML、CSS、GSAP 制作动画。 5. 使用 HyperFrames 管理场景、音频和字幕时间。 6. 分辨率为 1920×1080帧率为 30fps。 7. 字幕必须逐句按照 SRT 时间出现。 8. 必须使用 input/xxx.mp3作为音轨。 9. 每个场景要有入场动画场景之间不能硬切。 10. 运行 HyperFrames check修复全部错误和布局溢出。 11. 校验通过后渲染 output/final-video.mp4 12. 生成 output/contact-sheet.jpg 13. 检查最终视频的分辨率、帧率、时长和音轨。 14. 不要只交付代码必须实际导出 MP4。 15. 修改或安装软件、执行网络下载前先向我确认。后续WorkBuddy可能会请求询问你风格样式。可根据个人情况选择等它渲染生成后打开预览。到这里已经生成一条完整视频了不需要录屏也不用手动翻页HyperFrames会按照时间逐帧读取HTML再编码成MP4。07 HTML 模板可复用做到这里你已经能出一条视频demo了。当然第一条视频可能需要反复调整未必比手剪快多少。但调到满意后就可以把HTML当成后续模板完整留下来持续复用。下一条同类视频只给AI三样东西上一条视频的HTML模板 新的XXX.mp3 新的XXX.srt再告诉它保留这份HTML的配色、字体、布局和动画节奏。 根据新的音频和SRT替换内容重新划分场景。 非必要不要修改现有设计参数。以后换文案、换配音、换SRT同样的视觉风格就能继续往下出。08 最 后现在的AI写HTML的能力已经够用了代码层面是可以实现各种动效效果。参考图很重要AI 会根据参考图样式生成相对应的前端效果。当然发布前也要检查一下版权避免出现版权问题。这套工作流特别适合知识讲解、产品介绍和不露脸口播。如果想要增加真人感也可以录制一段真人口播视频讲解然后从视频中提取文案再根据文中流程重新操作一遍即可获得有真人出镜的知识讲解类视频了。欢迎大家关注万象AI实验室帮你把AI工具真正用起来。
