design-engineer-auditor-package
为UI组件注入或审查动效设计的AI技能，提供两种工作模式。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：design-engineer-auditor-package。 它的用途是：为UI组件注入或审查动效设计的AI技能，提供两种工作模式。 完整的 Skill 内容见：https://321skill.com/skills/design-engineer-auditor-package/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“审计当前项目`src/components/`目录下的所有动效实现，看看有没有过度设计或缺失的地方。” 它会自动分析代码，识别出本应有关闭动画却直接消失的模态框、滥用弹性动画的实用按钮等问题，并生成一份图文并茂的HTML报告，用可循环播放的示例直观展示改进方案。
介绍
这个技能旨在解决开发者在UI动效设计中的两大痛点：一是为新组件设计合适的、符合产品语境的动效；二是对现有动效进行质量审查，避免AI生成代码中常见的“动效泛滥”或“动效缺失”问题。它通过整合Emil Kowalski（克制与速度）、Jakub Krehel（生产级打磨）和Jhey Tompkins（创意实验）三位设计师的动效哲学，根据项目类型（如生产力工具、儿童应用、营销网站）智能加权，提供情境化的指导。
使用方式非常直接。在支持的AI编码助手（如Claude Code、Cursor）中，你可以通过自然语言指令触发它的“创建”或“审计”模式。例如，告诉它“为这个按钮添加一个微妙的悬停效果”，它会进入创建模式，生成包含动效的组件代码。如果你说“检查这个页面的动效是否合适”，它会切换到审计模式，分析你的代码并生成报告。
它非常适合前端开发者、UI/UX工程师以及对产品动效品质有要求的团队。无论是快速原型开发，还是在代码评审阶段确保动效的一致性与专业性，这个技能都能提供高效、专业的辅助。
与同类动效生成工具或代码检查工具相比，它的核心区别在于其“多视角加权”系统。它不是生硬地套用一套固定规则，而是让三种有时甚至相互冲突的动效设计哲学进行“对话”，再根据你的项目上下文给出平衡的建议。这使得建议既不会过于保守，也不会过于花哨，更贴合产品的实际定位和用户体验目标。
核心特点
核心区别在于其“情境化加权”系统，它融合了三种截然不同的动效设计哲学（克制、打磨、创意），并根据项目类型动态调整建议权重，而非单一标准。此外，其审计模式独有的“反AI垃圾动效检查清单”，能精准识别并警告AI生成代码中泛滥的、低质量的动效模式。
注意事项
不适合追求单一、固定动效风格指南，或希望完全自动化生成复杂、定制化叙事性动画的场景。
常见问题
这个技能支持哪些框架？
支持生成React（配合Framer Motion）、纯CSS或HTML的动效组件代码。
审计报告是什么样的？
默认生成一个包含自动循环CSS演示的独立HTML报告，直观展示问题与建议；也可通过`--terminal`参数生成纯文本Markdown报告用于CI/CD。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/design-engineer-auditor-package/raw/index.md 读取 design-engineer-auditor-package 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/design-engineer-auditor-package/raw/index.md（查看排版版本）