AI 生成动画逻辑图:MiniMax M2.5 + Remotion

MiniMax M2.5 · Remotion · Claude Code Skills · 动画 GIF

我用 MiniMax M2.5 做了很多会动的逻辑图,用来替代文章里的静态配图。

先看效果

循环流程图 莫兰迪卡片网格 可爱流程图

这不是 PPT 动画。是代码渲染的动画,可以导出 GIF,直接当文章配图用。

这篇文章里的每一张动图,就是用这套方法做的。

为什么要做这件事

MiniMax 最近发布了 M2.5,我试了一下它的编程能力,非常惊喜。

它让我对用 AI 做动画产生了浓厚的兴趣。

正好我积压了很久的一个需求——把文章里的静态逻辑图变成动态的。之前一直想做,但没有趁手的工具。

这次用 M2.5 + Remotion 配了一晚上,做出了很多个案例。

而且整套流程都是 M2.5 完成的。不只是写代码,连规划怎么做、查 bug 也全靠它。它的规划能力和调试能力,提升特别大。

为什么动画比静态图好

静态图表达的内容是有限的,动画能表达得更生动。

具体来说,动画比静态图多了三个维度:

静态vs动画对比
  1. 1
    表达逻辑 元素之间的关系,不用读者自己脑补。动画直接演给你看——谁连着谁,谁影响谁。
  2. 2
    表达先后顺序 一个流程有 5 步,静态图画了 5 个箭头,读者要猜从哪开始看。动画里,节点依次弹入,谁先谁后,一目了然。
  3. 3
    表达重点 通过放大、高亮、弹入等效果,引导读者的注意力。重要的东西自己会"跳"出来。

随着 AI 编程能力的提升,普通的静态逻辑图已经限制了表达。该升级了。

怎么做

三步:

三步流程
Step 1

下载 Skill(一次性)

发给 Agent:

帮我把 https://github.com/Ceeon/remotion-skill 克隆到 .claude/skills/remotion 目录下

Agent 自动执行,装好就不用管了。

Step 2

描述你要的图

发给 Agent:

画一个循环流程图:AI识别 → 你审核 → 反馈学习,三个节点形成循环

Agent 画出 ASCII 草图:

🤖 AI识别 ╱ ╲ ╱ ╲ 👤 你审核 ── 📋 反馈学习

看一眼,内容对不对、关系对不对。没问题就下一步。

Step 3

/remotion 生成 GIF

发给 Agent:

/remotion 把上面的 ASCII 做成动画 GIF

Agent 自动完成:生成动画代码 → 渲染 → 导出 GIF。

不需要写代码,不需要调参数。Skill 里内置了设计规范——弹性动画、循环播放、防闪烁缓冲——Agent 读到就知道怎么做。

M2.5 的体验

这次用 MiniMax M2.5 做完整个项目,我认为它进步非常大。

尤其体现在 AI 编程最重要的三个能力上:

🧭

规划能力

以前「想到哪写到哪」,现在能先做清晰的规划,然后按步骤执行

🔍

查 Bug 能力

以前遇到报错瞎改一通,现在能准确定位问题,提出有效修复方案

💻

代码能力

生成的代码结构规范,一次生成就能跑通,小众框架也能写好

规划能力是我感受最明显的提升。这个项目从拆任务、定技术方案到逐步实现,整套规划都是它自己做的。

调试能力也强了很多。以前遇到报错,模型经常瞎改一通,越改越乱。M2.5 能比较准确地定位问题在哪,提出有效的修复方案,不再盲目试错。

生成的代码结构规范,Remotion 这种相对小众的框架,一次生成就能跑通。

我开始在研究 AI 编程 + 动画了,等我继续研究,再跟大家说结果。