如果给你一份产品资料,你有把握把它做成一支愿意转发的视频吗?你知道产品有什么价值,也能判断一段话好不好懂。可一旦开始制作,还要面对分镜、画面、动效、配音和音乐。这些操作,常常把一个好想法挡在成片之前。
在这里介绍一种新的制作方式:把资料和目标交给 Codex,持续用自然语言提出意见,让它调用工具、维护工程,完成从脚本到最终 MP4 的制作。
你只用负责把目标说清楚、选方向、给反馈;AI 接手每一轮具体制作。 “这里像在念功能清单”“让数据跟着旁白出现”“结尾音乐再托一下”,这些日常表达,都可以成为下一版视频的修改指令。
最终成片长 81.8 秒,包含 12 个主体分镜和一个品牌收尾。它经历了 15 个主要版本,变化涉及故事、视觉、节奏和声音。本文聚焦这条可复用的制作链路:AI 怎样把一个想法做出来,你又怎样通过判断和反馈,让它越来越接近心里的效果。
文末还提供可直接复用的 ai-video-director Skill,把创意规划、参考拆解、制作和审片整理成可执行流程。即使用更简单的 harness(Agent 运行环境)或能力较弱的模型,也有明确的步骤、检查点和降级路径可循,更容易复用这套方法、做出完整作品。
先看成片
一、先看全貌:从资料到成片,AI接住了哪些工作?
当我们把大模型接入日常研发流程后,很快发现一个的事实:
这次视频服务于采销提效方案的展示。制作输入包括业务资料、运行记录、产品画面和持续更新的反馈,需要将这些内容组织成一条观众能跟上的故事。制作过程也很像日常的产品发布:资料够多,表达尚未定型,画面与声音需要一起调整。
制作流程分为六个环节。前一环节的结果会成为下一环节的输入;审片有了新判断,又可以回到相应环节继续修改。

图 1 制作顺序概览
你在关键节点做判断,AI 维护各阶段的产物,实际制作中有多轮往返。
| 环节 | 交给 AI 的输入 | AI 负责什么 | 你只用确认什么 |
|---|---|---|---|
| 资料整理 | 受众、目标、资料与已有素材 | 素材清单、核心信息、待补问题 | 事实和重点 |
| 脚本设计 | 核心信息与叙事方向 | 逐镜标题、旁白、画面动作 | 故事是否讲得通 |
| 视觉定调 | 官方案例、品牌风格 | 构图和关键镜头预览 | 是否符合想要的观感 |
| 动效制作 | 已确认分镜与素材 | 可播放工程、关键帧、审片图 | 注意力和节奏 |
| 声音制作 | 真实文案、基本锁定的画面 | 分段旁白、音乐候选、混音 | 自然度和情绪 |
| 检查交付 | 审片意见与成片要求 | MP4、源工程、音频与版本记录 | 最终是否可发布 |
这条链路由同一个 Codex 任务持续推进。HyperFrames 负责将画面工程渲染为视频,Mossland 提供旁白,ACE Studio 提供候选音乐,FFmpeg 完成媒体处理与最终混音封装。你在对话中做判断,Codex 把判断落实到各个工具的输入、输出和工程文件里。
15 个版本,主要在改什么?
沿着留存的脚本、成片和制作记录,可以看到几个转折点:
- 早期版本:先把产品操作讲清楚。
- 从输入任务到结果展示,建立可播放的初版。
- V9—V10.1:重新组织故事。
- 从观众能感受到的问题切入,再接发现、核验和后续行动,保留真实运行材料。
- V11—V12.5:调整表达和交互。
- 修改配置方式、信息顺序、风险研判文案与各段停留时间。
- V13—V14 系列:展开后半段。
- 加入用户声音与市场分析,通过提问、点击和结果展开,让新信息自然接上前面的故事。
- V15:精修节奏与声音。
- 先收紧到 79.2 秒,再给完整片尾口号留出空间,落在 81.8 秒;继续完成配音、配乐和混音。
这是一条版本演进时间轴。版本号记录了主要阶段,其中还有局部修改和声音候选。理解这些变化,比单看“改了 15 版”更有帮助:有些修改在解决技术问题,有些是在探索怎样讲得更好。
二、方法一:让AI先把资料组织成故事
这一环节解决“讲什么、按什么顺序讲”,产物是一份可以直接进入制作的分镜。
原始资料通常按功能、模块或业务流程组织,观众却需要一个愿意继续看的理由。早期视频从任务输入开始,后来的版本把问题发生放到前面,再让产品沿着问题逐步行动。已有素材仍然可以用,故事的起点和连接方式发生了变化。


