用网页做视频：一个 AI Agent Skill 如何重新定义内容生产流程

发表于 2026-05-29 更新于 2026-06-01 分类于技术，工具阅读次数：本文字数： 2.8k 阅读时长 ≈ 3 分钟

最近接触了一个很有意思的 Claude Skill，叫 Web Video Presentation。它的理念很简单：把一篇文章或口播稿，一步步做成可录屏的”伪装成视频的网页”，还能自动合成口播音频。

听起来像是一个”网页模板”？不是。它是一个完整的内容生产方法论——从文稿到成片的完整工作流，而且产出物是一个可以部署、可以交互、可以无限修改的网页项目。

这篇文章带你理解这个 Skill 的设计思路，以及它为什么值得创作者关注。

传统做视频，痛点在哪？

先想想我们平时”把文章做成视频”的路径：

核心矛盾是：视频一旦”定稿”，修改成本极高。 改一句文案，可能要重新配音、重新对画面、重新导出。这让很多人在做视频时陷入”要么不做，做了就不能改”的两难。

Web Video Presentation 的解法很独特：不做视频，做一个”看起来像视频的网页”。

这个 Skill 的产出物是一个 Vite + React + TypeScript 项目，运行在浏览器里，16:9 横屏，每次点击推进一”步”，每步独占一整屏。

为什么要用网页？

简单说：你做的不是”一个视频文件”，而是”一个能播放视频的网页”。视频只是这个网页的一种消费方式（录屏），网页本身还可以独立存在。

这个 Skill 定义了一套非常清晰的工作流程：

有两个硬节点（Checkpoint）必须停下来等用户确认。这个设计很务实——做视频最大的成本不是技术，而是”方向跑偏”。第 1 章做出来让用户看，不对就改，代价最小。

一个视频项目里，”步数”出现在至少 5 个地方：口播稿、开发计划、React 组件代码、章节注册、音频文件。最容易出的 bug 就是”多加了一步但忘改音频”。

这个 Skill 的解法是：**narrations.ts 是唯一的真相源。**

// src/chapters/01-intro/narrations.ts
export const narrations = [
  "欢迎来到本期视频。",
  "今天我们要聊的是一个被很多人忽略的问题。",
  "问题是什么？让我们从头说起。",
  // ... 每步一句话
];

5 处信息从 1 个源头派生，彻底消除”不同步”的问题。

内置了 22 套主题，每一套都不是”随便挑了几个颜色”，而是有完整的设计策展：

每套主题都有 mood（情绪标签）、bestFor（适用场景）、preview（四色色板），选主题时一眼就能判断气质是否匹配。

AI 生成的前端页面有极强的视觉指纹：紫粉渐变、圆角彩色边框卡片、假插画、emoji 堆砌、无意义微动效。这个 Skill 专门有一份 CHAPTER-CRAFT.md 讲”反 AI 味反模式”，每次实现单章都要走完工自检。

几条让我印象深刻的规则：

不适合的场景也有：需要真人出镜的 vlog、依赖实拍画面的内容、对实时交互要求高的直播。

这个 Skill 最打动我的不是技术细节，而是它的设计自觉。

它没有说”我给你一个模板，你填内容就行”——它知道模板会杀死创造力。相反，它提供了一套语法（口播驱动、点击推进、逐屏独占）和一套流程（四阶段 + 硬节点 + 自检协议），然后让每次实现都针对具体内容重新设计。

22 套主题是策展的，不是生成的。动画是内容驱动的，不是预设的。风格是自由的，不是统一的。

用网页做视频，本质上是用前端技术重新定义了”视频”的生产方式。 视频不再是”一锤子买卖”的导出文件，而是一个可以持续迭代、可以交互、可以部署的活的网页项目。

如果你也厌倦了 PPT 的僵硬和剪辑工具的繁琐，这个思路值得一试。

参考