design-motion-principles
一个基于三大设计哲学，提供动效创建与审计双模式的AI技能。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：design-motion-principles。 它的用途是：一个基于三大设计哲学，提供动效创建与审计双模式的AI技能。 完整的 Skill 内容见：https://321skill.com/skills/design-motion-principles/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“请审计当前项目src/components/目录下的动效实现。” 它会分析代码，识别缺失的过渡动画和低质量的AI生成动效模式（如滥用悬浮缩放），并生成一份可视化的HTML报告，用循环演示直观展示问题与改进方案。或者，你可以说：“我需要为一个儿童教育应用创建一个有弹跳效果的按钮组件。” 它会根据“创意实验”理念优先加权，生成一个符合情境、性能友好的动效按钮代码。
介绍
这个技能旨在解决开发者在界面动效设计中的两大核心痛点：一是如何为不同场景（如效率工具、儿童应用）创建恰到好处的动效，避免过度设计或过于单调；二是如何系统性地审计现有动效代码，识别缺失的动画或AI生成的低质量动效模式。
它提供两种工作模式：在“创建”模式下，你可以根据项目背景（通过轻量级探索确定），生成集成了动效、可访问性和性能优化的React、Framer Motion、CSS或HTML组件。在“审计”模式下，它会分析你的项目代码，执行“动效缺口分析”以找出本应动画化的静态UI变化，并运行“反AI低质量动效检查清单”，识别并标记那些由AI批量生成、缺乏设计的动效模式（如无处不在的脉动指示器、悬浮缩放）。
该技能非常适合前端开发者、UI/UX设计师以及产品经理，尤其是在需要为不同类型的产品（从严肃的生产力工具到富有创意的营销页面）制定或评审动效设计规范时。它能帮助团队在动效的“克制”、“专业抛光”和“创意实验”三种设计哲学之间找到平衡。
与同类动效生成或代码审查工具相比，它的核心区别在于其哲学驱动的决策框架。它并非提供一套固定的动效规则，而是整合了三位顶尖设计师（Emil Kowalski, Jakub Krehel, Jhey Tompkins）相互制衡的设计理念，并根据你的项目上下文动态加权这些理念，从而提供更具情境感知和针对性的建议，避免了“一刀切”的方案。
核心特点
核心区别在于其哲学驱动的动态决策框架：它整合了三位顶尖设计师相互制衡的动效理念（克制、专业抛光、创意实验），并根据项目类型（如效率工具、儿童应用）动态加权这些理念来提供建议，而非应用单一规则。此外，其审计模式独有的“反AI低质量动效检查清单”能精准识别并警告AI生成代码中常见的、缺乏设计的动效模式。
注意事项
不适合追求单一、固定动效规则库，或项目本身对动效无明确设计哲学要求的场景。
常见问题
这个技能支持哪些开发框架？
支持生成React（配合Framer Motion）、纯CSS以及HTML组件，并能审计相关代码。
审计报告是什么形式的？
默认生成一个包含自动循环CSS演示的独立HTML报告，便于可视化查看问题与建议；也可通过`--terminal`参数获取内联Markdown报告用于命令行或CI环境。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/design-motion-principles/raw/index.md 读取 design-motion-principles 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/design-motion-principles/raw/index.md（查看排版版本）