Appearance
HyperFrames不是又一个AI玩具，它是HeyGen从「卖数字人工具」到「卖视频生产力标准」的关键落子，也是AI从「能力展示」走向「价值交付」的典型样本。
一句话结论
HyperFrames 核心逻辑：你写 HTML + CSS + JS，它帮你渲染成 MP4 视频。
更狠的是它天生给 Agent 用，Claude Code、Cursor、Codex 装个技能包，你直接用自然语言说「做个10秒产品介绍视频，深色背景，标题淡入」，AI 直接生成代码出片，连预览带渲染半小时搞定。
以前用 AE 折腾一下午的活，现在几分钟就完。
实战两周踩坑记录
用 Cursor 跑过 12 个 HyperFrames 项目，从公众号片头到徐霞客水墨短视频都试过。
坑1：第一次用就翻车
问题：做 9:16 的小红书视频忘了说比例，默认出了 16:9 的，黑边占了三分之一。
教训：提需求第一句必说「9:16 竖屏，1080x1920」。
坑2：字体是个坑
问题：做古风视频用了 PingFang SC，渲染时报 warning 说不在确定性字体映射里，默认 fallback 到 Inter，看着特别违和。
解决：按文档加了 @font-face 引 ZCOOL 小薇字体，才搞定。
坑3：改起来比 AE 快 10 倍
案例：让 Claude Code 生成了个产品介绍视频，标题动画直接飞到屏幕外面去了，以为翻车了。结果跟它说「标题 Y 轴偏移减 20，动画时长加 0.5 秒」，30 秒就改好了。
换 AE 你得重新调关键帧，半小时起步。
坑4：水墨视频真能打
案例：做了 72 秒的徐霞客游庐山短视频，6 个场景，深色背景 + 金色高亮，山体用 clip-path 做剪影。
跟 Claude Code 说了需求，20 分钟出了第一版，调了两次字体和动画节奏就用了，放公众号后台播放量比平时高 30%。
坑5：不适合真人内容
问题：试过丢一段实拍视频进去，想加点字幕和转场，结果 HyperFrames 处理不了实拍内容，它的强项是纯视觉内容，不擅长视频剪辑类操作。
结论：真人口播、纪录片、实拍内容不适合用它。
适合 vs 不适合
| 适合 | 不适合 |
|---|---|
| 产品介绍视频 | 真人口播 |
| 公众号片头 | 纪录片 |
| 数据可视化动画 | 视频剪辑 |
| 古风/水墨风格 | 实拍内容混剪 |
| Logo演绎 | 多素材组合 |
使用建议
| 场景 | 建议 |
|---|---|
| 竖屏视频 | 第一句就说「9:16竖屏，1080x1920」 |
| 中文字体 | 一定要加 @font-face 引入字体 |
| 修改迭代 | 直接描述改动，Agent 帮你调参数 |
| 复杂场景 | 先分段做，再合成 |
和其他工具对比
| 工具 | 核心能力 | 门槛 | 成本 |
|---|---|---|---|
| HyperFrames | HTML→视频 | 中 | 开源免费 |
| AE | 专业视频 | 高 | 订阅制 |
| 剪映 | 模板化视频 | 低 | 免费/会员 |
| Sora | AI生视频 | 低 | 付费 |
核心价值
HyperFrames 的价值不是「又一个 AI 玩具」，而是把视频制作的生产力工具标准化了。
- HeyGen 的野心：从卖数字人工具 → 卖视频生产力标准
- AI 的进化：从能力展示 → 价值交付
- 开发者的机会：用 HTML/CSS/JS 的标准做视频，门槛大幅降低
总结
一句话：HyperFrames 让「写代码的人也能做视频」，但要做好还是得懂点设计。
避坑清单：
- 竖屏视频记得第一句说比例
- 中文字体一定要引入 @font-face
- 修改比 AE 快 10 倍，大胆迭代
- 真人实拍内容不适合用它
- 适合产品介绍、数据可视化、古风水墨风格
