moguzbulbul/blueprint-animation

解决的问题

将静态的UX设计转化为连续的、分步的蓝图动画。这使得设计师能够解释UX决策背后的逻辑，展示从“之前”状态到“之后”状态的重新设计过程，或拆解单个屏幕的模块，解释其构建方式的原因。

如何工作

该项目是一个Claude Design技能，通过直接读取Figma文件中的数值、字体和图标，1:1还原设计。它主要在两种模式下运行：

• 重新设计模式：动画展示从“之前”UI到“之后”UI的过渡。界面变为青色蓝图，发生变化的部分被重建，新UI逐步显现。
• 解释模式：保持设计静态，依次将各个模块转化为蓝图，以展示指南、尺寸和标签，解释设计背后的逻辑。

两种模式均遵循结构化的5步动画流程：聚焦模块、应用蓝图扫描线、构建或标注元素、揭示最终UI、保持解释文本。

适用人群

需要制作UX案例研究、重新设计演示、设计逻辑展示或社交媒体内容的UX设计师和产品设计师。

主要亮点

• Figma集成：使用真实字体和导出的图标，1:1还原设计。
• 两种动画模式：支持重新设计过渡和详细模块解释。
• 连续且无剪辑的动画序列。
• 内置质量规则：确保动画流畅，采用分步动画，移动部分不叠加文字。
• Claude Design技能：可作为ZIP文件轻松安装，直接在Claude.ai环境中使用。