从一篇文章制作动态网页视频的完整教程——web-video-presentation

web-video-presentation 是一个面向 AI Coding Agent 的视频网页制作 Skill。它可以把一篇文章或口播稿，整理成口播脚本和视频结构，再由 Agent 自动开发成 16:9 的动态网页；如果需要，还可以继续生成 TTS 配音，并通过自动播放模式进行录屏。

Github链接：web-video-presentation

让Agent帮忙安装即可。

整个过程可以概括为：

准备文章
   ↓
生成口播稿 + 视频规划
   ↓
确认主题和制作方式
   ↓
Agent 开发动态网页
   ↓
验收第一章
   ↓
完成剩余章节
   ↓
可选：生成 TTS
   ↓
自动播放并录屏

一、准备文章，并让 Agent 检查环境

1. 准备一篇原始文章

首先准备要制作成视频的内容。

最简单的方式是在工作目录中放一个：

article.md

它可以是：

  • 博客文章
  • 公众号文章
  • 技术教程
  • 产品介绍
  • 科普文章
  • 已经整理好的视频文案

不需要提前把文章改写成口播稿，Skill 会负责这一部分。

如果不会创建 article.md，也可以直接把文章内容发给 Agent，并让它保存。

例如：

请把我下面提供的文章保存为当前项目中的 article.md。

要求：
- 保留原文内容
- 不要改写
- 保存完成后告诉我

【这里粘贴文章正文】

2. 先让 Agent 检查 Skill 和运行环境

这一阶段需要检查 Node.js、npm，直接让 Agent 处理：

请先阅读并使用 web-video-presentation skill。

现在只做准备工作，不要开始制作视频。

请帮我检查：

1. 当前目录中是否已经有 article.md
2. web-video-presentation skill 是否可以正常读取
3. 制作这个项目需要的运行环境是否已经具备
4. 如果缺少你可以自动安装或修复的依赖，请直接处理
5. 只有遇到必须由我决定或必须由我手动完成的问题时，再告诉我

完成后只向我汇报检查结果和下一步建议，不要开始生成视频。

Agent 检查完成后，如果没有特殊问题，就可以进入内容规划阶段。

二、先生成口播稿和视频规划，不要直接开发网页

这是整个流程的第一阶段。

这一阶段的目标只有两个：

article.md
   ↓
script.md
   +
outline.md

其中：

  • script.md：最终视频使用的口播稿
  • outline.md：视频章节、Step、信息内容和开发计划

这一阶段不要让 Agent 开始写 React，也不要让它直接把整条视频做完。

1. 生成 script.md 和 outline.md

使用下面的 Prompt：

请使用 web-video-presentation skill 处理当前目录中的 article.md。

现在只进行“内容规划阶段”，不要创建 React 项目，不要开发网页，不要生成 TTS。

请完成：

1. 根据 article.md 生成 script.md
2. script.md 要改写成自然、适合视频讲解的中文口播
3. 保留原文的重要观点、案例、数字和技术细节
4. 不要简单摘要原文
5. 根据 script.md 生成 outline.md
6. outline.md 负责规划视频章节、每个 Step 的内容和每章可使用的信息
7. outline 只规划“讲什么”和“画面需要表达什么”，暂时不要提前规定具体动画
8. 按 Skill 的要求分别检查 script.md 和 outline.md，并自动修正明显问题

完成以后停下来。

请向我说明：
- script.md 大约多长
- 预计视频时长
- outline.md 一共有多少章
- 一共有多少个 Step
- 你认为还有哪些内容需要我确认

不要进入网页开发阶段。

这样就不会出现“明明是在做口播和规划，却让 Agent 直接完成视频”的问题。

2. 检查口播稿

Agent 完成后，先看 script.md。

如果不熟悉 Markdown 文件，可以直接让 Agent 把重点内容展示出来：

请先不要继续制作视频。

请把 script.md 按章节展示给我检查，并重点指出：

1. 开头 30 秒讲了什么
2. 每一章的核心内容
3. 有没有比较书面、不适合直接念出来的句子
4. 有没有过长的句子
5. 有没有为了简化而丢掉 article.md 中的重要信息

暂时不要修改，先让我确认。

如果觉得太书面，可以继续：

请修改 script.md：

1. 改得更像自然的视频口播
2. 减少长句
3. 开头尽快进入主题
4. 不要写“大家好，欢迎来到……”这类没有必要的开场
5. 保留关键事实、案例、数字和专业术语
6. 不要使用夸张营销语言

修改完成后重新自检，但不要进入网页开发。

