作品背景｜2026 年黑客马拉松
赛道：AI工具应用 · 赛区：采销赛区 · 赛题：销方向提效 · 战队：听劝办主任

大家好，如果现在给你一份产品资料，让你在几天内做成一支有传播力的视频，你会从哪里开始？写脚本、找素材、做画面、试配音、挑音乐……每一步都像在提醒你：这件事需要一整支团队。

这一次，我们换了一种做法。你只用负责把目标说清楚、挑选喜欢的方向，并在每一轮说出真实感受；Codex 接住后面的脚本、分镜、动效、配音、配乐、混音、审片和渲染。

最后，我们得到了一支 81.8 秒的产品视频，也留下了 15 个主要版本。更重要的是，我们验证了一件以前很难想象的事：一个没有专业剪辑经验的人，也可以通过持续对话，调动一套纯 AI 制作链路，把脑海里的想法一步步变成成片。

这篇文章想分享的，就是这套可以带走的方法。你怎样给 AI 一个好起点？怎样用参考画面代替“再高级一点”？怎样让静态内容动起来？怎样把配音和音乐调到真正服务故事？

你只用负责目标、选择和反馈。AI 负责把每次判断变成下一版可以直接观看的结果。

先看结果

链接一（joyspace）： tingquan-v15-final-81-8s-1080p30.mp4

链接二（OSS）：https://embedding.s3.cn-north-1.jdcloud-oss.com/tingquan-v15-final-81-8s-1080p30-oss-video.mp4

链接三（Public OSS）： https://embedding.s3.cn-north-1.jdcloud-oss.com/public/2026-hackathon/tingquan-ai-native-video-v15-81-8s-20260907.mp4

图：把整支视频铺成一张时间线审片图。你不用反复拖动进度条，也能快速看出哪里太挤、哪里太空、哪几段画面长得太像。

AI 真正减掉了什么？

你是不是也有过这样的体验：想法还在脑子里，就要先学软件、找模板、对接设计和剪辑；好不容易做出第一版，一句“节奏再快一点”，又会变成一串需要重新协调的任务。

这次最明显的变化，是你可以一直用自己熟悉的语言工作。

这里的“纯 AI 驱动”，指的是同一个 Agent 持续维护整条制作链路。它会调用合适的语音、音乐和视频工具，也会记住上一轮为什么这样改。你无需充当各个工具之间的“人工传话筒”。

方法一：先让 AI 把故事讲顺

一上来就做精致画面，很容易把时间花在错误的故事上。我们先问三个问题：观众为什么愿意看下去？中间发生了什么变化？最后希望他记住哪一句话？

可以把第一轮任务交给 AI：

1. 阅读原始资料，分别给出三种叙事角度；
2. 每种角度只写“开场钩子—核心变化—结果”三段；
3. 选定方向后，再拆成逐镜标题、旁白、画面动作和时长；
4. 每个镜头只承担一个主要信息，旁白说到哪里，画面就回应到哪里。

这支视频的早期脚本更像一张功能清单。后来，我们把功能重新编进一条会向前发展的事件链：问题发生，AI 发现线索，继续核验和关联，最后推动行动。已有的浏览器回放、运行数据和产品画面大多得以保留，变化主要发生在顺序、取舍和连接方式上。

这也是很实用的减负思路：改故事时，已有画面依然可以继续复用。你可以先让 AI 盘点素材，再问它：“哪些画面可以继续用？为了让因果关系成立，只需要补哪几个镜头？”

你也可以这样判断脚本：把所有画面先拿掉，只听旁白，还能不能复述故事？如果答案含糊，就继续改脚本，先别急着做动画。

方法二：别只说“更高级”，给 AI 看得见的参考

“做得更有科技感”“再高级一点”“画面丰富一些”——这些要求听起来很明确，落到执行时却有很多种解释。怎样让 AI 更接近你脑海里的效果？最有效的办法，是把审美偏好变成可观察的参考。

我们先去 HeyGen HyperFrames Examples 浏览官方案例，从产品发布、数据故事、流程图、界面演示和动态图表中挑出接近目标的片段。接下来让 AI 拆解其中可复用的“画面零件”，再用自己的品牌和内容重新组合：

• 信息从哪里进入，观众第一眼看哪里；
• 标题、主体和辅助信息怎样分层；
• 卡片如何出现、停留和离场；
• 镜头怎样从一个信息自然带到下一个信息；
• 哪些变化靠动画表达，哪些内容保持安静。

图：HeyGen HyperFrames 官方案例库。参考的价值在于提供具体的构图、节奏和动效语言，让 AI 有可以分析的对象。

给 AI 参考时，可以套用这句话：

