起点：看到 code秘密花园的视频
我做视频这件事，是被 code 秘密花园带进门的。
那阵子我刷到他开源的 garden-skills——一个 Agent Skill 集合，里面有个叫 web-video-presentation 的 Skill。它的功能很戳我：把一篇文章或口播稿，做成”看起来像视频”的 16:9 点击驱动网页，每次点击推进一段口播，每一步独占整屏。
听起来像动态 PPT，但又不只是 PPT——画面有动效、有节奏、有电影感。我装上试了几次，确实能跑：输入一篇 markdown，产出 Vite + React + TS 项目，跑起来就是一段可以录屏的演示。
那段时间我做了好几条视频，全是 web-video-presentation 出的活。
痛点：画面不是我要的那种
但它生成的画面不是我想要的。
web-video-presentation 的核心定位是「伪装成视频的网页」——大字、留白、每屏独占、组件驱动。这种风格做教学、产品 demo、keynote 录屏非常合适，但我经常要做的是另一类：
- 抖音 / 小红书的竖屏短视频
- 知识讲解类（概念辨析、流程拆解、对比分析）
- 不依赖真人出镜，纯靠图形 + 字幕驱动
- 要发手机竖着刷，不是电脑横着看
这种场景下，“网页化大字 + 留白”的视觉气质就跑偏了。我要的是 SVG 插画、紧凑的镜头切换、竖屏节奏感。
调了几次风格，每次都不太对味——因为 web-video-presentation 本质上是方法论 + 协作流程驱动，每个项目的美学决策都要重新设计，骨架并不固定。这反而让我这种”想要竖屏知识短视频”的需求变成了每次都得重新解释一遍的事。
转折：跟 Claude Code 讨论重做一个
有天我跟 Claude Code 聊这件事，原话大概是：
「我用 web-video-presentation 做竖屏知识短视频，但画面总是不对。我想要的是 SVG 插画驱动、镜头切换、竖屏节奏。能不能我们一起来做一个新的 skill，专门解决这类场景？」
Claude Code 的反应不是直接开干，而是反过来问我：
- 你要做的视频有没有固定的叙事结构？（反转 / 教程 / 故事）
- 美学决策你想每次重做，还是固化几种风格？
- 产出物是什么？（HTML 动画？带配音？带提词器？）
这一轮讨论之后，我们的方向清晰了——做一个跟 web-video-presentation 完全相反的 skill：
| 维度 | web-video-presentation | 我们要做的新 skill |
|---|---|---|
| 本质 | 伪装成视频的网页 | 纯 HTML/CSS/SVG 动画 |
| 美学决策 | 每个项目重新设计 | 固定几种风格选其一 |
| 协作方式 | 多次 Checkpoint 协作 | 一键出货 |
| 画幅 | 16:9 | 9:16 + 16:9 |
| 典型时长 | 5-30 分钟 | 30-90 秒 |
| 适合 | B 站讲解 / keynote | 抖音 / 小红书短视频 |
于是我们就开始做了，新 skill 取名叫 html-animation-video。
一起把 skill 做出来
做这个 skill 的过程，跟写代码完全是两件事。我们前后讨论了大半个月，反复打磨细节：
第一步 · 设计风格矩阵
我提了三种我最常用的视觉风格：
- minimal——黑白极简线条 + 一抹强调色
- cyberpunk——赛博朋克霓虹
- claude-warm——Anthropic 官网那种暖色
Claude Code 帮我把每种风格的配色 token、笔触约定、动画类、构件库、构图原则、反模式都整理成 svg-library 规范。
每种风格 × 2 种画幅（9:16 竖屏 + 16:9 横屏）= 6 个 skeleton 模板。
第二步 · 设计 6 步工作流
Step 1 · 解析输入（URL / 文本 / 大纲）
Step 2 · 分镜设计（8-16 镜，每镜填四件套）
Step 3 · 选风格 + 读规范
Step 4 · 生成 SVG 插画
Step 5 · 注入骨架
Step 6 · 产出三件套Claude Code 写得很细——比如「单镜元素数 ≤ 25」「viewBox 留白 ≥ 35%」「坐标对齐到 10 的倍数」「至少 1 个持续动效」这些硬约束，都是我们一轮轮调出来的。
第三步 · 三件套产出
| 文件 | 用途 |
|---|---|
animation.html | 动画主文件，浏览器打开即播，录屏导出 |
voice-script.md | 配音脚本，可直接录音 |
teleprompter.html | 提词器，录屏时用作字幕机 |
调用一句话：
/html-animation-video https://example.com/article
--style minimal
--ratio 9x16整个流程大概 15 分钟出活，主要时间花在生成 SVG 插画上。不依赖任何图片生成 API，完全本地化——这也是我做这个 skill 时最看重的一点。
写在最后
整个过程让我对 AI 协作有了一个挺深的体会——
web-video-presentation 是 ConardLi 把他的工作流沉淀下来开源给大家用。我用了，觉得好，但发现不完全适合自己的场景。
如果是以前的我，可能会凑合用，或者放弃。
但有了 Claude Code 之后，我可以把”不合适”这件事，变成一个新的 skill。不是抱怨别人的工具不行，而是跟 AI 一起把自己的真实需求拆解清楚，再做成可复用的流程。
ConardLi 的 skill 解决的是他的问题。我的 skill 解决的是我的问题。工具的演化，本质上就是不同的人把自己具体的需求，沉淀成不同的 SOP。
不是 AI 替我做视频，是我跟 AI 一起把”做视频这件事”拆解得让我自己能持续做下去。