图 2 早期与后期分镜的叙事结构对比(重绘示意)
一条有效的审片意见是:“你能用一段话总结要讲的故事,以及分镜能否证明这个故事吗?”这让 AI 回到两个具体任务:把故事压缩成一段话,再逐镜检查有没有支撑这段话的画面。
你可以先交给 AI 三个问题:观众在开头看到什么问题?中间经历了什么变化?看完最应该记住什么?方向确定后,每个分镜同时写清四件事:标题、旁白、画面动作、预计时长。
例如,旁白说“把分散信息连起来”,画面就让卡片汇入同一张关系图;旁白说“需要进一步判断”,画面就从全景转向一个具体对象。每句话都找到视觉对应物,脚本才真正能拍、能做、能审。
这一阶段最值得提前做的检查,是把旁白单独读一遍。听完能复述出故事,再进入精细动画制作。你只用判断逻辑,AI 可以继续压缩长句、调整顺序,并盘点哪些旧素材能够复用。
三、方法二:给AI看得见的参考
这一环节解决“长什么样”,产物是可以复用到全片的构图、配色和运动规则。
“更有科技感”“更高级一些”,往往会带来很大的解释空间。找到一段喜欢的画面,再说明喜欢哪里,沟通就容易得多。
HeyGen HyperFrames 官方案例和组件库 Catalog提供了很好的起点。案例适合观察整支视频怎样推进;组件库适合寻找具体的字幕、图表、转场和卡片效果。你可以把页面交给 AI,让它先分析信息层级、进场顺序、停顿和镜头衔接,再应用到自己的内容。
最值得带走的是一种可执行的描述方式:
参考这个片段的卡片逐层展开和镜头推进。保留项目的品牌色,每屏只突出一个结论。先做一个关键镜头预览,确认之后再扩展全片。
这里把参考、保留项和交付要求放在一起。AI 有了具体目标,你也能在投入全片制作前,先判断视觉方向是否合适。
官网可以优先看三类内容:产品发布和 Website → Video,学习如何把界面变成故事;NYT Graph、Decision Tree 等示例,学习如何组织数据与流程;动态字体、Music to Video,学习文字和音乐怎样一起建立节奏。部分发布片还提供源工程,Agent 能进一步研究素材与分镜的组织方式。
四、方法三:用动效带着观众看
这一环节解决“观众这一秒看哪里”,产物是完整画面工程和可用于反馈的审片结果。
画面生动,首先需要明确的注意力顺序。把全部信息同时摆出来,观众要自己找重点;让问题、线索、结果依次出现,观众就能跟上推理。
后半段采用了一组直观的动作:先出现一个提问,留出短暂停顿,再让鼠标选择一个方向,最后展开用户声音。提问让观众参与,点击给出转折,滚动卡片和计数呈现信息规模。每个动作都有叙事任务。

图 3 同一段落的三个时刻:提问、选择与信息展开
复用这类方法时,可以先让 AI 检查四件事:
- 1. 出现有顺序。先建立对象,再展示对象之间的关系。
- 2. 强调有理由。高亮、计数、连线、扫描和鼠标点击,对应正在变化的信息。
- 3. 转场有延续。上一镜的重要对象、颜色或方向,引导观众进入下一镜。
- 4. 结论有

- 停顿。动作完成后留一点时间,让观众把信息读完。
制作过程中也出现过动效初始位置不对的问题。最终状态看起来正常,播放时却会先从错误位置出现。这类问题要看开始、中间和结束多个时刻,还要回看实际导出的 MP4。
时间线审片图就是为此服务的:让 AI 自动抽取关键帧,你从整体上看信息密度、构图重复和节奏;具体问题再回到短片段检查。

图 4 审片修改过程示意:将自然语言意见拆成具体修改与验证步骤
当你说“这几屏长得太像”时,AI 可以重新分配布局;当你说“趋势应该在原位置强调”时,它可以修正起始状态并导出关键帧。你无需先学会所有动画参数,也能清楚地推动修改。
五、方法四:让声音和音乐完成情绪
这一环节解决“听起来是否自然、是否愿意看完”,产物是与画面配合的旁白和最终混音。
5.1 配音:拿真实文案试听,按分镜生成
配音选型时,试听范围包括 ElevenLabs 的 Anson 等多个声音,最终选用 Mossland 的“旁白・笃行”。选择依据是这支片子的真实中文文案听感:长句是否自然、重音是否符合语义、中英文术语是否顺畅,以及是否适合克制的产品讲解。
试听建议覆盖三类句子:一句开场钩子、一句带数字或术语的信息密集句、一句片尾口号。官方短样片好听,进入这些句子后仍可能暴露停顿或发音问题。
确定声音后,按分镜拆分生成。某句话太长,就先让 AI 缩短;某个术语发音不对,就重做对应片段。标点也参与表演:问号帮助形成提问,句号留出停顿,口号单独生成则更容易保住完整落点。
5.2 音乐:给故事留空间,也给结尾一个落点
画面基本锁定后,以完整视频为参考,通过 ACE Studio 的 Video to Music 生成候选配乐。选曲主要听三个地方:开场是否建立气质,中段是否有推进,结尾是否托得住口号。方向确认后,再由 Codex 完成长度和混音调整。
这次有一个具体问题:选中的音乐长 77.44 秒,成片长 81.8 秒,片尾差了 4.36 秒。最终脚本截取原曲的一段主题,在片尾用 0.25 秒交叉淡化衔接,使主题重现与口号画面落点对齐。

