toolin.ai logo
toolin.ai
首页
AI工具
AI技能包
AI资讯
精选推文
AI提示词
提交AI工具提交
toolin.ai logo
toolin.ai

百万AI玩家的创作利器库,发现最佳AI工具组合,提升您的创作效率

AI工具1,204个
技能包11个
产品功能
  • AI工具
  • AI技能包
  • AI资讯
  • 精选推文
关于我们
  • 关于Toolin
  • 联系我们
  • 合作洽谈
  • 更新日志
关注我们
© 2025 toolin.ai. All rights reserved.
服务条款隐私政策

AI 全自动剪辑:三件套日更百条视频

2026/06/02
·toolin小编

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

AI 全自动剪辑:三件套日更百条视频
AI 全自动剪辑:三件套日更百条视频
2026/06/02

AI 全自动剪辑:三件套日更百条视频

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

三种工具的关系开始前的准备第一步:用 HyperFrames 快速出片安装和初始化把公众号文章变成视频第二步:用 Remotion 做精细动画安装和初始化常见踩坑生成视频第三步:用 Git 全程备份完整工作流总结
AI教程

用 AI 做视频,技术已经不是瓶颈了。HyperFrames 负责"快速批量出内容",Remotion 负责"精品打磨",Git 负责"全程备份兜底"。三个工具组合在一起,可以做到 AI 全自动剪辑:口播完直接扔给 Codex,字幕、剪气口、生成画面、拼接、导出全自动完成。

三种工具的关系

工具定位技术栈适合场景
HyperFrames入门,快速出片HTML + GSAP批量生产、快速验证
Remotion主流,精细动画React 组件需要丰富动画效果的内容
Git兜底,代码备份版本控制所有场景必备

工作流:用 HyperFrames 快速验证视觉效果,满意了再用 Remotion 精细打磨,全程 Git 保驾护航。

开始前的准备

  • 安装好 Node.js(建议 v22+)
  • 准备好一个 AI 编程 Agent(OpenClaw / Claude Code / Codex 均可)
  • 预计时间:环境配置 10-15 分钟,出片视复杂度而定

第一步:用 HyperFrames 快速出片

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

每一步遇到报错自行排查处理,不需要问我。
全部完成后,告诉我每步的执行结果、预览地址,以及我下一步该做什么。

HyperFrames Studio 预览界面

把公众号文章变成视频

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 做精细动画

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 跳过"先出时间轴"这步直接写代码,否则节奏大概率全错,改起来比重做还费事。

第三步:用 Git 全程备份

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 一次,不要攒着。攒到最后一起提交,改崩了只能回到很久之前的版本。

完整工作流总结

  1. 写脚本:定好每一页展示什么、文案是什么
  2. 备素材:截图、图标、头像全部放进固定目录
  3. HyperFrames 验证:快速跑一版 HTML,确认视觉风格
  4. 时间轴规划:让 AI 先输出时间轴,人工确认后再写组件
  5. Remotion 精磨:迭代 2-3 轮正常,Git 分步 commit

以前用代码做视频,卡在技术上。现在技术不是问题了,真正的瓶颈是审美和内容 -- 这件事 AI 替不了你。

所有文章

作者

avatar for toolin小编
toolin小编

分类

  • AI教程
三种工具的关系开始前的准备第一步:用 HyperFrames 快速出片安装和初始化把公众号文章变成视频第二步:用 Remotion 做精细动画安装和初始化常见踩坑生成视频第三步:用 Git 全程备份完整工作流总结

相关文章

OpenSquilla Meta Skill:把一整套工作流装进一个 Skill
AI产品

OpenSquilla Meta Skill:把一整套工作流装进一个 Skill

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

avatar for toolin小编
toolin小编
18小时前
MiniMax M3:国产开源模型的第一梯队
AI产品

MiniMax M3:国产开源模型的第一梯队

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

avatar for toolin小编
toolin小编
2天前
Claude Code /workflows 实战指南
AI教程

Claude Code /workflows 实战指南

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

avatar for toolin小编
toolin小编
2天前