← 返回学习中心 · 图文、视频与演示OiOi Academy
AI绘画视频3D · 05

Codex + HyperFrames:写代码做视频,1 小时剪辑自由

@Saccc_c 实战:HeyGen 开源的 HyperFrames + Codex,基础剪辑动画 1 小时搞定,不用打开剪辑软件。

原作者 @Saccc_c 来源 X 长文 发布 2026-05-04
🧭

开篇:这课解决什么问题

以前做视频:找素材、学剪辑、配音乐,一套下来成本极高。现在 @Saccc_c 的路线是——不用打开任何剪辑软件,直接写代码生成视频,基础的剪辑和动画 1 小时搞定。

组合是 Codex + HyperFrames:HyperFrames 是 HeyGen 开源的代码驱动视频框架;Codex 是 T0 级别的写代码 Agent。你描述画面,Codex 写代码,HyperFrames 渲染成片。

记住:一句话结论:写代码是 AI 最擅长的事;HyperFrames 直接用 HTML 写,天然为 Agent 设计——这套组合就是为视频创作而生的。
🧩

HyperFrames 是什么:为什么是它

以下来自 @Saccc_c。HyperFrames(@HeyGen 开源)是一个代码驱动的视频制作框架:不用打开剪辑软件,直接写代码就能生成视频。

为什么配合 Codex 特别合适?两个原因:

  • 写代码是 AI Agent 最擅长的事,Codex 又是目前 T0 级别的超级工具。你只管描述想要的画面,代码交给它。
  • HyperFrames 直接用 HTML 编写,天然为 Agent 设计。AI 写 HTML 比写任何其他格式都顺,出错少、迭代快。
原文配图:Codex + HyperFrames 组合主视觉
原文配图:Codex + HyperFrames 组合主视觉
原文视频:iPhone 进化史开场动画(9 秒)
🎬 原文视频:iPhone 进化史开场动画(9 秒)(点击图片跳转原帖观看视频)
高中生类比
传统剪辑像"手工裁缝":一针一线自己缝;HyperFrames 像"自动织布机":你说出花纹,机器织出来。Codex 就是操作织布机的老师傅。
🔌

安装:两步进场

1. 安装 Codex 应用:下载地址 chatgpt.com/codex/。

2. 安装 HyperFrames 插件:进 Codex App → 左侧栏点 Plugins → 搜索 HyperFrames → 点"+"添加。

原文配了两张截图:左侧栏 Plugins 入口,以及搜索 HyperFrames 后点加号的界面。装完即可在 Codex 里直接调用 HyperFrames 功能。

原文配图:Codex App 插件页,搜索 HyperFrames 并添加
原文配图:Codex App 插件页,搜索 HyperFrames 并添加
💬

实战技巧 1:提示词七要素

一份好的提示词 = 把你脑中的画面翻译成文字。写清 7 件事:

  • 动画类型/视频类型:功能演示、数据可视化、发布会预告、社媒短片…
  • 时长和画幅:如 10 秒、9:16 抖音画幅。
  • 视频目标:一句话说明讲什么、让观众理解什么。
  • 视觉风格:Apple 风格、真实软件界面、极简科技感、电影感…
  • 关键元素:必须出现的文字、图标、产品、数据、人物、素材路径。
  • 动效要求:流式打字、淡入淡出、缩放转场、卡片展开、镜头推进…
  • 声音要求:配乐、打字声、点击声、旁白、音效同步…

作者做 iPhone 进化史开场用的 prompt 全文(重点看它细到什么程度):

用 [@HyperFrames] 做一个能说明 "Codex 调用 HyperFrames 生成视频" 的开场动画,
默认画幅,时间不超过 10s。
目标是展示"我在 Codex 里用 HyperFrames 生成视频"的过程。
画面从真实感的 Codex 深色聊天首页开始,中央是 "What should we work on?",
下方是大号输入框。输入框里从第一个字开始像真人打字一样流式输入:
"帮我用 HyperFrames by HeyGen 做一个 iPhone 历代机型的展示动画"
其中 "HyperFrames by HeyGen" 要像插件 mention/chip 一样显示,带小图标。
输入完成后点击发送,进入生成状态:画面中央出现 Codex 图标 × HyperFrames 图标,
下方显示 "GENERATING ...",图标轻微呼吸、点点闪烁,克制、有产品感。
生成完成后回到 Codex 聊天界面,出现视频预览卡片:Apple 风格深色产品预览,
中央 Apple 标志和播放按钮;点击播放后卡片丝滑放大到全屏,作为转场。
整体风格拟真、克制、高级;界面切换用平滑 fade in / fade out。
请使用 HyperFrames 实现,并确保可以稳定 render 成 MP4。
打字、点击和 generating 的声音要作为真实音轨接入,不能只用浏览器实时音效。

