夜雨聆风我之前发过一条视频。
其实，也不止这条，还有好几条都是一样风格的——出镜讲话，左侧跟着一块动画演示，卡片滑入、文字出现、节奏跟着内容走
数据都很不错。。
最牛逼的是，我口播完，没有去剪辑，也没去处理字幕，直接扔给 Codex，100%AI 自己完成字幕、剪气口、生成画面、拼接，最后导出。。
非常省力气。
如果你也想实现同款效果，直接把今天这篇文章丢给你的 OpenClaw，让它涨涨姿势：从入门、主流到兜底，从安装到出片，命令和踩坑全程记录在这里。
在跑之前，先把三种姿势的关系看清楚。
01 三种姿势，之间有什么关系？
入门用 HyperFrames——AI 写 HTML，直接渲染成 MP4。门槛最低，适合快速批量出内容。
主流用 Remotion——AI 写 React 组件，每一帧都是代码，效果天花板更高。我视频号那条架构图动画，用的就是这个。
兜底用 Git——它不生成视频，但两条路都离不开它。Git相当于一个存档点，以免 AI 改崩了 ctrl+Z 也无法撤销，有了 Git 就可以做到全程备份，随时能回到上一个能跑的版本。
所以三个加在一起才完整，可以用HyperFrames 进行「快速验证」，Remotion 进行「精品打磨」，Git 则可以负责全程的「备份兜底」，才能出最后的MP4。
02 入门：HyperFrames —— HTML 直接出视频
HyperFrames 是 HeyGen 开源的视频渲染框架（详见Github项目： github.com/heygen-com/hyperframes），原理是用 HTML + GSAP 写动画，AI 代理生成代码后直接渲染成 MP4，而且商业使用完全免费无限制。
AI 写 HTML 的成功率比写 React 高，出错少，改起来也快，入门从这里开始。
把下面这段发给 OpenClaw，让它自己装HyperFrames ：
帮我完成 HyperFrames 的环境安装和项目初始化。步骤：1. 检查 Node.js 版本，低于 22 则升级到最新 LTS2. 安装 FFmpeg3. 安装 HyperFrames Skill：npx skills add heygen-com/hyperframes 空格选中要装的技能包，Enter 确认，安装范围选 Project4. 创建项目：npx hyperframes init my-video --example blank5. cd my-video，启动预览：npx hyperframes preview每一步遇到报错自行排查处理，不需要问我。全部完成后，告诉我每步的执行结果、预览地址，以及我下一步该做什么。跑完之后打开龙虾给你的 HyperFrames Studio 预览界面，可以看到有时间轴，支持实时预览。
如果你想直接把公众号文章做成视频，不用手动复制文案。先让 OpenClaw 装好公众号解析skill，再让它生成：
1. 检查是否已安装 wechat-article-parser 这个 skill，没有就用 clawhub install wechat-article-parser 安装2. 安装好后，解析这篇文章：[粘贴你的公众号文章链接]3. 提取标题和核心观点，然后用 HyperFrames（/hyperframes）帮我制作一条 30 秒竖屏视频（3:4）视频要求：- 深色背景（#1A1A2E），白色文字- 文字从下方滑入，每条停留 3 秒，GSAP 动画- 底部进度条随时间推进- 结尾显示公众号名称输出 index.html，完成后直接运行渲染命令：npx hyperframes render --output final.mp4输出渲染文件给我。想在视频里放头像或配图，上传图片要告诉 OpenClaw 在项目里建一个固定的素材目录（比如 my-video/assets/），把图片存进去再生成视频。目录固定了，后续执行时它都知道去哪找。
我们团队成员用这个框架跑了一个小demo，富有IP感的视频开头结尾就解决了。
动画节奏顺，能直接发。视觉层次比较简单，如果想画面更丰富，提前备好配图素材丢给 OpenClaw，还有很大优化空间。
03 主流：Remotion — React 渲染精细动画
Remotion 是「视频即代码」框架，每一帧用 React 组件描述，渲染成 MP4。
我视频号里主要动画用的就是这个，效果比 HyperFrames 精细，支持更复杂的动画结构。
以前分享的用AI 学习复杂逻辑的知识，我也是用这个来做形象的视频，降低理解门槛。
AI 写 React 比写 HTML 难度更高，通常要迭代 2-3 轮，属于正常现象。
Windows需要 Node.js 和 Bun，把下面这段发给 OpenClaw：
帮我完成 Remotion 的环境安装和项目初始化。步骤：1. 安装 Bun Windows PowerShell 管理员模式：powershell -c "irm bun.sh/install.ps1 | iex" macOS / Linux：curl -fsSL https://bun.sh/install | bash2. 创建项目：bun create video，模板选 Blank 或 Hello World3. bun install4. bun run dev遇到报错自行处理，完成后告诉我浏览器打开的地址。这里我遇到两个踩坑点：
一是装完 Bun 之后命令不识别，提示「无法将 bun 项识别为 cmdlet」。把这段发给 OpenClaw：ls $env:USERPROFILE\.bun\bin，让它找到路径帮你配置进系统环境变量，重启 PowerShell 生效。
二是bun run dev 报端口冲突，起不来。Windows Hyper-V 默认保留了 2929-3228 的端口，Remotion 跑 3000-3100 全被占了。换一个这个范围之外的端口就能解决，比如 $env:PORT=8080; bun run dev。
项目起来之后，把下面这段发给 OpenClaw：
帮我用 Remotion 制作一个文章宣传视频。先抓取这个公众号链接的内容：[填入链接]提取标题和核心观点，先输出时间轴规划，我确认后再写组件代码。规格：30秒，30fps，1080×1920竖屏动画：开场标题从中心放大，观点依次从右侧滑入，关键数字放大高亮，结尾品牌署名淡入配色：深蓝背景（#1A1A2E），白色文字渲染命令用 bun run render记住不要让龙虾直接写代码，跳过「先出时间轴」这步，节奏大概率全错，改起来比重做还费事。
我们简单的跑了一个30s的demo
可以看到 Remotion 带来的信息层级丰富很多，右侧再插入真人讲解，就可以独立成片了。另外提醒一下：Remotion 做复杂动画 token 消耗大，做之前还得估一下用量。
04 兜底：Git — 全程管理代码备份
Git 是开发者管理代码版本的工具，记录每一次改动历史，随时可以回滚到任意一个节点。用 AI 写代码做视频，必须用Git做兜底以防万一。
把下面这段发给 OpenClaw，让它初始化并全程接管：
帮我在当前项目目录初始化 Git，并全程管理版本。1. 初始化：git init && git add . && git commit -m "init: 项目初始结构"2. 之后每次我说「这版可以，帮我保存」，自动 git add . && git commit3. 我说「改崩了，回到上一个版本」，先 git log --oneline 给我看历史，我指定后用 git reset --hard 回滚现在先完成初始化，告诉我结果。
commit 要养成节奏，每跑通一个小模块就存一次，不要攒着。攒到最后一起提交，改崩了只能回到很久之前，中间的工作全丢了。直接告诉 OpenClaw「这版可以，帮我保存」，它自动处理，不用自己记命令。
不熟悉命令行的，也可以尝试 VSCode 的这个插件 Git Graph，图形界面看节点和回滚，更直观。
05 AI做视频，完整流程是这样的
第一步：先写脚本。 定好每一页展示什么、文案是什么。不要一条龙直接让 AI 做，先把大纲方向定清楚再往下走。
第二步：素材备好放进固定目录。 截图、图标、头像等，全部提前放进固定的目录，比如 public（Remotion）或 assets（HyperFrames）目录，方便后续执行。
第三步：HTML 分镜确认视觉风格。 用 HyperFrames 快速跑一版 HTML，把背景色、字体层级、强调色定下来。改 HTML 比等 Remotion 渲染完快得多，满意了再进下一步。
第四步：时间轴规划确认。 让 OpenClaw 先输出时间轴，每段几秒、出现什么内容，人工确认没问题再让它写 React 组件。
第五步：组件开发 + Git 分步 commit。与AI约定提交节奏，比如每跑通一个模块存一次。AI 写 React 迭代 2-3 轮是正常的，有 Git 备份不怕崩。
把这份流程发给你的龙虾，让它记住，后续每次帮你做视频都会按这个顺序推进。
以前用代码做视频，卡在技术上。现在技术不是问题了。
代码这关交给任意一个 AI 工具都能过，更聪明的模型还能完成得更好。快速批量出内容用 HyperFrames，想做更酷炫的动画上 Remotion，对于做自媒体的普通人日常生产够用。
所以真正的瓶颈是审美，是内容。
最后那条视频值不值得发，取决于你对画面的判断，这件事 AI 替不了你。
