第 20 次课：产品短片与科普动画

一、上节课回顾

上节知识要点：

• 上节课把自己的学习经验做成了十几屏的单页网页，还做了隐私和文字两道检查。
• 这套网页先别收起来：今天把它逐屏转成视频，一行代码都不用写。
• 今天完成视频三连第一步：用两个视频技能，做出动画和网页视频各一条。

二、本节课任务与安排

本课交付

两条视频：一条 45 秒「什么是神经网络」科普动画（Manim 生成），一条 30 秒 WorkBuddy 产品介绍视频（HyperFrames 把网页逐屏转成视频）。 你会得到两个可直接播放的 MP4 和两份分镜表；独立任务里再把第 19 课你自己的网页转成 30 秒视频。

本课学完后，你要能做到：

1. 用 Manim 生成一条 45 秒「什么是神经网络」科普动画 MP4。
2. 用 HyperFrames 把 WorkBuddy 产品介绍网页转成 30 秒 MP4。
3. 把第 19 课你自己的网页转成一条 30 秒视频。

顺序	环节	学生产出	时间
回顾	上节课回顾	想起网页屏结构与检查	5分钟
交付	看两条视频示例	知道本课交两条视频	3分钟
安装	安装本课两个技能	Manim、HyperFrames 就绪	12分钟
案例1	Manim 科普动画	45 秒神经网络动画	15分钟
案例2	HyperFrames 网页转视频	30 秒产品介绍视频	20分钟
案例3	我的网页转视频	本人网页的 30 秒视频	15分钟
收尾	播放与点评	能说出分镜的作用	5分钟
机动	等待与排错	补齐必做成果	5分钟

上课前完成课前准备，素材从课程资料逐个下载。 环境：Windows 10/11，WorkBuddy 桌面端（安装登录教程）；本课用 Manim、HyperFrames 两个技能（安装见下方 安装环节）；本机课程目录为 D:\AIGC\lesson-20。软件版本与机房路径由教师在开课前核对：[课前演练补充]。

三、理论基础：分镜与两类视频

先看今天最容易踩的坑：直接对 AI 说「帮我做个视频」，它给你一条画面、时长都随机的片子，改都没处下手。毛病不在 AI 画得不好，在你没给它「分镜」——今天整节课先分镜、再生成，四个案例都走这条线。 先分镜，再生成。 分镜就是把视频拆成「第几秒、什么画面、什么字幕」的一张表，像拍电影的剧本。AI 拿到分镜表再生成，画面对不对一眼就能查；不给分镜直接让它「做个视频」，出错只能整条重来。 两类视频两条路。 讲原理的抽象内容（公式、结构、流程）用 Manim：圆点、连线、动画推导，像 3Blue1Brown 那种风格；有现成网页的内容用 HyperFrames：网页的每一屏就是一个镜头，HTML、CSS、JS 这些网页技术直接变成视频画面，不用一帧一帧画。 初稿的标准是完整，不是精美。 画面、字幕、时长三样齐了就叫初稿；好不好看课后慢慢改。先有能改的毛坯，再谈装修。

四、实操环节

安装本课两个技能

任务目标：

一次性装好本课要用的两个技能：Manim（科普动画）、HyperFrames（网页转视频）。装完后 案例1-案例3 直接调用，不再重复安装。

实操步骤

1. 打开 WorkBuddy，新建任务，发送下面的提示词查看技能列表。Manim、HyperFrames 都已启用，就跳过安装，直接做第 3 步验收。 执行后你会看到：技能列表里出现两个技能的名字和启用状态。

   查看我的技能

2. 列表里缺哪个补哪个，每次只装一个：

• 安装 Manim 技能

请帮我安装这个 skill：https://github.com/Yusuke710/manim-skill

• 安装 HyperFrames 技能

请帮我安装这个 skill：https://github.com/heygen-com/hyperframes

3. 再次查看技能列表，确认 Manim、HyperFrames 都已启用。

   查看我的技能

查什么	合格的样子
两个齐全	查看我的技能 里能看到 Manim、HyperFrames
均已启用	两个技能状态都是已启用，对话里能用 @ 点到它们
能出视频	两个技能的 3 秒测试片段都能在播放器里播放

问题与注意事项

• 安装报错：把报错最后三行发给 AI 让它自己修，不要自己猜着改配置。
• 反复装不上：先跳过 Manim 继续 案例2（两条带练互相独立），课后找老师处理；机房电脑由老师预装，一般不会遇到。
• 测试片段只用来确认技能可用，验完就删，不拿去凑正式视频的时长。

