设备画布产品发布片
+7
- 免费视频368368 次安装14+7
Remotion
HyperFrames
简短回答
Remotion 用 React 组件构建视频并渲染成 MP4。HyperFrames 是 HeyGen 推出的开源框架，用纯 HTML、CSS 和 JavaScript 构建视频。两者都可以通过 Skill 由 Agent 驱动：选择你的团队已经熟悉的创作方式即可。
Remotion skill 还是 HyperFrames skill？
- Remotion用 React 组件做视频。
- HyperFrames用 HTML、CSS 和 JavaScript 做视频。
Remotion 与 HyperFrames 速览
| Aspect | Remotion | HyperFrames |
|---|---|---|
| 创作方式 | React 组件 | HTML + CSS + JS |
| 本地渲染 MP4 | 是 | 是 |
| 分布式 / 云端渲染 | 支持，Remotion Lambda | AWS Lambda SDK |
| 许可证 | 源码可用；3 名员工以内免费 | Apache 2.0 |
| 专为 AI Agent 打造 | 官方 Agent skills | 是 |
| 最好掌握 | React | HTML 与 CSS |
哪个更适合你的团队
选择你已经熟悉的方式
- React 团队、数据驱动的视频：Remotion
- 网页风格的动效设计：HyperFrames
三步用 Claude Code 制作视频
HyperFrames 视频 Skill 在 Claude Code 中如何工作。
第 1 步安装 HyperFrames 视频 Skill
把安装提示词粘贴给 Claude Code，就能加上视频 Skill。
Read https://skillry.dev/skills/<slug>/install.md and follow the instructions to install the skill.Skill 自带经过验证的场景系统、节奏规则和渲染命令，第一次渲染出来就像成片。
浏览视频 Skills
第 2 步把需求交给 Claude
一个产品网址、一段脚本或一组截图就足以开始。
安装视频 Skill，然后把需求交给 Claude：一个产品网址、一段脚本或一组截图。Skill 提供经过验证的场景系统、节奏规则和渲染命令，第一次渲染出来就像成片。用大白话提出修改，比如缩短开头或换个标题，Claude 会修改 HTML 并重新渲染。
第 3 步渲染 MP4，然后修改
Claude 在本地渲染；用大白话提出修改，再重新渲染。
常见的修改包括缩短开头、换个标题或换一张片尾卡。Claude 会修改 HTML 合成文件并重新渲染，每个版本都可以复现。
Skillry 上的 HyperFrames skills
Remotion skill 与 HyperFrames skill 详解
每个框架是什么、Agent 如何驱动它，以及各自的取舍。
React
适用于 Claude Code 的 Remotion skill
Remotion 让你用 React 组件编写视频。每一帧都是时间的函数：你用 hooks 读取当前帧、插值计算数值并编排场景，然后用无头浏览器把合成渲染成 MP4。由于整个视频都是代码，很容易参数化，一个模板就能根据表格或 API 生成数百条个性化视频。
Remotion skill 教会 Agent 这个框架的 API 和约定，让 Claude Code 帮你搭建项目、编写合成并运行渲染。Remotion 是源码可用的：个人和员工不超过 3 人的营利公司可以免费使用，规模更大的公司则需要购买公司许可证。
- 最适合：规模化的数据驱动和模板化视频
- 需要：熟悉 React 和 TypeScript
- 渲染：本地渲染，或用 Remotion Lambda 分布式渲染
HTML · Apache 2.0
适用于 Claude Code 的 HyperFrames skill
HyperFrames 是 HeyGen 推出的开源框架，采用 Apache 2.0 许可证发布。合成文件是带 data 属性的纯 HTML 文件，用 CSS 设置样式、用 JavaScript 实现动画，CLI 会在你自己的电脑上把它们渲染成确定性的 MP4 视频。没有渲染额度或席位限制，还提供 AWS Lambda SDK 用于分布式渲染。
它在设计之初就考虑了 AI Agent：项目附带 Agent skills 和插件，其 HTML 优先的模式正好契合编程 Agent 擅长写的代码。Skillry 的 HyperFrames 视频 Skills 在此基础上，把一个产品网址或一段脚本变成完整的发布片。
- 最适合：像写网页一样制作发布片和动效设计
- 需要：熟悉 HTML 和 CSS
- 渲染：本地 CLI，可选 AWS Lambda
什么时候用 Remotion，什么时候用 HyperFrames
深入分析：为 AI Agent 选择代码生成视频框架。
以下情况选 Remotion……
你的团队已经在写 React 和 TypeScript，需要根据数据生成同一视频的大量变体，或者想要一个拥有播放器、模板和云端渲染的成熟生态。Remotion 的组件模型让跨项目复用场景十分自然，而且它历史悠久，很多 Agent 都见过大量 Remotion 代码。
以下情况选 HyperFrames……
你希望 Agent 像写网页一样创作影片，使用 CSS 布局、网页字体和熟悉的动画库，并在本地免费渲染。HyperFrames 适合产品发布片、动态图形和讲解短片这类设计质感比批量生成上千个变体更重要的场景。
用 Claude Code 剪视频：Agent 能做什么、不能做什么
借助 Remotion 或 HyperFrames，Claude Code 可以编写场景、按脚本卡节奏、渲染 MP4 并按要求修改。它还能运行 ffmpeg 等工具来裁剪、拼接或重新编码片段。它无法取代的是处理大量实拍素材的时间线剪辑器，比如剪辑访谈或给摄影机素材调色；这类工作仍是人工剪辑师或专门的视频工具更快。
渲染、许可证与成本
两个框架都用无头浏览器渲染，所以渲染时间随视频时长、分辨率和特效增加。HyperFrames 采用 Apache 2.0 许可证，在你的电脑上免费渲染；通过 AWS Lambda 的分布式渲染由 AWS 计费。Remotion 对个人和员工不超过 3 人的公司免费，规模更大的营利公司需要购买公司许可证；云端渲染由云服务商计费。
在 Codex 和其他 Agent 中使用 Remotion 与 HyperFrames
两个框架都不绑定 Claude。Codex、Cursor、Antigravity、OpenCode 和 GitHub Copilot 都能运行同样的 CLI 命令、读取同样的 SKILL.md 视频 Skills，因此团队更换 Agent 时无需重写视频模板。
Remotion 与 HyperFrames 常见问题
什么是 Remotion skill？
Remotion skill 是一个 SKILL.md 包，教会编程 Agent Remotion 的 API、项目结构和最佳实践，让 Claude Code 或 Codex 无需你查文档就能编写 React 视频合成并渲染成 MP4。Remotion 在 GitHub 上维护着官方 Agent skills（remotion-dev/skills）。
HyperFrames 是什么？
HyperFrames 是 HeyGen 推出的开源（Apache 2.0）框架，用于把 HTML、CSS 和 JavaScript 变成视频。合成文件是带 data 属性的标准 HTML 文件，CLI 在本地渲染确定性的 MP4，AWS Lambda SDK 支持分布式渲染。它附带 Agent skills，让 AI 编程 Agent 可以直接创作视频。
Claude Code 能剪视频吗？
Claude Code 可以用 Remotion 或 HyperFrames 编写并渲染基于代码的视频，也能运行 ffmpeg 等工具来裁剪、拼接、调整尺寸或重新编码片段。对于剪辑长访谈、调色这类重度素材剪辑，时间线剪辑器仍是更好的工具。
哪个更适合 AI 生成视频？
没有绝对的好坏。Remotion 适合 React 团队，以及用一个模板生成大量变体的数据驱动视频。HyperFrames 适合网页风格的动效设计，以及由 Agent 像写网页一样创作的发布片。选择你的团队已经熟悉的创作方式即可。
HyperFrames 免费吗？
免费。HyperFrames 采用 Apache 2.0 许可证发布，在你自己的电脑上渲染，没有渲染额度、席位限制或按次渲染费用。可选的 AWS Lambda 云端渲染由 AWS 计费。
Skillry 视频 Skills 用的是 Remotion 还是 HyperFrames？
Skillry 的发布片 Skills 基于 HyperFrames 构建，CreatorMotion Skills 则提供可编辑的动态图形片段。每个 Skill 页面都会在你安装前说明它基于什么构建、需要什么。