一个让 Claude 像 React 架构师一样拆解你的需求，一个让 Claude 像剪辑师一样帮你梳理思路。都是用自然语言指挥 AI 做视频，走向却截然不同。
先交代一下背景。这两个 Skill 都不是凭空冒出来的------它们背后各站着一个已经很有名的编程式视频框架。
Remotion 是 Jonny Burger 在 2021 年开源的项目，GitHub 上 2 万多 star，用 React 组件写视频。HyperFrames 是 AI 视频公司 HeyGen 的开源项目，用 HTML + GSAP 时间轴写视频。它们最初都是程序员手写代码做动画的工具。后来各自被封装成了 Claude Code 的 Skill------从此你可以用自然语言指挥它们，不用再手写代码 。
快速导航
| 项目 | Remotion Skill | HyperFrames Skill |
|---|---|---|
| 来自项目 | remotion-dev/remotion | heygen-com/hyperframes |
| 创建者 | Jonny Burger（瑞士，独立开发者） | HeyGen（AI 视频公司） |
| 项目起步 | 2021 年 | 2025 年 |
| 原来怎么用 | 程序员手写 React 组件做动画 | 程序员手写 HTML + GSAP 做动画 |
| 现在怎么用 | 装 Skill → 自然语言指挥 Claude | 装 Skill → 自然语言指挥 Claude |
| 对话风格 | 你说一句，它开始写。默认你清楚要什么 | 它先反问你五六轮。默认帮你先想清楚 |
| 你控制什么 | 描述画面、改参数、调节奏 | 描述画面、回答追问、确认方向 |
| Claude 控制什么 | API 选择、组件拆分、帧函数编排 | 时间轴编排、动画运行时选择、字幕同步 |
| 最快出片 | 约 3-5 天（学基础概念） | 约 1-2 天（学基本对话） |
| 改需求体验 | "把第三页标题改成蓝色"→改一个 prop | "把第三段往后挪两秒"→改一个 data-start |
| 许可证 | BSL 源码可用（公司商用 $100-500/月） | Apache 2.0（完全免费，无限制） |
| 子 Skill 数量 | 1（一个包教会全部） | 8（各管一摊，总入口自动派发） |
数据来源：两个 Skill 文件实测（2026 年 7 月 28 日）
01 Remotion Skill：你描述画面，它搭架构
来龙去脉
Remotion 是 Jonny Burger 在 2021 年发在 GitHub 上的开源项目。它干了一件没人干过的事：把 React 的组件模型搬到了视频制作里 。开发者用 JSX 写画面，用 useCurrentFrame() 驱动动画，一个组件就是一个场景。
这个项目在程序员圈子里迅速火了------2 万多 GitHub star，被 Vercel、Shopify、Spotify 的团队用来生成自动化视频。但它一直有个门槛：你得会写 React。
Remotion Skill 就是来解决这个门槛的。它把 Remotion 的所有能力封装成一份 AI 知识文档------Claude 加载之后，你不需要手写 React，说人话就行。
一句话概括
Remotion Skill 把 Claude 训练成一个用自然语言驱动的 React 视频架构师 。你不需要知道 useCurrentFrame() 是什么------你只需要说"这个标题从左边滑进来，大概半秒"，Claude 自己决定用 spring() 还是 interpolate()、damping 设多少、从第几帧开始。
Remotion 作者 Jonny Burger 定下的基调决定了这个 Skill 的一切：
"The idea is simple: use React to create videos programmatically. Every frame is a React component. Every animation is a function of the current frame."
（想法很简单：用 React 来程序化地创作视频。每一帧都是一个 React 组件。每一个动画都是当前帧的函数。）
这句话定义了 Skill 的气质：Claude 的思考方式是"画面 = 组件树 + 时间"。你跟它说话，它脑子里已经开始画组件树了。
和 Claude 对话的真实感受
装上 Remotion Skill 后，你和 Claude 的对话是这样的：
你："帮我做一个自注意力机制的科普视频。开头有个 Hook 画面，中间解释 Q、K、V 三个矩阵怎么交互，结尾收一下。3 分钟。"
Claude：开始建项目、注册 Composition、把三个场景拆成三个 Scene 文件、给每个 Scene 写动画。你不需要告诉它"用 Sequence 组件"------它自己知道。
你跟它说话的方式是指挥式的。 "做这个。改成那个。再快一点。" Claude 负责所有的技术实现决策。
这和 SuperPower 的哲学很像------Jesse Vincent 说过：
"问题不在于模型不够聪明，而在于缺乏纪律。"
Remotion Skill 给 Claude 的"纪律"就是 React 的组件化思维。你说需求，它画组件树。你说改，它改那个组件而不碰其他的。
Skill 实际做了什么
当你说"做一个矩阵乘法可视化的科普视频"，Skill 驱动 Claude 自动完成：
- 判断这个需求适合拆成几个 Scene
- 每个 Scene 分配多少帧
- 3D 矩阵动画用
@remotion/three还是纯 CSS 变换 - 旁白和画面的时间点怎么对齐
- 哪些参数应该暴露为
inputProps（方便你以后换数据）
你全程不用写一行代码。 但你需要有能力读懂它生成的 React 组件------因为改需求的时候，Claude 改了 Scene3 的 props，你得知道它在改什么。这是 Remotion Skill 的门槛：它把技术决策权交给了 Claude，但把理解责任留给了你。
02 HyperFrames Skill：它先反问你，再动手
来龙去脉
HyperFrames 是 AI 视频公司 HeyGen 在 2025 年开源的项目。和 Remotion 一样，它最初也是给程序员用的------用 HTML 写画面，用 GSAP 写动画，用 data-* 属性标时间轴。Hello World 就是一个 index.html，不需要任何构建工具。
但和 Remotion 走的路不同：Remotion 是独立开发者单枪匹马做了四年，HyperFrames 是 HeyGen 这家公司把内部视频渲染引擎开源出来。所以 HyperFrames 自带了字幕引擎、设计师预设、组件市场------这些都是 HeyGen 自己生产环境用了很久的东西。
HyperFrames Skill 把这个能力装进了 Claude Code。
一句话概括
HyperFrames Skill 把 Claude 训练成一个会先跟你确认需求再动手的 HTML 时间轴导演。它不假设你清楚细节------它先问。
HyperFrames Skill 的第一行就把这个理念写明了：
"HTML is the source of truth for video. A composition is an HTML file with data-* attributes for timing, a GSAP timeline for animation, and CSS for appearance."
（HTML 是视频的唯一真相。一个视频组合就是一个 HTML 文件，用 data-* 属性标记时序，用 GSAP 时间轴写动画，用 CSS 管外观。）
但这行字解释不了实际体验。HyperFrames Skill 真正的特点是它的前置流程------Intent Interview。
和 Claude 对话的真实感受
装上 HyperFrames Skill 后，同样的需求，对话完全不同：
你："帮我做一个自注意力机制的科普视频。开头有个 Hook 画面......"
Claude："等等------这个视频是横屏还是竖屏？目标观众是技术人员还是普通大众？旁白要男声还是女声？需要字幕吗？你偏好什么视觉风格？要不要背景音乐？"
五六轮问答之后，它才开始写 HTML。
一开始你觉得这很烦。后来发现它解决了一个经常发生的问题：你说得不够清楚，它写出来方向就偏了。
你跟它说话的方式是对话式的。 "我想要这个效果"→"你觉得哪种风格更合适？"→"好，就这么做。" Claude 先帮你把模糊需求梳理成明确决策，再动手。
这和 grill-me 的核心逻辑完全一致------grill-me 追问的也不是技术方案，是你脑子里还没组织出来的东西。HyperFrames Skill 的 Intent Interview 在做同样的事：在你开始做视频之前，先把"你到底要什么"问清楚。
Skill 实际做了什么
和 Remotion Skill 最大的不同：HyperFrames Skill 不是"你说需求→它开始写"，而是"你说需求→它反问你→你说清楚→它开始写"。
装上之后，Skill 驱动 Claude 自动完成：
- 判断你的需求属于哪种视频类型（科普讲解 / 产品展示 / 幻灯片 / 音乐视频 / 代码走读......共 9 种预设工作流）
- 根据视频类型自动加载对应的子 Skill------要加字幕就加载
embedded-captions，要 3D 就加载hyperframes-animation - 把你说的话翻译成 HTML 结构------"这个标题出现在第 3 秒"变成
data-start="3" - 字幕自动从音频时间戳同步------你给它一段音频 + Whisper 转录，它给你逐词 karaoke
- 渲染前自动检查------文字有没有溢出容器？颜色对比度够不够？（
npx hyperframes inspect）
这些能力不是一个大包全装在一个 Skill 里------HyperFrames 是一支各管一摊的战队：
| 子 Skill | 管什么 |
|---|---|
| hyperframes | 总调度------判断视频类型，选工作流 |
| hyperframes-core | 核心契约------data-* 属性规则、轨道、变量 |
| hyperframes-cli | 命令行------init/lint/inspect/preview/render |
| hyperframes-creative | 设计------8 种视觉预设、配色、字体、旁白 |
| hyperframes-animation | 动画------7 种运行时（GSAP/Lottie/Three.js/Anime.js/CSS/WAAPI/TypeGPU）、24 种文字动效 |
| hyperframes-keyframes | 关键帧------2D/3D 关键帧、路径、遮罩、SVG 变形 |
| hyperframes-registry | 组件市场------hyperframes add 一键装预设场景 |
| remotion-to-hyperframes | 翻译桥------Remotion 源码翻成 HyperFrames |
对比之下，Remotion Skill 就一个包------从 useCurrentFrame() 到 Three.js 到渲染配置全装在里面。独狼 vs 战队。
你全程不用写一行代码。 而且门槛比 Remotion Skill 更低------你只需要看得懂 HTML。改需求的时候，Claude 改的是元素的 data-start 属性，一目了然。
03 同一个需求，两种对话体验
两个 Skill 输入的是同一句自然语言，输出的是同一个 MP4------但你和 Claude 的对话过程，以及 Claude 脑子里的处理过程，完全不同。
| 维度 | Remotion Skill | HyperFrames Skill |
|---|---|---|
| 对话节奏 | 你说一句，它开始写 | 它先反问你五六轮 |
| 它把你当 | 一个清楚自己要什么的导演 | 一个需要先理清思路的创作者 |
| 你的角色 | 下指令 + 审核产出 | 回答问题 + 确认方向 |
| 需求变了 | "把第三页标题改蓝色" | "把第三段往后挪两秒" |
| 它擅长什么 | 复杂场景架构、3D 可视化 | 快速原型、字幕同步、社交切片 |
| 它不擅长什么 | 需求模糊时可能跑偏 | 超长视频的架构维护 |
| 你的门槛 | 能读懂 React 组件 | 能读懂 HTML |
| 它替你做了什么决定 | API 选择、帧数分配、组件拆分 | 视频类型、视觉风格、字幕格式、动画运行时 |
Remotion Skill 相信你已经想清楚了。HyperFrames Skill 默认你可能还没想清楚。
还有一个硬数据值得参考。HeyGen 官方做过一次同题测试------给 Claude Opus 4.7 相同的视频 prompt，分别用两个 Skill 生成：
| 指标 | HyperFrames Skill | Remotion Skill |
|---|---|---|
| 渲染耗时 | ~60 秒 | ~162 秒（另加 4 分钟初始化） |
| 输出体积 | ~4 MB | ~14 MB |
HyperFrames 官方自己也承认这不是"谁更好"------他们在对比页面上写的结论是二者互补。HyperFrames 赢在 AI 友好（HTML 是 LLM 训练数据里最多的语言），Remotion 赢在工程成熟度（分布式渲染、Player 组件、四年社区积累）。
03.5 到底谁不能做什么
上面说了理念和流程，但读者最想问的是："到底哪个能做我的事？"来，直接列。
Remotion 能做，HyperFrames 做不了
TypeScript 类型安全。 改了一个 Scene 的 props，编译器立刻告诉你所有引用点有没有漏改。HyperFrames 是 HTML，属性写错了渲染出来画面不对才知道。
组件树并行开发。 6 个 Scene 分在 6 个 .tsx 文件里，三个人同时写，Git 合并零冲突。HyperFrames 所有东西塞一个 HTML------两人同时改很难不打架。
3D 场景深度集成。 @remotion/three 把 Three.js 的 Canvas 嵌在 React 组件里，3D 模型、光影、摄像机运动都是 JSX props。HyperFrames 有 Three.js adapter，但你要手写 scene.add() 和 renderer.render()。
分布式渲染。 Remotion Lambda 在 AWS 上开几十台机器并行渲染。5 分钟 4K 视频，一台电脑半小时，Lambda 3 分钟。HyperFrames 只支持本地单机渲染。
Player 组件。 渲染完拿 <Player> 嵌入网页------用户可以拖时间轴、调播放速度、逐帧看。HyperFrames 输出就是 MP4，没有交互层。
批量生成。 同一套代码换 inputProps，1000 个个性化视频全自动生成。HyperFrames 的 data-composition-variables 也能换数据，但变量系统不如 React props 灵活。
HyperFrames 能做，Remotion 做不了
零构建，浏览器直接预览。 一个 index.html，双击打开就是预览画面。Remotion 必须 npm install → npm run dev → 等编译 → 看 Studio。改一个字重新编译 5 秒起步。
Intent Interview。 你说个大概方向，Claude 主动追问五六轮：横屏还是竖屏？谁看？什么风格？要字幕吗？问清楚了才动手。Remotion Skill 默认你很确定------直接开始写 React。
字幕引擎。 扔一段音频 + Whisper 转录给它，自动生成逐词高亮的 karaoke 字幕，不需要手写字幕组件和时间同步逻辑。
网页截取。 输入一个 URL，"帮我做成 30 秒产品宣传片"。Remotion 没这个能力。
视觉 QC 自动化。 lint 检查语法规则，inspect 在 Chrome 里逐帧截图标记文字溢出和对比度问题。Remotion 你得自己在 Studio 里拖动时间轴肉眼检查。
音乐节拍同步。 分析音频波形，自动让画面切换卡在节拍上。Remotion 得自己用 useCurrentFrame() 算。
免费商用。 Apache 2.0，随便用。Remotion 超过 3 人团队的公司要付费。
04 翻译桥：它们可以接在一起用
最有意思的部分来了。
HyperFrames 生态里有一个叫 remotion-to-hyperframes 的子 Skill。它的功能直白到让人意外：你把 Remotion 项目描述给它，它自动翻译成 HyperFrames 组合。
翻译后用 SSIM（结构相似性指标）逐帧对比验证------均 SSIM 0.953-0.985。实测画面和原片几乎一致。
这意味着什么？
你在 Remotion Skill 里把复杂的长视频精雕完，然后告诉 Claude"把这个项目翻译成 HyperFrames"，它自动完成转换。翻译后的 HyperFrames 版本做社交媒体切片、换数据生成变体、加字幕重新渲染------全都用自然语言指挥。
"Skill 是消耗品，用完就扔。"
这是 Matt Pocock 说的。用在这里同样成立：这两个 Skill 不是让你二选一的信仰------它们是不同阶段的工具。复杂长片走 Remotion Skill，快速切片走 HyperFrames Skill。想换就换。
05 你该选哪个？
不说废话。把你的需求对号入座：
| 你的情况 | 选这个 |
|---|---|
| 5 分钟以上，多场景，有 3D 动画 | Remotion------组件树不会在改到第 6 个场景时塌方 |
| 30-90 秒社媒切片，要字幕 | HyperFrames ------HTML 一写，render 两分钟出片 |
| 需要批量生成 100 个个性化视频 | Remotion ------inputProps 换数据，脚本跑一夜全搞定 |
| 有个模糊想法，需要 AI 帮你理清 | HyperFrames------Intent Interview 问完方向就清楚了 |
| 从 Figma 设计稿出发 | HyperFrames------子 Skill 直接导入 |
| 多人协作，长期维护项目 | Remotion------TypeScript + 组件拆分，并行开发不打架 |
| 不想为做视频学 React | HyperFrames ------看得懂 HTML 就能改 data-start |
| 需要可嵌入网页的交互式播放器 | Remotion ------<Player> 组件直接嵌 |
| 公司超过 3 个人，不想付许可费 | HyperFrames------Apache 2.0 免费 |
| 以上都有 | 两个都装。长片 Remotion，切片 HyperFrames，翻译桥来回切 |
不管选哪个，有一件事比选择更重要。Fred Brooks 在 The Mythical Man-Month 里写过：
"Show me your flowchart and conceal your tables, and I shall continue to be mystified. Show me your tables, and I won't usually need your flowchart."
（给我看你的流程图但藏起你的数据表，我会继续困惑。给我看你的数据表，我通常就不需要你的流程图了------数据结构已经说明了一切。）
做科普视频也一样。Skill 驱动 Claude 用自然语言帮你做视频。但它不帮你把科普内容本身想清楚。 真正决定视频质量的，是你脑子里那个"数据表"------你对内容的理解、对节奏的判断、对细节的偏执。
这篇文章基于 Remotion Skill 和 HyperFrames Skill 的实测对话体验撰写。所有交互描述来自作者在 Windows 11 + Claude Code 环境中的真实使用记录。
关注本号，获取更多 AI 创作工具链深度评测。