Claude Code 跑 HyperFrames 实测:本地生成 AI 视频素材全流程

做自媒体最常见的痛点之一:素材永远不够用。前几天刷到有人用 Codex + HyperFrames by HeyGen 跑视频,效果不错------很自然地想试试 Claude Code 这边能不能也跑通。结论:能跑通,并且某些页面的视觉表达甚至比 Codex 那条更出彩。

这篇文章把全流程拆开记录,重点是 Claude Code 那条路上踩过的几个坑。

HyperFrames 是什么

简单来说:HyperFrames by HeyGen 把 AI 生成的 HTML/CSS/JS 直接渲染成 mp4。你给一段提示词,它会:

生成每一帧的页面布局、动画、字幕
用无头浏览器抓帧
用 FFmpeg 合成最终视频

整个过程跑在你自己的电脑上------不依赖 HeyGen 云端服务,不需要订阅。

Codex APP 路线(基线)

Codex APP 有内置插件市场,整个流程是 UI 操作:

打开 Codex APP,进应用内插件菜单
搜 HyperFrames by HeyGen,点击安装(不用重启,下一句对话就能调用)
让 GPT 帮你写一段提示词(HyperFrames 对画面节奏、字幕、转场的描述很吃细节)
复制提示词丢进 Codex 聊天框,回车

Codex APP 自动跑 HyperFrames 全流程:init 项目 → 写 HTML/CSS/GSAP → lint → render,10 多分钟出一条 30 秒 1080×1920 竖屏 mp4。

Claude Code 路线(重点)

Claude Code 目前没有集中插件市场------这是和 Codex APP 最大的差别。所以 HyperFrames 这套 skill 没法在 App 内一键装,只能命令行本地装。

步骤 1:在项目目录下安装 skill

bash 复制代码

GIT_LFS_SKIP_SMUDGE=1 npx skills add heygen-com/hyperframes

避坑提示 :前面那个 GIT_LFS_SKIP_SMUDGE=1 环境变量一定要带。HyperFrames 仓库里有约 240MB 的 mp4 测试基线走 Git LFS,使用者用不到那些文件------不带这个变量会卡在拉 LFS 那一步。

跑完会把 15 个 skill 装到当前项目的 .agents/skills/ 下(项目级;加 -g 才装到全局)。装完 Claude Code 立即能识别。

步骤 2:基础环境清单

组件	版本要求	macOS 安装命令
Node.js	≥ 22(旧版会在合成器阶段直接报错)	`brew install node@22`
FFmpeg(含 ffprobe)	最新 stable	`brew install ffmpeg`
Chrome Headless Shell	HyperFrames 自管理(84MB)	`npx hyperframes browser ensure`

注意:Chrome Headless Shell 由 HyperFrames 自己管理一份,不动你系统已经装的 Chrome。

步骤 3:环境自检

bash 复制代码

npx hyperframes doctor

第一次跑大概率会看到类似输出:

text 复制代码

hyperframes doctor

  ✓ Version          0.6.52 (latest)
  ✓ Node.js          v24.14.1 (darwin arm64)
  ✓ CPU              10 cores · Apple M4 @ 2400MHz
  ✗ Memory           16.0 GB total · 0.3 GB free
                     Low memory --- renders may fail. Close other apps or increase RAM.
  ✓ Disk             600.5 GB free
  ✓ FFmpeg           ffmpeg version 8.1.1
  ✗ Chrome           Not found
                     Run: npx hyperframes browser ensure

内存警告处理:Memory 那一行如果黄字提醒 Low memory,先关一波后台应用释放内存------渲染时容易 OOM。16GB Mac 建议留 2GB 以上空闲。

Chrome 装好后再跑一次 doctor,应该就全绿了。

步骤 4:把提示词丢给 Claude Code 跑

