如何让 Agent 自动制作知识讲解视频？今天讲三件事：视频是怎么做的、背后 Skill 是怎么设计的、手把手带大家走一遍完整实战流程——从一篇文章丢进去，到最后出来一个精美的知识讲解视频。

一、视频到底咋做的

先声明： 我的视频不是用视频生成模型做的，也没有用 NotebookLLM。

其实就是网页。自己 Vibe Coding 出来的网页。

为什么选网页？

答案就俩字：可控。

字体、配色、每一步停留几秒、某一帧要不要出现一个精确的数字——这些东西在网页里改几行代码就搞定。比用视频模型抽卡要稳定得多，成本也更低。

关键流程

想要做出这样的效果，有几个关键要点：

1. 把文章变成口播稿

一般原始技术文章的句式会比较书面，比如"该工具旨在提供高效的解决方案"这种话术是没办法直接在视频里念出来的。

需要转成：

• 短句、口语
• 第二人称
• 就像跟人聊天一样

2. 把口播稿拆成开发大纲

每段话都应该对应一个画面步骤，每几个步骤组成一个章节，每章聚焦一个话题。

因为整个开发任务会非常复杂，做好大纲是保持后续开发稳定性的关键。

3. 给每步做视觉演示

不是把文字糊上去就完事。需要给每一步做：

• 动画效果
• 数据可视化
• 图示演示

上期视频效果

那期视频把原始文章拆成了 13 个章节、100 多个细粒度的讲解步骤，每一步都有完整的视觉演示效果。

画布固定在 16:9，可以适配任意大小的显示器。

底部有一个隐藏的进度条，鼠标悬浮到底部才出现，可以自由跳转到任意章节的任意步骤。

画面里没有页眉、没有页码、没有品牌标识。录屏时观众看到的就是一块干净的画面，让它看起来更像视频，而不是网页。

二、Skill 是怎么设计的

Harness 是什么

Harness 是一个 Agent 任务编排框架，支持：

• 多 Agent 协作
• 任务持久化
• 进度追踪
• 断点恢复

Skill 核心功能

功能	说明
文章解析	把长文章拆成结构化内容
口播稿生成	口语化改写
开发大纲	按步骤拆分任务
视觉演示生成	代码级动画效果
进度追踪	可视化任务进度

核心 Prompt 工程

第一步：口播稿生成 Prompt

你是一个技术视频博主，需要把以下文章改写成口播稿：

要求：
1. 口语化，第二人称
2. 短句为主，每句不超过20字
3. 每个知识点用"比如"、"打个比方"等引出例子
4. 保持技术准确性

原文：
{article_content}

第二步：开发大纲 Prompt

基于以下口播稿，生成开发大纲：

要求：
1. 每段话对应一个画面步骤
2. 每5-10步组成一个章节
3. 每个步骤标注预计停留时间
4. 标注需要的视觉元素

口播稿：
{content}

第三步：视觉演示 Prompt

为以下步骤生成 HTML/CSS/JS 代码：

要求：
1. 16:9 画布
2. 简洁的动画效果
3. 清晰的视觉层次
4. 可录屏导出

步骤：
{step_content}

三、完整实战流程

第一步：输入文章 URL

把一篇文章 URL 丢给 Agent，它会自动：

1. 抓取文章内容
2. 解析文章结构
3. 生成口播稿
4. 生成开发大纲

第二步：审核大纲

Agent 生成大纲后，你可以：

• 调整章节顺序
• 修改步骤描述
• 补充遗漏的知识点
• 删除不必要的内容

第三步：生成代码

确认大纲后，Agent 会：

1. 启动 Harness 任务编排
2. 分配子 Agent 生成各个步骤的代码
3. 实时追踪进度
4. 自动合并代码

第四步：本地预览

代码生成完成后：

1. 本地启动开发服务器
2. 预览效果
3. 提出修改意见
4. Agent 实时更新

第五步：录屏导出

效果满意后：

1. 设置录屏参数（1080p/60fps）
2. 隐藏进度条
3. 全屏播放
4. 录屏导出 MP4

四、核心技术栈

层级	技术选型
Agent 框架	Harness
前端框架	React / Vue
动画库	GSAP / Framer Motion
样式	Tailwind CSS
代码高亮	Prism.js / Shiki
字体	JetBrains Mono / Inter

五、避坑指南

坑	解决方案
口播稿太书面	加强口语化 Prompt，强调短句
步骤拆分太细	合并相似步骤，控制总步骤数
动画效果太花哨	简化动画，保持专业感
录屏有品牌标识	使用干净画布，设置浏览器无头模式

总结

这个 Skill 的价值：把一篇技术文章变成精美的知识讲解视频，全流程自动化。

核心流程：

1. 文章 → 口播稿（Prompt 改写）
2. 口播稿 → 开发大纲（结构化拆分）
3. 开发大纲 → 代码（Agent 生成）
4. 代码 → 视频（录屏导出）

一句话：让 Agent 帮你做视频，你只负责审核和发布。