迭代心法:第一版大概率不完美,直接告诉 Agent 哪里要改;一次只改一处,改完及时预览;必要时截图圈出问题,比纯文字反馈高效得多。

避坑
一次改动不要贪多:一次说三处,AI 可能只改好一处、改坏两处。小步快跑,及时预览。
🖼️

实战技巧 2:用 $image-gen 生成关键素材

做视频最花时间的往往是准备视觉素材:产品图、封面图、关键帧。Codex 内置了 GPT Image 2,可直接在项目里生成素材,风格可控。

触发方法:输入 $image-gen。例如:

用 $image-gen 的 gpt image 2 帮我分别生成一个 iPhone 初代的正面图和背面图,
可以参考官方手机图片素材,尽可能模拟真实手机模样。
注意图片最好是透明的,好随意融入任意背景。
原文配图:用 $image-gen 生成的 iPhone 初代正背面图,透明底方便融入任意背景
原文配图:用 $image-gen 生成的 iPhone 初代正背面图,透明底方便融入任意背景

GPT-image-2 的通用提示词模板深讲见《第 11 课》《第 22 课》,本课不重复。

🎵

实战技巧 3:Suno 生成配乐

配乐用 Suno(suno.com):AI 配乐网站,每天有免费额度,一次生成给 2 个版本。

提示词写清风格和情绪,如"有节奏感、史诗感、不要人声"。作者实录:

现代电影预告片风格,开头用清脆利落的打击乐(响指、拍掌),
搭配简约钢琴旋律,逐步加入电子贝斯和层叠节奏。
副歌部分用合成器和弦层层推进,高潮段落加入完整管弦乐冲击和驱动感节奏。
整体质感高级、干净,类似苹果发布会的能量感,118 BPM,纯音乐无人声。

成果:苹果手机进化史完整视频,从素材、画面到配乐,1 小时搞定。

原文视频:Suno 配乐示例(14 秒)
🎬 原文视频:Suno 配乐示例(14 秒)(点击图片跳转原帖观看视频)
高中生类比
Suno 像"配乐外卖":说出"要什么口味"(风格情绪),几分钟送到,还一次给两份任选。每天还有免费额度,相当于"首单免费"。
💡

评论区问答 + 一句话收束

原帖评论区几个实在问题:

  • 成本高吗?——"一个 GPT 会员就搞定"。
  • 烧多少 token?——"没细看,全 Codex 自己操作"。
  • 效果不好?——有人实测"AI 不自己找素材、乱拼",作者回"提示词的问题?"(描述越具体越好)。
  • 未来拼什么?——"剪辑未来最主要的不是谁会用 AI,而是你的想象力,还有你的个人 IP"。
记住:作者收束:视频剪辑的门槛已被 AI 大幅拉低。Remotion 路线见《第 6 课》(同作者的电影票房榜案例),完整 studio 管线见《第 12 课》。
词

术语翻卡:点卡片看解释

HyperFrames
HyperFrames
HeyGen 开源的代码驱动视频框架:直接用 HTML 写代码,渲染成视频。
Codex
Codex
OpenAI 的 AI 编程 Agent,写代码、跑任务是它的强项。
$image-gen
$image-gen
Codex 里触发内置 GPT Image 2 生成图片素材的指令。
Suno
Suno
AI 音乐生成网站,输入风格描述即可生成配乐,每天有免费额度。
画幅
aspect ratio
视频画面的宽高比,如 9:16(抖音竖屏)、16:9(横屏)。
渲染
render
把代码/工程最终合成为 MP4 成片的过程。
测

自测一下:点问题展开参考答案

HeyGen 开源的代码驱动视频框架,不用剪辑软件、写代码生成视频。它直接用 HTML 编写,AI 写 HTML 最顺,出错少、迭代快。

进 Codex App → 左侧栏点 Plugins → 搜索 HyperFrames → 点"+"添加。

动画类型、时长画幅、视频目标、视觉风格、关键元素、动效要求、声音要求。

第一版不会完美,直接说哪里要改;一次只改一处,改完及时预览;截图圈出问题比纯文字高效。

用 Suno(suno.com)AI 生成配乐,每天免费额度,一次给 2 个版本;提示词写清风格情绪,如"118 BPM 纯音乐无人声"。