把 HyperFrames 提示词原原本本丢进 Claude Code 对话框,它会自动调用 HyperFrames skill 跑完整流程------和 Codex APP 那条路输出格式一致:30 秒 1080×1920 竖屏 mp4。

实测 Claude Code 跑完整流程比 Codex 快几分钟。

用 Claude API 写 HyperFrames 提示词

如果不想跳到网页版 GPT 写提示词,也可以直接用 Claude API 来生成。下面是一个最小可跑示例,用 Sonnet 处理这类轻量结构化生成任务性价比最优:

python 复制代码

from anthropic import Anthropic

client = Anthropic(
    api_key="sk-xxx",
    base_url="https://gw.claudeapi.com"
)

prompt = """请帮我生成一段 HyperFrames by HeyGen 视频提示词。

主题:Claude Code 基础命令快速入门
风格:明亮简洁、节奏紧凑、字幕清晰
要求:
- 视频时长 30 秒,竖屏 1080×1920
- 包含 5-6 个关键命令展示
- 每帧描述清楚布局、字幕、动画、转场
- 输出 HyperFrames 标准提示词格式"""

resp = client.messages.create(
    model="claude-sonnet-4-6",
    max_tokens=2048,
    messages=[{"role": "user", "content": prompt}]
)
print(resp.content[0].text)

Node.js 版:

typescript 复制代码

import Anthropic from "@anthropic-ai/sdk";

const client = new Anthropic({
  apiKey: process.env.ANTHROPIC_API_KEY,
  baseURL: "https://gw.claudeapi.com"
});

const resp = await client.messages.create({
  model: "claude-sonnet-4-6",
  max_tokens: 2048,
  messages: [{
    role: "user",
    content: "帮我生成一段 HyperFrames 视频提示词,主题:<你的主题>,风格:<明亮/暗色/赛博>"
  }]
});
console.log(resp.content[0].text);

提示词生成完后,复制到 Claude Code 对话框就能直接跑 HyperFrames------整个链路:提示词由 Claude API 写 → Claude Code 调用 HyperFrames skill 渲染。

两条路线对比:跑完两条片之后

维度	Codex APP	Claude Code
安装难度	插件市场一键装	命令行 `npx skills add`
环境依赖	App 内置	Node 22+ / FFmpeg / Chrome Headless
跑完一条 30s 视频耗时	≈ 10-13 分钟	≈ 7-10 分钟
节奏稳定性	整体更稳	单页面更出彩
文字细节处理	略胜	略逊
开头封面	中规中矩	更高级

结论:

想最快上手 → Codex APP
想跑得更快、追求某些页面的视觉效果 → Claude Code
没有"全面更好"的一方,只是各有侧重------值得两个平台都跑一遍同主题做对照

我跑的测试是单轮直出。Claude Code 跑完会主动给优化建议------按建议再跑一轮效果会更好。

最小起步清单

如果你想自己跑一条试试,把这三步原样丢给 Claude Code(也可以自己手动跑):

bash 复制代码

# 1. 环境自检
npx hyperframes doctor

# 2. 缺 Chrome 时补一句
npx hyperframes browser ensure

# 3. Claude Code 路线装 skill(Codex APP 走应用内插件菜单)
GIT_LFS_SKIP_SMUDGE=1 npx skills add heygen-com/hyperframes

提示词偷懒方案:直接问 Claude API 或 GPT 网页版要------

text 复制代码

帮我生成一段 HyperFrames by HeyGen 短视频提示词
主题:<你的主题>
风格:<明亮简洁 / 暗色赛博 / 复古手绘 ......>
长度:30 秒,竖屏 1080×1920
帮我优化好节奏、字幕、转场

写在最后

新工具上线时不妨多平台都试一遍------核心其实就是底层的 AI 智能体能力。Codex 与 Claude Code 各有侧重,对同一个 HyperFrames 提示词跑出来的视频可以做侧重不同的素材库。

参考资料:HyperFrames by HeyGen 官方文档;同主题双平台对照实测。