我让AI写了个网页，它自动变成了视频

文章信息

预计字数：3200 字阅读时间：10 分钟难度等级：⭐⭐（小白友好，有 AI 工具基础即可）

核心价值：AI Agent + HyperFrames 这套组合，已经把视频制作的门槛压到了"会说话"的程度

昨天下午，我干了一件事。

让 AI 写了一段 HTML 代码------就是那种最普通的网页代码。

然后，这段代码自动渲染成了一段 6 秒的 1080p 视频。

没有剪辑软件。没有 PR。没有剪映。

就一段代码，变成了视频。

说实话，我当时盯着那个 MP4 文件看了好久。

测试需要，直接用文本内容来做了案例：

一、这件事的背景

之前做视频，我用的是 Remotion。

一个用 React 写视频的框架，技术圈小有名气。

但说实话，门槛不低------你得会 React、会 JSX、会打包工具。

一个视频项目从零跑起来，光环境配置就够喝一壶的。

后来 HeyGen（没错，就是那个做 AI 数字人的公司）开源了一个东西。

叫 HyperFrames。

⭐ 13.7k Stars，Apache 2.0 开源协议，免费商用。

它的口号很直接：

🐵Write HTML. Render video. Built for agents.

写 HTML。渲染视频。为 AI Agent 而生。

我试了一下。

好用到我直接把 Remotion 弃了。

二、HyperFrames 到底是什么？

🎁

🎨 HyperFrames = 用写网页的方式做视频

你想想看这个逻辑：

AI Agent 天生就会写 HTML。

那为什么不直接让 AI 写 HTML，然后把这个 HTML 变成视频呢？

HyperFrames 就是干了这么一件事。

你写一个普通的 HTML 文件，加上一些 data- 属性标注时间轴，然后一行命令：

复制代码

npx hyperframes render

啪。

一段完全确定的、可复现的 MP4 视频就出来了。

同样的代码，跑一百次，出来的视频一模一样。

工作流程：

三、我是怎么玩的？

说实话，过程简单到有点不好意思讲。

第一步：装一个命令行工具。

复制代码

npx hyperframes init my-video

第二步：写 HTML。

不是从零写------是让 AI 写。我只说了句：

"帮我做一个 HyperFrames 项目，6 秒的品牌片，有渐入标题、渐变背景、粒子光晕效果。"

AI 直接生成了一个 index.html。

🎯

注意不是让你写，而是直接让你的 Agent 写

大概长这样：

复制代码

<div id="root"
  data-composition-id="main"
  data-start="0"
  data-duration="6"
  data-width="1920"
  data-height="1080">
  <!-- 你的视频内容就写在这里 -->
</div>

就这么简单。

data-start="0" 表示从第 0 秒开始。
data-duration="6" 表示持续 6 秒。
data-width="1920" 表示 1080p 分辨率。

所有视频元素就是普通的 HTML 标签 + 时间轴属性。

🎯

而我们要做的就是交代好：时长+分辨率+《你的内容》

第三步：渲染。

复制代码

npx hyperframes render

等了大概 30 秒。

一个 469KB 的 MP4 文件就躺在文件夹里了。

30fps，1920×1080，6 秒。

112

四、为什么比 Remotion 好？

这不是踩一捧一。Remotion 是个好产品，我在生产环境用过。

但有一个关键区别：

|----------------|------------------|--------------|
| 维度 | HyperFrames | Remotion |
| 写什么 | HTML + CSS | React + JSX |
| 需要构建吗 | 不需要 | 需要 |
| AI Agent 能直接写吗 | ✅ 能 | ❌ 得会 React |
| 开源协议 | Apache 2.0（免费商用） | 自定义协议（商用要付费） |

你看到关键点了吗？

AI Agent 已经会写 HTML 了。

它不需要学一个新框架。

HyperFrames 的聪明之处在于------它没有发明新语言，而是用了 AI 天生就会的东西。

不教AI新把戏

HyperFrames 的核心洞察是
不教 AI 新语言，而是让 AI 用它最擅长的事（写 HTML），去完成一个新任务（做视频）。