3. 检查视频结构

口播确认后，再检查 outline.md：

请继续停留在内容规划阶段。

请用普通人容易理解的方式向我解释 outline.md：

1. 一共有多少章
2. 每章主要讲什么
3. 每章有多少个 Step
4. 每个 Step 画面准备表达什么信息
5. 哪些章节会使用代码、数字、流程图、对比、时间线或其他视觉方式
6. 有没有某一章内容太多
7. 有没有某个 Step 同时塞了太多信息

如果发现结构问题，请先提出修改建议，不要进入网页开发。

如果结构没有问题，可以让 Agent 进入下一阶段。

三、选择主题，也可以让 Agent 自定义主题

在开始开发网页以前，需要确定整条视频的视觉主题。

Skill 1.2.2 内置 23 套主题。

1. 内置主题一览

主题 ID 中文名 主要风格 适合内容
midnight-press 暗色印刷 暖暗底、热橙强调、电影感编辑风 开发者教程、AI 工具评测、技术 Deep Dive
chalk-garden 粉笔花园 深色黑板、手写字体、粉笔黄 科普、课堂、知识分享、初学者教程
terminal-green 终端绿 黑底、磷光绿、复古 CRT 终端 CLI、黑客、安全、命令行教程
blueprint 蓝图 深藏青、青色线条、工程图纸 系统架构、工程教程、API、SDK
dark-botanical 暗夜植物 高级暗底、柔光、时尚编辑感 品牌、艺术、文化、高端产品
neon-cyber 霓虹赛博 深海军底、青色和玫红霓虹 AI、大模型、Web3、网络安全、未来科技
bold-signal 焦点信号 暗底、大橙色色块、大标题 产品发布、Pitch Deck、营销片头
creative-voltage 电压创意 电光蓝、霓虹黄、复古朋克 设计、创意工作室、艺术、视觉文化
paper-press 亮色印刷 暖奶油底、热橙、杂志感 大众科技、日常工具、温和教程
warm-keynote 暖色 Keynote 奶油底、青色强调、现代 SaaS SaaS、B 端产品、工具介绍、团队汇报
newsroom 报社 报纸奶油、墨黑、报头红 新闻、纪录、热点解读、深度评测
bauhaus-bold 包豪斯 米白、黑色、原色蓝、粗线条 产品发布、观点宣言、设计演讲
sunset-zine 日落 Zine 暖色纸张、洋红、独立杂志感 Vlog、趣味评测、文化、创意内容
monochrome-print 黑白印刷 米白、墨黑、极简高级杂志 学术、思想、品牌故事、文化评论
vintage-editorial 复古编辑 奶油底、暖陶色、杂志专栏感 个人观点、文化随笔、设计话题
pastel-dream 柔光梦 柔和粉蓝、奶油卡片、鼠尾草绿 教学、Onboarding、生活方式、友好科普
split-canvas 双拼画布 蜜桃 + 薰衣草双色分屏 对比、辩论、对话、概念对照
electric-studio 电光企业 净白、电光蓝、企业演示风 B2B、路演、财报、行业报告
indigo-porcelain 靛蓝瓷 瓷白底、深靛蓝、学术期刊感 研究、论文解读、AI 深度内容、严肃汇报
forest-ink 森林墨 象牙纸、森林绿、文献与自然感 自然、环保、纪录、行业观察
kraft-paper 牛皮纸 牛皮米、深棕、手作和怀旧感 文学、历史、书评、手工艺、人文
dune 沙丘 沙色、炭褐、极简建筑画册感 建筑、艺术展览、高端品牌、作品集
swiss-ikb 瑞士克莱因蓝 暖白、克莱因蓝、瑞士国际主义 科技发布、数据汇报、信息设计、严肃品牌

2. 不知道选哪个时，让 Agent 推荐

不需要自己研究 23 个主题。

可以直接：

请根据已经确认的 script.md 和 outline.md，从 web-video-presentation 的内置主题中推荐 3 个最合适的主题。

请用表格告诉我：

- 主题名称
- 视觉感觉
- 为什么适合我的内容
- 可能存在的缺点

最后给出你的第一推荐。

暂时不要创建项目，等我选择。

确定以后，例如：

我选择 blueprint。

请把这个主题作为整条视频的统一主题。
接下来准备进入网页开发阶段。

3. 可以自定义主题

如果 23 套主题都不满意，也可以让 Agent 创建新的主题。

普通用户不需要自己修改 CSS。

例如想做一个：

白色背景 + 科技蓝 + 简洁 + 不要赛博、不发光

