什么是 hyperframes-cli
做视频这件事，传统路径无非是打开 Premiere、After Effects 或者剪映——拖素材、拉时间线、调关键帧，鼠标点一下动一下，一个几十秒的视频折腾半天。但如果你是开发者，或者你正在用 AI 编程助手写代码，有没有想过——视频能不能也像写网页一样，用 HTML 写出来？
hyperframes-cli 就是干这个的。
它是 HeyGen 开源视频渲染框架 HyperFrames 的命令行工具。核心理念非常直接：写 HTML，渲染视频。你用 HTML、CSS 和 JavaScript 来描述视频里的每一帧长什么样、什么时候切换、怎么动——然后 hyperframes-cli 把这些代码渲染成 MP4、MOV、WebM、GIF 或者 PNG 序列。
说白了，就是把视频制作从“剪辑软件里拖拽”变成了“编辑器里写代码”。目前这个项目在 GitHub 上已经开源，采用 Apache-2.0 协议，社区活跃度很高。
核心功能
hyperframes-cli 的功能覆盖了从项目创建到最终渲染的完整流程，全部通过命令行操作。
项目初始化与脚手架
用 npx hyperframes init my-video 创建一个新的 HyperFrames 项目。命令会生成项目骨架和示例代码，你直接在里面写 HTML 就行。也可以从模板起步——npx hyperframes init my-video --example warm-grain 直接套用现成的示例。
实时预览
写代码的过程中需要随时看效果。npx hyperframes preview 会在浏览器里打开一个实时预览工作室，默认跑在 http://localhost:3002。改代码、刷新页面、看效果——跟写网页的体验一模一样。
HTML 代码检查
视频要跑得稳，HTML 得写得对。npx hyperframes lint 会检查你的 HyperFrames HTML 是否有语法错误或结构问题。支持 --json 输出，方便集成到 CI 流程里；加 --verbose 还能看到更详细的信息。
全量检查
npx hyperframes check 比 lint 更彻底——它会打开一个真实的浏览器会话，跑一遍页面，检查运行时错误、网络请求失败、布局问题、动画断言，甚至 WCAG 对比度。相当于给视频做了一次完整的“试播”。
视频渲染
这是最核心的功能。npx hyperframes render --output output.mp4 把 HTML 代码渲染成真正的视频文件。支持的输出格式包括 MP4、MOV、WebM、GIF 和 PNG 序列。你可以控制帧率（--fps）、画质预设（--quality draft/standard/high）、CRF 值（--crf）和视频码率（--video-bitrate）。
渲染支持本地模式和 Docker 模式。本地模式用 Puppeteer 调 Chromium，速度快，适合迭代开发。Docker 模式输出更稳定可复现，适合 CI/CD 流水线。
环境诊断
npx hyperframes doctor 一键检查你的开发环境——Node.js 版本、FFmpeg 是否装好、Chrome 能不能用。少走很多弯路。
其他实用命令
安装方法
hyperframes-cli 的安装分两步：装环境和装工具。
环境准备
HyperFrames CLI 要求 Node.js 22 或更高版本，以及 FFmpeg。
检查 Node.js 版本：
node --version
如果版本低于 22，去 Node.js 官网下载最新版。
安装 FFmpeg：
macOS：
brew install ffmpegUbuntu/Debian：
sudo apt update && sudo apt install -y ffmpeg
安装 hyperframes-cli
全局安装（推荐）：
npm install -g hyperframes
装完以后直接在任何目录下敲 hyperframes 就能用。
用 npx 临时使用（不全局安装）：
npx hyperframes <command>
在 AI 编程助手中安装 Skill
如果你在用 Claude Code、Cursor、Gemini CLI 或 Codex 这类 AI 编程助手，可以安装 HyperFrames 的 Skills 包：
npx skills add heygen-com/hyperframes --full-depth安装后，在 AI 助手里可以用 /hyperframes 来创作视频，用 /hyperframes-cli 来执行 CLI 命令。你只需要用自然语言描述想要什么样的视频，AI 会自动帮你写出对应的 HTML 代码。
适用场景
AI 辅助视频创作
这是 HyperFrames 最典型的用法。你给 AI 助手一句话——“帮我做一个 10 秒的产品介绍视频，带淡入标题、背景视频和背景音乐”——AI 自动生成 HTML 代码，你用 hyperframes-cli 渲染出来。整个过程不需要打开任何视频剪辑软件。
程序化批量视频生成
需要批量生成大量视频——比如为上千个商品每个生成一条介绍短片。用脚本调用 hyperframes-cli，数据从 CSV 或数据库里读，模板是现成的 HTML，跑一遍脚本批量输出。人工做的话得熬多少夜，脚本跑完也就一杯咖啡的功夫。
自动化视频流水线
把 hyperframes-cli 集成到 CI/CD 流程里。代码提交后自动触发视频渲染、自动发布、自动更新文档里的视频链接。发布新功能的时候，宣传视频自动生成，不用等人手动剪。
网页截屏与录屏
npx hyperframes capture <url> 可以把任意网页截图保存下来作为视频素材。做产品演示视频、竞品分析报告、网页变化监控都非常方便。
数据可视化视频
把 CSV 数据变成动画视频——用 HTML + Canvas 或者 D3.js 画图表，然后用 hyperframes-cli 渲染成 MP4。适合做数据报告、仪表盘演示、季度复盘视频。
使用案例
案例一：从零创建一个视频项目
npx hyperframes init my-product-video
cd my-product-video项目骨架生成后，编辑 index.html 文件，用 HTML 描述你的视频内容——标题、图片、动画、字幕，全都写在网页里。
案例二：预览和调试
边写边看效果：
npx hyperframes preview
浏览器打开 http://localhost:3002，实时预览视频效果。
写完之后跑一遍检查：
npx hyperframes lint npx hyperframes check
lint 检查语法，check 打开真实浏览器做完整测试。
案例三：渲染成 MP4
一切就绪，渲染输出：
npx hyperframes render --quality high --output final-video.mp4
--quality high 用高质量编码预设。你也可以指定帧率和码率：
npx hyperframes render --fps 60 --video-bitrate 10M --output hq-video.mp4
案例四：抓取网站做视频素材
想把某个产品的官网页面放进视频里当背景：
npx hyperframes capture https://stripe.com -o videos/stripe-launch/capture这条命令会把 stripe.com 的页面截图保存到指定目录。然后在 HTML 里引用这些截图，渲染成视频。
案例五：在 AI 助手中一句话生成视频
在 Claude Code 或 Cursor 里装了 HyperFrames Skills 之后，直接跟 AI 说：
“用
/hyperframes，把这份 PDF 总结成一个 45 秒的演讲视频。”
AI 会自动解析 PDF 内容，生成对应的 HTML 代码，你只需要运行渲染命令就能出片。
案例六：对比两个版本
迭代过程中想看看改之前和改之后的区别：
npx hyperframes compare v1/ v2/
注意事项
依赖必须装全。 Node.js 22+ 和 FFmpeg 是硬性要求，缺一个都用不了。装完之后先跑 npx hyperframes doctor 确认环境没问题。
本地渲染和 Docker 渲染结果可能不一致。 本地模式依赖你系统里的字体和 Chrome 版本，换一台机器渲染出来的视频可能略有差异。如果追求完全可复现的输出，用 Docker 模式。
渲染比较吃资源。 视频渲染本质上是逐帧截图再编码，时长越长、分辨率越高、帧率越大，耗费的时间和 CPU 就越多。复杂动画建议先用低画质预览（--quality draft）确认效果，再用高质量渲染出片。
Skill 安装注意加 --full-depth。 不加的话 skills add 拉的是 skills.sh 的缓存版本，可能比 main 分支滞后几个小时。加上 --full-depth 才能拿到最新的 skill 内容。
◯ 评论 0