blueprint-animation Skill 技能

技能简介

blueprint-animation 是一款将 UX 设计决策可视化的 Claude Design 技能。它通过连续的画面动画，将一个界面从"现状"演变为"改进后"，或者逐步拆解单个界面模块的设计逻辑。每一帧都是一个完整的设计还原，技能读取 Figma 文件的真实数值、使用真实字体和导出的图标，在渲染前还会与 Figma 导出结果逐一核验。

核心能力

1. Redesign 模式（前后对比）：.live UI 演变为蓝图视图，重建发生变化的部件，然后揭示新 UI，全程无切换。
2. Explain 模式（单界面解析）：设计不改变，每个模块依次变为蓝图，标注线、尺寸线和说明文字绘制出设计决策的依据。
3. Figma 1:1 还原：技能读取 Figma 文件中每个元素的精确数值，使用真实字体和图标，渲染结果与设计稿完全一致。
4. 自动 QA 检查：内置检查清单，渲染前验证无文字覆盖运动部件、无跳帧、过渡平滑等质量要求。
5. 渐进式动画编排：每步聚焦一个 UX 决策，扫描线扫过屏幕进入蓝图状态，元素重建或标注后扫描线再次扫出还原 UI。

安装配置

1. 下载 blueprint-animation.zip（v1.3.1），在 claude.ai 打开 Customize > Skills > + > Create skill > Upload a skill 并选择 ZIP 文件。
2. 在 Claude Design 中分享你的 Before/After 屏幕（或单个屏幕），然后描述你要展示的 UX 改进点，技能即可开始制作动画。
3. 自建 ZIP（可选）：zip -r blueprint-animation.zip blueprint-animation -x "blueprint-animation/.git/" "blueprint-animation/media/"，ZIP 内必须包含 blueprint-animation/SKILL.md。

使用步骤

1. 选择模式：Redesign 模式需要 Before 和 After 两个屏幕，以及 3 至 6 个改进点（每个含问题描述和解决方案一行话）；Explain 模式只需一个屏幕和 3 至 6 个模块说明。
2. 输入设计稿和改动描述：分享 Figma 屏幕链接（或图片），给出每个改动点的名称、问题描述和修复方案。
3. 确认模块划分：技能会列出每个模块的名称和说明，如有需要调整可以修改后再继续。
4. 构建场景代码：技能生成场景 JSX 文件，包含每个步骤的扫描线动画、元素变形或标注绘制。
5. 渲染预览：技能输出 MP4 视频文件，以及 compare.html（对比视图）和 viewer.html（逐帧审阅）。
6. 导出交付：从 compare.html 导出最终视频，或将 clips 拖入你的剪辑软件。

适用场景

1. UX 案例分析展示：在 Portfolio、Dribbble 文章或设计分享中，用动画直观展示改版前后的对比和决策过程。
2. Redesign 提案演示：向团队或客户展示改版思路时，用一镜动画代替静态截图更有说服力。
3. 设计评审记录：将设计决策的原因动画化，帮助开发者和产品经理理解设计意图。
4. 社交媒体传播：小红书、Instagram 等平台上，带有"动画逐步揭示"的设计内容比静态图更吸引互动。

适用人群

1. UX 设计师：需要为作品集或分享内容制作高质量的动效展示。
2. 产品设计师：在评审和提案中展示设计决策的逻辑，而非仅展示最终结果。
3. 设计团队负责人：向非设计背景的干系人（CEO、投资人）解释复杂 UX 决策时的可视化工具。
4. AI 设计工具用户：使用 Claude Design 进行设计时，搭配此技能可以直接产出带动画的演示稿。

工作原理

blueprint-animation 基于 React/JSX 场景图实现，每个场景由一个根组件和多个子步骤组成。技能首先解析 Figma 文件导出数据的结构化 JSON，然后按步骤在 Canvas 上绘制扫描线动画、元素重建动画或标注文字。渲染引擎将每个动画帧通过 Playwright 截图，最后用 ffmpeg 合成为 MP4。场景代码完全自包含，不依赖外部 CDN。

官方链接

• GitHub：https://github.com/moguzbulbul/blueprint-animation
• 作者：Oguz (@moguzbulbul)
• 许可证：CC BY-NC 4.0（非商业用途免费，商业用途需书面授权）