在 WorkBuddy上使用HyperFrames技能制作水墨动画视频

打开 WorkBuddy，一句话描述需求，AI 就开始搭建项目、安装技能、编写代码、生成音频、渲染视频------全程在一个对话框里完成。本文完整记录了在 WorkBuddy 平台上，从零到成片制作一段 30 秒中国水墨风动画视频的全过程。

一、开始：在 WorkBuddy 上，一句话启动创作

传统视频制作的痛点是什么？你需要打开 After Effects，手动创建合成，逐一设置关键帧，渲染等上半个小时，发现不对再改。改一个颜色可能要重新渲染整个序列。音频和画面分开处理，最后再在 Premiere 里合。整个流程割裂，AI 很难介入。

而 WorkBuddy 提供了一种完全不同的创作范式：对话即创作。

我在 WorkBuddy 的对话框里输入了这样的需求：

帮我制作一段 30 秒的中国水墨风动画视频，主题是《山海经》中的「夸父追日」，5 个场景，要有画面动画和旁白音频。

WorkBuddy 的 AI 立刻开始工作------它不是给我一个教程让我自己做，而是直接动手：安装技能、创建项目、编写 HTML、生成音频、渲染输出。我要做的只是在关键节点确认方向。

这一切之所以可能，是因为 WorkBuddy 有三个核心能力：

技能系统------AI 不是"什么都懂一点"，而是可以安装专业领域的技能包，获得精确的领域知识和工具链
文件系统访问------AI 可以直接在你的电脑上创建、读取、编辑文件，运行命令
上下文记忆------AI 知道你之前做了什么，不需要每次从头解释

接下来的故事，就是在 WorkBuddy 上发生的全部。

二、安装 Skills 技能：给 WorkBuddy 装上视频制作的手

为什么需要 Skills？

WorkBuddy 的 AI 本身有很强的通用能力，但它不会凭空知道"HyperFrames 的 <audio> 标签需要 data-track-index 属性"或者"GSAP 的 repeat: -1 会导致渲染引擎崩溃"。这些领域知识，需要通过技能来注入。

Skills 就像是给 AI 安装的专业插件------每个技能包含一份详细的 SKILL.md 知识文档和参考文件，AI 在需要时会自动查阅。安装后，AI 从"通用助手"升级为"视频制作专家"。

安装过程

在 WorkBuddy 的对话框里，我告诉 AI 需要视频制作能力。AI 立即从 GitHub 仓库安装了 HyperFrames 技能体系：

bash 复制代码

# 在 WorkBuddy 中执行的命令
https://github.com/heygen-com/hyperframes------------------安装好这个技能，并告诉我怎么使用

5 个技能被安装到 WorkBuddy 的技能目录（~/.workbuddy/skills/）：

技能名称	定位	核心能力
hyperframes	核心创作引擎	HTML 视频组合、动画编排、转场设计、字幕同步、TTS 旁白、音频反应式动画
hyperframes-cli	命令行工具	项目脚手架、语法检查、布局审查、实时预览、渲染输出、语音合成、音频转写
gsap	动画参考	GSAP 时间线、缓动函数、交错动画、变换性能优化
hyperframes-registry	组件市场	注册表块和组件的安装与接线
website-to-hyperframes	网页转视频	从 URL 截取网站生成视频

安装完成后，AI 自动读取了每个技能的 SKILL.md，相当于瞬间"学会"了这套视频制作体系。接下来当我提出需求时，AI 知道该遵循什么规则、使用什么 API、如何组织代码。

环境检查

AI 还主动检查了运行环境------这是 WorkBuddy 的"先确认再动手"原则：

bash 复制代码

node --version   # v24.13.1 ✓
ffmpeg -version  # 8.1 ✓

Node.js 22+（HyperFrames CLI 需要）和 FFmpeg（渲染需要）都已就位，无需额外安装。

三、生成视频：在 WorkBuddy 上用水墨写代码

3.1 视频生成

在 WorkBuddy 上生成视频

bash 复制代码

随机来一个中国传统故事的脚本，大概可以生成30s的视频------------------------------更具自己的需要更改提示词

我这里是让他随机以一个中国传统故事为主题让他给我生成30s的视频。

3.2 五幕场景：AI 编排的水墨叙事

30 秒的视频分为 5 个场景，每个场景承载一段叙事。AI 按照技能文档的规则，先构建"最终帧"（元素最可见的状态），再用 gsap.from() 添加入场动画：

复制代码

0s───5s───13s───21s───27s───30s
 │     │      │      │      │
