让AI帮你审计动效——design-motion-principles让UI告别「假动画」

现在 AI 生成 UI 已经不稀奇了，但做完的页面总觉得「差点意思」——动效要么太僵硬、要么太花哨，真正影响用户体验的微交互反而一个没有。

design-motion-principles 这个 Skill，就是来解决这个问题的。

它是一个专门做交互动效审计的 Claude Code Skill，基于三位顶级动效设计师的方法论：Emil Kowalski（克制与速度）、Jakub Krehel（产品级打磨）、Jhey Tompkins（创意实验）。

两种工作模式：

模式一：构建 — 告诉它你需要做的动效，它会基于你的项目类型，从三位设计师的视角给出加权建议，帮你设计有目的的动画。

模式二：审计 — 丢一个代码库给它，它会：
1. 先做「背景侦察」，判断你的项目类型
2. 找出「动效缺口」——哪些应该有动画但没有（比如条件渲染没有 AnimatePresence、动态样式没有过渡）
3. 从三位设计师视角给出加权评估报告

为什么实用？
很多 AI 生成的页面动画是在「堆效果」，真正影响体验的核心交互反而漏掉了。这个 Skill 用结构化审计清单 + 参考文档，把动效质量评估变成了可量化的流程。

安装方式：

npx skills add kylezantos/design-engineer-auditor-package --skill design-motion-principles

适合：前端开发者、AI UI 生成结果的二次打磨、动效审计流程标准化。

GitHub（306 Stars）：https://github.com/kylezantos/design-engineer-auditor-package

GitHub: https://github.com/kylezantos/design-engineer-auditor-package