案例1：Manim 科普动画

任务目标：

先做分镜规划，再用 Manim 生成一条 45 秒「什么是神经网络」科普动画，面向零基础同学。

实操步骤

1. 新建本课目录 D:\AIGC\lesson-20（课前已建好的跳过）。

2. 打开 WorkBuddy 新建任务，工作目录选 D:\AIGC\lesson-20。复制下面的提示词发送： 执行后你会看到：对话给出带秒数的分镜表，从圆点引入到权重演示再到总结。

   请用 Manim 做一个科普动画视频，命名为「神经网络.mp4」保存到本课目录。
    主题：什么是神经网络。
    要求：
    1. 用圆点和连线表示神经元
    2. 展示输入层、隐藏层、输出层
    3. 用简单动画解释权重变化
    4. 字幕用中文，并用中文配音
    5. 风格简洁，适合小白理解

扩展练习

带练动画完成后再做：用「栈和队列」再做一条 45 秒科普动画，走一遍完整的「分镜 → 生成」。

1. 先让 AI 出分镜，复制发送：

   请按下面的素材，为一条 2 分钟左右的科普动画《栈与队列》设计分镜表：
   每个分镜标注秒数、画面内容和字幕，先列出来我确认，不要直接开始生成。
   输入素材：
   观众：零基础同学。总时长 2 分钟。
   内容要点：栈像叠盘子，只能从顶端放和取，后进先出；
   队列像排队买票，从队尾进、队首出，先进先出；
   栈的两个操作叫入栈和出栈；
   队列的两个操作叫入队和出队；
   例子：浏览器的后退用栈，打印任务排队用队列；
   总结：后进先出找栈，先进先出找队列。
   输入素材结束。

2. 执行后你会看到：2 分钟分镜表返回，栈与队列各有画面。

3. 分镜确认后，复制发送生成：

   请用 Manim 做一个 2 分钟左右的科普动画。
   主题：什么是栈与队列。
   要求：
   1. 用方块动画演示入栈出栈、入队出队
   2. 栈只从顶端操作，队列从两端操作
   3. 字幕用中文
   4. 风格简洁，适合小白理解
   请严格按刚才确认的分镜表逐段生成；
   最后拼接成「栈与队列.mp4」保存到本课目录。

4. 执行后你会看到：本课目录出现「栈与队列.mp4」，时长 40-50 秒、字幕齐全。时间不够直接进入 案例2，本课两条主视频优先。

问题与注意事项

• Manim 生成慢：属正常现象，等待期间先做 案例2 的分镜规划，两边交替推进。
• 字幕变问号或乱码：让 AI「改用支持中文的字体重新渲染」，不要接受乱码版本。
• 生成失败报错：截取报错最后三行发给 AI，让它修复重试，自己不猜原因。

案例2：HyperFrames 网页转视频

视频生成六要素框架：

请用HyperFrames直接制作一个视频，mp4格式输出。

1. 视频类型：[产品介绍/功能演示/社媒短片/活动预告/品牌宣传]
2. 基础规格：时长[例如15秒]，画幅[9:16竖屏/16:9横屏]
3. 视觉风格：[简洁高级/科技感/Apple质感/专业商务/活泼年轻/温暖治愈]
4. 需要出现的内容：[必须出现的文字、图标、产品、数据、人物或素材路径]
5. 动效：[简洁流畅/快节奏/发布会质感/卡片展开/打字机效果/数据滚动]
6. 声音：[无声音/科技感配乐/轻快配乐/键盘声/UI点击声]（不指定则AI自动选择）

实操步骤

1. 快速直出

我们可以参考上面的视频六要素框架，快速直出视频。这里我没有手写任何品牌文案。我只告诉 WorkBuddy「去这个网址（https://www.workbuddy.cn/）读取内容，自动提取信息」，然后对我想呈现的元素和感觉做了要求：任务对话、技能卡片、多 Agent 并行、文档表格 PPT 成品。这就是偷懒大法——让 AI 自己去官网找素材。

