那个刷屏的设计动画有开源版了：UX 改稿自动拍成蓝图动画

前几天在 X 上被看了几十万次的那段"蓝图动画"——整个 UI 被扫描线扫成青色图纸、该改的地方自己重新拼装——作者把做它的 Skill 开源了。项目叫 blueprint-animation，上线一天拿了 241 星，是一个装进 Claude Design（claude.ai 的设计工作台）的技能包：给它 Figma 稿，它把 UX 改稿的过程拍成一条一步不切换镜头的讲解动画。

它做什么

两种模式，同一套视觉语言。Redesign 模式吃 Before + After 两张稿子：现有界面先整体"蓝屏化"，发生变化的部件在图纸上移动、缩放、合并，最后扫描线再扫一遍，新 UI 显形。Explain 模式只吃一张稿：界面不变，每个模块依次变蓝图，尺寸线、标注和引出说明逐个画出来，讲清"这里为什么这么设计"。

一段动画固定 3-6 个编号步骤，每步只讲一个 UX 决策——聚焦、进蓝图、构建或标注、揭示、落版。官方演示里那段 CRM 公司页改稿，五步分别是"唯一主操作""隐藏空状态""工作优先""统一时间线""就近行动"，每步一句话讲清问题与修法。

对设计师最有说服力的一点：Figma 稿是 1:1 复刻的——Skill 直接读 Figma 文件里的每个数值，用真实字体和导出的图标，而且在开始动画之前，会先把搭好的界面和 Figma 导出图做一致性校验。它还内置了一组"保持干净"的硬规则：文字不许压在运动部件上、新旧状态用隐形替换、动效错峰、交付前跑一遍 QA 清单。

怎么装

到仓库 Releases 下载 blueprint-animation.zip（当前 v1.3.1），在 claude.ai 打开 Customize → Skills → + → Create skill → Upload a skill 传入；然后进 Claude Design，把 Before/After 两张稿子（或单屏）发给它，附上 3-6 个改动点，直接要 blueprint animation 即可。自己打 ZIP 的话注意目录结构必须是 blueprint-animation/SKILL.md。

适合谁用

做 UX 案例复盘的设计师：改稿讲解从"两张图 + 几行字"升级成一条可发布的动画，社会传播形态刚好（竖屏、无镜头切换、逐条讲理）。

写设计文档的团队：Explain 模式等于给每个界面自动生成了"设计依据"片段，评审会上省很多口舌。

想研究 Skill 写法的人：这个仓库是把"动画美学"编码成 agent 可执行约束的一个漂亮样本——五步结构、硬规则、QA 清单都写在 SKILL.md 里，值得拆开读。

两个注意：协议是 CC BY-NC 4.0，非商业使用需署名，商用要找作者（@moguzbulbul）拿书面许可；另外它跑在 Claude Design 的 Skill 体系里，需要能访问 claude.ai 的账号环境。