不是 Premiere，不是剪映——我用 Claude Code 做了一条视频

上周五写完一篇教程文章后，想顺手做个视频教程。

结果打开剪映五分钟就放弃了。不是不会剪，而是这种 90 秒教程视频太碎：截图、字幕、转场、节奏，每一步都要手动对。

我想要的是另一种流程：文章写完，AI 帮我拆分镜、写动画，最后直接渲染成 MP4。

凑巧在github上看到 HyperFrames，就试了下。

一句话说清楚它是什么

HyperFrames 是 HeyGen 开源的视频渲染框架。HeyGen 大家可能更熟的是 AI 数字人，但 HyperFrames 不是做数字人的。

它的思路更程序员一点：写 HTML，渲染成 MP4。

传统做视频，你打开 Premiere 或 AE，拖素材、调时间轴、加关键帧，再导出。HyperFrames 换成了另一种方式：画面用 HTML + CSS 写，动画用 GSAP 控制，再把网页每一帧渲染成视频。

对写代码的人来说，这个思路很顺手。尤其是你已经有文章和口播稿，只想快速做一条产品介绍、教程视频或信息流短片的时候，不一定非要再去剪辑软件里耗半天。

先把环境装好

需要准备三样东西：

Node.js，版本要 >= 22
FFmpeg
HyperFrames Skills 和 CLI

Node.js 版本别太低。低于 22，后面渲染时很容易直接报错。

FFmpeg 用 Homebrew 装就行：

复制代码

brew install ffmpeg
ffmpeg -version

能看到 ffmpeg version 7.x 之类的输出，就说明装好了。

然后安装 HyperFrames 的 Skills：

复制代码

npx skills add heygen-com/hyperframes -y

这里建议带上 -y。不带的话会进入交互式选择界面，还要手动按空格勾选。带上之后会直接安装完整的 15 个 skill。

Skills 是给 AI 代理看的。它会告诉 Claude Code、Codex、Cursor 这类工具，HyperFrames 项目该怎么写、该跑哪些命令。

不过我们自己还要装 CLI：

复制代码

npm install -g hyperframes

如果 npm 下载慢，可以换淘宝镜像：

复制代码

npm install -g hyperframes --registry https://registry.npmmirror.com

装完之后跑一下检查：

复制代码

hyperframes doctor --non-interactive

我这里大概是这样的结果：

复制代码

✓ Version          0.6.97
✓ Node.js          v26.0.0
✓ FFmpeg           ffmpeg 7.1.1
✓ Chrome           system
✗ Docker           Not found

Docker 打叉不用紧张，不影响本地渲染。

有个小坑可以提前说一下：hyperframes doctor 第一次运行时会下载 chrome-headless-shell，大约 84MB。

这是 HyperFrames 自己管理的无头浏览器，不会动你系统里的 Chrome。第一次慢一点很正常。

接着初始化一个项目：

复制代码

hyperframes init video-example --non-interactive --example blank

生成的项目里，最重要的是 index.html。视频画面、动画和时间线，基本都写在这个文件里。

让 Claude Code 真正开始干活

前面只是准备环境。真正省事的地方在这里。

我的做法是先准备一篇文章，然后让 ChatGPT 帮我拆出三份中间材料：

复制代码

narration.txt                  TTS 口播稿
hyperframes-prompt.md          HyperFrames 生成提示词
storyboard-timeline-prompt.md  分镜时间轴提示词

这三份文件都放到项目的 assets/ 目录下。

为什么不直接把文章扔给 Claude Code，让它"做个视频"？

因为这句话太空了。AI 不知道你想要多快的节奏、几个场景、什么视觉风格、哪些地方要突出。先拆出分镜和口播稿，后面生成出来的东西会稳定很多。

然后打开 Claude Code 终端，输入：

复制代码

请读取 @video-example/assets/hyperframes-prompt.md
@video-example/assets/storyboard-timeline-prompt.md
@video-example/assets/narration.txt
根据这三个文件生成 HyperFrames 16:9 横屏视频项目。
视频时长控制在 90 秒以内。

接下来就看它跑。

Claude Code 会先读三份文件，理解视频主题、分镜结构和视觉要求，然后生成代码、安装依赖、跑检查。

我这次看到它主要做了几件事：

把 narration.txt 拆成 9 段字幕，每段对应一个场景
根据 storyboard-timeline-prompt.md 生成 9 个分镜容器
根据 hyperframes-prompt.md 写 CSS 样式和 GSAP 时间线
跑 npm run check，检查时间属性、布局溢出和动画状态

这个过程大概几分钟。中间可能会报错，比如某段终端文本超出画布，或者某个场景退出时没有重置状态。Claude Code 一般会根据报错回去改 CSS 和动画参数，再重新检查。

等到 0 error，基本就可以预览了。

预览和渲染

进入项目目录，启动预览：

复制代码

cd video-example
npm run dev

默认打开：

复制代码

http://localhost:3002

我这版的画面是深色科技风背景，截图用圆角卡片展示，字幕在底部逐句出现，关键词用紫色高亮。节奏偏快，但没有乱到看不清。

确认预览没问题后告诉Claue Code生成视频就可以自动出MP4视频：

当然也可以在终端自己执行下面命令手动生成。

复制代码

hyperframes render --output final.mp4 --quality high --fps 30 --non-interactive

参数大概是这个意思：

复制代码

--output           输出文件名
--quality          质量，可选 draft/standard/high
--fps              帧率，可选 24/30/60
--non-interactive  非交互模式

最后会输出一条 1920x1080、30fps 的 MP4。我这次成片 90 秒左右，文件大概 11MB。

第一版不是完美的。比如字幕和旁白的同步还可以更准，某两段转场也有点慢。

但它改起来很轻。你不需要重新打开剪辑软件、拖时间轴、调关键帧。直接在 Claude Code 里说：

复制代码

字幕提前半秒。
场景三动画再快一点。
最后一屏停留时间加长。

它会去改 HTML 里的 data-start、CSS 动画时长、GSAP 时间线位置。改完再渲染，几分钟就能看到新版本。

整个流程大概就是：

复制代码

文章 → 拆分镜 → 写 HTML + GSAP → 渲染 MP4

不过也得把话说清楚：HyperFrames 不是什么都能做。

需要真人出镜的 Vlog，它搞不定。靠实拍素材剪辑的片子，也不是它的活。电影级特效就更别想了。
它做的事很聚焦------用 HTML + CSS + GSAP 做 Motion Graphics，把网页一帧帧渲染成MP4。

最后

后面如果想加 TTS 解说，可以继续用 HyperFrames 内置的 /hyperframes-media skill。它支持生成语音和转录字幕，也可以交给 Claude Code 一起处理。

说真的，看到别人用几句话生成一条像样的产品介绍视频时，我还是挺有触动的。

不是因为它多炫，而是因为很多原来卡人的步骤，正在被工具一点点吃掉。以前做视频，你得学剪辑、学动画、懂排版，还得有一堆素材。现在你至少可以先把想法说出来，让 AI 给你生成一版初稿。

当然，最后好不好看，还是取决于你怎么改、怎么取舍。

工具只是把门槛降下来了，但品味这件事，还是得自己负责。

HyperFrames 的 GitHub 仓库：https://github.com/heygen-com/hyperframes

好了，就讲这么多。我是「赛博李同学 」。觉得有用就点个赞 + ⭐️ + 转发给需要的 TA，我们下期见！