蓝图改版前后对比

一个 Claude Design 技能，以一段连续的、分步骤的蓝图动画来讲解 UX 设计决策。可以展示从“改版前”到“改版后”的重设计过程，或逐模块讲解单个成品界面。

由 Oğuz 创建 · @moguzbulbul · oguz.design

灵感来自 Arjun Mahesh。

可免费用于非商业用途（CC BY-NC 4.0）。商业使用需获得书面许可。

观看全画质视频

两种模式

Redesign（改版前 + 改版后）：当前 UI 变为蓝图，发生变化的部分自行重建，随后展示新 UI。
Explain（单屏）：设计保持不变。每个模块依次变为蓝图，并显示辅助线、尺寸标注和标签，说明其为何如此设计。

它能做什么

展示一个设计为什么有效，而不仅仅是它看起来什么样。该技能以 3–6 个编号步骤对一屏进行不中断的动画演示。每个步骤解释一个 UX 决策：

聚焦： 屏幕其余部分淡出后退，模块被勾勒出轮廓，并显示问题（Redesign）或其功能（Explain）。
蓝图化： 一条扫描线自上而下扫过，将整个屏幕变成青色蓝图图纸。
构建（Redesign）：只有发生变化的部分移动、调整大小或合并。标注（Explain）：没有任何东西移动；控制柄、辅助线、尺寸线和标签绘制出设计理由。
揭示： 扫描线再次扫过，真实 UI 出现：Redesign 模式下是新版界面，Explain 模式下是原界面。
停留： 修复说明（Redesign）或原因说明（Explain）的句子淡入，随后开始下一步。

你的 Figma 设计会被 1:1 复现。该技能读取 Figma 文件中的每一个数值，使用其真实字体和导出的图标，并在制作动画之前对照 Figma 导出结果检查构建的界面。

该技能还内置了保持画面整洁的规则：不在移动部件上叠加文字、隐形的旧→新切换、错开的动画节奏、流畅的性能，以及交付前的 QA 检查清单。

可用于 UX 案例研究、重设计演示、设计理念阐述和社交帖子。

你需要提供什么

Redesign： 改版前和改版后的界面（以改版后为准），以及 3–6 项改动，每项包含名称、一句话问题描述和一句话修复方案。
Explain： 单个界面和 3–6 个模块，每个模块包含名称、功能说明和设计原因。只需分享界面，技能会提出模块划分建议供你确认。
你的设计系统。

示例

上面的视频展示的是 Redesign 模式：一个 CRM 公司页面在 5 个步骤中完成重设计（One primary action、Hide absence、Open work first、One timeline、Act in context）。完整场景代码见 example-scene.jsx。

在 Claude Design 中安装

下载 blueprint-animation.zip（v1.3.1）。
在 claude.ai 上，打开 Customize → Skills → + → Create skill → Upload a skill 并选择该 ZIP 文件。
在 Claude Design 中，分享你的改版前/改版后界面（或单个界面），然后要求生成蓝图动画。

想自己构建 ZIP？其中必须包含 blueprint-animation/SKILL.md（而不是根目录下的文件）。排除 media 文件夹，它仅用于本页面：

zip -r blueprint-animation.zip blueprint-animation -x "blueprint-animation/.git/*" "blueprint-animation/media/*"

许可证

你可以出于非商业目的使用、分享和改编此技能，但需注明 Oğuz (@moguzbulbul) 并链接到本仓库。
商业使用（例如出售该技能或将其包含在付费产品或服务中）需要书面许可。可在 X 上联系：@moguzbulbul。