标题卡  追日   饮水    倒下   桃林

Scene 1：标题卡（0-5s）

三团墨晕在深色背景上浮现。墨晕的实现非常巧妙------圆形 <div> + filter: blur(60px) + opacity: 0.15，三个不同颜色（青灰、朱砂、金色）的模糊圆叠加在一起，就产生了水墨在宣纸上晕染的效果。没有任何图片，纯 CSS。

标题「夸父追日」从下方推入（gsap.from({ y: 80, opacity: 0 })），一枚朱砂印章以 back.out(2) 弹性缓动弹入------微微过冲后回弹，古意中带灵动。底部一道笔触线条从左到右缓缓拉出（width: 0 → 100%，3.5 秒），这是整段视频的第一个动态元素。

Scene 2：追赶太阳（5-13s）

太阳用 radial-gradient 金色圆 + box-shadow 光晕实现------依然没有图片。两层山脉用 clip-path: polygon() 勾勒出水墨剪影，近山深色、远山浅色，形成纵深。

一条笔触路径从左向右移动（x: -200 → 400，6 秒），暗示夸父奔跑的方向。太阳有微妙的"呼吸"------scale: 1 → 1.08 的正弦振荡，yoyo: true 来回循环。

Scene 3：饮干河水（13-21s）

太阳变得更大（scale: 1.3 缓慢增长），两条河流在山脉间流淌。随着时间推进，河流逐渐"干涸"------scaleX: 1 → 0.3，opacity: 1 → 0.4。这是全片最安静的段落，用视觉的缓慢变化营造紧迫感。

Scene 4：倒下（21-27s）

视觉高潮。太阳从金色变成朱砂色（radial-gradient 从 #bf3b2e 到 #c9a84c），悬在天际。一条手臂从画面底部伸出，手形以弹性动画张开。然后手臂缓缓上伸（rotation: 0 → -50deg，3 秒），太阳继续膨胀。

突然------手臂坠落（rotation: -50deg → 10deg，1.5 秒，power3.in 加速缓动），手形逐渐透明。这是全片最戏剧性的 1.5 秒。

Scene 5：桃林庇荫（27-30s）

两段树枝从中心向外生长，8 朵桃花以交错的 back.out 弹性动画依次绽放。桃粉 #d4828a 与全片的冷色调形成温柔的反差。画面缓缓淡出至黑，旁白"手杖化为桃林，庇荫后人"在画面消逝前低声念出。

0 错误通过。如果出现错误，AI 会自动修复后重新检查，直到干净为止------这就是在 WorkBuddy 上工作的好处，AI 自己跑完整个循环。

四、生成音频：在 WorkBuddy 上从文字到声音

画面完成后，我在 WorkBuddy 的对话框里说一句。AI 立即开始音频制作。

4.1 旁白生成：从 Kokoro 到 Edge TTS

AI 首先尝试了 HyperFrames 内置的 TTS 命令：

bash 复制代码

可以增加相应的音频吗

但遇到了问题------HyperFrames 使用 Kokoro-82M 语音合成引擎，中文语音需要 espeak-ng 作为音素化后端，而 espeak-ng 在 Windows 上安装困难（conda 和 winget 均未成功）。

AI 自主切换方案------这是 WorkBuddy 的一个重要能力：当一条路走不通时，AI 会主动寻找替代方案，而不是停下来等你指示。

它切换到了 Microsoft Edge TTS（edge-tts Python 包）------免费、无需 API Key、中文语音质量极佳：

场景	旁白文本	语速调整	时长
Scene 2	远古时代，巨人夸父，立志追赶太阳	rate=-15%	5.06s
Scene 3	他跨越山川，饮干黄河渭水	rate=-15%	4.18s
Scene 4	却在到达大泽之前，轰然倒下	rate=-20%（最慢）	4.46s
Scene 5	手杖化为桃林，庇荫后人	rate=-10%	3.82s

倒下时语速最慢（-20%），营造沉重的悲壮感；桃林段落稍快（-10%），暗示希望与新生。

4.2 背景音乐：Python 从零合成

没有现成的水墨风背景音乐？AI 在 WorkBuddy 上直接用 Python 从零合成了一段 30 秒的古琴+箫风氛围音乐。

五层声部叠加，每层都有明确的声音设计意图：

第一层：低频无人机（Drone）------C3 基频 + 五次泛音，20 秒呼吸周期的幅度调制，营造远古的"嗡鸣"感。这层是整段音乐的底座，让一切听起来都有"从远古传来"的氛围。