请用 HyperFrames 直接制作一支 60 秒、16:9 宽屏的科技产品预告片，mp4 格式输出。
请先访问并读取 https://www.workbuddy.cn/ ，自动提取品牌名称、核心文案、主视觉风格、主色系、产品关键词和适合展示的信息，不需要我额外提供文字内容。
视频整体要和官网视觉保持一致，做成极简、干净、有办公效率感的品牌开场短片。
开头用官网品牌名和核心气质做干净利落的品牌开场，点出「说出要求、开始执行、交付成果」。
中段根据网站内容自动选择 3-5 个最适合展示的产品亮点，优先从这些能力里挑：
自主规划并执行任务、技能市场与专家团、多 Agent 并行、生成 Word/Excel/PPT、深度调研出报告、打通文档邮箱会议知识库。
画面用任务对话框、技能卡片、并行任务轨道、文档成品缩略图、连接器线条来表现「一句话开工、自动干活、交得出文件」。
不要出现游戏关卡、宝石、代码闯关或编程学习路径。
文字不要堆太多，只保留从官网提炼出的关键信息，整体节奏从稳到快，再回到品牌收束。
背景音乐选择轻快克制的办公科技感音乐，文字弹出和关键转场加入轻微 UI 点击声。
最后导出为「WorkBuddy.mp4」保存到本课目录。

2. 进阶技巧：快速换风格

同一个品牌，换一种风格描述，就能出完全不同的视频。你只需要修改「视觉风格」和「想要元素」的描述，产品和能力不要换：

比如，换成卡通像素风：

请用 HyperFrames 直接制作一支 60 秒、16:9 宽屏的卡通像素风产品预告片，mp4 格式输出。
请先访问并读取 https://www.workbuddy.cn/ ，自动提取品牌名称、核心文案、主视觉风格、主色系、产品关键词和适合展示的信息，不需要我额外提供文字内容。
视频做成年轻、清楚的卡通像素风品牌短片，但讲的仍然是 WorkBuddy 办公产品，不是游戏。
开头用官网品牌名做像素风品牌开场，点出「说出要求、开始执行、交付成果」。
中段根据网站内容自动选择 3-5 个产品亮点，优先展示：任务对话、技能卡片、专家团、Word/Excel/PPT 成品、多 Agent 并行。
用像素任务窗口、文件夹图标、文档卡片和连接线表现「把重复办公交给 AI，人来验收结果」。
不要出现关卡、宝石、角色闯关或编程课画面。
文字不要堆太多，只保留从官网提炼出的关键信息，整体节奏从稳到快，再回到品牌收束。
背景音乐选择轻快像素风电子乐，文字弹出和关键转场加入轻微 UI 点击声。
最后导出为「WorkBuddy-卡通像素风.mp4」保存到本课目录。

再比如，换成赛博朋克风：

请用 HyperFrames 制作 60 秒、16:9 的 WorkBuddy 产品宣传片，并导出视频。
请先访问并读取 https://www.workbuddy.cn/ ，提取品牌 Logo、品牌名称、核心文案和 3 组产品亮点。
整体是 WorkBuddy 办公产品广告片，不是城市风景片，也不是编程游戏片。
视觉只参考这种配色：深蓝暗调、青蓝霓虹、玫红霓虹、高对比发光。
不要出现雨夜城市、高楼广告屏、中心地标塔、街景、雾气，也不要出现关卡、宝石、游戏角色。
画面主体必须是产品和品牌信息：品牌 Logo、核心文案「说出要求、交付成果」、任务对话框、技能市场卡片、专家团面板、Word/Excel/PPT 成品、连接器、下载或开始使用按钮。
开场 Logo 以全息扫描加霓虹故障闪烁从下方滑入，进入品牌标题卡片。
中段 3 组产品亮点以赛博 HUD 信息卡片错落弹出，配合任务进度条、并行 Agent 轨道、文档成品和数据流。
结尾「立即下载」或「开始使用」按钮带霓虹光圈和弹性放大。
转场不要重复同一种形式：第一次用霓虹扫描线擦除，第二次用故障闪烁加 RGB 偏移，第三次用能量光圈扩散。转场后上一页内容必须完全消失。
所有文字必须放在明确容器里，例如赛博标题卡、全息信息卡、任务窗口、HUD 面板或霓虹按钮框。禁止文字悬空漂浮；文字不能超框、不能裁切、不能重叠。
音乐使用炫酷赛博电子风格，节奏更强。Logo 入场、文案弹出、按钮放大和转场加入 UI 点击声、电流声和 whoosh。
最后导出为「WorkBuddy-赛博朋克风.mp4」保存到本课目录。

扩展练习

带练视频完成后再做：保持同一套分镜和三个功能点不变，把风格换成亮色简约风再出一版，对比哪版更适合给新生看。

1. 复制下面的提示词发送：

   请保持「WorkBuddy.mp4」里已经确认的品牌信息、产品亮点和字幕内容不变；
   把风格从深色科技感换成亮色简约风：
   底色用浅色，字幕换成深色并保持清晰可读；
   画面仍然是任务对话、技能卡片和文档成品，不要改成别的产品；
   重新导出为「WorkBuddy-亮色简约风.mp4」保存到本课目录，总时长仍为 60 秒。