可以直接说：

我不使用内置主题。

请按照 web-video-presentation 的主题规范，为这个视频创建一个自定义主题。

主题名称：
clean-tech-blue

视觉要求：
1. 整体使用明亮白色或非常浅的灰白背景
2. 主文字使用深灰黑，不要纯黑压得太重
3. 强调色使用干净的科技蓝
4. 不要紫色
5. 不要霓虹
6. 不要发光
7. 不要大面积渐变
8. 圆角适中，不要大量卡片化
9. 字体清晰，适合普通中文观众观看
10. 整体感觉类似简洁的科技发布会，而不是程序员终端

请：
- 阅读 Skill 的主题规范
- 选择最接近的内置主题作为基础
- 创建完整的自定义主题
- 检查主题文件是否符合 Skill 的主题契约
- 创建完成后告诉我这个主题的特点

暂时不要开发章节。

也可以用更简单的自然语言描述：

请帮我设计一个适合“儿童人工智能科普”的自定义主题。

要求：
- 明亮
- 友好
- 蓝绿色
- 字大
- 不要太幼稚
- 不要赛博朋克
- 不要黑色背景

其余设计由你根据 Skill 的主题规则决定。

Agent 会负责创建主题所需的文件。

四、让 Agent 创建网页，并先完成第一章

主题确认后，才正式进入网页开发。

1. 让 Agent 自动创建项目

这一阶段不需要自己执行脚手架命令、安装依赖、删除示例目录或修改注册文件。

直接使用：

现在进入 web-video-presentation 的网页开发阶段。

已确认：
- script.md 已确认
- outline.md 已确认
- 主题：blueprint

请你自动完成开发准备工作，包括：

1. 按 Skill 的要求创建 presentation 项目
2. 使用我选择的主题
3. 检查并安装项目需要的依赖
4. 删除脚手架中的示例 Chapter
5. 清理示例注册
6. 检查项目是否能正常启动
7. 如果遇到普通技术问题，请你自己解决，不要让我手动输入命令

准备完成后，只开发第一章。

第一章必须做到可以正式验收的质量，不要只做一个简单骨架。

完成第一章后：
- 自动进行代码检查
- 自动启动预览
- 告诉我应该在浏览器打开哪个地址
- 停下来让我验收

在我确认第一章以前，不要继续开发第二章。

Agent 会负责执行实际的命令和代码操作。

用户只需要等待它给出类似：

预览地址：http://localhost:5174

然后复制到浏览器打开即可。

2. 如何验收第一章

打开预览页面后，主要看以下几点：

  • 字是否足够大
  • 一屏内容是否太多
  • 画面是否像视频，而不是普通 PPT
  • 动画是否真的在解释内容
  • 代码、流程、数字是否容易看懂
  • 视觉风格是否符合预期
  • 有没有大量无意义的圆角卡片、渐变、发光和淡入

如果满意：

第一章确认，可以继续。

请保持第一章已经确定的：
- 字体尺度
- 信息密度
- 视觉风格
- 动画节奏
- 代码和流程图的表现方式

进入剩余章节开发。

如果字太小：

第一章整体方向可以，但文字偏小。

请调整：
1. 视频中的主要文字明显放大
2. 次要说明文字也要保证 1080P 录屏后容易阅读
3. 不要通过塞更多小字来增加信息量
4. 调整完成后重新给我预览

如果太像 PPT：

第一章现在太像普通 PPT。

请重新调整这一章：

1. 减少“标题 + 多张卡片 + 多段文字”的版式
2. 一个 Step 只突出一个主要信息
3. 流程关系用连线、移动、节点点亮等方式表达
4. 数字尽量使用动态变化表达
5. 对比内容尽量用空间变化或前后变化表达
6. 不要所有元素都只使用 fadeIn

修改完成后重新给我预览。

如果“AI 网页味”太重：

第一章的 AI 网页感太明显。

请减少：
- 紫粉渐变
- 发光
- 大量圆角卡片
- 药丸按钮
- 无意义装饰
- 所有元素统一淡入

请改成更克制、信息关系更明确的视频画面。

修改后重新让我验收第一章。

3. 开发剩余章节

Prompt：

第一章已经确认。

请按照 outline.md 开发剩余全部章节。

要求：