背后的思考：

🎯这其实是工具设计的一个重要哲学：降低工具的认知负荷，而不是增加功能。

AI Agent 的"母语"就是 HTML，HyperFrames 恰好用对了语言。

五、更狠的是它内置的 Skills 系统

HyperFrames 不光是个工具。

它有遵循 Skills 协议，并且有内置的Skills，相当于给提前 AI Agent 发了一套"操作手册"。

12 个技能包：

怎么写视频合成
怎么加字幕和配音
怎么做动画（GSAP / CSS / Lottie / Three.js 随你选）
怎么把一个网页直接转成视频
甚至------怎么从 Remotion 迁移过来

一行命令装上：

复制代码

npx skills add heygen-com/hyperframes

装完之后，Claude Code、Cursor、Gemini CLI、Codex 全都能用。

你在 Claude Code 里输入：

"/hyperframes，帮我做一个 10 秒的产品介绍视频，带动效标题。"

它直接给你生成一个完整的项目。

2221

然后你还能迭代：

"加入音乐，我已经生成好，你直接加入。"

像跟视频剪辑师对话一样。

2223

六、对普通人意味着什么？

你可能不会写代码。

但这件事的重点不是代码。

重点是------AI Agent + HyperFrames 这套组合，已经把视频制作的门槛压到了"会说话"的程度。

你会描述你想要的视频，AI 就能帮你做出来。

不会描述？没关系，HyperFrames 官方提供了 50 多个预制模板：

复制代码

npx hyperframes add data-chart      # 动态数据图表
npx hyperframes add instagram-follow # 社交媒体关注动画
npx hyperframes add flash-through-white # 电影级转场

改改文字和颜色，直接渲染。

七、我的真实体感

之前用 Remotion 做一个 10 秒的品牌片：

|------|----------|------------------|
| 环节 | Remotion | HyperFrames + AI |
| 配环境 | 2 小时 | 0（npx直接用） |
| 写代码 | 3 小时 | 30秒（AI生成） |
| 调试打包 | 1 小时 | 0（无需构建） |
| 渲染 | 10 分钟 | 30 秒 |
| 总计 | 6 小时 | 不到 10 分钟 |

坦率的讲，这个效率提升不是线性的。

是数量级的。

🚀 效率提升：从6小时到10分钟丨效率对比：提升幅度：36倍

更重要的是：

6小时方案意味着"只有程序员和剪辑师能做"，10分钟方案意味着"所有人都能做"。
这不只是效率问题，是人群覆盖问题。

八、我的思考，AI 对视频制作行业的冲击

写到这儿，我想聊聊更深一层的东西。

8.1 谁会被替代？

先说一个既往的事实：

那些靠"把PR打开、把素材拖进去、加个转场、导出"吃饭的人，这个饭碗快保不住了。

不是因为 AI 做得比他们好。

是因为 AI 做得比他们快，而且够用。

你看，HyperFrames 现在可能还做不了电影级特效

但你要一个 10 秒的产品宣传视频？一个数据图表动画？一个社交媒体转场？

AI 做的，已经超过80%初级剪辑师的水平了。

但是

这也意味着另一件事：

8.2 谁不会被替代？

编导不会被替代。

因为编导的核心能力不是"会用PR"，而是：

讲故事的能力------知道什么内容能打动人
审美判断------知道什么是好看的、什么是对的
节奏感------知道什么时候该快、什么时候该慢

HyperFrames 解决的是"怎么把视频做出来"。

它解决不了"做什么视频"。

这就是为什么我说------未来最值钱的技能不是技术操作，而是审美和判断力。

8.3 对普通人的真正意义

过去你想做一个视频，有三个门槛：

|------|-----------------|-------|
| 门槛 | 过去 | 现在 |
| 工具门槛 | 学PR学AE，至少3个月 | 会说话就行 |
| 成本门槛 | 软件订阅+素材购买，一年几千块 | 开源免费 |
| 时间门槛 | 一个简单视频至少半天 | 10分钟 |

