AI 动画怎么导出 MP4：不用录屏，本地生成

先解决导出问题

Claude Design 网页版可以用提示词做出动效，但你通常只能在网页里看。想发给别人、放进文章、做成演示视频，都会卡在导出这一步。

最直觉的办法是录屏。录屏能用，但它吃机器性能，也会把播放器外壳、背景、圆角阴影一起录进去。机器一旦卡顿，视频就掉帧。下次再录，结果也未必完全一样。

这类本地 Skill 的思路更适合长期使用：把 Claude Design 的能力装进本地项目，让动画从一开始就可以被程序控制。你得到的不只是网页预览，还有可复现的 MP4。

我会这样判断它值不值得用： 如果一个设计工具只能给我看效果，我会把它当灵感工具；如果它能生成本地文件、继续修改、导出视频或 PPT，我才会把它放进工作流里。

下面保留了本地视频副本，方便直接看效果。你可以先看 10 秒，重点看三件事。

右上角 画面一直围绕 frame = f(t) 展开，说明每一帧都由时间算出来。

底部时间轴 视频反复展示“跳到某一刻就能得到那一帧”，这正是可导出的前提。

后半段流水线 无头浏览器、时间桥、截图、ffmpeg 串起来，最后得到 MP4。

看完再读正文 后面会把这套流程拆成时间函数、逐帧截图和编码三步。

视频示例：本地生成动画，并导出成 MP4。

这套方案用 f(t) 来处理动画。你给动画引擎一个时间点 t，它就能算出这一刻画面里所有元素的位置、大小、透明度和状态。

这和很多人平时写动画的方式不一样。普通动画经常像一串命令：几秒后移动一下，再几秒后淡出一下。状态散在各处，时间一乱，画面就容易乱。

声明式时间轴的思路更干净：你不催着元素跑，只定义“第几秒应该是什么画面”。同一个时间点，每次都产出同一帧。

输入时间t = 12.4s

→

计算画面位置、大小、透明度

→

得到一帧确定、可复现

命令式动画 到了某个时间点再去改状态。适合简单交互，复杂导出时容易受到播放过程影响。

声明式时间轴 直接描述每个时间点的画面。拖动、调试、导出都更稳定。

导出视频时，baoyu-design 的做法更像逐帧拍照。它启动一个没有界面的 Chromium，加载动画页面，用内部控制接口把时间轴拨到指定位置，等浏览器把画面画完，再截一张图。

这些截图不会先落成一堆文件，而是通过管道送给 ffmpeg 编码。以 95 秒、30fps 的动画为例，一共要生成 2850 帧。速度不会像录屏那样实时，但每一帧都按时间点算出来，质量和顺序都可控。

1. 打开无头浏览器 加载本地动画页面，不需要人在浏览器里手动播放。

2. 精确设置时间 让动画引擎跳到某个时间点，比如第 12.4 秒。

3. 等浏览器真正画完 等两帧 requestAnimationFrame，避免截到上一帧残影。

4. 截图并编码 把这一帧送进 ffmpeg，循环到最后一帧，得到 MP4。

画质上还有一个细节：用 2 倍设备像素比渲染，再缩回 1080p。你可以把它理解成先画一张更大的图，再压成目标尺寸。文字边缘和细线会更干净。

动画导出的思路：

for each frame:
  set timeline time
  wait for browser render
  screenshot current frame
  pipe frame to ffmpeg

最后得到一个稳定的 MP4，不依赖实时录屏。

同一类本地工作流也能用在 PPT 上：先生成本地演示稿，借助 Cursor 或 Codex 的浏览器预览，看见哪里不对就直接标记修改，最后导出成可编辑的 PPTX。

这和 MP4 导出是同一类价值：AI 先帮你把设计源做出来，然后你在本地预览、修改、导出。产物不困在某个网页里。

如果只是想让 AI 帮你做一个漂亮页面，Claude Design 网页版已经够用。但如果你要把设计长期放进项目里，或者反复用 Codex/Cursor 改，它就需要变成本地文件。

我会把这类 Skill 放在三个场景里用：

使用前先想清楚： 你要的是“网页里看一眼效果”，还是“可以保存、修改、发给别人、进入版本管理的设计产物”。后者更适合本地 Skill。

安装流程以后单独写。等我们真正用它做一次页面、PPT 或动画，再补一篇从安装到导出的实操教程。现在先把这套思路收进来，方便以后查。

参考来源