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

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

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

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

HyperFrames 是什么

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

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

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

Codex APP 路线（基线）

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

1. 打开 Codex APP，进应用内插件菜单

2. 搜 HyperFrames by HeyGen，点击安装（不用重启，下一句对话就能调用）

3. 让 GPT 帮你写一段提示词（HyperFrames 对画面节奏、字幕、转场的描述很吃细节）：

   帮我生成一个使用 HyperFrames by HeyGen 生成一个 <主题> 短视频的提示词，<风格关键词>，帮我优化好一点

4. 复制提示词丢进 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

GIT_LFS_SKIP_SMUDGE=1 npx skills add heygen-com/hyperframes

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：基础环境清单

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

步骤 3：环境自检

npx hyperframes doctor

npx hyperframes doctor

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

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

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 4.6 处理这类轻量结构化生成任务，性价比最优：

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)

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 版：

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);

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
• 没有"全面更好"的一方，只是各有侧重——值得两个平台都跑一遍同主题做对照

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

最小起步清单

如果你想自己跑一条试试，把这三步原样丢给 Claude Code（也可以自己手动跑）：

# 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

# 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 网页版要——

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

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

写在最后

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

claudeapi.com 已接入 Opus 4.7 / 4.6、Sonnet 4.6、Haiku 4.5 全系，兼容 Anthropic SDK 与 OpenAI 格式两套调用方式。Claude Code 的 base_url 配置参考控制台文档。

希望你的自媒体素材库，永远不缺片。