HyperFrames + Remotion + Git 三件套实现 AI 全自动视频剪辑,从 HTML 到 React 组件,附完整安装命令和踩坑记录。


HyperFrames + Remotion + Git 三件套实现 AI 全自动视频剪辑,从 HTML 到 React 组件,附完整安装命令和踩坑记录。
用 AI 做视频,技术已经不是瓶颈了。HyperFrames 负责"快速批量出内容",Remotion 负责"精品打磨",Git 负责"全程备份兜底"。三个工具组合在一起,可以做到 AI 全自动剪辑:口播完直接扔给 Codex,字幕、剪气口、生成画面、拼接、导出全自动完成。
| 工具 | 定位 | 技术栈 | 适合场景 |
|---|---|---|---|
| HyperFrames | 入门,快速出片 | HTML + GSAP | 批量生产、快速验证 |
| Remotion | 主流,精细动画 | React 组件 | 需要丰富动画效果的内容 |
| Git | 兜底,代码备份 | 版本控制 | 所有场景必备 |
工作流:用 HyperFrames 快速验证视觉效果,满意了再用 Remotion 精细打磨,全程 Git 保驾护航。
HyperFrames 是 HeyGen 开源的视频渲染框架(github.com/heygen-com/hyperframes),原理是用 HTML + GSAP 写动画,AI 生成代码后直接渲染成 MP4,商业使用完全免费。
把以下 prompt 发给你的 AI Agent:
帮我完成 HyperFrames 的环境安装和项目初始化。
步骤:
1. 检查 Node.js 版本,低于 22 则升级到最新 LTS
2. 安装 FFmpeg
3. 安装 HyperFrames Skill:npx skills add heygen-com/hyperframes
空格选中要装的技能包,Enter 确认,安装范围选 Project
4. 创建项目:npx hyperframes init my-video --example blank
5. cd my-video,启动预览:npx hyperframes preview
每一步遇到报错自行排查处理,不需要问我。
全部完成后,告诉我每步的执行结果、预览地址,以及我下一步该做什么。
1. 检查是否已安装 wechat-article-parser 这个 skill,没有就用 clawhub install wechat-article-parser 安装
2. 安装好后,解析这篇文章:[粘贴你的公众号文章链接]
3. 提取标题和核心观点,然后用 HyperFrames 帮我制作一条 30 秒竖屏视频(3:4)
视频要求:
- 深色背景(#1A1A2E),白色文字
- 文字从下方滑入,每条停留 3 秒,GSAP 动画
- 底部进度条随时间推进
- 结尾显示公众号名称
输出 index.html,完成后直接运行渲染命令:
npx hyperframes render --output final.mp4提示:想放头像或配图,先在项目里建一个固定的素材目录(比如
my-video/assets/),把图片存进去再生成。
Remotion 是"视频即代码"框架,每一帧用 React 组件描述,渲染成 MP4。效果比 HyperFrames 精细,但 AI 写 React 比写 HTML 难度更高,通常要迭代 2-3 轮。
帮我完成 Remotion 的环境安装和项目初始化。
步骤:
1. 安装 Bun
Windows PowerShell 管理员模式:powershell -c "irm bun.sh/install.ps1 | iex"
macOS / Linux:curl -fsSL https://bun.sh/install | bash
2. 创建项目:bun create video,模板选 Blank 或 Hello World
3. bun install
4. bun run dev
遇到报错自行处理,完成后告诉我浏览器打开的地址。问题 1:装完 Bun 后命令不识别(Windows)。解决:让 Agent 执行 ls $env:USERPROFILE\.bun\bin,找到路径后配置进系统环境变量。
问题 2:bun run dev 报端口冲突。Windows Hyper-V 默认保留了 2929-3228 端口,换一个范围外的端口:$env:PORT=8080; bun run dev。
帮我用 Remotion 制作一个文章宣传视频。
先抓取这个公众号链接的内容:[填入链接]
提取标题和核心观点,先输出时间轴规划,我确认后再写组件代码。
规格:30秒,30fps,1080x1920 竖屏
动画:开场标题从中心放大,观点依次从右侧滑入,关键数字放大高亮,结尾品牌署名淡入
配色:深蓝背景(#1A1A2E),白色文字
渲染命令用 bun run render提示:不要让 AI 跳过"先出时间轴"这步直接写代码,否则节奏大概率全错,改起来比重做还费事。
AI 写代码做视频,必须用 Git 做版本管理,防止改崩了无法回滚。
帮我在当前项目目录初始化 Git,并全程管理版本。
1. 初始化:git init && git add . && git commit -m "init: 项目初始结构"
2. 之后每次我说"这版可以,帮我保存",自动 git add . && git commit
3. 我说"改崩了,回到上一个版本",先 git log --oneline 给我看历史,我指定后用 git reset --hard 回滚关键习惯:每跑通一个小模块就 commit 一次,不要攒着。攒到最后一起提交,改崩了只能回到很久之前的版本。
以前用代码做视频,卡在技术上。现在技术不是问题了,真正的瓶颈是审美和内容 -- 这件事 AI 替不了你。

OpenSquilla 推出 Meta Skill 功能,一个 Skill 内嵌多个子 Skill,能端到端打通长程工作流,还能省 60-80% 的 Token 成本

MiniMax M3 是国内首个同时支持 1M 上下文、原生多模态和 Coding 的开源模型,SWE-Bench Pro 达 59%,实测表现亮眼。

详解 Claude Code /workflows 功能的使用场景与实操技巧,教你用多 Agent 并行处理代码库清扫和难题调研。