Motion Designer 是一个专注于前端 UI 动画的技能指南，定位为“Motion Architect”（动效架构师），目标是使用 motion.dev（原 Framer Motion）配合 the-designer MCP 服务器生成先进的界面动画效果。
用途与核心理念：该技能强调四条原则。第一是“物理优于缓动”，交互元素优先使用弹簧物理（type: "spring"），而非标准贝塞尔缓动曲线。第二是布局动画，使用 layout 和 layoutId 处理结构性变化与共享元素过渡。第三是无障碍，必须始终尊重 prefers-reduced-motion 设置，motion.dev 对许多场景默认处理该设置，但手动覆盖时也需确保遵守。第四是克制，避免过度动画，动效应自然、性能良好且有明确目的。
主要能力：技能可访问 generate_motion_snippet 工具。当被要求添加动效时，流程为：识别目标框架（React、Vue、HTML/Vanilla）；使用 engine="motion.dev"；选择合适的动效类别，包括 entrance（入场）、micro（微交互）、stagger（交错）、scroll（滚动）、loader（加载）、transition（转场）、counter（计数）、typewriter（打字机）；并使动效风格与当前使用的设计系统相匹配。
使用方式：该技能依托 MCP 工具 generate_motion_snippet 工作，需在具备 the-designer MCP 服务器的环境中调用，并按上述框架识别与类别选择流程生成动效片段。具体 API 细节需参考 references/motion-dev-guidelines.md。
适用场景：适用于为 React、Vue 或原生 HTML 项目添加符合设计系统的高质量 UI 动效，包括页面元素入场、按钮等微交互、列表交错出现、滚动触发动画、加载指示、页面转场、数字计数与打字机文字效果。
限制：资料未提供具体安装命令、收费信息或完整 API 列表；实际效果取决于 motion.dev 与 MCP 服务器环境。资料中未提及对更多框架的支持，也未说明生成片段的代码规模或兼容性范围，这些暂未提供。