1. 延续第一章已经确定的整体视觉语言
2. 每个 Step 只表达一个主要信息
3. 不要把文章文字直接大段放到画面上
4. 应该可视化的内容尽量使用流程、连线、数字、时间线、代码、结构图或对比
5. 每一章都按 Skill 的规则维护 narrations.ts
6. 自动检查每章的 Step 数与 narration 数量是否一致
7. 自动完成代码检查和必要修复
8. 不要让我手动运行任何开发命令
9. 全部章节完成后启动完整预览
10. 告诉我浏览器打开地址，并停下来让我从头到尾检查

暂时不要生成 TTS。

如果视频较长，也可以要求 Agent 分批完成：

请每次完成 3 章。

每批完成后：
- 自动检查
- 启动预览
- 告诉我本批新增的是哪些章节

等我确认后再继续下一批。

五、完成网页后，决定是否生成 TTS 配音

网页全部确认以后，有两种方式。

1. 不生成 TTS

适合自己真人配音、后期再加音轨，或者只想把网页当动态演示使用。

可以告诉 Agent：

网页已经确认。

我暂时不生成 TTS。

请按照 web-video-presentation 的录屏要求：
1. 检查整个项目是否适合手动播放
2. 启动最终预览
3. 告诉我应该打开哪个地址
4. 用普通人能理解的方式告诉我如何手动翻页和录屏

不要再修改视频内容。

2. 生成 TTS：先提取口播，不要立即付费生成

如果希望按一次 Space 后，视频和语音自己从头播到尾，可以继续生成 TTS。

先使用：

网页内容已经确认，现在进入 TTS 阶段。

请先不要调用任何付费 TTS API。

请先完成：

1. 按 Skill 的流程，从所有章节的 narrations.ts 提取音频文本
2. 生成 audio-segments.json
3. 自动检查：
   - 有没有遗漏的 Step
   - narration 数量和 Step 数是否一致
   - 有没有异常长的口播
   - 有没有过短、只有几个字的口播
   - 顺序是否正确
4. 把检查结果告诉我
5. 如果有问题，先提出修改建议

完成后停下来，等我确认是否正式生成语音。

确认以后再生成：

audio-segments.json 已确认。

请使用当前已经可用的 TTS Provider 生成全部语音。

要求：
1. 如果存在多个可用 Provider，先告诉我有哪些，并推荐一个
2. 如果生成语音会产生 API 费用，在真正调用前明确告诉我
3. 每个 Step 对应一段音频
4. 生成后自动检查是否有缺失文件
5. 检查异常长的音频片段
6. 完成后启动带音频的预览

不要让我手动执行命令。

如果想指定 OpenAI TTS：

请使用 Skill 内置的 OpenAI TTS Provider。

先检查当前环境是否已经配置需要的 API Key。

- 如果已经配置，告诉我可以继续
- 如果没有配置，只告诉我缺少什么以及应该在哪里设置
- 不要让我把 API Key 直接发在聊天中

确认配置没问题后再生成语音。

3. 某句话读错时怎么修改

例如某个英文产品名读错，可以直接说：

第 3 章第 4 个 Step 的语音里，“Claude Code”读音不合适。

请：
1. 找到对应 narration
2. 在不改变原意的情况下调整适合 TTS 的写法
3. 只重新生成这一段音频
4. 不要重新生成其他已经正确的音频
5. 完成后让我试听对应 Step

不需要重新生成整条视频。

六、自动播放和录屏

TTS 完成以后，可以让 Agent 把项目切换到适合录屏的状态。

Prompt：

TTS 已经确认。

请帮我准备最终录屏：

1. 检查所有章节和音频是否完整
2. 检查 Auto Mode 是否可以正常从头播放到尾
3. 如果发现动画时间长于对应语音，请自动调整或告诉我具体是哪一个 Step
4. 启动最终项目
5. 告诉我 Auto Mode 的浏览器地址
6. 用最简单的步骤告诉我接下来如何录屏

不要再修改已经确认的文案。

Agent 通常会给出类似：

http://localhost:5174/?auto=1

具体端口以 Agent 实际启动项目后给出的地址为准。

Auto Mode 怎么使用

打开 Agent 给出的 Auto Mode 地址以后：

  1. 浏览器进入全屏
  2. 开启系统录屏或 OBS
  3. 开始录制
  4. 按一次 Space
  5. 页面开始自动播放
  6. 每段语音结束后自动进入下一个 Step
  7. 一直播放到最后
  8. 停止录屏
  9. 剪掉开头和结尾多余部分

如果不熟悉 OBS，也可以直接使用 Windows、macOS 或其他系统自带的屏幕录制功能。

如果动画还没结束就翻页

不需要自己改代码，直接告诉 Agent：

Auto Mode 中有些画面在动画结束前就进入了下一个 Step。

