用 HyperFrames 给编码智能体装上「写 HTML 渲染视频」能力

HyperFrames 要求 Node.js 22 或更高版本，同时需要 FFmpeg 做编码。有实测反馈：在默认的 Node 20 环境下会被明确拒绝并提示「HyperFrames requires Node.js >= 22」，所以这一步别跳过。装好后有两条路线——人类路线用 CLI（npx hyperframes init / preview / render），智能体路线装技能包（推荐，门槛更低且能形成闭环）。两条路线并不互斥：CLI 初始化项目时会自动装上技能，你随时可以把项目交给智能体接手。顺带说明它和 Remotion 的关系——官方 README 自己承认受 Remotion 启发，两者都跑无头 Chrome 且都做确定性渲染，真正的分歧在于「作者写什么」：Remotion 押注 React 组件，HyperFrames 押注普通 HTML。对智能体而言这个差别很实际，模型写 HTML 的熟练度远高于写符合某个框架约定的 TSX，而且省掉了一层构建步骤。协议方面 HyperFrames 是 Apache-2.0，涉及商用时请自行核对双方的许可条款。

# 检查环境
node -v          # 需 >= 22
ffmpeg -version  # 需可用

# 路线 A：人类版 CLI
npx hyperframes init my-video
cd my-video
npx hyperframes preview   # 浏览器预览，带热更新
npx hyperframes render    # 渲染成 MP4

# 路线 B：交给编码智能体（推荐）
npx skills add heygen-com/hyperframes

框架自带 21 个按需加载的技能，入口是 /hyperframes——它是路由器兼能力地图，任何「给我做个视频」的请求进来，它先判断这是视频、幻灯片还是移植任务，再指向对应的领域技能。在 Claude Code 里这些技能会注册成斜杠命令：/hyperframes 写作品、/hyperframes-cli 跑命令行、/tailwind 处理样式、/gsap 处理时间轴动画，用到 Lottie、Three.js、Anime.js 或 CSS 动画时还有对应的适配器技能。动画库那一组不需要你手动调用，智能体会在后台自动选用。

# Claude Code：从官方市场装插件
claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframes

# Codex / Cursor / Gemini CLI 等支持技能的智能体
npx skills add heygen-com/hyperframes

# Codex 也可以只装插件面（稀疏安装）
codex plugin marketplace add heygen-com/hyperframes \
  --sparse .codex-plugin --sparse skills --sparse assets

技能装好后，出片就是一句自然语言。官方给出的提示词范式很清晰：先说清载体与时长，再点名要哪些元素（标题淡入、背景视频、轻音乐），最后描述情绪或节奏。加上 /hyperframes 前缀会显式加载技能上下文，能显著提高一次成型的概率。下面几条是官方示例里验证过的写法，可以直接照搬改。

# 冷启动：直接描述想要什么
用 /hyperframes 做一个 10 秒的产品介绍，标题淡入，
带背景视频和一点轻音乐。

# 热启动：把现有材料变成视频
把这份 PDF 总结成一段 45 秒的路演视频，用 /hyperframes。
把这份 CSV 做成动态柱状图竞赛动画，用 /hyperframes。
看一下 https://github.com/heygen-com/hyperframes 这个仓库，
用 /hyperframes 讲讲它的用途和架构。

# 指定画幅与字幕
用 /hyperframes 做一条 9:16 的竖版短视频，讲 [主题]，
配与旁白同步的弹跳字幕。

这一步是 HyperFrames 与「让模型生成视频」路线的分水岭。因为作品就是普通 HTML，你可以让智能体 lint 一遍（有实测记录显示默认模板 lint 报 0 错 0 警），再在浏览器里带热更新预览，然后像跟剪辑师说话一样提修改意见——「标题放大两倍」「换成深色模式」「结尾加个淡出」「在第 3 秒加一条人名条」。智能体改的是 HTML 里那一行，渲染器重新跑一遍，同样的输入必然得到同样的帧。没有随机性，就意味着这个「预览 → 改 → 重渲」的闭环可以交给智能体自动迭代。草稿阶段为了快，可以让智能体跳过静态检查直接预览；但要进 CI 或交给同事复用前，务必补一次 lint，它能在渲染前就发现语法与结构问题，比渲到一半失败再回头查便宜得多。

npx hyperframes lint      # 静态检查作品
npx hyperframes preview   # 浏览器预览 + 热更新

# 迭代式提需求（像跟剪辑师对话）
把标题放大两倍，换成深色模式，结尾加一个淡出。
在第 0:03 加一条下方字幕条，写上我的名字和职位。

npx hyperframes render 会启动无头 Chrome，把时间轴上的每一帧定位出来截图，再流式送进 FFmpeg 编成 MP4。因为每一帧都是精确定位而非实时录制，所以渲染是确定性的——这对自动化流水线至关重要，也让「回归测试视频」成为可能。除了本地渲染，官方还提供 Docker 渲染与可选的 AWS Lambda 分布式渲染（AWS 费用自理）。

# 本地渲染
npx hyperframes render

# 用组件目录加现成模块（如动态图表）
npx hyperframes add data-chart

# 查看全部命令
npx hyperframes --help

把一个视频项目当代码管，是这套方案在工程上最大的红利：index.html 与素材都是文本或普通文件，可以直接进 Git，改坏了就回滚，多人协作就是正常的分支合并。还有一个工程细节值得提前想清楚：渲染放在本地交互跑还是放进 CI。交互阶段用预览快速迭代最省时间，定稿后把渲染挂进 CI、配合 Git 标签出版本，「改一行重渲一次」就变成可追溯的流水线；多人协作时把素材目录与输出目录的约定写死，避免智能体把产物写进源码目录把仓库撑大。上线前还有一件事要做——CLI 默认会收集用量遥测（命令名、渲染性能、错误名与粗略系统信息，还会检测你正在用哪个编码智能体），在意的话用下面任意一种方式关掉。

# 关掉遥测（三选一即可）
export HYPERFRAMES_NO_TELEMETRY=1
export DO_NOT_TRACK=1
npx hyperframes telemetry disable

# 把作品当代码管
git add index.html assets/
git commit -m "feat: 10s 产品片 v2（深色模式 + 淡出）"