2. 执行后你会看到：本课目录出现「WorkBuddy-亮色简约风.mp4」，两版并排播放时信息完全一致、只有风格不同。时间不够直接进入 案例3。

问题与注意事项

• 生成排队慢：先做分镜规划和 案例3 的第 1 步，轮到自己再点生成，不要空等。
• 功能点讲成说明书：要求 AI「每屏一句人话，说清帮用户解决了什么」，不堆参数。
• 画面超时或时长不够：对照分镜表指出哪段超了，让 AI 只调整那一屏。

案例3：我的网页转视频

任务目标：

把第 19 课你自己的网页交给 HyperFrames，独立转成一条 2 分钟左右的视频，完成从网页到视频的全链路。

实操步骤

1. 分镜：从十几屏里挑镜头（4分钟）

1. 打开 D:\AIGC\lesson-19，把第 19 课你自己的网页文件（index.html 或你做的 my-page.html）复制到 D:\AIGC\lesson-20，文件名保持不变。

2. 十几屏不能全塞进 30 秒，先让 AI 帮你挑镜头、排顺序。 执行后你会看到：得到一条 5-6 个镜头的分镜表，每个镜头都能对应到网页的具体屏。

   请读取本课目录里我第 19 课的网页，为它出一条 30 秒视频的分镜：从十几屏里挑出最有吸引力的镜头，按「钩子开场、中间 2-3 个要点、结尾行动号召」重新排序，每个分镜标注秒数、对应网页的哪一屏、字幕内容。先列出来我确认，不要直接开始生成。

2. 生成并验收（11分钟）

1. 分镜确认后，让 HyperFrames 按分镜把网页转成视频；完成后对照分镜表逐镜检查。 执行后你会看到：得到「我的网页视频.mp4」：镜头顺序与分镜表一致，字幕齐全，时长 25-35 秒。

   请用 HyperFrames 按刚才确认的分镜，把我第 19 课的网页转成一条 30 秒视频：网页每一屏作为一个镜头画面，字幕照分镜表加，风格与网页一致，导出为「我的网页视频.mp4」保存到本课目录。

查什么	合格的样子
素材就位	用的确实是第 19 课自己的网页文件
镜头有取舍	不是十几屏全上，而是按分镜挑过、排过
成片达标	25-35 秒、字幕齐全、能独立看懂

扩展练习

验收通过后再做：把开场前 3 秒换成固定钩子「刚入职，先问清交付，再动手。」，导出 v2 版本，课堂收尾环节对比播放。

1. 复制下面的提示词发送：

   请保持「我的网页视频.mp4」的镜头顺序和总时长不变，只改开场：
   前 3 秒换成钩子镜头，大字幕写「刚入职，先问清交付，再动手。」；
   原第 4 秒起的画面顺接不变，总时长仍为 30 秒左右；
   导出为「我的网页视频_v2.mp4」保存到本课目录，不覆盖原文件。

2. 执行后你会看到：本课目录出现「我的网页视频_v2.mp4」，前 3 秒是固定钩子字幕，其余镜头与 v1 一致。时间不够可跳过。

问题与注意事项

• 网页找不到：确认复制的是上节课的 HTML 文件，且工作目录选的是 D:\AIGC\lesson-20 。
• 全部屏幕硬塞：重发「挑出最有吸引力的镜头，30 秒最多 6 个镜头」的限制。
• 时间不够：保证「我的网页视频」生成完成，验收表可以课后补。

五、总结与巩固

随机播放两条「我的网页视频」，全班用三问点评：前三秒留人吗、中间看懂了吗、结尾有行动吗。 回想本课流程：先出分镜 → 再按分镜生成 → 对照分镜验收；两类视频两条路：原理动画找 Manim，网页转视频找 HyperFrames。 说一说：你的网页变成视频后，哪一屏效果最好、哪一屏被你砍掉了？ 保留两个技能、两条带练视频和「我的网页视频」；下一课用 Video-Use 剪真人口播，凑齐你的前三条视频。

六、资料与下载

• 课前准备 ：软件、工作目录、下载位置和自查。
• 课程资料 ：课件与习题包；两份案例输入素材已内嵌讲义提示词，本课无需下载文本素材。

延伸视频

推荐观看：数学可视化视频的制作思路（blender/manim），对应本课 案例1 的 Manim 科普动画。