AI 设计工具一直在演示阶段很惊艳，落地交付时却经常卡壳——导出一环尤其明显。宝玉这次开源的 baoyu-design 项目把 Claude Design 的动画导出能力完整复刻到本地，思路是声明式动画引擎加上无头浏览器抽帧，看似朴素，效果却相当能打。这套玩法的关键在于 f(t) 函数设计：任意时间点 t，画面状态都是绝对确定的，而不是靠时间累积推算出来。这意味着导出不再是“录屏”，而是“逐帧精确还原”，95 秒的 30fps 动画要做 2850 次截图循环，每一帧都严丝合缝，没有传统录屏工具常见的帧丢失和漂移问题。
声明式动画：把“时间”变成可以计算的变量
f(t) 函数为什么是关键
绝大多数网页动画的实现方式是命令式的：脚本里写一串“5 秒后元素 A 移动到位置 B，7 秒后渐隐”，最终画面要等到运行时才能确定。这种模式下想精确导出几乎只能靠录屏，而录屏必然带来性能波动和帧率不稳定。baoyu-design 走的是相反的路子——动画状态完全由 f(t) 描述，给定 t 就给出那一帧所有元素的精确坐标、透明度、变换矩阵。这种设计的好处是把动画从“黑盒”变成“白盒”：导出端只要让 t 从 0 走到 duration，就能拿到每一帧的真实数据，而不是事后用视频编码去猜。
无头浏览器抽帧的真实代价
工程上这套方案并不轻巧。实现方式是启动一个无头 Chromium 实例，按帧去访问对应 t 的页面状态，等两帧 requestAnimationFrame 确保渲染彻底完成再截图，再继续下一帧。看似简单粗暴，实际是把浏览器当成一个确定性渲染器来用。这种做法的代价是性能开销大、CPU 占用高，但换来的是“所见即所得”——Claude Design 里调出来的动画，导出后帧帧一致，不会出现开发环境看着对、生产环境变了样的尴尬。
导出管线：2 倍 DPR 是细节控的胜利
为什么截图要 3840×2160 再缩回 1080p
导出环节最反直觉的设计是截图分辨率。原始目标是 1080p（1920×1080），但 baoyu-design 选择用 2 倍 DPR 也就是 3840×2160 去截图，再缩回目标分辨率。这不是炫技，而是高 DPI 屏幕下抗锯齿的硬需求——直接以 1080p 抓帧，文字边缘、细线条、渐变区域会出现明显的锯齿和摩尔纹，放大 2 倍再降采样，相当于做了一次超采样抗锯齿，最终画面锐度和干净度都会好一截。对做品牌动画、产品演示的人来说，这点画质提升肉眼可辨。
ffmpeg 编码：被低估的收尾环节
截图得到的是几千张 PNG，要拼成视频还得靠 ffmpeg。这个环节容易被忽视，但参数选择直接决定最终成片质量。baoyu-design 的处理思路是保持原始帧率、不做插帧，让声明式引擎算出来的每一帧都原汁原味进编码器。这种“前端精确、后端不二次加工”的流程，和很多录屏工具先用可变帧率抓、再用软件补帧的做法形成鲜明对比。结果就是运动轨迹平滑、节奏准确——动画师最在意的“手感”不会被压缩算法吃掉。
本地优先：开源策略的又一次胜利
MIT 协议下 1.2K star 的信号
项目用 MIT 协议开源，上线不久就拿到 1.2K star，在工具类项目里算得上不错的起步成绩。更值得注意的是，这并不是 baoyu-design 的第一次出圈——之前它已经实现过 Claude Design 的 PPT 本地生成和可编辑 PPTX 导出，这次相当于把“动起来”这件事补齐。可以看出宝玉的路线很清晰：把 Claude Design 的能力逐项拆解，做成可独立运行的本地 skill，让用户在保留原有工作流的同时摆脱对在线工具的依赖。
对创作者的实际意义
对于真正要拿 AI 动画去交付的创作者，这套工具解决的是一个长期痛点：在 Claude Design 里调好的动画，要么只能录屏降画质导出，要么得手动一帧帧截图再拼接。前者质量不可控，后者效率太低。baoyu-design 给出的第三条路是把整个流程自动化，开发者可以零成本复现整套管线，也可以基于这个声明式动画引擎去扩展自己的导出逻辑——比如换成 WebM 格式、加水印、批量处理，本质上都是在这个 f(t) 函数基础上做工程叠加。
技术选型之外的思考
为什么“本地”比“云端”更适合这件事
动画导出天然是个重计算任务：2850 次截图循环、4K 超采样、ffmpeg 编码——任何一环放在云端都会面临带宽、延迟、隐私三重门槛。本地运行不仅响应快，数据还不离开用户机器，对设计稿这种敏感资产来说是个加分项。更深层的意义是，这类工具把“AI 生成”和“本地可控”重新缝合在一起：创意阶段用 AI 提高效率，落地阶段用开源工具保证质量和所有权。这条路径很可能成为未来 AI 创作工具的主流形态——不是取代设计师，而是把设计师从重复劳动里解放出来。
接下来可以期待什么
从 PPT 到动画视频，baoyu-design 已经覆盖了 Claude Design 静态和动态两大输出场景。下一步大概率会往两个方向走：一是优化导出性能，比如用 GPU 加速截图或者改成 WebCodecs 直接在浏览器里编码；二是扩展格式支持，比如导出 GIF 用于社媒分享，或者导出带透明通道的 WebM 用于产品演示。不管哪个方向，核心思路都不会变——把 AI 设计工具的能力完整搬回本地，让创作者既能享受 AI 红利，又不被平台绑架。这种工具越多，设计行业的“AI 工具链”才越接近成熟。
