baoyu-design 本地动画视频导出功能更新

宝玉 on X: "baoyu-design skill 可以在本地生成动画视频，导出 mp4 格式，就像附件视频这个。 Claude Design 网页版可以用提示词创建动画视频，但你需要在网页上才能看到视频，无法下载。也有人基于第三方插件录屏软件实现过，不过很麻烦，效果也不是很好。 在这套 Skill 基础上，我已经实现了直接把动画导出成 https://t.co/rBMHNrRUTV" / X

宝玉

@dotey

baoyu-design skill 可以在本地生成动画视频，导出 mp4 格式，就像附件视频这个。 Claude Design 网页版可以用提示词创建动画视频，但你需要在网页上才能看到视频，无法下载。也有人基于第三方插件录屏软件实现过，不过很麻烦，效果也不是很好。 在这套 Skill 基础上，我已经实现了直接把动画导出成

实原理差不多，就是每一帧画面，都是根据所在时间坐标算出来的，就像一个函数 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-d…

00:00

20h

baoyu-design skill（让你本地运行 Claude Design 的 Skill）更新，本地生成 PPT 的效果，可以借助 Cursor、Codex 内置的浏览器预览 PPT，也可以直接用它们的标记工具修改 PPT 细节。按 F 键可以全屏播放。 还可以导出成可以编辑的 PPTX

12:21 AM · Jun 17, 2026

2.3K

Views

2

3

1

13

8

18

Read 2 replies