关于 motion-director
Motion Director 是一项技能，引导实现 Agent 为界面、页面、视频和动画素材规划并检查动效。它帮助选择动画技术栈，并定义编排、时序、无障碍行为和质量检查。
主要功能
- 01确定动效输出目标
- 02选择动画技术栈
- 03定义编排与时序
- 04指定减少动态效果的行为
- 05使用动效质量评估标准
适用场景
- 01规划产品界面动效
- 02设计落地页动画
- 03制作社交视频或 GIF
- 04检查嵌入式动画素材
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/motion-director确认已加载。
详细介绍
动效导演
工作流
- 确定输出目标：产品 UI、落地页、社交视频、GIF、设计原型或嵌入式动画资源。
- 明确动效的作用：引导注意力、解释状态、增添乐趣、讲解概念或传达品牌形象。
- 选择技术栈：
- 用 Motion 实现 React UI 状态和布局过渡。
- 用 GSAP 实现时间轴、滚动、SVG、文本和高可控编排。
- 用 Rive 实现交互式状态机动画。
- 用 Lottie 实现可移植的矢量循环动画。
- 用 Remotion 渲染视频/GIF。
- 用 Three.js 创建空间/3D 场景。
- 指定时间参数、缓动、交错规则和减少动态效果时的行为。
- 让实现 Agent 修改代码。
- 捕获输出，并根据动效质量评估标准进行评分。
输出格式
返回：
- 动效目标
- 推荐技术栈
- 动作编排
- 时间/缓动参数
- 减少动态效果时的处理方式
- 实现说明
- QA 检查清单
评论
支持 Markdown