图 5 片尾音乐的时长与衔接示意,色块对应混音脚本中的处理区间
声音清楚也需要具体处理。混音时,音乐在人声容易被遮挡的频段适度衰减,并在旁白出现时适度降低伴奏。故事转折和片尾再恢复音乐能量,既保住讲述,也保住情绪。
这里还有一个直接的减负点:画面锁定后,改音乐可以独立完成。最终封装复用已有视频流,接入新的混音,不需要重新生成全部画面。你只用对比试听,判断人声是否清楚、转折是否自然、结尾是否完整。
六、技术底座:从时间函数,到每一帧的像素
一句“让卡片依次展开”,最后怎样变成视频里的动作?继续往下看,会遇到动画引擎、浏览器渲染、GPU 着色器和媒体编码。这些能力能接在一起,才让 AI 有机会接手整段制作。
HyperFrames是 HeyGen 团队开源、采用 Apache 2.0 协议的 HTML 视频框架。理解它,可以先建立一个模型:Agent 编写可编辑的场景,动画引擎求出指定时刻的状态,渲染器把状态变成像素,编码器再把像素组织成视频。
81.8 秒原片主要采用 HTML / CSS / GSAP 与独立声音后期。下面先拆解原片已经用到的实现,再讨论 GLSL / Shader 与 Blender 的接入机制,并结合后续配套短片展示扩展效果。
6.1 动效的基本单位:随时间变化的属性
在源工程中,一张卡片有位置、缩放、透明度,一条曲线有路径和描边进度,一个计数器有数值。动画就是把这些属性写成时间的函数。
例如,一张卡片从下方 16 像素的位置回到原位,持续 0.14 秒。设开始时间为 `t₀`,时长为 `d`,当前进度为 `p = clamp((t − t₀) / d, 0, 1)`,那么位移可以写成 `y(t) = 16 × (1 − E(p))`。其中 E 是缓动函数:线性变化带来匀速感,先快后慢适合入场,适度超调可以模拟弹性。你看到的“轻快”“稳重”,就有一部分来自这条曲线的形状。
源工程使用 GSAP 将属性变化编排到同一条时间轴。下面以“品牌用户声音”分镜的简化代码为例:
const tl = gsap.timeline({ paused: true });tl.fromTo("#s11 .voice-bridge", { opacity: 0, scale: 0.88, y: 24 }, { opacity: 1, scale: 1, y: 0, duration: 0.4, ease: "back.out(1.45)" }, 52.85);tl.fromTo("#s11 .bridge-cursor", { opacity: 0, x: -170, y: -80 }, { opacity: 1, x: 0, y: 0, duration: 0.62, ease: "power2.inOut" }, 55.3);tl.fromTo("#s11 .voice-chip", { opacity: 0, y: 16, scale: 0.92 }, { opacity: 1, y: 0, scale: 1, duration: 0.14, stagger: 0.006, ease: "power2.out" }, 56.525);这里的 52.85、55.3、56.525 是全片时间;duration 控制单个动作长度;stagger 让相邻卡片错开 0.006 秒开始。多张卡片的总展开时间还包含这些错开的间隔。时间轴把“先提问、再选择、最后展开”落实成可修改的参数关系。GSAP Timeline 文档
源工程中的“379 条声音”也是这样实现的:先对普通对象的数值做插值,再在 onUpdate 中把取整后的值写到页面。对 AI 来说,修改动效可以具体到某个选择器、时间位置或目标数值;对你来说,仍然可以说“鼠标稍微慢一点”“卡片出现得更有层次”。
6.2 从“播放动画”到“求出第 n 帧”
网页交互通常跟着真实时间播放,机器忙时可能掉帧。离线视频需要另一种调度:先决定要哪一帧,再等这帧画完。
以本片为例,81.8 × 30 = 2454 帧,帧序号为 0—2453;第 n 帧的采样时间是 t = n / 30 秒。渲染器可以依次请求这些时间点,也可以直接跳到某个出问题的时刻。动画状态应由时间决定,不能依赖之前已经播放过几帧。
HyperFrames 通过适配器连接不同动画运行时:GSAP 时间轴、CSS / Web Animations、Lottie、Three.js 等。适配器处理状态,捕获与编码交给宿主。这也解释了源工程为什么创建 paused: true 的时间轴:导出阶段的时钟由外部控制。Frame Adapter 契约
看当前 GSAP 适配器源码,还能看到一个很细的处理:当两次定位到相同时间时,GSAP 可能跳过重绘;适配器先将时间轻推 0.001 秒并抑制回调,再回到精确时间,迫使状态更新。这里的微小偏移服务于刷新,最终捕获仍以目标时间为准。GSAP 适配器源码
可定位也对创作代码提出要求:用 x = x₀ + v × t 表达位置,比每次回调都做 x += v × delta 更容易复现;粒子的随机初始条件需要固定种子;改变文字的回调不能只假设“这个事件已经播放过”。连续播放正常之后,还要验证倒着拖、反复跳转是否得到相同状态。
6.3 浏览器怎样交回一帧可编码的画面?
时间轴更新完成,页面还要经历样式、布局、绘制与合成。字体、图片、内嵌视频和 WebGL 画布也要准备好,捕获才能发生。可以把这段过程概括为:
`定位时间 → 更新各运行时 → 等待资源与异步工作 → 捕获像素 → 编码`
在 HyperFrames 中,Engine 承担底层捕获,Producer 组织更完整的导出流程。当前源码包含 BeginFrame、截图及特定条件下的快速捕获路径,实际选择与平台、浏览器和画面特性有关。Engine 文档、帧捕获源码

