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

- 来源：宝玉 (@dotey)
- 发布时间：2026-06-17 08:21
- AIHOT 分数：75
- AIHOT 标记：精选
- AIHOT 链接：https://aihot.virxact.com/items/cmqhc0qfq02z5sle1wpedtx0m
- 原文链接：https://x.com/dotey/status/2067039941960327204

## 精选理由

宝玉把 Claude Design 动画导出能力做成了本地 skill，原理讲得很透，声明式引擎加 f(t) 直接抽帧的思路让开发者能零成本复现，想要高质量 AI 动画输出的创作者可以立即用起来。

## AI 摘要

baoyu-design（本地运行 Claude Design 的 Skill）新增动画视频导出功能。其声明式动画引擎基于 f(t) 设计：任意时间点 t 可绝对确定画面状态。导出采用无头 Chromium 逐帧截图 + ffmpeg 编码，每帧等待两帧 requestAnimationFrame 确保渲染完成。截图以 2 倍 DPR（3840×2160）再缩回 1080p，保证细节清晰。95 秒 30fps 动画需 2850 次截图循环，帧帧精确。项目已开源（MIT），获 1.2K star。此前 baoyu-design 已支持 PPT 本地生成和导出可编辑 PPTX。

## 正文

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 目录，动画引擎的完整实现都在里面。

https://github.com/jimliu/baoyu-design

### 引用推文

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