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

---

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

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

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

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

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

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

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

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

![飞书文档 - 图片](https://developer.qcloudimg.com/http-save/yehe-11941136/54dd00ef3343edb508c3d047ed3485d1.png)

接下来的故事，就是在 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 截取网站生成视频 |
![image](https://developer.qcloudimg.com/http-save/yehe-11941136/97473ed7b3244a6e0ff3528a8c7b3dba.png)

![image](https://developer.qcloudimg.com/http-save/yehe-11941136/7f30028772813cd3c281512270c4e361.png)
安装完成后，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的视频——————————更具自己的需要更改提示词
```
![image](https://developer.qcloudimg.com/http-save/yehe-11941136/6bdd39ae6ef06eb78869d6a66fbbd626.png)
我这里是让他随机以一个中国传统故事为主题让他给我生成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，加上半拍周期的抖动，营造力竭倒下的紧张氛围。
![image](https://developer.qcloudimg.com/http-save/yehe-11941136/0801d0ee7d3da2d28a1933ff33fc473f.png)

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

---

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

### 5.1 渲染

我在 WorkBuddy 对话框中输入，AI 立即执行渲染：
```bash
视频保存到本地，格式为 mp4
```
![image](https://developer.qcloudimg.com/http-save/yehe-11941136/cc35a2f4807cfdca7a4fa4b4ef1442f3.png)
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 中实际输入的内容：

1. "帮我制作一段 30 秒的中国水墨风动画视频，主题是夸父追日"
2. "可以增加相应的音频吗"
3. "把视频保存到本地，格式为 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句话完成整部视频 |




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

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

音视频

人工智能

开发工具

WorkBuddy平台通过AI技术革新视频制作流程，仅需3句指令即可完成30秒水墨风《夸父追日》动画。AI自动安装技能、编写700行HTML代码、生成5段音频、完成渲染输出，将传统需要AE/Premiere/FFmpeg的多工具流程整合为对话式创作。全程无需手动操作，展现AI在视频制作领域的突破性应用。

命令行工具

语音合成

文件系统

Windows

Python

GitHub

语音产品特惠新用户14.9元起


文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

在 WorkBuddy上使用HyperFrames技能制作水墨动画视频-腾讯云开发者社区-腾讯云

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

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

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