图 6 上方是画面渲染过程,下方是本项目的独立声音后期
图中的“捕获”包含资源就绪与运行时同步。
这里值得区分两个目标:时间采样可以稳定复现,像素级完全一致还取决于字体、Chrome、GPU 和编解码环境。本片固定了素材与工具版本,并从实际 MP4 中抽帧复核。本片最终混音独立保存,封装时复用视频流;声音修改因此可以与画面渲染解耦。
6.4 GLSL / Shader:从移动元素,到计算每个像素
卡片位移和透明度适合交给 GSAP;液态折射、噪声溶解、能量场和有层次的辉光,需要进一步控制像素。
在 WebGL 路径中,Shader 是运行在 GPU 上的程序,常用 GLSL 编写。顶点着色器决定几何顶点如何变换,片元着色器计算光栅化后各片元的颜色。输入通常包含纹理、坐标,以及由 JavaScript 传入的统一参数 uniform,例如时间、分辨率和效果强度。Three.js 的 ShaderMaterial 就提供了这层接口。ShaderMaterial 文档
以噪声溶解转场为例:将前后两幅画面作为纹理 A、B,再取一张固定噪声纹理。随着进度增加,噪声值落入阈值的区域逐步切换到 B。边缘由 smoothstep 柔化,必要时再叠加一道窄的发光带。
// GLSL 原理片段:省略纹理、uniform、varying 声明float p = clamp(uProgress, 0.0, 1.0);float noiseValue = texture2D(uNoise, vUv).r;float threshold = mix(-0.02, 1.02, p);float mask = 1.0 - smoothstep( threshold - 0.01, threshold + 0.01, noiseValue);vec4 a = texture2D(uSceneA, vUv);vec4 b = texture2D(uSceneB, vUv);gl_FragColor = mix(a, b, mask);这段示意表达的是遮罩生成与纹理混合,完整效果还要处理颜色空间、透明度和纹理坐标。类似地,折射可以通过位移场偏移采样坐标,让背景看起来经过玻璃弯折;Bloom 则通常提取高亮区域、模糊后再合成。它们在技术上有不同成本,在叙事上也应承担不同任务。
| 想提升的观感 | 可选技术 | 在产品视频中的用法 |
|---|---|---|
| 空间与材质感 | 法线、粗糙度、环境光与受控折射 | 强调产品表面和结构细节 |
| 关键时刻的能量 | 高亮提取、多级模糊、Bloom | 数据汇聚或片尾品牌揭示 |
| 镜头之间的连续性 | 双纹理混合、噪声遮罩、UV 位移 | 从产品界面切换到结论画面 |
| 背景的细微生命感 | 程序噪声、低幅度流动、微弱颗粒 | 保留安静的信息前景,丰富背景层次 |
HyperFrames 已提供 `@hyperframes/shader-transitions`:把场景样本转成 WebGL 纹理,并由 GSAP 时间轴驱动片元着色器合成。可选效果包括噪声扭曲、快速摇移和漏光。它让 Agent 可以先复用已有实现,再围绕内容调整强度与时长。官方转场包
更底层的 `data-vfx-chain` 则把逐像素处理组织成 WebGL2 效果链:静态参数保存在 JSON,动态参数通过 CSS 自定义属性接受 GSAP 控制。当前实现对需要读取自身像素的效果有浏览器能力和捕获并行度限制;这类方案需要先做短镜头验证,再扩展全片。VFX Chain 设计与约束
6.5 Shader 和三维动画,也必须接入同一个时钟
漂亮的 WebGL Demo 往往使用 `requestAnimationFrame` 自己推进时间。进入视频工程后,着色器里的 `uTime`、转场进度、相机位置都应来自同一个视频时间,避免预览与导出各走各的。
HyperFrames 当前 Three.js 适配器会写入 `window.__hfThreeTime`,并分发 `hf-seek` 事件。场景接收时间,求出当前状态,再主动绘制。下面是扩展方案的接口示意,假设模型、材质与纹理已经加载完成:
window.addEventListener("hf-seek", (event) => { const t = event.detail.time; const local = Math.max(0, t - sceneStart); material.uniforms.uTime.value = local; material.uniforms.uProgress.value = Math.min(1, local / 0.8); model.rotation.y = initialAngle + local * 0.25; renderer.render(scene, camera);});这里每次都从绝对时间重新赋值。若使用导入的关键帧动画,可以用 `AnimationMixer.setTime(local)` 定位,并固定 timeScale、动作激活和循环规则;物理模拟、流体和依赖前一帧的粒子系统,则需要预先烘焙,或从固定状态按固定步长重演,不能靠设置一个时间变量自动获得正确结果。Three.js 适配器源码、AnimationMixer 文档
同步还涉及“何时算画完”。当前 hf-seek 实现提供 `waitUntil(promise)`,允许监听器同步登记本次定位所需的异步工作;运行时通过完成屏障等待它们。这解决了“时间已经跳过去,资源或效果还没更新,捕获却先发生”的竞争问题。seek 完成屏障源码

