Remotion vs HyperFrames：Claude Code 做视频 Skill 实测对比，风格 Skill 与先分镜（2026）
阅读说明
本页是本站的实测记录，测试在 2026-10-23 至 2026-10-24 完成，视频是成片的压缩版。GitHub 仓库信息查阅日期：2026-10-25。本文不写价格；测试没有记录用量，所以也没有成本数字。
先说结论
我们用同一份脚本、同一段旁白和配乐，只换做视频的 Skill 或做法，一共做了 12 条 30 秒左右的解说片。
- 换渲染器，画面几乎不变。 HyperFrames 换成 Remotion，构图、配色、节奏都差不多。
- 能改变画面的是两样东西： 自带风格的 Skill，和「先分镜再动画」的做法。
- 先审静帧最省返工。 每个场景先出一张静帧，看过再做动画，看图发现的 7 个问题里有 6 个在这一步就修掉了。
这次不给工具排名。
先看清测试环境
只有「Opus 5.5 + Claude Code 基线」那一组是 Claude Code + Opus 5.5 做的。其余 11 组跑在云端 Linux 环境里的另一个 AI 编程代理上，没用 Claude Code，也看不到用的是什么模型，不能当成 Opus 5.5 的结果来读。详见文末「测试环境一览」。
该选哪个、怎么做
- 只想稳稳出片：HyperFrames 或 Remotion，配它自己的官方 skills。两边结果接近，喜欢写 HTML 选 HyperFrames，喜欢 React 选 Remotion，再看一眼许可证。安装步骤见 环境搭建。
- 想要一眼认得出的风格：在框架上加一个风格 Skill。先看它的许可证，也要接受它更慢。
- 想少出错：先分镜。让代理先出方向、再出每个场景的静帧，你看过了再让它做动画。
- 要真人、实景这类写实画面：用视频生成工具，屏幕上的字最好后期自己加。
渲染器影响大吗？
不大。下面两条，一条用 HyperFrames，一条用 Remotion，其他条件都一样：
HyperFrames 基线（官方 skills）
只换渲染器：Remotion（官方 Agent Skills）
两条都是深色背景、中间一张小卡片、一个倒计时圈、一个等宽字体的时钟。再加上 GSAP 的动画 skill，画面也没明显变化。
有意思的是，HyperFrames 自己的 skill 明确不建议「深色空背景、中间飘着小元素」这种构图，三条片子还是都做成了这样。
真正影响大的，是代理刚刚做过什么。 这几组是在同一个会话里接连做的，代理会把上一条的设计带到下一条。我们在同一个会话里从空文件夹把基线重做一遍，结果变成了浅色时间线：
同一设置重做一次
所以想比较工具，每次最好开新会话。后面几组都这么做了。
风格 Skill 怎么改变画面？
加了风格 Skill，画面才真的不一样。
加风格 skill：huashu-art-motion（纸色背景的讲解风格）
huashu-art-motion 让每个场景中间放一个大物件（这里是一部手机），背景换成纸色，看起来像一条做完的讲解片。
加风格 skill：lemo-opuscar 白板手绘
lemo-opuscar 的白板风格是 12 条里最有辨识度的：马克笔跟着旁白画出时钟、卡片和箭头。
代价也明显：这是最慢的一组，约 13.6 分钟；它默认 24 fps，原片体积最大；镜头横移时会裁到字，这次没修。用法见 lemo-opuscar 教程。
先审静帧为什么省事？
先分镜再动画
这一组和 HyperFrames 基线用的工具完全一样，只是分四步走：
| 步骤 | 做什么 | 用时 |
|---|---|---|
| 1. 写需求 | 题目、观众、要记住的一句话、只能用的事实和素材；先不写代码 | 0.8 分钟 |
| 2. 选方向 | 代理给三个不同的视觉方向，选一个 | 0.4 分钟 |
| 3. 出静帧 | 每个场景按最终尺寸出一张图，看过再继续 | 3.2 分钟 |
| 4. 做动画 | 把静帧做成动画；完整渲染前先抽开头、中间、结尾三帧再看一次 | 2.6 分钟 |
静帧这一步改了 6 处版面问题，都是看图才看得出来的：
- 大号时间压到了卡片下面；
- 一行状态字夹在卡片和进度条之间，碰到了进度条；
- 结尾句断行后，最后一行只剩一个词；
- 一句话下面大片留空；
- 用了 skill 不建议的小号全大写标签；
- 状态行挤在卡片下沿。
第 7 个问题（一条字幕和画面上的大字一字不差地重复）到动画阶段才发现。这 6 处如果等动画做完再改，每改一次都要重新渲染。
注意：这一组中间没有人审，每一步的选择都是代理自己做的。你自己做时，在第 2、3 步亲自看一眼，效果会更稳。
第 2 到 4 步可以这样跟代理说（中文示例，不是官方原文）：
第 2 步：给我三个不同的方向。每个写：标题、两行视觉风格、节奏、分镜列表（每个场景一个想法和时长）。先别做任何东西，我来选。
第 3 步：只把方向 A 做成静帧：每个场景一张，按最终尺寸，标上场景编号给我看。先别做动画，也别渲染视频。
第 4 步：把批准的静帧做成完整视频。所有动画都按帧号或时间来算，不用 CSS transition 或计时器。完整渲染前，先渲染开头、中间、结尾三张静帧给我看。
第 1 步怎么写需求，见 从提示词到成片；不同类型片子的示例提示词见 场景模板。
不用框架、不写代码行不行？
- 不用框架（claude-motion-design）：纯 HTML 页面，用 Playwright 一帧一帧截图，再用 FFmpeg 合成。能出片，但渲染约 6 分钟，所有组里最久；画面右侧大片留空。它默认 60 fps，我们改成了 30。用法见 claude-motion-design 教程。
- 直接生成视频（不写代码）：按文字描述生成写实画面。测试时每段最长 15 秒、720p，只能两段拼起来；没有旁白、字幕、配乐的设置；结尾那句字前两次拼错，第三次分三行写才对。适合要写实画面的时候，不适合精确的文字和时间点。
配音与踩坑
配音怎么做的： 每组都用同一段约 60 词的英文旁白，用开源的 edge-tts 合成（en-US-AndrewNeural，语速 -5%），配同一首 Mixkit 配乐。所以这次比的是画面和流程，不比写稿和配音。
踩过的坑：
| 问题 | 怎么发现的 | 怎么处理 |
|---|---|---|
| 系统自带 Node 20，HyperFrames 要 22 以上 | 版本检查 | 另装 Node 22 |
pip install edge-tts 报 externally-managed-environment | 安装时 | 改用 Python 虚拟环境 |
| edge-tts 7.2.8 返回 403 | 合成旁白时 | 升到 7.3.1 后正常（原因没确认） |
hyperframes init 会自动装 skills，覆盖 ~/.claude/skills 里同名的；skills update 还删过 7 个旧 skill | 命令输出里的 overwrites: Claude Code | 从备份恢复；--skip-skills 参数会被忽略，要关得设环境变量 HYPERFRAMES_SKIP_SKILLS=1 |
| 没写时长的旁白片段被当成重叠 | hyperframes check | 给每段设时长 |
| 一页字幕跨了两句 | 看截图 | 在句末断页；Remotion 用 pageBreakAfter 改了 10 处 |
| Remotion 的字幕组件写死 Arial 字体 | 看截图后查源码 | skill 要求原样使用，保留 |
GSAP skill 建议用 autoAlpha，HyperFrames 禁止在定时元素上用 | 读两边的规则 | 按 HyperFrames 来，只用 opacity |
| 字幕或印章盖住了标签、按钮 | 看截图 | 挪开 |
| 竖屏版两套安全区数字不一致 | 读文档 | 两套都满足（字幕离底 590 px、离右 140 px） |
| lemo-opuscar 安装时下载了 354 MB 的语音模型，没用上 | 安装输出 | 没处理 |
规律： 工具自带的检查能抓时间和结构问题；「字幕压到按钮」这类问题只能靠看截图。每组看过截图的，都至少多发现了一个问题。
用到的 Skill 和工具
星数、许可证和最近推送时间在 2026-10-25 于 GitHub 核对，推送时间已换算为北京时间日期。星数会变，以仓库页面为准。
| 工具 | 用在哪组 | GitHub | 星数 | 许可证 | 最近推送 |
|---|---|---|---|---|---|
| HyperFrames（含官方 skills） | 基线、重做、GSAP、huashu、先分镜、竖屏 | heygen-com/hyperframes | 71,574 | Apache-2.0 | 2026-10-25 |
| Remotion Agent Skills | 只换渲染器 | remotion-dev/skills | 5,635 | 仓库没有单独的 LICENSE 文件，按 Remotion License | 2026-10-22 |
| Remotion | 只换渲染器、网站宣传片 | remotion-dev/remotion | 67,165 | Remotion License | 2026-10-25 |
| GSAP skills | 加 GSAP 动画 skill | greensock/gsap-skills | 17,068 | MIT | 2026-07-30 |
| huashu-art-motion | 风格 skill | alchaincyf/huashu-art-motion | 5,115 | MIT | 2026-10-17 |
| lemo-opuscar | 风格 skill | lemomo-ai/lemo-opuscar | 6,734 | 代码 MIT，示例片 CC BY 4.0 | 2026-10-24 |
| claude-motion-design | 不用框架 | howseen-ai/claude-motion-design | 667 | MIT | 2026-10-04 |
| video-shotcraft | 网站宣传片 | Vincentwei1021/video-shotcraft | 13,458 | Apache-2.0 | 2026-10-18 |
Remotion License 允许个人、最多 3 名员工的营利组织、非营利组织等按 Free License 使用，超出范围要另取 Company License，以官方页面为准。本次测试按个人用途使用。
这轮没测 anything2explainer（非商用许可）、OpenMontage（AGPL）和 video-use（要 ElevenLabs 的 key）。video-use 的用法见 video-use 教程。
这次测试的局限
- 每种设置只跑了一次（基线和重做除外），重做那组说明同一设置再跑一次，画面可能差很多。
- 前几组共用一个会话，后一条可能沿用前一条的设计。
- 12 组里 11 组不是 Claude Code + Opus 5.5 做的；换成 Opus 5.5，结果可能不同。
- 声音只量了响度，没有人从头听过；画面主要看截图和抽帧。
- 没有记录用量，所以没有成本数据。
常见问题
Remotion 和 HyperFrames 哪个更好？
这次看不出谁明显更好，同一题目下成片和耗时都接近。实际差别在许可证（HyperFrames 是 Apache-2.0，Remotion 按 Remotion License）和写法（HTML 还是 React）。
这些片子是 Opus 5.5 做的吗？
只有「Opus 5.5 + Claude Code 基线」一组是。其余 11 组跑在云端 Linux 环境的 AI 编程代理上，没用 Claude Code，也看不到模型。用 Opus 5.5 做视频的完整步骤见 用 Opus 5.5 做视频。
做一条要多久、花多少钱？
从第一条命令到成片，这批测试在 2.8 到 13.6 分钟之间，只代表测试时那台机器。测试没记录用量，所以没有成本数字，本文也不估算。
哪个 Skill 对画面影响最大？
带风格的 Skill。huashu-art-motion 做出纸色背景加大物件的讲解风格，lemo-opuscar 做出白板手绘。加 GSAP 动画 skill 没让画面明显变化。
测试环境一览
所有组用同一份需求：25–35 秒英文解说片（竖屏版和网站宣传片除外），同一段旁白和配乐，1920×1080、30 fps（工具默认不同的另注）。「问题」= 工具自带检查报的 / 看截图发现的。
展开看每组的环境和数字
| 编号 | 短名 | 谁做的、在哪 | 总用时（分钟） | 渲染 | 问题 |
|---|---|---|---|---|---|
| V0 | Opus 5.5 + Claude Code 基线（HyperFrames） | Claude Code 2.1.295 + claude-opus-5-5，Mac（Apple M6，16 GB），2026-10-23 | 约 6 | 38 s | 4 / 1 |
| V1 | HyperFrames 基线 | 云端 Linux 环境的 AI 编程代理，未用 Claude Code，模型不可见；Debian 13，8 核，15 GiB，2026-10-24 | 6.9 | 26.1 s | 4 / 3 |
| V6 | 同一设置重做一次 | 同上 | 3.3 | 17.5 s | 1 / 4 |
| V2 | 只换渲染器（Remotion 4.0.538） | 同上 | 3.4 | 19.8 s | 1 / 2 |
| V7 | 加 GSAP 动画 skill | 同上 | 2.8 | 21.3 s | 3 / 1 |
| V8 | 加风格 skill：huashu-art-motion | 同上 | 6.6 | 17.2 s | 4 / 2 |
| V9 | 加风格 skill：lemo-opuscar 白板（24 fps） | 同上 | 13.6 | 100.3 s + 合成 18.7 s | 4 / 2 |
| V11 | 先分镜再动画 | 同上（新会话） | 8.1 | 16.2 s | 4 / 7 |
| V4 | 不用框架（claude-motion-design） | 同上 | 10.7 | 约 6 分钟 | 1 / 4 |
| V10 | 直接生成视频（720p，24 fps） | 同上（新会话） | 8 | 每段 15 s 约 90–212 s | 0 / 3 |
| V3 | 竖屏版（1080×1920） | 同上 | 5.7 | 17.4 s | 6 / 4 |
| V5 | 网站宣传片（video-shotcraft，20 秒，无旁白） | 同上 | 9.5 | 44.1 s | 0 / 3 |
- HyperFrames 均为 0.8.188。
- 「Opus 5.5 + Claude Code 基线」的渲染耗时按汇总指标写 38 s，日志步骤表里记的是 41 s，两处不一致。
- lemo-opuscar 那组的用时从重开算起，第一次尝试约 5 分钟后被打断，没算进去。
- 耗时只代表那一台机器、那一次运行，不能当成工具速度对比。
相关阅读
- 用 Opus 5.5 做视频：从零到成片
- 从提示词到成片：脚本、分镜、渲染与字幕
- 场景模板
- 配合 Opus 5.5 做视频的开源 Skill 与工具
- Opus 5.5 做视频：报错处理与省用量
- Opus 做视频教程：环境搭建
- 热门开源项目逐个教程
参考来源（官方）
- Remotion · Claude Code：https://www.remotion.dev/docs/ai/claude-code（查阅日期：2026-10-25）
- Remotion · License：https://www.remotion.dev/license（查阅日期：2026-10-25）
- HyperFrames · GitHub：https://github.com/heygen-com/hyperframes（查阅日期：2026-10-25）