baoyu-design skill 可以在本地生成动画视频，导出 mp4 格式，就像附件视频这个。

Claude Design 网页版可以用提示词创建动画视频，但你需要在网页上才能看到视频，无法下载。也有人基于第三方插件录屏软件实现过，不过很麻烦，效果也不是很好。

在这套 Skill 基础上，我已经实现了直接把动画导出成 mp4 视频的能力。

生成动画和导出视频，其实原理差不多，就是每一帧画面，都是根据所在时间坐标算出来的，就像一个函数 f(t)，你传入给动画引擎任意一个时间点 t，它能直接算出那一瞬间屏幕上每个元素的位置、透明度、大小，所有视觉状态完全由 t 决定。不需要从头播放到那个时刻，也不需要记住之前发生了什么。

传统写动画的方式是命令式的：到了某个时刻，去改某个元素的位置，把透明度调一下。状态散落在各处，时间一乱画面就乱。这套引擎反过来，用的是声明式思路：你不去驱动元素运动，只描述在第 t 秒，每个元素应该长什么样。

打个比方，传统动画像看电影，你必须从头看才知道第 30 分钟画面是什么。这套引擎更像一本特殊的书，翻到任意一页，画面都是完整的、确定的。

这个设计带来了三个能力：

1. 拖动播放条跳到任意位置可以，因为 f(t) 随时能算；
2. 反复调试同一个画面可以，因为同一个 t 永远产出同一帧；
3. 把动画导出成视频也可以，而且方式很巧妙。

那么导出视频是怎么实现的呢？

直觉上，把浏览器里的动画变成 MP4，录个屏不就行了？

录屏是实时的。机器稍微一卡就掉帧，拍出来的视频不可复现。而且播放条、黑色背景、圆角阴影这些"播放器外壳"会一起被录进去。

baoyu-design 用的方法更像定格动画的拍摄：启动一个无头浏览器（没有界面的 Chromium），加载动画页面，通过引擎预留的一个控制接口精确操控时间轴。每设定一个时间点，等浏览器把画面渲染完成，截一张图，通过管道直接喂给 ffmpeg 编码。一段 95 秒、30fps 的动画就是 2850 次"摆好时间，拍照"的循环。慢，但每一帧都是精确的，绝不掉帧。

这里有个容易忽略的细节：设定时间后，工具会等两帧 requestAnimationFrame 再截图。因为修改时间只是改了 React 状态，浏览器还需要一到两帧才能把新画面真正画到屏幕上。等少了，截到的可能是上一帧的残影。

为了让画面更锐利，截图时用 2 倍设备像素比渲染，实际按 3840×2160 出图，最后由 ffmpeg 缩回 1080p。原理和高分辨率印刷一样：先在更大的画布上精细绘制，再高质量缩小，文字边缘和细线会明显更清晰。

baoyu-design 在 GitHub 开源（MIT 协议），目前 1.2K star。感兴趣的可以去看看它的 skills/baoyu-design 目录，动画引擎的完整实现都在里面。

项目地址：github.com/jimliu/baoyu-design http://t.cn/AXXQrevF http://t.cn/AXajaWOe