6.6 Blender:把三维设计接到视频工程里
如果希望展示一款商品的曲面、拆解结构、灯光扫过或环绕镜头,Blender 可以承担资产制作与三维镜头设计。AI 可以通过 Python 脚本创建场景、设置材质与相机、批量渲染;你主要判断产品形态、镜头语言和视觉方向。Blender 后台渲染文档
与 HyperFrames 组合时,可以走两条路径:
路径 A:Blender 设计资产 → GLB / glTF → Three.js → HyperFrames。 模型、贴图和可导出的动画留在浏览器三维场景中,产品旋转速度、相机运动和品牌文字能够继续联动调整。它适合需要经常改镜头的商品展示和技术结构演示。
这条路径需要认真做资产交接。glTF 支持金属度—粗糙度 PBR 材质:金属度影响反射模型,粗糙度影响高光的集中程度;法线贴图补充表面细节,环境照明帮助交代形体。Blender 的任意节点网络并不会原样进入浏览器,不受支持的程序材质需要烘焙或重建。网格、UV、法线和动画导出后,也要在目标 Three.js 场景中检查。Blender glTF 导出说明
路径 B:Blender 完成镜头渲染 → 预渲染素材 → HyperFrames 编排。 对玻璃、复杂反射、柔和阴影或高质量景深要求较高的镜头,可以先在 Blender 中完成渲染,再接入字幕、界面、数据和声音。浏览器不再重复计算该镜头的三维光照,但修改视角或材质时需要重渲染这段素材。
例如,下列命令会按 .blend 中保存的设置后台渲染整段动画:
blender -b product-shot.blend -a交付前要约定帧率、首帧编号和分辨率;若从 Blender 的第 1 帧开始渲染,应明确它对应视频局部时间 0。需要透明叠加时可以保留 RGBA PNG 序列作为中间产物,再转换为已验证支持透明度的素材格式或逐帧合成;普通 H.264 MP4 不承担透明通道。
这两条路径可以混用:重点产品镜头预渲染,UI 和数据变化继续实时求值。三维制作的重计算被限定在真正需要的段落,内容更新仍然灵活。
配套短片《一句话的深度》把路径 B 用在了一组玻璃分镜板镜头中。Agent 通过 Python 搭建场景,在 Blender 中完成材质、灯光和相机设置,先渲染测试帧,再将完整镜头接回全片。下面的画面呈现了玻璃、反射与景深共同形成的空间层次,也为这条接入路径提供了一个新案例。

