⭐ 设为星标 · 第一时间收到推送
HeyGen 最近连续做了 7 天 HyperFrames 教程。我喜欢这套教程，不是因为它又展示了几种酷效果，而是它一直在追问同一件事：这段画面到底要让观众看懂什么？先把内容、品牌、节奏和观看目的说清楚，再让动效从这些约束里长出来。 从安装工具到口播包装、数据动画和片头，这 7 天刚好可以连成一套练习。
📱 7 Parts
👉 向右滑动
Day 1
"先跑起来"
安装与第一支视频Day 2
"别让 AI 猜品牌"
DESIGN.md 与 FRAME.mdDay 3
"代码也能讲故事"
PR-to-VideoDay 4
"音乐就是时间线"
Music-to-VideoDay 5
"没有素材也能讲清楚"
Faceless ExplainerDay 6
"让口播画面跟着话走"
Talking-Head RecutDay 7
"动效是信息，不是装饰"
Motion Graphics|
|
|
|
|
|---|---|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Day 1：先把工具装进你常用的 Agent
HyperFrames 是一个开源的视频生成框架。它把 HTML、CSS、媒体和可定位到具体帧的动画渲染成 MP4。对 AI Agent 来说，这个思路很顺手：Agent 本来就会写 HTML，不必再学一套封闭的视频时间线格式。
本地运行需要 Node.js 22+ 和 FFmpeg。安装命令以当前官方 README 为准：
npx skills add heygen-com/hyperframes --full-depth --yes 这里的 --full-depth 很重要。官方现在特别提醒，不加它可能拿到比主分支滞后几个小时的 registry 版本。安装后，在 Claude Code、Cursor、Codex 等支持 skills 的编程 Agent 里输入 /hyperframes；能自动补全，说明路由 skill 已经生效。
接着，Agent 会初始化项目、写 HTML composition、检查 authoring error、打开本地预览，再渲染 MP4。你能看到并修改全部源文件，不是把需求扔进黑箱后干等。
💡 PROMPT
Prompt：
使用 /hyperframes 制作一支 8 秒、1920×1080 的短片。前 4 秒是一扇深色终端窗口，逐字输入安装命令并停在闪烁光标；第 5 秒让终端碎裂转场；最后 3 秒用黑底白字逐词打出“这支视频由 HyperFrames 制作”。不要旁白，不使用外部素材。
第一天不用追求作品感。先确认安装、预览、检查、渲染这条链真的跑通。 后面所有玩法都建立在这条链上。
官方仓库：https://github.com/heygen-com/hyperframes
Quickstart：https://hyperframes.heygen.com/quickstart
Day 2：别让 AI 每次都重新猜你的品牌
AI 视频容易有一股“模板味”，很多时候不是模型不会设计，而是它根本不知道你的品牌应该怎样说话、怎样排版、怎样移动。
HeyGen 的做法是准备两个小文件：
DESIGN.md记录颜色、字体、间距、圆角、阴影和品牌语气。 FRAME.md在这些规则上补上动效语言：元素怎样进入、怎样退出、节奏快慢、转场应该锋利还是柔和。
第一步可以让 Agent 读取品牌官网的 HTML 和实际加载的 CSS，提取真实色值与字体。这里最容易踩的坑，是看截图猜颜色，或者把字体栈里的 fallback 当成实际字体。能从 CSS 引用，就不要靠肉眼估。
💡 PROMPT
Prompt：
根据我的品牌官网创建一份 DESIGN.md。读取网页实际加载的 HTML、CSS 和品牌页面，只记录能追溯到源码的颜色与字体。整理 4–6 个有明确用途的颜色、2–3 个字体角色、间距/圆角/阴影规则，以及“始终这样做、绝不那样做”的硬规则。最后列出每项规则的来源，删掉无法确认的内容。
有了 DESIGN.md，再用 HyperFrames 的设计工具扩展成 FRAME.md。技术品牌可以移动得更利落，编辑型品牌则可能需要更舒缓的缓动和更长的停留。最后做一支 20 秒品牌 reel，检查字体、色彩和动势放在一起是否协调。
💡 PROMPT
Prompt：
这是我的 FRAME.md。制作一支 20 秒、1920×1080 的品牌短片：先展示 Logo 与主色，再让字体系统进入画面，接着搭建一张示例 UI 卡片，最后收回 Logo。每次进入、退出和转场都遵守文件里的 motion language；这支视频本身就是 FRAME.md 的动态样片。
这 10 分钟很值。后面做 PR 视频、解释视频和口播包装，都可以复用同一套品牌文件，不必每支片重新写“高级、科技、蓝紫渐变”。
Day 3：把一个 PR 变成 60 秒评审简报
代码评审很吃上下文。评审者要读标题、描述、commit 和 diff，还要弄清这次改动到底想解决什么。/pr-to-video 做的不是把代码截图排成幻灯片，而是把真实改动讲成一支给 reviewer 看的短视频。
Agent 会通过 GitHub CLI 读取 PR 的标题、描述、完整 diff、提交记录、评审状态与贡献者信息，再根据改动类型选择叙事形态：bugfix 更像修复说明，新能力更像 feature reveal，release 则更像 changelog。
画面里的代码也来自真实 patch。删除行收起、新增行落下、关键行被高亮，最后用真实状态提醒“等待评审”。这比逐文件朗读有效，因为 reviewer 最需要知道的是：为什么改、核心做法、证据在哪里、哪几处要重点看。
💡 PROMPT
Prompt：
使用 /pr-to-video 读取这个仍在等待评审的 PR：<PR 链接>。制作一支约 60 秒的 reviewer briefing。先说清改动目标和影响，再用真实 diff 展示核心实现，指出需要重点检查的风险点，最后回到当前评审状态。不要做文件列表式汇报。
这里有个很实用的提示词技巧：告诉 Agent 这支视频是给谁看的、要形成什么行动，不必替它画完整分镜。 “给 reviewer 的 60 秒 briefing”比“做一个 PR 视频”多了一层明确目的，故事结构自然会更准。
Day 4：别手工追拍点，让音乐成为唯一时间线
卡点视频最容易出的问题，是每个场景各有一套“差不多”的时间，最后转场、字幕和音效都贴不住音乐。/music-to-video 先把整首音乐读一遍，生成统一 timing map，再让所有画面服从这张表。
它会分析 BPM、beat grid、downbeat、能量段落、4 小节乐句、鼓点填充和硬停止。场景边界放在 downbeat，最大的视觉击打留给乐句接缝，音效则提前领入剪切。所有模块只认一份时间真相，这比让每个场景自己“听起来像卡上了”可靠得多。
💡 PROMPT
Prompt：
使用 /music-to-video，根据项目中的 <music.wav> 制作一支 30 秒的科技资讯快剪。先分析音乐并选择能量最密集、能自然结束的 30 秒；用本周真实科技新闻填充内容，一条主新闻加 3–4 张快节奏信息卡，每小节推进一张，最后做一句简短收束。所有剪切、色板翻转和音效必须落在分析出的节拍或乐句节点上。
第一版出现两个问题：一张卡片的高亮胶囊压住标题，结尾又连续放了两张意义重复的 end card。修改时不需要重写分镜，只要说“把高亮下移，别挡标题”“删掉第一张结尾卡，把两句话合成最后一张”。Agent 会把改动吸回原来的节拍网格，再检查、再渲染。
我最喜欢 Day 4 的地方，是它把“卡点”从感觉问题变成了工程约束：先锁住节奏基准，再用很短的反馈修画面。文案可以改，节拍网格别乱。
Day 5：没有拍摄素材，也能做一支解释视频
/faceless-explainer 的输入可以只有一个概念、一篇文章或几段笔记。它负责研究、搭建教学结构、写旁白、生成声音，再用动态字体、图解、数据卡和计数动画把内容讲出来。
没有真人，不等于随便堆一些抽象背景。Agent 仍要回答三个问题：观众先知道什么，哪一步最难理解，什么证据能让结论站住。画面应该服务这条教学路线，而不是每 3 秒换一种效果证明自己会做动效。
💡 PROMPT
Prompt：
使用 /faceless-explainer 制作一支 45 秒视频，解释“AI Agent 的 Skill 是什么”。先讲 Skill 为什么有用、怎样被 Agent 调用；再从 GitHub 找一个有代表性的真实 Skill，读懂它的工作方式，用它说明 Skill 为什么能复用流程知识。使用我提供的 FRAME.md，所有数据注明来源，画面以动态字体、结构图和数据卡为主。
HeyGen 的初版里，正在朗读的词被包在一个跳动胶囊中，动效本身抢了画面。修改只用一句话：去掉胶囊，未读文字用灰色，当前词用品牌蓝。结果反而更清楚。
这个例子很能说明问题：动效的价值不在于“这里动了”，而在于它有没有帮眼睛找到此刻最重要的信息。
Day 6：让口播画面跟着人说的话走
口播视频加包装，最怕“字幕说到 A，画面还停在 B”。/talking-head-recut 会先转写口播，拿到词级时间，再决定哪些句子值得出现标题、数字、模型卡、lower third 或引语。
它既可以处理已有口播，也可以和 HeyGen CLI 配合：先研究选题、写脚本、从数字人库选 presenter、生成 lip-sync A-roll，再包装自己的素材。原始口播画面保持在下面，图形层根据说话内容进入和退出。
💡 PROMPT
Prompt：
使用 /talking-head-recut 制作一支 45 秒新品解读。先读取我提供的官方公告与讨论链接，写一版只保留可核实事实的口播；用 HeyGen CLI 生成数字人 A-roll；再做词级转写，让关键数字在被念到时计数出现，让三张功能卡在对应名称被说到时依次进入。全程保留一个简洁网址角标，结尾单独留给 Logo 动画。
后来加字幕时，图形整体上移，网址角标也挪到顶部，避免和底部字幕争位置；音乐再作为最后一层加入。这个顺序值得照搬：先锁口播与词级时间，再排图形，最后补字幕和音乐。 一上来全做，修改时很容易牵一发而动全身。
如果要从终端生成数字人，可以参考 HeyGen CLI：https://github.com/heygen-com/heygen-cli
Day 7：别报效果名，直接说你想让观众看懂什么
到了第七天，教程把镜头拉回到最小单元：一支通常不到 10 秒、没有旁白、靠运动本身传递信息的 motion graphic。
Day 7 把前六天的方法讲得最透：不必背缓动曲线和特效名字。描述你要传达的内容，动效应该从传播目标里自然出现。 官方给了 5 个很适合日常视频的场景。
1. 趋势图：让真实数据自己长出来
如果数据公开，Agent 可以先去取；如果是内部数据，就交一份 CSV。图表动画不只要“柱子依次升起”，高亮也要解释为什么值得看。单独闪一个 122,341 很像随机数字，写成“峰值日 · 6 月 21 日”才有意义。
💡 PROMPT
Prompt：
使用 /motion-graphics 获取 <产品> 最近 30 天的真实公开数据，制作一支 5–8 秒的柱状图动画。30 根柱子按波浪顺序生长，总量同步计数；峰值日闪白并标出日期与含义。只使用可核实数据，如果趋势并未持续上升，就不要写“增长趋势”。
2. Logo Sting：品牌文件本来就是动画素材
Logo 如果在 Figma 里有分层结构，就别只给 Agent 一张扁平 PNG。图形、文字和每个字母分开，才能分别控制入场顺序，同时守住品牌规范，比如两个图形永远不能碰在一起。
💡 PROMPT
Prompt：
使用 /motion-graphics，从我的 Figma 品牌文件读取分层 Logo，制作一支 5 秒 Logo sting。两个图形从相反方向进入，并按品牌安全距离停下；字标从左到右逐字落位。保持原始比例、间距和颜色，不重画 Logo。
3. 数字卡：一句事实就够了
有时你只有一个值得分享的数字。那就别硬凑脚本：图标砸入，数字快速计数，日期或来源负责兜底，结束。适合注册量、下载量、里程碑和活动成绩。
💡 PROMPT
Prompt：
使用 /motion-graphics 制作一张 5 秒数字卡：<事件> 达到 <数字>。先让代表事件的图标快速落入，随后数字计数到目标值；右下角标注数据日期与来源。只保留一个视觉重点，不加旁白。
4. 三张信息卡：用节奏控制阅读顺序
三条更新写成 bullet list，很容易被一眼略过。三张卡按顺序进入，先落标题，再晚半拍弹出数字，观众的视线就会跟着设计好的顺序移动。提示词里要写“先后与停留”，不必指定某个文字特效。
💡 PROMPT
Prompt：
使用 /motion-graphics 把这三条更新做成依次进入的信息卡：<更新 1>、<更新 2>、<更新 3>。每张卡先落位，关键数字晚半拍出现；前一张稳定后再进入下一张。整体清楚、克制，避免同时运动造成抢读。
5. 系列片头：做一次，反复用
系列视频最值得提前做的是一个 reusable moment。固定 Logo、底色、进入和退出方式，只把 Day 数字当变量。第 8 天改一个数字重新渲染，不必重做整段。
💡 PROMPT
Prompt：
使用 /motion-graphics 制作一支系列片头：黑屏开始，品牌图形与“Day”字样滑入，数字从 1 计数到 <当天数字>，停留后整体滑出并回到干净黑屏。把数字做成可替换变量，方便每天重新渲染；同时准备透明 WebM overlay 版本。
把这 7 天连起来看，Prompt 的写法其实很统一：
- 先给素材：网页、PR、音乐、口播、数据、Logo，或者一句事实。
- 再给传播目标：观众看完要理解什么、相信什么、做什么。
- 补足硬约束：时长、比例、品牌规则、真实性、节拍与不能改动的元素。
- 最后说交付形态：评审简报、解释视频、口播包装、短动效、透明 overlay。
你会发现，这里很少出现“加一个炫酷转场”“来个高级运镜”。因为这些词只描述表面，不解释为什么要动。
下次写 AI 视频 Prompt，可以先用这句话打底：“我有这些素材，要让这类观众在多少秒内看懂这件事；请遵守这些品牌与真实性边界，选择最能传达信息的动效，并输出可继续修改的工程与成片。”
动效不是装饰清单。它是信息进入观众脑子的顺序。
完整 skills 列表：https://hyperframes.heygen.com/guides/skills