参考这个案例的「信息层级、卡片入场和镜头推进」，保留我们自己的品牌色与内容；先给我一张静态构图和一段 5 秒动效预览，确认后再扩展到全片。

这样一来，“我喜欢什么”会变成 AI 可以执行和验证的约束。你也不用掌握动画术语，指出哪一段让你觉得舒服、哪一个动作帮助你看懂内容，就已经足够有价值。

这次的关键底座：HyperFrames 到底是什么？

你可能会问：AI 是怎样真正改动画、出视频？这中间的关键底座，就是 HyperFrames。

HyperFrames 是 HeyGen 团队开源的 HTML-to-video 框架。你描述想要的视频，Agent 使用它熟悉的 HTML、CSS 和 JavaScript 搭建画面；HyperFrames 再把网页中的文字、图片、视频、图表和动画稳定渲染成 MP4。项目保留下来的也是一组可继续编辑的文件，下一轮仍然可以接着聊、接着改。

开源项目 由 HeyGen 的核心维护者负责方向和合并，目前采用 Apache 2.0 协议。HeyGen 也公开了自家产品发布视频的 HyperFrames 工程，意味着我们既能看成片，也能研究真实项目如何组织分镜、素材和动效。

为什么它很适合 AI 做视频？

• AI 熟悉这种表达方式。 网页代码本身就是结构化文本。你说“标题缩小一点”“数字依次增长”“点击后展开下一层”，Agent 很容易找到对应元素并修改。
• 每一轮都能继续编辑。 成片背后保留完整工程，文案、颜色、数据、节奏和动画都可以局部更新。
• 预览和成片更容易保持一致。 HyperFrames 会主动定位到每个时间点，再逐帧生成视频；同一份输入可以稳定复现，也方便截图审片和版本比较。
• 现成灵感可以直接交给 Agent。 Examples 提供产品宣传、动态图表、决策树、动态字体等起点；Catalog 还提供字幕、转场、图表、社交卡片和特效组件。你可以先观看效果，再把页面和自然语言要求一起交给 AI。

官网有哪些案例值得看？

HyperFrames Showcase 很适合当成视频灵感库。想做产品宣传，可以看 HeyGen × Stripe Product Launch 和 Product Promo；想把网页变成短片，可以看 Website → Video；想讲数据和复杂概念，可以看 SpaceX Explainer、NYT Graph、Decision Tree；想学习节奏，可以看 Kinetic Type 和 Music to Video；如果手头已经有设计稿，还可以参考 Figma → HyperFrames。

使用这些案例时，你只用挑出喜欢的片段，再告诉 AI：“借鉴它的信息层级和运动节奏，换成我的内容与品牌。”参考从一句模糊的“更有感觉”，变成了可以拆解和执行的画面语言。

HyperFrames、Remotion、ChatCut，怎么选？

三者解决的视频问题各有侧重，可以先看自己的素材和目标：

这支片子的主体是产品界面、数据、关系网络和流程演示，而且文案与节奏会频繁调整，所以 HyperFrames 很合适。如果素材主体变成访谈或大量实拍，ChatCut 会更顺手；如果目标是构建面向开发者的 React 视频模板和批量渲染服务，Remotion 也很成熟。它们还可以组合使用：HyperFrames 生成动效片段，ChatCut 完成实拍剪辑与最终包装。

方法三：动效的任务，是带着观众看

静态页面放进视频里，信息常常是对的，观看感受却像在翻 PPT。我们怎样让画面活起来？可以从三个问题开始：这一秒希望观众看哪里？视线接下来往哪里走？动作结束后留下什么信息？

这次最重要的一次提醒是：表现力来自更强的因果关系和证据接力，动画负责把这条关系送到观众眼前。

你可以先做一个简单自检：旁白里的每个主张，画面能证明吗？讲到“发现”，就让观众看到原始线索；讲到“分析”，就展示信息如何被提取和比较；讲到“结果”，就让动作真正落到下一步。画面缺少证据时，可以删掉这句、降低表述强度，或者补充真实素材。

在这个前提下，我们最常用的动效有四类：

1. 让信息按关系出现。 先出现问题，再出现线索和结果；卡片依次进入，观众能跟上因果链。
2. 让重点自己“说话”。 数字增长、关键词高亮、扫描线移动、节点连线和鼠标点击，都用来提示正在发生的变化。
3. 让转场延续上一镜。 上一镜的卡片、颜色或运动方向，成为下一镜的入口，减少突然换页的割裂感。
4. 给画面留出安静时刻。 重要结论出现后停一拍，让观众有时间读完；所有元素同时运动，反而会丢掉重点。

