codex + Hyperframes 做宣传视频

本人是纯剪辑小白，但是我最近用 AI + HyperFrames 制作了一个产品宣传片，最大的体会是以后可以 vibe 视频了
在这里分析总结一下我自己使用下来目前的一套方法，我也是第一次使用，然后被效果惊艳到了，希望各位佬友一起来分享补充；

主流程：> 产品原型 → Brief → 脚本与镜头表 → 静态关键帧 → 视频素材与动效 → 声音与最终 QA

先说结论：不要一开始就做视频

很多 AI 视频失败，不是模型不够强，而是一开始的方法错了。

常见反例是：

• 只写一句 prompt 就期待 AI 生成完整宣传片；

• 还没有产品原型，就开始做镜头；

• 没有分镜，直接生成视频；

• UI、文字、Logo 交给视频模型自由发挥；

• 一次性让 AI 大改整条片子；

• 最后才发现节奏、声音、字幕和 CTA 全都对不上。

更稳的方式是：先控制结构，再控制画面，最后控制动效和声音。

所以在进入视频制作前，最好先准备这些材料：

第一步：写宣传片 Brief

Brief 是整支片子的方向盘。

帮我做一个很高级的 AI 产品宣传片。

这类描述太空泛，AI 只能凭感觉补全，结果通常会变成一支「科技感很强但没有重点」的视频。

第二步：生成脚本和镜头表

第三步：先做静态关键帧，不要直接生成视频

视频模型很擅长生成氛围、运动、镜头感和光影，但它并不擅长稳定生成精确 UI。尤其是产品名、按钮文案、价格、表格、Logo、菜单栏这些细节，很容易变形或漂移。

我的做法是：

1. 用 AI 辅助生成构图和视觉方向；

2. HTML 做出关键画面；

3. 把真实 UI 做抽象化；

4. 确认每个镜头的静态关键帧；

5. 再进入动效和视频阶段。

第四步：获取与生成视频素材

素材来源一般有三类。

1. 实机录屏

实机录屏适合展示真实产品流程，比如：

• 用户操作；

• 产品生成结果；

• 用户收到完成通知。

录屏的好处是真实，后期可以直接拼接，但问题是信息密度太高。真实产品界面往往不适合直接放进宣传片，所以通常需要后期裁切、放大、遮罩、加高亮、加说明文字。

2. 代码动效

UI、文字、卡片、按钮、窗口、进度条、图表、鼠标轨迹这些内容，更适合用代码生成。

这也是 HyperFrames 这类工具适合 AI 产品宣传片的原因：它可以让你用 HTML、CSS、JS 来制作视频，AI agent 也更容易理解和修改。

我的经验是：

对 SaaS UI 宣传片来说，HyperFrames + skills 往往比直接用传统视频模型更可控。

3. AI 图生视频 / 文生视频

AI 视频模型适合做这些内容：

• 背景氛围；
• 抽象空间；
• 过渡镜头；
• 光影和景深；
• 概念化画面；
• 非精确 UI 的视觉补充。

但它不适合直接生成带很多文字的精确界面，画面会不一致。

第五步：做动效，而不是只做转场

可以重点打磨这些动效：

• 打字机效果：模拟用户输入 prompt；

• 鼠标轨迹：不要瞬移，要有自然缓动；

• 窗口动效：弹出、缩放、滑入、悬浮；

• 任务拆解：任务列表逐项展开；

• 进度反馈：loading、progress bar、checkmark、toast notification；

• 时间压缩：用 “After 1 hour”“After 4 hours” 表现 AI 持续工作；

• 光效与层次：轻微 glow、blur、shadow、parallax。

这里有一个非常实用的协作原则：

不要让 AI 频繁大改整条视频，而是按 scene 单独优化。

例如，不要说：

帮我把这个视频做得更高级。

这句话太抽象，AI 不知道应该改构图、节奏、颜色、动效还是音效。

更好的反馈是：

只修改 Scene 3：

1. 第 8 秒窗口从右侧滑入，进入时间缩短 20%；

2. 鼠标移动加 ease-out；

3. 任务卡片出现时增加 8 帧延迟；

4. 背景 blur 减少一半；

5. 其他 scene 不要改。

越具体，AI 越稳定。

第六步：声音、剪辑合成与最终 QA

声音不是最后随便加一下。

一支产品宣传片通常由三层声音组成：

1. 旁白：低速、克制、可信，不要短视频腔；

2. 背景音乐：极简电子、轻科技、低频稳定；

3. 音效：鼠标点击、窗口打开、通知声、whoosh、typing sound。

画面稳定后，再做正式旁白、正式配乐和混音。

我的经验总结

最后总结一些踩坑后的经验。

1. HyperFrames + skills 目前用下来效果比 Remotion 好一些

2. 先有 UI 原型，再做视频

不管你后面用代码、AI 视频、剪辑软件还是图生视频，都应该先有原型。

只要有一个明确的视觉锚点，后面就不容易漂移。

3. AI 协作有“抽卡”阶段，但不能在结构层抽卡

AI 生成确实有随机性，需要多次尝试。

但随机性应该发生在这些地方：

• 背景氛围；
• 光效；
• 转场；
• 局部动效；
• 镜头质感；
• 视觉风格探索。

不应该发生在这些地方：

• 产品定位；
• 核心卖点；
• UI 文案；
• Logo；
• CTA；
• 镜头结构；
• 时间轴。

结构必须稳定，风格可以探索。

4. AI 看图强，看视频细节仍然有限

AI 对单张图的理解通常不错，但分析视频时，经常是通过抽取关键帧来理解内容。

这意味着它容易漏掉：

• easing；
• timing；
• 两个动作之间的间隔；
• 转场速度；
• 鼠标轨迹；
• 音画同步；
• 镜头节奏。

所以如果你想让 AI 参考一个视频，不要只丢视频链接。最好额外提供：

• 关键帧截图；
• 时间码说明；
• GIF；
• 人工写出的动作描述；
• 你真正想参考的部分。

5. 用代码制作视频时，要按 scene 修改

我的经验是，先让 AI 搭好整体结构，再一段一段优化。

不要频繁说：

重新做一下整个视频。

这会导致已经调好的部分被破坏。

更好的方式是：

只改 Scene 2，其他 scene 不要动。

6. 多给参考素材

• 参考代码；
• 参考图片；
• 参考视频；
• 参考音乐；
• 品牌指南；
• 字体；
• 色值；
• Logo；
• 产品截图；
• 竞品宣传片。

7. 不要所有内容都用代码做

代码很适合做确定性内容，但不适合所有镜头。

1 个帖子 - 1 位参与者

阅读完整话题