最近这段时间AI 视频生成工具越来越多但真正能在本地跑完整个视频生成流程的方案其实并不算多。前几天我刷到不少人在分享 Codex APP 配合 HyperFrames by HeyGen 做视频的案例看完之后第一反应就是Claude Code 能不能也跑作为平时一直用 Claude Code 写代码、调试项目的人我还是更希望整个工作流都放在 Claude Code 里面完成不想因为一个视频工具再切换到另外一个生态。于是我花了两天时间把 HyperFrames 整套流程从零跑了一遍包括安装 Skill、配置环境、下载 Chrome Headless、安装 FFmpeg、生成 Prompt、渲染 MP4一步一步全部测试。结果比我预想的还要顺利。不仅能跑而且在部分页面动画和视觉表现上我个人觉得 Claude Code 跑出来甚至比 Codex APP 更舒服。当然中间也踩了不少坑。例如Skills 一直安装失败Git LFS 卡住不动Node 版本太低导致 Render 报错Chrome Headless 找不到FFmpeg 没安装导致视频无法导出Claude API 无法连接Prompt 写得不好导致画面混乱如果你最近也准备尝试 HyperFrames这篇文章基本可以帮你少走 90% 的弯路。所有内容都是我自己完整跑下来之后整理出来的没有照搬官方文档也不是简单翻译而是真正按照开发者第一次接触 HyperFrames 的视角来写。为什么我没有继续用 Codex APP先说结论。Codex APP 确实很好用。尤其插件市场这一点非常方便。打开应用。搜索 HyperFrames。点击安装。等待几十秒。基本就能开始生成视频。但是对于我来说它始终有一个问题。所有东西都在 APP 里面。很多时候我写代码是在 VS Code。项目也是 Claude Code。Prompt 也是 Claude 写。如果为了生成一个视频还要切换到另外一个 APP其实效率并没有那么高。而 Claude Code 最大的优势就是整个流程都可以放在本地。所有 Prompt。所有代码。所有资源。全部放在一个项目目录里面。包括 Git 管理。包括版本控制。包括后续修改。对于开发者来说这种工作流明显更加舒服。所以我决定把 HyperFrames 全流程搬到 Claude Code 里面试试看。HyperFrames 到底是什么很多人第一次听这个名字会以为它只是一个 AI 视频工具。其实不是。它更像一个视频渲染引擎。整个流程可以简单理解成Prompt ↓ AI 自动生成 HTML ↓ 生成 CSS ↓ 生成 JavaScript ↓ 调用 GSAP 做动画 ↓ Chrome Headless 截图 ↓ FFmpeg 合成 MP4也就是说。它本质上并不是直接生成视频。而是先生成一个网页。然后把网页一帧一帧录下来。最后输出 MP4。所以你会发现它的视频特别流畅。因为所有动画其实都是网页动画。不是传统 AI 一帧一帧画出来的。这一点也是 HyperFrames 最大的优势。Claude Code 能不能直接安装 HyperFrames可以。但是和 Codex APP 最大的区别就是Claude Code 目前没有插件市场。所以不能点一下按钮安装。必须使用命令行。我第一次就是这里踩坑。官方文档里面直接写npx skills add heygen-com/hyperframes结果一直卡住。半个小时都没反应。后来才发现。HyperFrames 仓库里面有很多 MP4 测试素材。全部走 Git LFS。默认安装的时候会一起下载。大概两百多 MB。而实际上这些素材根本用不到。正确安装方式应该是GIT_LFS_SKIP_SMUDGE1 npx skills add heygen-com/hyperframesWindows PowerShell 可以写成$env:GIT_LFS_SKIP_SMUDGE1 npx skills add heygen-com/hyperframes安装完成以后。Claude Code 会自动在项目目录生成.agents/ └── skills/ ├── hyperframes ├── render ├── animation ├── subtitle ├── timeline ...总共会安装十几个 Skill。整个过程大约一分钟左右。完成以后不用重启 Claude Code。下一次对话就已经可以识别 HyperFrames。环境准备真正决定能不能跑通很多人安装 Skill 成功以后。马上开始生成视频。然后就报错。其实 Skill 只是第一步。真正决定能不能渲染成功的是本地环境。我自己的环境如下软件推荐版本Node.js22 或以上FFmpeg最新 StableChrome Headless最新版本Claude Code最新版先检查 Nodenode -v如果版本低于v22建议直接升级。macOSbrew install node22Ubuntusudo apt install nodejsWindows官网下载最新版即可。很多 Render Error。安装 FFmpeg没有它最后一步一定失败HyperFrames 最终输出的是 MP4。前面的 HTML、CSS、动画都只是中间过程。真正负责把所有画面合成为视频的是 FFmpeg。所以如果没有安装 FFmpeg最后 Render 基本都会报类似错误ffmpeg: command not found或者Cannot find ffprobeMac 用户安装最简单brew install ffmpegUbuntusudo apt update sudo apt install ffmpegWindows 可以直接去 FFmpeg 官网下载或者使用 Wingetwinget install Gyan.FFmpeg安装完成以后建议先验证ffmpeg -version正常会看到类似输出ffmpeg version 8.x configuration: ... libx264 libx265 ...说明安装成功。Chrome Headless 也必须安装很多人电脑已经安装 Chrome。但是 HyperFrames 并不会调用你系统里的 Chrome。它会自己维护一套 Chrome Headless Shell。第一次运行 Doctor 时我这里就是报这个错误✗ Chrome Not found Run: npx hyperframes browser ensure直接执行npx hyperframes browser ensure第一次会下载八十多 MB。耐心等待即可。下载完成再次执行npx hyperframes doctor应该就会全部变成绿色。第一次一定要运行 Doctor这一点非常重要。很多人喜欢直接开始 Render。实际上官方最推荐的流程就是先跑 Doctor。命令npx hyperframes doctor第一次通常会看到类似输出hyperframes doctor ✓ Version 0.6.52 ✓ Node v24.14.1 ✓ CPU Apple M4 ✗ Memory Low Memory ✓ Disk 600GB Free ✓ FFmpeg ✓ Chrome这里需要重点关注三个地方。第一Memory如果提示Low Memory最好先关闭后台程序。尤其浏览器。Photoshop。Cursor。Docker。这些都非常吃内存。我测试时 16GB MacBook。如果剩余内存低于 2GB。偶尔 Render 到一半就直接 OOM。退出。所以建议至少预留2GB~4GB 空闲内存。第二Chrome如果这里还是红色。说明浏览器没有安装成功。重新执行npx hyperframes browser ensure第三FFmpeg如果这里显示Not Found说明 PATH 没配置。重新安装一次即可。Claude Code 如何调用 HyperFrames完成环境以后。真正生成视频其实非常简单。你甚至不用敲命令。直接把 Prompt 发给 Claude Code。例如帮我生成一个 HyperFrames 视频。 主题 Claude Code 新手入门。 风格 科技感。 蓝白配色。 30 秒。 1080×1920。 字幕采用逐字出现。 镜头切换自然。 每个知识点停留 5 秒。 最后加入 CTA。Claude Code 会自动调用 HyperFrames Skill。整个流程基本就是Prompt ↓ HTML ↓ CSS ↓ JavaScript ↓ Timeline ↓ Animation ↓ Render ↓ MP4整个过程无需人工干预。我为什么推荐先用 Claude 生成 Prompt这里也是我这次最大的收获。很多人 Prompt 都是自己写。其实效率非常低。因为 HyperFrames Prompt 不是普通 AI Prompt。它更像导演脚本。分镜脚本。动画脚本。字幕脚本。如果描述不到位。最终视频会很乱。所以我现在基本固定采用Claude 写 Prompt。Claude Code 渲染视频。整个体验会顺畅很多。我自己的工作流推荐这里顺便分享一下我现在每天都在用的流程。第一步。先打开 Claude。我这里直接调用 ClaudeAPI 提供的接口。主要原因很简单整个开发过程不用折腾海外网络也不用准备海外支付方式接口兼容 Anthropic SDK只需要修改一个 Base URL 就能直接调用对于本地开发来说非常省心。Python 示例from anthropic import Anthropic client Anthropic( api_keysk-xxxxxxxx, base_urlhttps://gw.claudeapi.com ) prompt 帮我生成 HyperFrames 视频 Prompt。 主题 Claude Code 快速入门 风格 极简科技蓝 30 秒 1080×1920 字幕逐字出现 镜头切换自然 输出完整 HyperFrames Prompt resp client.messages.create( modelclaude-sonnet-4-6, max_tokens3000, messages[ { role:user, content:prompt } ] ) print(resp.content[0].text)如果你的项目之前已经使用 Anthropic 官方 SDK其实迁移也非常简单只需要把base_url改成 ClaudeAPI 提供的接口地址即可其余代码基本不用调整。Node.js 示例import Anthropic from anthropic-ai/sdk; const client new Anthropic({ apiKey: process.env.ANTHROPIC_API_KEY, baseURL: https://gw.claudeapi.com }); const response await client.messages.create({ model: claude-sonnet-4-6, max_tokens: 2048, messages: [ { role: user, content: 帮我生成 HyperFrames 视频 Prompt主题Claude Code 教程。 } ] }); console.log(response.content[0].text);我现在基本都是让 Claude 先把 Prompt 写好。然后复制到 Claude Code。剩下就全部交给 HyperFrames 自动完成。整个工作流非常顺畅。一个 Prompt 就能生成完整视频例如下面这种 Prompt。制作一段 30 秒 AI 视频。 主题 Claude Code 基础命令。 风格 苹果发布会。 黑白配色。 字幕逐字出现。 背景采用渐变动画。 每个知识点停留五秒。 结尾加入 Logo。 输出 HyperFrames 完整格式。Claude Code 收到以后。基本就开始自动生成HTMLCSSGSAPTimelineSubtitleRender整个过程大约七到十分钟。最后直接输出 MP4。Claude Code 和 Codex APP到底谁更适合 HyperFrames很多人在看到 HyperFrames 之后第一个问题基本都是到底应该用 Claude Code还是直接用 Codex APP我这几天刚好把两条路线都完整跑了一遍而且为了尽量保证公平我用了同一份 Prompt、同一台电脑、同一个 HyperFrames Skill、相同的视频时长30 秒、相同的输出分辨率1080×1920连续生成了十几条视频。最后的结论其实很有意思。没有谁绝对更好只是适合的人不同。如果你只是偶尔生成一条视频希望安装简单、开箱即用那么 Codex APP 的体验确实更轻松。插件市场打开。搜索 HyperFrames。点击 Install。等待几十秒。基本就可以开始生成视频。整个过程几乎没有任何门槛。但是如果你本身就是开发者平时一直使用 Claude Code那么我反而更推荐直接把 HyperFrames 安装到 Claude Code 里面。原因很简单。整个工作流全部在本地。Prompt 在本地。HTML 在本地。CSS 在本地。动画代码在本地。Render 日志也全部保留。以后想修改某一个页面只需要重新生成对应文件即可不需要重新跑整个项目。这一点对于长期做内容生产的人来说效率会高很多。我连续测试了十几条视频发现了几个明显区别下面是我这几天实测下来最直观的体验。对比项目Claude CodeCodex APP安装方式命令行安装 Skill插件市场一键安装环境要求Node.js、FFmpeg、Chrome Headless基本无需关心Prompt 控制能力非常高中等页面动画更大胆、更丰富更稳、更保守字幕节奏偶尔需要调整相对稳定视频生成速度约 710 分钟约 1013 分钟后续修改非常方便相对麻烦适合人群开发者、AI 工作流普通用户尤其是动画部分。Claude Code 很喜欢生成一些比较有设计感的页面。例如大面积渐变背景卡片飞入动画GSAP Timeline数字滚动Logo 放大SVG 动画这些在 Codex APP 上面反而比较少见。当然。有时候过于大胆。也意味着偶尔会翻车。所以我一般都会跑两遍。第一次。看看整体效果第二次。根据 Claude Code 给出的建议再优化 Prompt。最终效果通常都会好很多。Claude Code 最大的优势其实不是生成视频很多人觉得。Claude Code 最大优势就是生成视频。其实不是。真正让我留下来的原因是它整个 AI Agent 工作流。例如现在我的流程基本已经固定第一步。Claude 自动帮我写 HyperFrames Prompt。第二步。Claude Code 自动调用 HyperFrames。第三步。自动 Render。第四步。自动输出 MP4。第五步。Claude 再帮我分析视频哪里还能优化。整个过程几乎不用离开 Claude Code。尤其如果你平时就在用 Cursor、VS Code 或者终端开发这种体验会比来回切换多个工具舒服很多。关于 Claude API我自己的使用方式这里顺便分享一下我自己的配置。因为我平时不仅测试 HyperFrames也会开发一些 AI 应用所以基本不会直接在网页端反复复制 Prompt而是直接通过 API 调用 Claude。我这次整个测试过程都是通过ClaudeAPI.com提供的兼容接口来调用 Claude 模型。主要原因有几个本地开发配置简单支持 Anthropic SDK 和 OpenAI Compatible 两种接口已有项目基本只需要修改base_url即可迁移不需要为了测试环境反复切换网络或者调整开发配置。例如 Python SDKclient Anthropic( api_keysk-xxxxxx, base_urlhttps://gw.claudeapi.com )如果之前已经接入 Anthropic 官方 SDK大部分情况下只需要改这一行配置业务代码基本不用调整。所以我现在基本都是ClaudeAPI 生成 Prompt → Claude Code 调用 HyperFrames → 本地渲染视频。整个链路非常顺畅。我踩过的几个坑希望你不要再踩虽然最终跑通了但中间确实遇到了不少问题。下面几个基本都是高频问题。坑一Node.js 版本太低很多人电脑还停留在 Node 18 或 Node 20。HyperFrames 新版本建议直接使用node -v确认版本v22.x如果版本太低。Render 很容易直接失败。坑二Chrome 没安装很多人觉得电脑已经有 Chrome。其实不是。HyperFrames 使用的是Chrome Headless Shell执行npx hyperframes browser ensure即可。坑三忘记安装 FFmpeg如果 Render 最后停留在Rendering...一直不结束。基本就是 FFmpeg。检查ffmpeg -version没有输出。说明没装。坑四Git LFS 卡住这是最多人遇到的问题。一定要这样安装GIT_LFS_SKIP_SMUDGE1 npx skills add heygen-com/hyperframes不要直接npx skills add heygen-com/hyperframes否则很可能一直卡在下载测试素材。坑五Prompt 太简单很多人只写一句帮我做一个 AI 视频。结果出来的视频非常普通。建议至少描述视频主题风格配色字幕方式转场方式动画节奏页面数量每页停留时间LogoCTAPrompt 越完整。最终视频越稳定。我的建议两个平台都值得试如果让我现在推荐。我不会说Claude Code 一定比 Codex APP 好。也不会说Codex APP 一定比 Claude Code 强。实际上。两者定位完全不同。如果你希望最快体验。直接用 Codex APP。如果你希望以后长期做 AI 视频内容、搭建自己的内容生产流程Claude Code 更值得投入时间。尤其是当你已经把 Prompt 生成、视频渲染、代码管理全部放到一个项目里之后这种工作流会越来越顺手。写在最后过去几年AI 视频更多还是依赖在线平台。而 HyperFrames 最大的意义就在于它把整个视频生成过程真正搬到了开发者自己的电脑上。HTML、CSS、JavaScript、动画、渲染、FFmpeg 合成全部都可以在本地完成。对于开发者来说这意味着更高的可控性也意味着后续可以把视频生成进一步集成到自己的自动化工作流中。我自己现在的流程基本已经固定先通过 ClaudeAPI 调用 Claude 生成 HyperFrames Prompt再交给 Claude Code 自动渲染视频。整个链路比较稳定也方便和现有项目整合不需要为了接口配置反复折腾把更多时间放在内容创作本身。如果你以前一直觉得 AI 视频制作门槛很高不妨抽半个小时把本文里的命令一步一步跑一遍。等第一条视频真正渲染完成你会发现整个流程并没有想象中复杂。真正花时间的往往不是工具本身而是如何持续打磨 Prompt 和内容创意。