第二层：五声拨弦（Plucks） ------C-D-E-G-A 五声音阶，模拟古琴拨弦。每颗音使用指数衰减包络（exp(-t * 4)）模拟弦振动的自然衰减，叠加轻微颤音。拨弦时间分布在 2s、7s、12s、17s、22s、27s------大约每 5 秒一次，像呼吸一样规律。

第三层：氛围垫（Pad）------白噪声通过低通 Butterworth 滤波器（截止频率 800Hz），加上慢速幅度调制。听起来像远山的雾气------朦胧、持续、低沉。

第四层：高音箫声（Shimmer）------C5-G5 的高频泛音，在场景过渡的时间点浮现（5s、13s、21s、27s）。每段持续 3-4 秒，带轻微上升的频率滑动，模拟箫声的悠远。

第五层：紧张上升音（Tension） ------只在 Scene 4（倒下）出现。频率从 E3 线性上升至 B3，加上半拍周期的抖动，营造力竭倒下的紧张氛围。

五层叠加后，应用整体淡入淡出（前 2 秒渐入，后 3 秒渐出），归一化到 0.8 峰值，输出为 44100Hz MP3。全部在 WorkBuddy 中通过 Python 脚本完成。

五、视频导出：在 WorkBuddy 上从 HTML 到 MP4

5.1 渲染

我在 WorkBuddy 对话框中输入，AI 立即执行渲染：

bash 复制代码

视频保存到本地，格式为 mp4

HyperFrames 的渲染引擎在无头 Chrome 中逐帧捕获 HTML 动画（30fps × 30s = 900 帧），同时混合音频轨道，编码为 H.264 + AAC 的 MP4。

时间线全景

复制代码

0s        5s        13s       21s       27s       30s
│         │         │         │         │         │
│ 标题卡  │  追日   │  饮水   │  倒下   │  桃林   │
│         │         │         │         │         │
│█████████│░░░░░░░░░│▒▒▒▒▒▒▒▒▒│▓▓▓▓▓▓▓▓▓│████████│  ← 画面
│         │ ←旁白→  │ ←旁白→  │ ←旁白→  │ ←旁白→ │  ← Track 1
│←──────── BGM (35% volume) ──────────────────→│  ← Track 0
│         │         │         │         │         │
│ Blur    │ Blur    │ Color   │ Focus   │         │
│ Cross   │ Cross   │ Dip     │ Pull    │         │
│ fade    │ fade    │         │         │         │  ← 转场

在 WorkBuddy 上的完整交互记录

从开始到结束，我在 WorkBuddy 中实际输入的内容：

"帮我制作一段 30 秒的中国水墨风动画视频，主题是夸父追日"
"可以增加相应的音频吗"
"把视频保存到本地，格式为 mp4"

3 句话。其余所有工作------安装技能、创建项目、编写 700 行 HTML、生成 5 个音频文件、运行 lint 检查、渲染 MP4、FFmpeg 混音合并------全部由 WorkBuddy 的 AI 自主完成。

写在后面

AI在改变了什么？

在传统的视频制作流程中，上述每一个环节都需要不同的专业工具和专业技能：

环节	传统工具	WorkBuddy 上
视觉设计	After Effects / Figma	AI 在对话框中确认色板后直接写 CSS
动画编排	AE 关键帧 / Lottie	GSAP 时间线，AI 编写，自动 Lint
语音合成	Azure TTS / 录音棚	`edge-tts` 一行命令，AI 自动生成
音乐制作	DAW / 素材库	Python 脚本从零合成，AI 设计声部
渲染输出	Media Encoder / HandBrake	`npx hyperframes render`，一键完成
音视频合并	Premiere / DaVinci	FFmpeg 命令，AI 拼接参数

在 WorkBuddy 上，这些工具之间的"缝隙"消失了。你不需要在 AE 和 Premiere 之间导出导入，不需要手动同步音频和画面的时间线，不需要记住 FFmpeg 的 amix 滤镜语法。AI 知道所有这些，它会自动串起整个流程。

技术栈速查

层面	技术	在 WorkBuddy 上的角色
视觉	HTML + CSS	AI 编写，你审查
动画	GSAP 3.14	AI 编排，自动遵循 Skill 规则
旁白	edge-tts	AI 选择方案并执行
音乐	numpy + scipy	AI 从零合成五层声部
混音	FFmpeg	AI 拼接参数并执行
渲染	HyperFrames CLI	AI 调用，自动检查结果
全程	WorkBuddy	对话即创作，3句话完成整部视频