不会剪视频？让WorkBuddy直接写出MP4
不学复杂时间轴，也能用 WorkBuddy 驱动 HyperFrames，把文案、HTML 动画和素材渲染成 MP4。教程从环境检查、参考案例、生成、预览到导出完整走一遍。
做一条十秒产品宣传片，常规流程要处理脚本、画面、动画、音乐、字幕和导出。小白卡住的地方往往还没到“审美”，电脑上的时间轴和参数已经够劝退了。
WorkBuddy 加上 HyperFrames，换了一种做法。你在 WorkBuddy 里说清楚视频内容、时长、尺寸和验收要求，它负责创建 HTML 、 CSS 和动画代码，再调用 HyperFrames 把网页逐帧渲染成 MP4 。
这次只做一个没有真人、没有声音克隆、没有外部图片的十秒文字宣传片。画面由文字、色块和简单图形组成，适合第一次接触 AI 视频的人。跑通后再加产品截图、配音和音乐，问题会少很多。
操作按 2026 年 7 月的 WorkBuddy 、 HyperFrames 0.7.76 和官方 GitHub 仓库整理。工具更新后，命令版本可能变化。
先看懂这套流程
HyperFrames 是 HeyGen 推出的开源 HTML 视频框架，采用 Apache 2.0 许可证。它把 index.html 当作主时间轴，用 data-start、data-duration 和 data-track-index 控制每个元素何时出现，再通过浏览器和 FFmpeg 输出视频。
hyperframes-launches 仓库保存了 HeyGen 产品发布视频的工程案例。每个目录都能看到类似结构：
一个视频项目/
├── index.html 主时间轴
├── compositions/ 分镜与子场景
├── assets/ 图片、音频和视频素材
├── renders/ 导出的成片
├── STORYBOARD.md 分镜计划
└── meta.json 时长、尺寸和帧率
这些案例适合学习项目怎么拆，不适合整包照搬。仓库根目录没有独立许可证，里面还包含品牌 Logo 、配音、人物视频和第三方素材。教程只读取 README 、 STORYBOARD 、 HTML 和项目结构，不复制它的媒体文件。
第一步：在 WorkBuddy 建一个独立工作区
先在电脑上创建一个空文件夹，例如：
workbuddy-hyperframes-demo/
├── reference/ 参考工程
├── my-first-promo/ 自己的视频
└── output/ 最终成片
打开 WorkBuddy，新建任务，把工作空间限制在这个文件夹。不要直接授权整个桌面、下载目录或个人网盘。视频工具会创建很多缓存和临时文件，单独工作区方便检查，也方便一键删除重来。
把下面这段话交给 WorkBuddy：
请把当前工作区用于一个 HyperFrames 小白视频项目。
先只检查，不要安装、删除或修改任何系统软件。请执行并汇报：
1. 当前操作系统与终端类型；
2. node --version；
3. npm --version；
4. ffmpeg -version；
5. git --version；
6. git lfs version；
7. 当前目录可用磁盘空间。
HyperFrames 要求 Node.js 22 及以上，并需要 FFmpeg。Git LFS 只用于下载案例仓库里的大文件。
如果有缺失项，请按我的系统给出安装命令和影响范围，等我确认后再安装。
检查结果里，Node.js 必须是 v22 或更高版本。 FFmpeg 只要能正常输出版本信息即可。第一次不需要 Docker 、显卡或 HeyGen 账号。
WorkBuddy 提出安装系统软件时，先看清命令再允许。它如果准备卸载现有 Node 、改系统环境变量或安装一长串无关工具，先让它解释原因。
第二步：只把案例代码拉进来
案例仓库使用 Git LFS 管理图片、音频和视频。完整下载会占用更多空间，也会把教程不需要的素材带进工作区。
发送下面的任务：
请把 https://github.com/heygen-com/hyperframes-launches 克隆到 reference/hyperframes-launches。
要求：
1. 默认跳过 Git LFS 大文件，只保留代码、文档和 LFS 指针；
2. 不执行仓库里的脚本；
3. 不读取或复制人物视频、配音、头像、社交平台截图和品牌宣传素材；
4. 只分析根目录 README.md，以及 hyperframes-launch 目录中的 README.md、STORYBOARD.md、meta.json、index.html 和 compositions 目录；
5. 输出一份中文笔记，说明主时间轴、子场景、素材目录和导出目录分别负责什么。
请先显示准备执行的命令，得到确认后再运行。
WorkBuddy 会根据 PowerShell 、终端或 Bash 选择合适的跳过 LFS 写法。看到 git clone 和 GIT_LFS_SKIP_SMUDGE 一类配置属于正常操作；如果它开始执行案例中的安装脚本或上传文件，立即停止。
克隆完成后，重点看 hyperframes-launch/meta.json。这个案例写明了 1920×1080 、 30fps 和 49.77 秒。index.html 再用多个子场景拼成完整时间线。小白不用读懂全部代码，先学会“主时间轴负责安排，子场景负责画面”就够了。
第三步：让 WorkBuddy 创建空白视频项目
HyperFrames 官方要求 Node.js 22+ 和 FFmpeg 。先让 WorkBuddy 执行环境诊断，再创建空白项目：
请在当前工作区创建 my-first-promo HyperFrames 项目。
执行顺序：
1. 使用当前稳定版 HyperFrames 运行 doctor，记录版本和检查结果；
2. 使用 blank 模板、非交互模式创建 my-first-promo；
3. 画布设为 1920×1080，帧率 30fps，总时长先设为 10 秒；
4. 保留 index.html、meta.json、package.json、assets 和 renders；
5. 不启用 TTS、背景移除、云端发布和任何付费 API；
6. 不上传工作区文件；
7. 创建完成后先运行 lint，不要马上渲染。
如果 npx 安装时在 onnxruntime-node 下载步骤出现 HTTP 302，请停止重试，并在项目内使用：
npm install -D hyperframes@0.7.76 --ignore-scripts
然后把 package.json 脚本改为调用本地 hyperframes。
这个降级方案只用于 HTML 动画、检查和渲染；本地 TTS 与背景移除功能保持关闭。
每一步都把执行结果写入 setup-log.md，遇到错误不要自行删除项目重装。
HTTP 302 是当前部分网络环境下安装 onnxruntime-node 时可能出现的问题。--ignore-scripts 可以让基础 HTML 渲染流程继续，但会跳过依赖安装脚本，所以这条路线不能拿来运行本地 TTS 和背景移除。没有遇到这个报错，就按正常安装流程走。
HyperFrames 初始化时可能向通用 Agent 目录安装一组 Skills 。 WorkBuddy 自己的“技能”页面是另一套管理入口。安装第三方 Skill 前应查看来源、权限和脚本；这次只需要 WorkBuddy 读取项目里的 AGENTS.md、官方文档和案例代码，无需给它邮箱、网盘、通讯录等权限。
第四步：复制这段提示词，做第一条十秒视频
空白项目通过 lint 后，把下面的完整任务发给 WorkBuddy：
请在 my-first-promo 中制作一条 10 秒、1920×1080、30fps 的无人物产品宣传片。
主题：一个叫“清单盒子”的极简待办工具。
受众：第一次看到产品的人。
目标：10 秒内让人明白它能把零散任务收进一个清单。
只使用 HTML、CSS、SVG 基础图形和 GSAP 动画。不要使用外部图片、人物、头像、Logo、社交平台截图、远程字体、远程视频或网络请求。所有文字使用系统可用中文字体。
分成三个场景：
1. 0-3 秒：零散任务卡片从四周进入，标题“事情太多，记不住”；
2. 3-7 秒：卡片沿路径收进中央清单，标题“收进一个清单”；
3. 7-10 秒：显示整齐的待办列表和按钮，标题“今天就做三件事”。
画面要求：
- 米白背景、黑色文字、软蓝作为主色、少量橙色提醒；
- 文字不能出框，手机缩略图也能看清；
- 动画使用可定位时间的 GSAP paused timeline，并注册到 window.__timelines；
- 每个定时元素都要有 class="clip"、data-start、data-duration 和 data-track-index；
- 禁止 Date.now()、Math.random() 和运行时网络请求；
- 不添加配音和音乐。
执行要求：
1. 先写 STORYBOARD.md，再修改 index.html；
2. 修改后运行 lint；
3. 再运行 check，并生成关键帧截图；
4. 把关键帧放到 output/review-frames；
5. 发现文字溢出、重叠、低对比度或静止画面时先修复；
6. 在我确认关键帧之前，不要执行最终 render。
这段提示词把时长、场景、颜色、技术规则和验收方式都写清了。只说“帮我做一个高级宣传片”，WorkBuddy 很容易自行补素材、改风格，最后得到一条看似热闹却不符合用途的视频。
第五步：先看关键帧，再看动态预览
WorkBuddy 完成代码后，先看 output/review-frames。三张图至少要回答三个问题：
- 第一张能否看清问题；
- 第二张能否理解卡片正在被整理；
- 最后一张能否看见完整结果。
标题被裁掉、卡片互相压住、颜色太浅、最后一幕停留时间太短，都可以在静态图里提前发现。
关键帧通过后，再让 WorkBuddy 启动预览：
请启动 HyperFrames 预览服务，把它作为后台长驻进程运行，不要让终端等待超时后关闭。
告诉我本地预览地址，并保持服务运行。不要发布到公网。
HyperFrames 默认预览端口通常是 3002 。修改 index.html 后，浏览器会自动刷新。先看三遍：第一遍只看文字，第二遍只看动画节奏，第三遍检查每次切场景时有没有闪白、黑帧或旧元素残留。
第六步：只改一个问题，不要整条重做
第一版有问题很正常。给 WorkBuddy 的修改指令要小而明确。
文字看不清：
只调整第二个场景的标题。字号增大 12%，保持现有颜色和动画，确保标题在 1920×1080 画面内完整显示。不要修改其他场景。修改后重新运行 check，并只更新第二个场景的关键帧。
节奏太快：
把第一个场景延长 0.8 秒，第三个场景保持至少 2.5 秒。请同步调整后续 data-start 和总时长，检查音视频轨道没有空档或重叠。不要改文案和配色。
画面太花：
删除没有信息作用的装饰元素。每个场景最多保留一个主标题、一个主体动作和一处橙色提醒。保持背景和主色不变。
局部修改后都要重新运行 check。它会检查结构、运行时错误、文字溢出、遮挡、重叠和对比度。警告可以逐条判断，错误应在导出前清零。
第七步：渲染 MP4
预览和检查都通过后，再发送：
请停止预览服务，然后在 my-first-promo 中执行最终渲染。
要求：
1. 输出 MP4；
2. 1920×1080，30fps；
3. 使用 standard 质量；
4. 低内存机器使用 1 个 worker；
5. 文件保存为 output/qingdan-box-v1.mp4；
6. 完成后用 ffprobe 核对时长、分辨率、帧率和编码格式；
7. 计算文件 SHA-256，并把命令、检查结果和哈希写进 output/render-report.md；
8. 不执行 publish，不上传到 HyperFrames、HeyGen 或其他网站。
成片完成后，打开 MP4 从头看到尾。render 成功只证明文件生成了，无法替你判断错别字、节奏和画面是否舒服。
五个常见问题
Node 版本不够
node --version 低于 22 时，HyperFrames 会报引擎不兼容。让 WorkBuddy 安装 Node.js 22 LTS，再重新打开任务，避免终端继续读取旧 PATH 。
找不到 FFmpeg
先让 WorkBuddy 运行 ffmpeg -version。命令不存在时按当前系统安装，并重新打开终端。安装完成后再跑 hyperframes doctor。
案例里的视频打不开
如果只拉了文本，LFS 大文件会显示成一百多字节的指针文件，这是预期结果。教程不使用这些媒体。确实需要某个官方示例素材时，再单独安装 Git LFS 并按目录拉取，同时检查素材许可和人物授权。
预览能动，导出却不动
常见原因是动画没有使用 paused timeline，或者没有注册到 window.__timelines。把出问题的元素和时间段告诉 WorkBuddy，让它按 HyperFrames 的 seek-safe 规则修复，不能用普通网页的自动播放逻辑糊过去。
渲染时内存不足
关闭其他大型应用，让 WorkBuddy 使用单 worker 和 standard 或 draft 质量先试。视频里有大量 4K 素材、 Three.js 或多个并行视频时，先降低素材分辨率。系统盘空间紧张时还要检查 HyperFrames 帧缓存目录。
哪些人适合试
这套流程适合做产品片头、功能发布、课程标题动画、数据图表视频和简单社交短片。它的优势是文字、颜色、时长和动画都能通过代码修改，改一个字不用重新拖整条时间轴。
它不适合第一次就做复杂人物口型、电影级剪辑或几十分钟长片。 WorkBuddy 可以生成和修改代码，选题、文案、版权、节奏和最终验收仍然需要人来判断。
第一条视频控制在十秒、三个场景、零外部素材。只要能从提示词走到关键帧，再从预览走到 MP4，这条工作流就算跑通了。