图 7 《一句话的深度》中的 Blender 玻璃分镜板镜头
6.7 真正决定质感的,还有颜色、采样与渲染预算
加上 Shader 和三维模型之后,还需要把输出链路收好。
先统一颜色。 光照与混合通常在线性空间计算,显示时再转换;颜色贴图与法线、粗糙度这类数据贴图要区别处理。Blender 渲染若已应用 AgX 等显示变换,接入浏览器时应避免重复色调映射。商品颜色准确和电影化高光是不同目标,需要一起看测试镜头,而不是统一套一个滤镜。Three.js 颜色管理、Blender 颜色管理
再控制采样。 细线、微小文字、快速运动和高频颗粒都容易在压缩后闪烁。可以按问题选择抗锯齿、适度超采样或运动模糊;动态噪声和重度特效应避开关键信息区。最终还要看平台转码后的版本,不能只看无压缩静帧。
最后给渲染设预算。 4K 的像素数是 1080p 的 4 倍;按每像素 8 字节估算,一个 4K RGBA16F 颜色附件约占 63.3 MiB,两个乒乓缓冲附件就约 126.6 MiB,还没算深度、纹理和其他后处理。Bloom、折射等多次采样效果会继续增加带宽与计算开销。可以降低背景特效分辨率、限制后处理区域、复用静态资产,把精度留给主体。
验证也可以更像软件测试:在相同环境下按 `[90, 10, 50, 10]` 的顺序请求帧,检查两次第 10 帧是否一致;再检查首尾帧、分镜边界、字体和资源加载,并查看编码后的成片。这样,“更有质感”同时具备视觉目标与可执行的检查方法。
6.8 回到选型:按镜头需要组合能力
| 技术层 | 最适合承担的任务 |
|---|---|
| HTML / CSS / SVG + GSAP | 文字、产品界面、图表、流程与时间编排 |
| WebGL / GLSL / Three.js | 像素特效、实时三维、相机与材质变化 |
| Blender | 三维资产制作、复杂镜头与高质量预渲染 |
| HyperFrames + 媒体后期 | 统一时间、画面捕获、音画组织与成片交付 |
对于 81.8 秒原片,以 UI、数据和流程为主的内容使用 HTML 与 GSAP 已能完成主要表达。后续配套短片进一步加入 Shader 与 Blender,展示像素处理和三维空间。两次制作提供了不同的选型例子:先看镜头要表达什么,再决定需要哪一层能力。
制作框架仍然可以结合已有资产来选:
| 工具 | 主要工作方式 | 优先考虑的任务 |
|---|---|---|
| HyperFrames | HTML、CSS 与可定位动画组成视频工程 | 产品界面、数据故事、流程动效与局部修改 |
| Remotion | React 组件描述视频,提供播放器、渲染工具和 Agent Skills | 复用已有 React 资产,构建参数化视频产品 |
| ChatCut | AI 操作可编辑的多轨时间线,支持人工精修与生成媒体 | 筛选、剪辑和包装已有实拍、访谈、口播素材 |
选型要看团队资产、素材形态和交付方式,也可以将 Blender 或 HyperFrames 输出的片段交给剪辑工具继续组合。Remotion 文档、ChatCut 官方介绍
这条技术路线的价值,在于把创作意图落成可编辑、可定位、可检查的工程。你可以把“让观众看见产品质感”交给 AI,它再选择属性动画、像素着色或三维渲染来完成。每一层都有明确接口,整条制作链路才能持续协作。
6.9 Agent 怎样把这些能力组织成一次完整制作?
工具之间能够连接,接下来还需要把工作顺序安排好:哪些镜头先试,哪些素材可以并行准备,什么时候进入全片渲染,发现问题后回到哪一步。Agent 的规划能力,就体现在这些具体决定里。
对视频任务,一份可执行的计划至少要交代三件事:分镜和素材的依赖关系、各阶段的交付物、进入下一步的检查条件。例如,三维镜头先出测试帧,再决定渲染预算;画面与声音共用时间表,调整镜头长度时同步更新;审片发现局部过亮,就回到对应材质、灯光或机位修改,再检查同一时刻。
这样,你给出的目标会持续落实到“计划—制作—检查—修正”的循环中。可编程视频提供了精确修改和验证的接口,Agent 则负责沿着这些接口推进任务。后面的配套短片,会给出一次具体的制作案例。
七、这套链路,可以用在京东哪些场景?
以比赛产品演示为起点,这条从资料到脚本、画面和声音的制作链路,还可以向哪些业务场景延伸?以下三个方向值得优先尝试。
7.1 商品卖点视频:一次定风格,多商品替换内容
输入商品图、规格表和已确认卖点,AI 先形成“使用场景—核心卖点—细节证明”的短脚本,再将内容放进统一模板。品牌色、字幕位置、转场和收尾可以复用,每个商品需要变化的是材料与表达重点。
例如,同一品类有多款商品,先做出一条认可的样片,再让 AI 生成同结构的多个版本。业务同事主要检查商品参数与卖点是否准确。首轮试点可以观察每条视频的人工审核时间、参数错误和返工次数。
7.2 大促素材:信息变化后,统一更新多个版本
活动时间、价格、权益和画幅往往需要同步调整。可以把这些信息集中保存,让 AI 更新相应文案、字幕和画面,再输出横版、竖版等版本。
当优惠文案从长句改成短句,AI 还可以连带调整字号、换行和停留时间。复用价值在于减少多份素材之间的重复修改。是否真正提效,可以通过一次活动中更新耗时和多版本一致性来检验。
7.3 产品发布与技术演示:把截图和流程讲成一个故事
这一场景与本次最接近。产品截图、操作录屏、数据和方案文档,可以成为动画讲解的输入;版本更新后,保留叙事骨架,替换发生变化的画面。
例如,新能力上线时,沿用原有开场和品牌收尾,只调整相关分镜、旁白和演示动作。研发、产品和运营可以直接用同一条审片意见推进下一版,减少反复解释“到底要改哪里”的沟通。
三类场景都有一个共同起点:先选一个资料齐全、表达目标明确的任务做样片,再考虑批量。稳定模板和清楚的输入,会把 AI 的制作能力转化为可重复使用的工作方式。
八、如何理解结果与提效
这次已经验证的结果
| 指标 | 本次结果 | 依据 |
|---|---|---|
| 成片规格 | 81.8 秒,1920×1080,30fps | 最终视频 |
| 叙事规模 | 12 个主体分镜+品牌收尾 | 制作记录与工程 |
| 主要迭代 | 15 个主要版本,另有局部修订和声音候选 | 版本记录与留存产物 |
| 片尾节奏 | 79.2 秒调整至 81.8 秒,增加 2.6 秒 | V15 制作复盘 |
| 音乐补齐 | 77.44 秒延展到 81.8 秒,相差 4.36 秒 | 原始音乐与混音脚本 |
| 声音修改方式 | 保留画面流,重新混音并封装 | 最终交付脚本 |
这些数字说明了制作规模和具体修改,也说明一次反馈可以落实到很细的执行。文案、镜头、配音、混音与交付文件都留有可继续修改的源材料。
近期实验:让 AI 把自检与返工也接过去
前面的 15 个版本,记录了故事、风格和制作方法逐步成形的过程。方法积累之后,一个更值得继续验证的问题是:方向说清楚,后续制作能交给 AI 连续完成到什么程度?
这次由 Claude Opus 5.5 制作的 60 秒配套短片《一句话的深度》,把这个问题落到了一个具体任务上:用镜头展示一句创作意图怎样经过分镜、时间轴、逐帧求值、像素处理与三维制作,最终汇成作品。Shader 与 Blender 也在这支新片中转化成了具体镜头。
从方向确认到交付,这次连续制作的记录如下:
| 观察项 | 本次配套短片 |
|---|---|
| 作品 | 60 秒短片《一句话的深度》 |
| 连续执行耗时 | 约 4 小时 10 分钟,包含 AI 自检与返工 |
| 执行期间人工介入 | 0 次;开工前有方向沟通与确认 |
| 计时范围 | 方向确认后开始,至成片与文章初稿交付;不含作者准备、阅读与验收 |
Agent 先提出创意与分镜,方向确认后继续完成制作,并在执行中安排关键帧检查、独立审片和局部返工。这里值得关注的,是检查结果能够继续驱动修改:发现哪里不清楚,就定位到对应镜头与参数,改完再看。
例如,下图上排的卡片轮廓叠加过亮,遮住了层次;下排的像素柱缺少明暗区分,起伏不容易读出。修改时,前者通过减少叠加、降低亮度和调整机位处理,后者通过材质、光照与配色改善。左右对应同一帧号,修改是否有效可以直接对照。

