Claude 帮我给自己的应用做了一个 18 分钟的教程

我本以为，开发并上线一个内部 AI 助手才是最让人惊艳的部分。结果是，这个大部分由 Claude 做出来的教程和用户指南，才真正把我震到了。

Claude 点过了我们内部应用的每一个界面，敲入演示用的 prompt，用一个不是我的声音给每个章节配音，做出带品牌的标题卡，还把整个东西转写成了两种语言。在整个拍摄过程中，我基本上就坐在那儿，看着我自己的应用给自己做了一遍导览。

我们需要给 MemodoAI 做一份上手材料——它是我们在公司内部运行的 AI 助手（一个自托管的 LibreChat fork）。需求是：一个演示视频和一份书面指南，这样我就不用一直给同事当技术支持了。有意思的地方在于，我能把多少工作交出去——以及那两件交不出去的。

教程本身会走查我们真实的内部产品，所以我不会把整整十八分钟都放到 YouTube 上。下面这段是一个简短的剪辑合集：片头和片尾卡、过渡的 bumper，以及走查里的一些片段。足够让你看到 Claude 做出了什么。

看不到播放器？在 YouTube 上观看。

我们到底做了什么

两份交付物，一个唯一事实来源（single source of truth）。

这个唯一事实来源是一份 shot list（分镜清单）：每个章节都拆成 Action（要点击或输入什么）、Expected UI（之后屏幕上应该出现什么）和 Capture（截图或章节名）。当产品的 UI 变化时，你只改这一个文件，并且只重拍受影响的章节。视频和书面指南都从它读取，所以它们不会各走各的。正是这一个决定，让一个视频和一份指南没有变成两份各自独立的维护负担。

下游的一切都挂在这个文件上：截图、配音脚本、章节列表、字幕。

是纪录片，不是动画片

这是让其余一切各就各位的思维模型。产品教程不是一段 motion graphics（动态图形），而是一段纪录式的屏幕录制，外面包了薄薄一层带品牌的装饰。

这个重新定义之所以重要，是因为它告诉你该把精力花在哪里。最后会合成三条轨道：

• 纪录轨是实时屏幕录制。大约占总时长的 90%。
• 装饰轨是带品牌的片头、章节标题卡、片尾。也许只占总时长的 10%，却承载了大约 90% 的观感精致度。
• 音频轨是配音，每个章节一个文件。

每条轨道都有自己的一条小流水线，所以我可以重新渲染配音而不用重拍，或者换掉一张标题卡而不用重新剪。把它们保持独立，正是让迭代变得便宜的原因。

Claude 操作了实时产品

我们通过 Claude-in-Chrome 扩展，把 Claude Code 连到那个已经打开、已经登录的浏览器上。我特意选了扩展而不是 Playwright：会话已经登录，所以没有什么认证设置要操心。Claude 可以直接在实时产品上动手。

在它探查实时产品、逐个界面点过去、看我们的部署里到底开了哪些功能时，它给每一个界面都截了一张固定 1440×900 的区域截图，让一切对齐。我们之前定好了一个十五章节的结构，三十二张带标注的 PNG 出来时正好编号对得上。书面指南就是用这些截图做出来的。

至于视频本身，那份 shot list（一个单独的 markdown 文件，recording-script.md）同时充当了 Claude Code 的任务清单。我把 Claude Code 对准它，它就一行一行往下做：读每一条 Action，通过扩展在实时浏览器里执行点击或按键，把结果对照 Expected UI 检查一遍，然后再到下一行。一个普通的 markdown 文件当脚本，一个真实的、已登录的产品当运行时（runtime）。

配音是 ElevenLabs 的 text-to-speech 做的。十八个 MP3，每个章节一个，加起来约二十分钟，是从一份为朗读而非阅读而写的脚本渲染出来的（短句，靠标点来控制节奏）。一份约 17,000 字符的脚本整段渲染大约花了一美元。事后改一句话只要几分钱。

10% 让它看起来很专业

带品牌的装饰来自 Claude Design：一张 logo 飞入的片头卡、一张片尾，以及十四张章节标题卡。这就是装饰轨，正是它把一段合格的屏幕录制变成看起来像是刻意制作出来的东西。没有动态图形工具，没有设计师参与，直接按品牌生成。

还留在我手里的部分

两件事，我两件都要说出来，因为「Claude 做了这个视频」这句话悄悄把它们略过去了。

第一件是按下录制。我连这个都想自动化，结果失败了。早期的一次尝试在后台跑了 screencapture -v，让 Claude 把整个走查跑完；那一条录像没了，因为当这个工具被另一个进程杀掉时，它不会把文件落盘——所以一段干净的十二分钟录制最后什么都没产出。最后行得通的分工是：屏幕上的每一步操作归 Claude，OBS 的录制按钮归一个人。Claude 从头到尾走一遍脚本，我来开始和停止录制。（有一个更自动化的未来：通过 OBS 的 websocket API 用带名字的章节标记来脚本化控制它。等哪天这变成一项经常要交付的活儿，就值得做了。现在还不是。）

第二件是剪辑，这件我不想轻描淡写。这三条轨道不会自己拼到一起。我在 Shotcut 里把它们拼起来：屏幕录制放在视频轨上，每个章节前面放一张标题卡，片头片尾放在两端，然后是慢工的部分——把十八段配音一点点挪动，直到每一句旁白都正好落在它所描述的那次点击上。如果你是靠剪视频吃饭的，这就只是日常工作，没什么稀奇。如果不是，那这里是老实话：这是实打实的一整天，一帧一帧地挪片段，再反复回看检查是否对得上。每一样食材都是 Claude 做的。装盘的，依然是坐在剪辑台前的我。

