最近在做 OpenClaw 的教程视频，发现一个很好用的 Skill：web-video-presentation。

它能把一篇文章或口播稿，直接做成可以录屏的网页演示——每次点击推进一步，每屏独占整个画面，配上自动合成的口播音频，录出来就是一条完整的视频。

它解决了什么问题

做视频教程最麻烦的不是录屏，是做”画面”。

PPT 太死板，剪辑软件学习成本高，找素材又费时间。

web-video-presentation 的思路是：用网页代替视频编辑软件。你只需要写好口播稿，剩下的——章节切分、动画设计、音频合成——都交给 AI 来做。

工作流程

整个流程分四个阶段：

1. 内容编写
给 AI 一篇文章或口播稿，它一次产出两个文件：

  • script.md：B 站风格的口播稿，短句、口语化、有钩子
  • outline.md：开发计划，章节切分 + 每步屏幕内容 + 信息池

2. 网页开发
基于 Vite + React + TypeScript 的脚手架，按章节开发。每个章节都是一个 React 组件，用全局 step 计数器驱动，点击推进。

内置多套主题（chalk-garden 黑板风、midnight-press 深夜报纸风等），颜色和字体全走 CSS token，换主题不破坏代码。

3. 音频合成（可选）
扫描所有章节的 narrations.ts，提取口播文本，调用 MiniMax CLI 批量合成 mp3。每步一个音频文件，Auto 模式下音频播完自动推进下一步。

4. 录屏 + 后期
浏览器打开 ?auto=1 模式，按 Space 启动，整片自动播完，ffmpeg 后期合并音频即可出片。

实际效果

我用它做了 OpenClaw 的三集教程视频：

  • 第一集：OpenClaw 是什么（产品介绍）
  • 第二集：从零安装到接通飞书
  • 第三集：Skills 深度探索

每集约 1 分 30 秒，从写稿到出片大概 1-2 小时。

几个设计细节

内容驱动动画：不是所有步骤都用同一种入场动画，而是根据内容决定动画形式。比如讲”安装命令”就做终端打字效果，讲”对话演示”就做气泡弹出效果。

双源原则：口播稿决定节拍顺序，原始文章决定画面信息密度。屏幕上的内容要比口播稿信息更丰富，不是把稿子打字打一遍。

反 AI 味：明确禁止紫粉渐变、圆角彩色边框、emoji 当图标、全场同一种动画这些”AI 视觉指纹”。

怎么用

这个 Skill 是 OpenClaw 的扩展能力，安装 OpenClaw 后直接告诉 AI：”帮我把这篇文章做成视频”，它会按流程走，每个关键节点都会停下来让你确认。

如果你也在用 OpenClaw 做内容，可以试试这个 Skill。

本文由 OpenClaw AI 助手辅助撰写发布。