图 8 《一句话的深度》自检前后对比
上排第 675 帧,下排第 1044 帧。左侧修改前,右侧修改后。
这也让“首轮交付达到预期”有了更清楚的含义:一次完整委托里,可以包含 AI 自己的多轮尝试、审片和修正。原片通过 15 个版本逐步形成方法,配套短片则把规划、检查和返工串进一次连续执行。一部分原本需要你逐步跟进的工作,可以交给 Agent 推进;你主要确认方向,再对最终作品作判断。
九、从你手头的一份资料开始
如果你也想试一次,可以把下面这段话交给制作 Agent,再附上资料和喜欢的案例:
请为【受众】制作一支【时长】的视频,让他们记住【一句话价值】。请先读完资料,给出故事主线、分镜和素材缺口。参考【案例】的构图与节奏,先制作一个关键镜头。方向确认后完成全片、分镜旁白、音乐和审片图;每次修改保留可回看的版本,最后检查实际导出的 MP4。
81.8 秒的成片展示了一种已经可以实践的分工:你把握观众、事实和审美,AI 持续完成制作。想法有了可以观看的第一版,后面的讨论就更具体;参考和反馈积累下来,下一次制作也有了更好的起点。
从一条产品介绍、一次功能发布,或者一组需要讲清楚的数据开始。你只用先想清楚:看完之后,希望观众记住什么?
十、附录:把这套方法带走:ai-video-director Skill
读完之后,怎样让下一次制作少走弯路?可以把这套方法交给 Agent,让它在每次开工、修改和交付时都有一份可执行的工作指引。
`ai-video-director` 将本文的方法整理为一个 Skill:输入资料与目标,先形成创意和分镜,再推进参考拆解、动效、声音与审片。它不固定画风、镜头数量或模型,重点固定那些容易遗漏、又会直接影响成片质量的环节。
在简单环境里,靠什么减少遗漏?
| 常见短板 | Skill 提供的做法 |
|---|---|
| 对话变长,前面的决定容易丢失 | 用一份简短的 PROJECT.md 保存目标、分镜、进度和下一步 |
| 一次完成整片难度较大 | 按镜头拆任务,每步写清输入、产物与检查条件 |
| 没有多 Agent 编排 | 在同一线程顺序完成策划、制作和审片 |
| 工具或渲染资源有限 | 先完成完整故事,关键镜头再升级 Shader 或三维 |
| 改完代码就容易结束任务 | 回看导出的画面与声音,发现问题后继续修正 |
这些做法把一部分依赖模型临场规划的工作,变成了可以反复执行的流程。更换模型或运行环境时,已有的制作经验也能一起带过去。
怎么使用?
将下方完整内容保存为 `ai-video-director/SKILL.md`,放入所用 Agent 支持的 skills 目录。不支持自动加载 Skill 的环境,也可以把它作为项目指令交给 Agent。然后附上资料,用一句话启动:
使用 ai-video-director,把这些资料做成一支面向【受众】的【时长】短片,让观众记住【核心价值】。参考【案例】的构图和节奏,先给一句创意主张与极简分镜;方向确认后完成制作、自检和交付。
文件组织参考了开源项目 guizang-product-video-skill 的分层方式:短入口负责统筹,参考资料按需读取,重复检查交给脚本。这里的核心入口可以独立使用,完整工程包还包含镜头设计、渲染与审片参考,以及媒体检查工具。
ai-video-director/
├── SKILL.md 制作闭环与能力降级
├── agents/openai.yaml Agent 展示与调用信息
├── assets/PROJECT.md 项目状态模板
├── references/ 创作、工程与审片参考
├── scripts/check_video.py 规格检查与抽帧工具
└── tests/ 检查工具的回归测试可直接复制的 SKILL.md
---
name: ai-video-director
description: 将资料、产品界面或技术方案制作成可继续修改的短片,统筹创意、分镜、动效、声音与审片;适合新制产品演示、技术 showreel 和已有工程的迭代,沿用用户指定的视频工具。
---
# AI 视频导演工作流把创作判断变成可执行、可检查的制作步骤。先确定观众要理解什么,再决定画面怎样运动;交付实际导出的短片与可继续修改的工程。不要为了展示工具而堆砌效果。
## 开工与续作
- 先判断本次是创意提案、完整制作还是局部修改;只做用户要求的范围,沿用已有工程和已确认方向。
- 新片提取受众、观看后的一个记忆点、资料、画幅/时长、参考和声音要求。只追问会改变制作方向的缺项;其余采用合理默认并说明。
- 检查能否编辑文件、执行渲染、查看画面和处理声音。现成项目沿用现成工具;缺少执行能力时交付分镜和可运行工程,不宣称已经成片。
- 在视频工程保存一份简短 `PROJECT.md`:目标、已确认方向、分镜时间表、素材路径、当前阶段、检查结果、下一步。已有等价记录就复用;不要另建重复台账。可使用 `assets/PROJECT.md` 起步。
## 制作闭环
1. **把资料变成故事。** 用一句话概括创意,每镜写清“观众获得什么信息、看到什么变化、听到什么、何时发生”。先有能贯穿全片的叙事,再制作精细动效。技术短片让机制产生可见结果,不把术语当分镜。
2. **把参考变成规则。** 读用户给的案例或官方素材,提取构图、色彩、运动、停顿与声音关系。给出一个有理由的方向;只有存在关键分歧时才给备选。先做一个能验证风格及技术风险的代表镜头。用户要求先确认就停在确认点;已授权完整执行则自行检查后继续。
3. **逐镜搭建。** 先做整片粗剪确认信息与节奏,再逐镜细化。每镜指定注意力落点、动作、停顿和衔接。界面与数据优先复用真实素材;演示状态清楚标识。时间集中定义,画面与声音读取同一份时间表。
4. **把观感反馈定位到修改。** 用“问题时刻 → 画面对象 → 参数或内容 → 复查方式”处理意见。先修相关片段,再检查相邻衔接;用户只改音乐时,优先复用画面流。用户想局部修改时,不重做整片风格。
5. **让声音服务表达。** 早期明确音色情绪与节奏;画面基本稳定后精配。旁白用真实文案试听并按镜头生成,检查术语、数字与片尾完整性。音乐跟随情绪与落点,旁白出现时让位;保留分轨,方便独立修改。纯音乐或静音作品遵从用户选择。
6. **看导出结果,再交付。** 检查关键帧、运动的开始/中间/结束、转场以及实际 MP4。看不清就调整层级、速度、灯光或机位,再对照同一时刻。核对规格、时长、素材加载和声音;脚本通过不代表已经看过或听过。交付视频、工程、少量预览和简短检查记录。
## 环境或模型能力有限时
- **缩小单次任务。** 一次完成一个镜头或一个修改,明确输入、输出和通过条件;每轮更新 `PROJECT.md`。续作先读记录与相关文件,不重载全部历史。
- **单线程也能走完。** 没有子 Agent 就顺序完成策划、制作、审片;只有环境允许且任务授权时才委派,交接时给具体镜头、素材、时间范围和验收要求。
- **效果按需升级。** 先用已有模板能力、属性动画和稳定转场做出完整故事;关键镜头才加入 Shader 或 Blender。先测短片段耗时,按预算选择分辨率、采样与预渲染范围。
- **失败后减少变量。** 同一问题经过两轮有针对性的修正仍未解决,停止盲目重试,记录失败点,提供可工作的简化方案。涉及核心表达、预算或用户指定技术的变更,先说明并确认。
## 按需读取
- 不确定怎么把概念变成镜头、怎么拆反馈:读 `references/craft.md`。
- 使用程序化动效、Shader/三维,或需要降级:读 `references/engineering.md`;具体 API 查当前工具文档。
- 进入审片和交付:读 `references/review.md`。有 Python 3 与 FFmpeg 时,可运行 `scripts/check_video.py` 检查媒体规格、提取抽查帧。
- 只拿到本文件时,也可按上面的闭环工作;补充资料与脚本是增强工具,不是进入流程的前置条件。
## 交付边界
记录素材来源,不编造业务效果和实验收益;不把新做的技术示意当历史实证。缺少资源、无法试听或未执行渲染时,给出具体缺项。修改和渲染不等于获得公开发布、付费购买或上传内部资料的授权。