每完成一轮，我们让 AI 在关键时刻自动截帧，拼成时间线审片图。你可以直接说：“第三段信息太满”“连续三屏都是卡片”“这里的动作比旁白早了半秒”。AI 会把这些观看感受落实到布局、节奏和转场上，再交回一版可播放的结果。

方法四：声音和音乐，从“能听”调到“想看下去”

画面有了之后，为什么有些视频还是显得平？很多时候，问题出在声音没有参与讲故事。

配音：先试听角色，再逐镜生成

我们先后试听过 ElevenLabs、Anson 和 Mossland 的中文声音，最后选了 Mossland 的“旁白・笃行”。真正影响选择的是它在真实中文长句里的表现：表达自然，母语感更强，也更符合这支视频克制、可信的气质。

这里有一个很实用的试听方法：拿三类真实文案同时测试——一句情绪钩子、一句信息密集句、一句片尾口号。再比较母语感、重音、术语发音和长时间聆听的疲劳感。三类句子都成立，这个声音才适合整片。

分段还有一个好处：哪句话太长、重音不对或情绪突兀，你只用指出这一句。AI 可以先改文案，再重新生成对应片段，不会牵连整段旁白。

音乐：让节奏跟着故事走

我们在画面基本锁定后，把整支视频作为参考交给音乐模型，让它“看着画面”生成候选音乐。比起只说“来一首科技感 BGM”，更有效的描述是：前段有调查和推进感，中段逐渐展开，结尾需要一次明确抬升；整体克制，给中文旁白留空间。

选音乐时，我们重点听三个位置：开场能不能迅速建立气质，故事转折有没有被音乐接住，片尾口号出现时有没有完成情绪落点。候选曲选定后，AI 继续处理长度、淡入淡出和人声避让。

这一轮就有一个很具体的例子：候选音乐比成片短了四秒多。我们没有重新找歌，只告诉 Codex 保留现有主题、自然延展到片尾，并让口号出现时再抬起能量。它完成延展、交叉淡化和混音后，我们继续用“旁白是否清楚、片尾是否收住”来判断结果。

你只用回答几个很直觉的问题：这首歌会不会抢旁白？中段有没有往前走？结尾有没有“到这里结束”的感觉？这些答案已经足够指导 AI 完成下一轮。

一句反馈，怎样变成下一版成片？

你不需要把意见翻译成专业参数。我们最常用的反馈结构只有四项：

想达到的效果 + 可参考的画面 + 必须保留的内容 + 怎样算改好

例如：

• “这一段像功能清单。我希望观众先看到问题，再看到 AI 怎么处理；保留两条关键数据，做完后给我看这一段前后各 2 秒。”
• “参考官方案例里卡片逐层展开的节奏，颜色继续用我们的品牌色；标题出现后停半秒再展示数据。”
• “音乐有点抢人声。保留现在的推进感，把旁白区域让出来，结尾口号处再抬起来。”
• “连续几屏太像。保留信息顺序，换一种空间关系，并把整条时间线截图给我比较。”
• “退一步看看：现在是在堆功能，还是在讲一个会向前推进的故事？请保留能证明方案跑通过的画面，再给我一版。”

这也是 AI 减负最明显的地方：你在表达观看感受，AI 在完成脚本、画面、声音和版本之间的联动修改。

这套方法，你可以怎么复用？

如果你也想用 AI 做一支产品介绍、项目汇报或数据故事，可以从下面七步开始：

1. 把资料、受众、传播目标和事实边界一次性交给 AI；
2. 先要三种故事角度，只选择方向，暂时不做精细画面；
3. 去案例库挑两三个参考，让 AI 拆解构图、节奏与动效；
4. 先做一个关键镜头和一段短动效，确认视觉语言；
5. 扩展全片，用时间线审片图检查信息密度和重复感；
6. 按镜头生成旁白，画面锁定后再生成和修改音乐；
7. 直接用自然语言审片，让同一个 Agent 持续修改、出片和留版本。

整个过程中，你只用守住三件事：目标有没有跑偏，事实有没有说错，成片你愿不愿意分享。

最后：AI 让更多人拥有了“做出来”的能力

81.8 秒、15 个版本，这些数字真正想说明什么？视频制作正在从一组专业软件里的复杂操作，变成一场围绕目标、参考和反馈展开的持续对话。

AI 已经可以接住从脚本到交付的大量工作。你可以把精力留给更重要的部分：理解观众、选择故事、判断好坏。过去停在 PPT 和脑海里的想法，现在有机会被快速做成一支能看、能改、也愿意转发的视频。

如果明天就要介绍你手头的项目，你最想先把哪一步交给 AI？

延伸阅读

• HyperFrames 官方介绍
• HyperFrames Examples
• HeyGen：HTML to Video Was Not Easy