真正的剪辑，也是我亲手做的那部分。上面的视频轨是被切成一段段的屏幕录制；下面那些绿色的条是十八个配音文件（section-01.mp3、section-02.mp3……）；彩色的标记是章节标记。把绿色和蓝色对齐，就是最耗时间的地方。

转写

我用 whisper.cpp 转写的是最终剪好的成片，而不是单独导出的音频，这样时间戳就能和章节所指向的那段视频精确对上。一次运行就产出了 SRT 和 VTT 字幕、纯文本，以及带 token 时间戳的 JSON，英文和德文都有，外加那份十五条的章节列表——它驱动着应用内播放器里可点击的章节。

它现在住在哪里

视频、转写文本、章节，还有书面指南，全都出现在 MemodoAI 里面。书面指南本身是一个自包含的双语 HTML 页面，Claude Design 用同一份 Markdown 草稿和同一批截图做出来的：一个文件，所有资源都内联进去，英文和德文。

书面指南：和视频一样的那十五个章节，被 Claude Design 打磨成了一个自包含的双语（EN/DE）页面。

在产品里，这一切都汇集在同一个页面上：视频在最前面，章节列表在旁边，字幕、转写文本和书面指南都只差一次点击，每一样都有英文或德文。

• A. 章节列表。 点任意一条，就能跳到视频里的那个位置。
• B. 字幕。 英文和德文。
• C. 完整转写文本。 英文和德文。
• D. 书面指南。 英文和德文。

shot list、配音脚本、截图，还有那些小小的 tooling 脚本（TTS 渲染器、whisper 封装脚本），如果你想看看真正的机器是怎么运转的，全都在仓库里：GitHub 上的 docs/memodo-ai-tutorial。

这一切都是一个人做的

先从这个视频往后退一步，因为它是架在某个大得多的东西上面的。

在这些上手材料存在之前，我其实早就把 MemodoAI 本身搭好了：一个用 Docker 容器化的内部 AI 助手，带日志、监控和可观测性（observability），对进出的数据做安全处理和 PII 检测，能读取大多数 Microsoft Office 文档，还接入了我们的 Microsoft 365 环境。那才是真正的产品。那个十八分钟的教程和那份双语指南，是它跑起来之后我才往上加的东西。

这两样都是一个人做的。放在几年前，这句话需要一个后端工程师、一个 DevOps、一个安全审查员、一个技术写作者、一个录屏师、一个配音演员，还有一个 motion designer。我是以一支「一人军队」的方式做完的，因为 Claude 把这些角色里的大部分都压缩成了一句话：「决定你想要什么，然后检查它做出来的东西。」

我并不是说它自己就跑完了。架构决策是我做的，做错的地方是我接住的，录制按钮是我按的，视频也是我拼起来的。但是，一个有动力的人能交付的东西，和过去需要一整个团队才能做出来的东西，这两者之间的距离已经基本消失了。这个视频我不会拿去交给客户。但是用作内部上手材料，它比我自己一个人能做出来的任何东西都好，而且只花了一小部分时间。

怎么做你自己的一份

如果你想做出同样的东西，这里是整条流水线，从头到尾。

1. 一边在实时产品里走查，一边顺手把截图截了。 通过 Claude-in-Chrome 扩展，把 Claude Code 连到你真实的、已登录的应用上，让它和你一起把整个界面过一遍。定好一个章节结构（我用了十五个），然后在同一次实时走查里，给每个界面截一张区域截图。书面指南后面就是用这些截图来做的。
2. 写 shot list。 一个文件，一步一行：要执行的操作、操作之后你期望出现的 UI，以及要捕捉的资源（一个截图名或一个章节标题）。这就是那个让视频和指南保持同步的唯一事实来源。
3. 写配音脚本。 每个章节一段，是为朗读而写的，不是为阅读而写的：短句，用标点来控制节奏，不要「点击这里」。把制作提示标出来，免得被一起念出来。
4. 渲染配音。 把脚本发给一个 text-to-speech API（我用的是 ElevenLabs），每个章节拿到一个音频文件。事后改一行，重渲染很便宜。
5. 录屏。 让 Claude 把浏览器从头到尾在 shot list 上走一遍，同时由一个人操作 OBS 的录制按钮。先拿到一条干净的录像；所有拼装都放到后面做。
6. 做带品牌的装饰。 在 Claude Design 里生成片头卡、片尾，以及每个章节一张标题卡，都按你的品牌来。这就是那层让整个东西看起来像是制作出来的薄薄外壳。
7. 剪视频。 在一个剪辑软件里（我用的是 Shotcut），把屏幕录制放在一条轨上、配音放在另一条轨上，在每个章节前面放一张标题卡，然后挪动音频，直到旁白正好落在它所描述的操作上。
8. 转写成片。 把做好的视频丢给 whisper.cpp，拿到字幕、一份纯文本转写和一个章节列表。如果你想要第二种语言，就再来一遍。
9. 写好并打磨指南。 用同一批截图，把走查写成 Markdown 草稿，然后把草稿和图片交给 Claude Design，导出一个自包含的 HTML 页面。
10. 把它放到人们本来就在的地方。 把视频、转写文本、章节和指南，放到你的用户本来就会去看的地方。对我们来说，那是产品里面的一个页面。