手把手教你用WorkBuddy做HTML视频：从零到成片完整实操指南
WorkBuddy是腾讯推出的AI原生桌面智能体工作台，支持通过自然语言驱动AI完成文档生成、数据分析、PPT制作等办公任务。手把手教你用WorkBuddy做HTML视频，核心在于利用HyperFrames技能，让AI自动完成从项目搭建、代码编写到音频生成、视频渲染的全流程。本文将完整记录在WorkBuddy平台上从零到成片制作HTML视频的全过程，涵盖技能安装、对话指令、代码生成、渲染输出等关键环节。
一、为什么选择WorkBuddy制作HTML视频
传统视频制作需要打开After Effects手动创建合成、逐一设置关键帧，渲染后发现不对再改——改一个颜色可能要重新渲染整个序列。音频和画面分开处理，最后在Premiere里合并，整个流程割裂且AI难以介入。
WorkBuddy提供了一种完全不同的创作范式：对话即创作。在WorkBuddy的对话框里输入需求，AI立刻开始工作——不是给一个教程让你自己做，而是直接动手安装技能、创建项目、编写HTML、生成音频、渲染输出。手把手教你用WorkBuddy做HTML视频，只需要在关键节点确认方向即可。
WorkBuddy之所以能做到这一点，依赖三大核心能力：
- 技能系统（Skills） ：AI可以安装专业领域的技能包，获得精确的领域知识和工具链，而不是“什么都懂一点”
- 文件系统访问：AI可以直接在电脑上创建、读取、编辑文件，运行命令
- 上下文记忆：AI知道你之前做了什么，不需要每次从头解释
WorkBuddy由腾讯推出，于2026年3月9日在国内正式发布。它内置多模型切换能力，支持混元、DeepSeek、GLM、Kimi、MiniMax等多种模型，无需自备API Key。最新版本已支持多模态内容生成，包括文生视频、文生3D模型、图生3D模型三大模式。
二、准备工作：安装与初始设置
手把手教你用WorkBuddy做HTML视频的第一步，是完成WorkBuddy的安装和基础配置。
2.1 下载与安装
访问腾讯WorkBuddy官方网站下载对应操作系统的客户端安装包。WorkBuddy支持Windows和macOS系统。下载完成后，按照安装向导完成安装。
2.2 注册与登录
安装完成后打开WorkBuddy，使用腾讯账号或手机号完成注册登录。WorkBuddy是腾讯推出的AI桌面智能助手，定位为“全场景职场AI智能体桌面工作台”。
2.3 工作空间配置
登录后，建议先配置工作空间目录。WorkBuddy的技能和项目文件默认存储在用户目录下：
- 用户级技能目录：
~/.workbuddy/skills/（跨项目可用） - 项目级技能目录：
{workspace}/.workbuddy/skills/（当前项目共享）
建议创建一个专门用于HTML视频制作的项目文件夹，方便管理所有生成的文件和素材。
2.4 积分准备
WorkBuddy采用积分计费模式。视频生成消耗积分较多（约100-200积分/条），建议先确认账户积分充足。WorkBuddy与QClaw同属腾讯“龙虾”AI智能体家族，WorkBuddy偏向企业办公、开箱即用、积分计费。
三、安装视频制作技能（Skills）
手把手教你用WorkBuddy做HTML视频的第二步，是给WorkBuddy装上视频制作的“手”。
3.1 为什么需要安装Skills
WorkBuddy的AI本身有很强的通用能力，但它不会凭空知道“HyperFrames的<audio>标签需要data-track-index属性”或“GSAP的repeat: -1会导致渲染引擎崩溃”。这些领域知识需要通过技能来注入。
Skills就像是给AI安装的专业插件——每个技能包含一份详细的SKILL.md知识文档和参考文件，AI在需要时会自动查阅。安装后，AI从“通用助手”升级为“视频制作专家”。
3.2 HyperFrames技能体系
在WorkBuddy的对话框里告诉AI需要视频制作能力，AI会立即从GitHub仓库安装HyperFrames技能体系。
HyperFrames是HeyGen开源框架——写HTML、出视频，专为AI智能体设计。安装完成后，以下5个技能会被部署到WorkBuddy的技能目录中：
| 技能名称 | 定位 | 核心能力 |
|---|---|---|
| hyperframes | 核心创作引擎 | HTML视频组合、动画编排、转场设计、字幕同步、TTS旁白、音频反应式动画 |
| hyperframes-cli | 命令行工具 | 项目脚手架、语法检查、布局审查、实时预览、渲染输出、语音合成、音频转写 |
| gsap | 动画参考 | GSAP时间线、缓动函数、交错动画、变换性能优化 |
| hyperframes-registry | 组件市场 | 注册表块和组件的安装与接线 |
| website-to-hyperframes | 网页转视频 | 从URL截取网站生成视频 |
安装完成后，WorkBuddy会返回确认信息，告知5个技能已全部部署到你的WorkBuddy环境。
3.3 其他相关技能
除了HyperFrames体系，WorkBuddy还提供了其他视频相关的技能和能力：
- 内容创作专家团：平台内置，无需安装。包含策划、文案、图片生成、视频生成、视频剪辑、内容改编6个Agent的协作团队
- video-editor（柯立Clip） ：剪辑主力，基于Track结构的字幕、水印、滤镜调色、去水印、横竖屏转换
- video-generator（维欧Veo） ：产出视频画面（文生视频/图生视频/人物视频/特效视频）
- content-adapter（艾达Ada） ：视频内容理解、精彩片段提取、视频翻译（声纹克隆+唇型同步）、多素材合成
手把手教你用WorkBuddy做HTML视频，HyperFrames是最核心的技能体系，其他技能可根据实际需要选择性安装。
四、手把手实操：从对话到HTML视频成片
这是手把手教你用WorkBuddy做HTML视频的核心环节。我们将完整记录从一句需求到最终视频输出的全过程。
4.1 第一步：输入需求，启动创作
在WorkBuddy的对话框里输入你的视频需求。不需要懂代码，不需要懂设计，用自然语言描述就行。
以制作一段中国水墨风动画视频为例，可以这样描述：
“帮我制作一段30秒的中国水墨风动画视频，主题是《山海经》中的‘夸父追日’，5个场景，要有画面动画和旁白音频。”
WorkBuddy的AI收到指令后立刻开始工作——它会自动：
- 安装所需的技能
- 创建项目文件夹
- 编写HTML代码
- 生成音频旁白
- 渲染输出最终视频
4.2 第二步：AI自动安装技能
收到需求后，WorkBuddy首先判断需要哪些技能。它会自动从GitHub仓库拉取HyperFrames技能体系并完成安装。
安装过程中，WorkBuddy会执行约28个工具调用、生成约30条过程消息。你可以在对话框里实时看到安装进度。
4.3 第三步：AI编写HTML代码
技能安装完成后，WorkBuddy的AI开始根据你的需求编写HTML代码。HyperFrames的核心工作方式是写HTML、出视频——AI生成的是一个包含完整动画、音频、字幕的HTML文件，这个HTML文件本身就是视频的“源代码”。
AI编写的HTML代码通常包含以下结构：
- 场景定义：5个场景的画面布局和视觉元素
- 动画编排：使用GSAP时间线控制每个元素的入场、出场和过渡动画
- 音频同步：TTS生成的旁白音频与画面动画的时间轴对齐
- 字幕轨道：同步显示旁白文字字幕
WorkBuddy的AI会直接在电脑上创建、读取、编辑文件，运行命令。你不需要手动编写任何代码。
4.4 第四步：生成音频旁白
HyperFrames技能包含TTS（文本转语音）旁白生成能力。AI会根据你的主题描述自动生成旁白脚本，然后通过TTS引擎合成语音。
音频生成后，AI会将音频文件与HTML代码关联，确保旁白与画面动画同步。音频反应式动画功能让画面的某些元素可以随音频节奏变化。
4.5 第五步：渲染输出视频
所有内容准备完成后，AI使用hyperframes-cli命令行工具执行渲染：
- 项目脚手架检查
- 语法检查（lint）
- 布局审查
- 实时预览
- 渲染为MP4格式
渲染完成后，你会在项目文件夹中得到一个可直接播放的MP4视频文件。
4.6 完整实操示例：对话记录
以下是一个手把手教你用WorkBuddy做HTML视频的完整对话示例：
用户输入：
“帮我制作一段30秒的中国水墨风动画视频，主题是《山海经》中的‘夸父追日’，5个场景，要有画面动画和旁白音频。”
WorkBuddy响应（过程摘要）：
- “正在安装HyperFrames技能体系…”
- “5个技能已安装完成：hyperframes、hyperframes-cli、gsap、hyperframes-registry、website-to-hyperframes”
- “正在创建项目文件夹：~/workbuddy-projects/夸父追日/”
- “正在编写HTML代码…场景1：夸父逐日初景；场景2：奔跑跨越山川；场景3：饮干黄河渭水；场景4：力竭倒下；场景5：化作邓林”
- “正在生成旁白音频…”
- “正在渲染视频…渲染完成！视频文件已保存至：~/workbuddy-projects/夸父追日/output.mp4”
整个过程在一个对话框里完成。你要做的只是在关键节点确认方向。
五、WorkBuddy制作HTML视频的三种路径对比
手把手教你用WorkBuddy做HTML视频，可以根据不同需求选择不同的制作路径。下表对三种主要路径进行了横向对比：
| 对比维度 | HyperFrames技能路径 | 多模态文生视频路径 | 专家团协作路径 |
|---|---|---|---|
| 核心原理 | AI写HTML代码渲染视频 | 直接生成视频画面 | 多Agent模拟团队协作 |
| 适用场景 | 动画演示、概念展示、教学视频 | 简单场景、产品展示、概念动画 | 复杂项目、专业级视频制作 |
| 技术门槛 | 无需代码，自然语言驱动 | 无需任何技术背景 | 无需技术背景，需熟悉指令 |
| 视频时长 | 可自由控制（30秒起） | 单次约5-8秒上限 | 可支持60秒以上 |
| 控制精度 | 高（可精确控制每个动画） | 中（依赖Prompt描述质量） | 高（多Agent分工协作） |
| 所需技能 | HyperFrames + gsap | 平台内置，无需安装 | 内容创作专家团（内置） |
| 输出格式 | MP4（含字幕+配音） | MP4 | MP4 |
| 积分消耗 | 中等 | 约100-200积分/条 | 中等至高 |
| 适合人群 | 需要精确控制动画效果的用户 | 快速生成概念视频的用户 | 需要专业级视频输出的用户 |
三种路径各有优势。手把手教你用WorkBuddy做HTML视频，建议从HyperFrames路径入手，因为它提供了最大的控制灵活性和学习价值。
六、进阶技巧与常见问题
6.1 优化Prompt描述技巧
AI生成的质量，很大程度上取决于你如何描述需求。以下是一些实用的Prompt技巧：
技巧一：细节要具体
- 差：“做一个动画视频”
- 好：“制作一段30秒的科技感动画视频，主题是数据从手机飞向云端服务器，蓝紫色渐变背景，带有微光粒子效果”
技巧二：覆盖四个维度
同时描述“主体 + 动作 + 背景 + 风格”，四个维度覆盖越全，生成效果越接近预期。
技巧三：指定技术参数
在描述中加入风格关键词，如“科技感”“温暖日系”“水墨风”“极简大气”等。
6.2 视频时长控制
使用HyperFrames路径时，视频时长可以通过需求描述直接控制。告诉AI你想要的视频时长（如“30秒”“60秒”），AI会据此规划场景数量和每个场景的停留时间。
使用文生视频路径时，注意单次生成时长有上限（约5-8秒），如果需要更长视频，建议拆成多段分别生成再拼接。
6.3 音频与字幕处理
HyperFrames技能支持TTS旁白生成和字幕同步。在需求描述中明确是否需要旁白和字幕，AI会自动处理。
如果已有现成的音频文件，也可以告诉AI使用指定音频文件作为背景音乐或旁白。
6.4 渲染输出优化
渲染时注意以下几点：
- 确保项目文件夹有足够的存储空间
- 渲染过程中不要关闭WorkBuddy或电脑
- 如果渲染失败，检查语法错误提示并让AI修正后重新渲染
6.5 踩坑经验分享
根据实际使用经验，以下是一些常见问题及解决方案：
坑1：指令太模糊
- 问题：“帮我做一个视频”——AI不知道要做什么
- 解决：指令里写清楚主题、时长、风格、场景数量、是否需要音频
坑2：忽略技能安装
- 问题：直接让AI生成视频，但未安装HyperFrames技能
- 解决：先让AI安装HyperFrames技能体系，再开始制作
坑3：渲染失败
- 问题：HTML代码中的动画参数导致渲染引擎崩溃（如GSAP的
repeat: -1） - 解决：AI会在技能文档中学习正确的参数用法，通常能自动避免此类问题
七、WorkBuddy HTML视频的应用场景
手把手教你用WorkBuddy做HTML视频，掌握这项技能后可以应用于多种场景：
7.1 教学演示视频
将复杂的知识点转化为动画演示视频，适合在线教育、产品培训等场景。
7.2 产品宣传片
产品展示、概念展示、理念字幕配合BGM。不需要口播、不需要演员，AI自动生成。
7.3 科普动画
将科普文本快速转换为炫酷的演示动画。基于整理好的Prompt模板集成的Skill，两步自动完成“科普文本→炫酷动画”的转换。
7.4 社交媒体内容
自动生成竖屏视频（1080×1920），包含真实配图、逐句字幕和AI配音。
7.5 数据可视化动画
将数据转化为动态可视化展示，适合报告、演示等场景。
八、总结
手把手教你用WorkBuddy做HTML视频，核心流程可以概括为四个步骤：
- 安装WorkBuddy：下载客户端，完成注册和基础配置
- 安装HyperFrames技能：让AI获得视频制作的专业能力
- 描述需求：用自然语言告诉AI你想要什么样的视频
- 等待生成：AI自动完成HTML代码编写、音频生成和视频渲染
WorkBuddy让视频制作从“手动操作软件”变成了“对话即创作”。无论你是否懂代码、是否会设计，只要能用自然语言描述需求，WorkBuddy就能帮你把想法变成可播放的视频文件。
从“AI给思路”到“AI交成品”，WorkBuddy实现了真正的跨越。手把手教你用WorkBuddy做HTML视频，就是让你掌握这种全新的创作方式——你负责想，AI负责做。
FAQ（常见问题解答）
Q1：手把手教你用WorkBuddy做HTML视频，需要会编程吗？
不需要。WorkBuddy通过自然语言驱动，你只需要用中文描述想要的视频内容、风格和时长，AI会自动完成所有代码编写工作。
Q2：WorkBuddy生成的HTML视频质量如何？
质量取决于需求描述的清晰度。描述越具体，生成效果越接近预期。HyperFrames技能支持GSAP动画引擎，可以生成流畅的专业级动画效果。
Q3：一个30秒的HTML视频从开始到完成需要多久？
从输入需求到渲染完成，通常需要几分钟到十几分钟，具体取决于场景复杂度、音频长度和渲染设置。
Q4：WorkBuddy制作HTML视频需要付费吗？
WorkBuddy采用积分计费模式。视频生成消耗积分较多（约100-200积分/条）。新用户通常有赠送积分，具体以官方政策为准。
Q5：生成的视频可以商用吗？
生成的视频版权归属请参考WorkBuddy官方服务协议。建议在商用前仔细阅读相关条款。
Q6：WorkBuddy支持哪些视频输出格式？
主要输出MP4格式，支持包含配音和字幕的完整视频。
Q7：如果对生成的视频不满意怎么办？
可以在对话中继续描述修改需求，让AI调整HTML代码后重新渲染。也可以调整Prompt描述后重新生成。
Q8：WorkBuddy和QClaw有什么区别？
两者同属腾讯“龙虾”AI智能体家族。WorkBuddy是企业办公优先、开箱即用、积分计费；QClaw是个人极客优先、微信远控、免费+技能生态更强。
Q9：HyperFrames技能在哪里安装？
在WorkBuddy对话框里告诉AI需要视频制作能力，AI会自动从GitHub仓库安装HyperFrames技能体系。也可以在技能商店搜索“HyperFrames”一键安装。
Q10：手把手教你用WorkBuddy做HTML视频，需要安装额外软件吗？
不需要。WorkBuddy是独立客户端，HyperFrames技能安装后即可使用，无需安装After Effects、Premiere等传统视频编辑软件。