我们用 Claude Code 制作了发布视频（并把工具开源了）

HN Code LLM Research 发布日期待确认

Kiln 刚刚发布了 v1。我们用 Claude Code 制作了发布视频。

在这个过程中，我们顺手做了一直想要的那个工具，并把它开源了：videowright。MIT 协议。只需 npm install videowright。

简单说说它能做什么：

• 用提示词生成视频。 描述你想要的效果，AI 代理（agent）帮你写出来。
• 支持任何 Web 技术。 动画 SVG、Lottie、React、Svelte，浏览器能渲染的都能用。不绑定 React。
• AI 配音、音效和音乐。 自动生成并混音。
• 动画自动对齐配音。 语音转文字拿到词级时间戳，代理据此调整视频节奏。
• 像素级精准的 MP4 导出。 用无头浏览器 Playwright 逐帧推进时钟。不靠屏幕录制，不会丢帧。
• 支持热重载的开发服务器。 在浏览器里预览，在对话中迭代，改动即时可见。

Kiln v1 发布视频。在 Claude Code 中制作。

v1 是怎么做出来的

我们需要一支发布视频。外包太慢，找剪辑师也太慢。于是我们试了 Claude Code。

技术栈故意选得很朴素：HTML、CSS、JavaScript。用动画 SVG 做动效，每个视频节拍对应一个 Web Component。我写脚本，Claude 写动画，我们在对话里反复迭代，在浏览器里预览。以 60fps 录屏开发服务器，后期加上配音，发布。

v1 迭代了两天才到能发布的状态。第一版很粗糙，但到最后，整个工作流程的感觉对了。

我们学到了什么

有几件事反复让我们意外。有些在意料之中，有些不是。

Claude 擅长 Web 技术，所以它也擅长做视频

动画解说视频主要由 HTML、CSS、SVG 和时序控制组成。这些在训练数据里到处都是。Claude 写的第一版虽然不是成品视频，但也不至于拿不出手。就像 Claude 能写出一个不丢人的落地页初稿一样。

你可以给真实的应用界面做动画

这是最有趣的发现。让它读取你的应用代码，它就能给界面做动画。

可以把它想成屏幕录制，但带有叙事感。镜头平移到某个按钮，高亮某个功能，放大到真实表单。界面是真实运行的，不是 mock，因为 agent 已经理解了 Web 组件。

做叠加动效，不需要动效软件

有一段创始人出镜的短片段，我们想在画面上叠加真正的动效：Logo 飞入、过渡卡片、结尾 URL。于是让 Claude 在浏览器里渲染这些叠加层，导出成透明的 60fps PNG，再用 ffmpeg 合成到录制好的片段上。

看起来就像正经的动效设计，整个流程不到一小时。

时间轴由音频驱动，而不是视频

v1 时我们犯了个很常见的错误：先做出一版像素级精确的动画视频，然后才录旁白。结果音频对不上，节奏点全错位，屏幕上的文字出现得忽快忽慢，剪辑点也显得别扭。

最后只能按音频把整条视频重新剪了一遍，返工量很大。

这不是 AI 特有的经验，而是通用的剪辑常识：音频领跑，视频跟随。先录（或先写）音频，再让视频的节奏去贴合它。

Videowright 现在把这一点内建进去了。语音转文字会从音频里拿到词级时间戳，agent 技能据此调整每一段视频。重录一句台词，时间轴自动更新，完全不用碰片段代码。

风格统一比想象中更重要

没有风格指南，出来的动效会很泛、很普通。我们本来就有一份品牌风格指南，但在它之上又专门写了一份视频风格指南：动效中的字号、转场方式、缓动曲线、颜色在动效和静态页面中的不同用法。

代码结构决定 diff 的质量

大语言模型（LLM）不擅长处理大段 diff。如果整条视频都塞在一个文件里，那么“交换第 2 段和第 3 段”就会变成一次 5000 行的改动，agent 很容易犯迷糊。

解决办法很直接：一个节拍一个 Web 组件，一个片段一个文件。调整顺序就是重新排列 import，重录旁白只改时间轴文件，片段代码原封不动。

那一刻我们就意识到，应该把这套东西抽成一个库。

迭代才是真正的工作

一个精准的 prompt 确实能一次性生成不错的视频，但你的第一版几乎不可能做到。

大部分功夫都花在迭代上：画面、文案、节奏、音频，方方面面。审美判断贯穿始终。不过只要方案定下来，换一种风格重新生成可以一次搞定。写代码的成本很低，真正贵的是概念设计。

于是我们做了 videowright——开源、从 prompt 到视频的智能体

上面这些经验归结到一点：Claude Code 能写视频，但需要一些可复用的工具。

所以我们动手写了。一个仓库里包含两部分：

• 智能体技能。项目约定、ffmpeg 用法、配音流程模板、如何跨视频复用片段、风格指南、音频素材从哪找，等等。

• 一个库。视频用的 Web 组件、带热重载的开发服务器（在浏览器里预览）、基于 Playwright 的渲染器（导出 MP4）。

跟 Remotion 不同，它不绑定 React。你可以用 SVG 动画、WAAPI、canvas、Svelte、CSS 动画、setTimeout，或者智能体顺手拿起的任何东西。videowright 只是给 Web 组件套了一层薄壳，不是那种带 getNextFrame 循环的图形库。

真正让它跑起来的是渲染器。大多数浏览器端视频工具要么屏幕录制（会丢帧），要么跑自己的渲染循环（把你锁死在它的库里）。videowright 两条路都不走。它用 Playwright 控制时钟，让视频一帧一帧地穿过无头浏览器。像素级精确、可复现、60fps 以上。

Videowright 自己做了发布视频

下面就是 videowright 自己讲解自己，包括完全由 AI 生成的配音和音效：

它能做什么

快速浏览一下。完整内容看 README。

• AI 配音加自动对时。用 ElevenLabs 生成旁白，再做语音转文字拿到词级时间戳，视频节拍就能自动对齐音频。

• 音乐和音效。AI 生成或来自 Creative Commons，帮你找素材、帮你混音。

• 六种内置风格包。也可以用自己的：从品牌指南、参考链接或一段简短描述导入。

• 多视频项目。片头、片尾、转场和 CTA 可以在多条视频间复用。风格一致性能不断叠加。

我们的第一版发布视频做了 2 天。第二条用上 videowright、风格文档，再加上一小套可复用片段，只花了大约两小时。

试试 Videowright

把下面这段贴进你的编程代理就行。Claude Code、Codex、opencode 等都能用。

Install Videowright using these instructions:
https://github.com/scosman/videowright/raw/refs/heads/main/packages/lib/skill/install/INSTALL.md

MIT 协议。GitHub：scosman/videowright。欢迎提 issue 和 PR。

查看原文