三个门槛同时被干掉了。

这意味着什么？

意味着一个开奶茶店的小老板，可以用10分钟做一个新品推广视频发朋友圈。

意味着一个做知识付费的讲师，可以用10分钟做一个课程预告片。

意味着一个普通家长，可以用10分钟给孩子生日做一个回忆视频。

视频制作这件事，第一次真正 democratize（民主化）了。

✨ 灵魂拷问：门槛归零之后，拼什么？

当所有人都能做出视频的时候，区分"好"和"烂"的标准就不再是"能不能做"，而是"有没有品味和审美"。
这才是真正值得我们思考的问题。

九、如何用 AI 提升自己的审美和内涵？

这是我觉得最重要的一部分。

很多人看到 AI 工具的第一反应是：太好了，我不用学设计了。

大错特错。

工具的门槛在降低，但审美的门槛从来不会降低。

相反------当所有人都能做视频的时候，审美反而成了最大的竞争力。

那怎么提升？我的建议是：

9.1 用 AI 当"审美教练"

具体做法：

第一步：让 AI 生成一个视频/图片/设计
第二步：问自己------"好看吗？哪里不好看？"
第三步：如果你说不出来哪里不好看，说明你的审美还没建立起来
第四步：让 AI 分析它的作品，告诉你它用了什么设计原则

比如你用 GPT-Image-2 生成了一张 Logo，你问它：

"这个 Logo 用了什么配色原则？排版上遵循了什么对齐方式？为什么字体选这个而不是宋体？"

它会告诉你。

然后你就学到了。

你不用去报一个 5000 块的设计课。

你只需要每次用 AI 做东西的时候，多问一句"为什么"。

9.2 建立自己的"审美参考库"

我有一个习惯：

看到好看的视频、海报、排版，截图保存。

分类整理------动画类、配色类、排版类、字体类。

时间长了，你脑子里自然会有一个"审美数据库"。

下次你让 AI 做东西的时候，

你不是说"帮我做一个好看的"。
你得说：

"我要一个类似 Apple 发布会风格的渐入动画，配色参考 Tokyo 2020 奥运会的渐变色系，字体用类似无衬线体的现代感字体。"

描述越具体，AI 输出越惊艳.

而这个"具体"的能力，就是审美。

9.3 理解底层原理，而不是只学操作

AI 可以帮你做视频。

但 AI 帮不了你理解为什么这个视频好看。

几个值得去了解的东西：

色彩理论：为什么蓝橙对比是电影最爱？为什么高端品牌偏爱黑白灰？
构图法则：三分法、黄金螺旋、留白------不是教条，是前人总结的视觉规律
节奏设计：为什么短视频前3秒必须是高能？为什么纪录片喜欢慢镜头？
字体心理学：为什么科技公司爱用无衬线体？为什么文艺品牌偏爱手写体？

这些东西，AI 可以帮你查，可以帮你学。

但你得有这个意识去学。

⚠️ 风险提示：AI不会自动提升你的审美

👍AI 是放大器，不是替代品。工具越强大，审美越重要。这就是为什么在这个时代，内涵和品味是最抗AI的能力。

9.4 一个实操建议

从今天开始，每天花10分钟做一件事：

打开抖音/小红书/B站，刷到你觉得"好看"的内容，截图，然后用AI分析它为什么好看。

坚持一个月。

你会发现自己"看东西的眼光"完全不一样了。

这个变化，会反过来让你的 AI 输出质量产生质的飞跃。

最后说一句

HyperFrames 的 GitHub 上写着一行字：

Built for agents.

为 AI Agent 而生。

这句话背后藏着一个更大的趋势

未来的工具，不是给人用的。

是给 AI 用的。

而人只需要做一件事：

说出来你想要什么。

但比"说出来"更重要的，是知道什么才是好的。

出来混，最重要的是出来。

先说出来，再说做好。

先建立审美，再做得出好东西。

#HyperFrames #AI视频 #Agent 趋势 #工具选型 #审美提升

作者：大象