请自动检查所有 Step：

1. 找出动画时长超过对应语音时长的位置
2. 优先缩短动画，或者把内容拆成更多 Step
3. 不要通过故意放慢整段 TTS 来解决
4. 修改后重新测试 Auto Mode
5. 告诉我具体修改了哪些 Step

七、推荐的完整操作顺序

对于第一次使用，建议严格按照下面的顺序操作：

阶段 用户需要做什么 Agent 负责什么
1. 准备内容 提供文章 保存 article.md、检查环境
2. 内容规划 检查口播和结构 生成 script.md、outline.md
3. 选择主题 从推荐中选择，或描述想要的风格 分析 23 个主题、创建自定义主题
4. 第一章 打开浏览器验收 创建项目、写代码、启动预览
5. 剩余章节 检查整体效果 开发全部章节、自动代码检查
6. TTS 决定是否生成、试听效果 提取 narration、生成音频、检查缺失
7. 录屏 打开页面并开始录屏 启动 Auto Mode、检查播放同步

可以把整个流程理解成：

你负责：
提供内容
+
做选择
+
看效果
+
录屏

Agent 负责：
检查环境
+
规划视频
+
创建项目
+
写代码
+
执行命令
+
修复错误
+
生成音频
+
启动预览

对于不熟悉编程的用户，最重要的一点是：

不要根据教程自己猜应该执行什么命令。优先直接告诉 Agent 目标，让 Agent 按 Skill 的流程完成技术操作。

八、一套可以直接照着使用的 Prompt 流程

如果不想每次自己组织语言，可以按下面顺序逐条发送。

Prompt 1：检查准备情况

请阅读并使用 web-video-presentation skill。

现在只检查准备情况：
- article.md 是否存在
- Skill 是否可用
- 运行环境是否完整

缺少你能自动处理的依赖时请直接处理。

暂时不要生成口播、不要开发网页。
完成后告诉我检查结果。

Prompt 2：只生成口播和规划

现在进入内容规划阶段。

请根据 article.md：
1. 生成 script.md
2. 生成 outline.md
3. 按 Skill 的要求完成自检和必要修改

这一阶段只完成内容，不要创建 React 项目，不要开发网页，不要生成 TTS。

完成后告诉我预计视频时长、章节数和 Step 总数，然后停下来让我确认。

Prompt 3：推荐主题

script.md 和 outline.md 已确认。

请根据内容从全部内置主题中推荐最合适的 3 个主题，用表格说明区别，并给出第一推荐。

同时告诉我是否有必要为这个视频自定义主题。

暂时不要创建项目。

Prompt 4：开始第一章

主题已经确认。

请进入网页开发阶段。

由你自动完成：
- 创建 presentation
- 使用选定主题
- 处理依赖
- 清理示例内容
- 完成必要的项目配置

然后只开发第一章。

第一章完成后自动检查并启动预览，告诉我浏览器地址，然后停止继续开发，等我验收。

Prompt 5：完成剩余章节

第一章确认。

请按照 outline.md 完成剩余章节。

延续第一章的整体视觉语言，但每章根据内容选择最适合的视觉表达。

请自动处理所有代码、依赖、注册、检查和修复。

完成以后启动完整预览，告诉我地址。

暂时不要生成 TTS。

Prompt 6：准备 TTS

网页已经确认。

请进入 TTS 准备阶段，但暂时不要调用付费 API。

先提取所有 narration，生成 audio-segments.json，并自动检查：
- Step 和 narration 数量
- 顺序
- 过长文本
- 过短文本
- 遗漏内容

完成后告诉我检查结果，等我确认。

Prompt 7：生成 TTS

audio-segments.json 已确认。

请使用当前可用的 TTS Provider 生成音频。

如果会产生费用，请在真正调用前告诉我。

完成后：
- 检查所有音频是否齐全
- 检查异常时长
- 启动音频预览
- 告诉我如何试听

Prompt 8：准备最终录屏

网页和语音都确认。

请准备最终 Auto Mode：

1. 检查所有画面和语音是否同步
2. 修复动画比语音更长的问题
3. 从头测试到尾
4. 启动最终预览
5. 告诉我 Auto Mode 地址
6. 用最简单的步骤告诉我如何开始录屏

不要再修改已确认的文案。

按照这 8 个 Prompt 顺序操作，就可以从一篇原始文章逐步完成动态网页视频，而不需要自己理解 React、TypeScript、Vite 或大部分命令行操作。

posted @ 2026-08-22 22:07  djkwsy  阅读(17)  评论(0)    收藏  举报