September 26, 2026
Motion Design Skill
为 AI 编程代理提供通用动效设计原则，涵盖时序、缓动、编排与 Disney 动画原理的 UI 适配。
MITClaude CodeCursorText InputCode OutputDocument Output
```bash
npx skills add LottieFiles/motion-design-skill
``````
Add a playful entrance animation to these card components
```
```
Create a loading → success → error state transition for this form submit button
```
```
Choreograph the entrance sequence for this dashboard — hero chart first, then stats cards, then sidebar
```
```
Review my animation code and suggest improvements based on motion design principles
```Product facts
- Type
- AI Skill & Agent
- Category
- Design & UX › Motion Design
- Pricing
- Open source
- Platforms
- Claude Code · Cursor
- License
- MIT
- Launched
- Sep 26, 2026
- Listed
- Sep 26, 2026
- Website
- github.com
Overview
**Motion Design Skill** 是由 LottieFiles 发布的一款面向 AI 编程代理的动效设计技能包（ai-skill）。它采用「理念优先、实现无关」的设计思路，教导 AI 代理在编写动画代码之前，像动效导演一样思考，选择合适的时序、缓动曲线、编排方式和情感意图。 ### 解决什么问题 开发者在使用 AI 辅助生成 UI 动画时，往往得到的是缺乏设计感的机械运动。该技能包将通用的动效设计原则注入 AI 代理的工作流中，使其输出的动画符合专业标准，同时不绑定任何特定的动画库或框架。 ### 主要能力 - **核心参考**：包含 8 步检查清单、动效性格原型、时长与缓动表格、属性选择指南及质量规则。 - **设计哲学**：深入解析三大支柱理论、Disney 12 项动画原理的 UI 适配版本、情感至动效的映射关系、编排逻辑与叙事结构。 - **模式库**：提供入场/退场动画、状态反馈（成功、错误、加载、悬停）、环境/连续运动以及多元素编排的现成配方。 - **参考资料**：时序与缓动查找表、属性选择指南、质量评估清单以及常见动画问题排查手册。 ### 适用场景 当用户要求 AI 处理以下任务时，该技能会被激活： - UI 动画（按钮、卡片、弹窗、页面过渡） - 微交互与反馈动画 - 加载、成功或错误状态 - 滚动触发或基于进度的动画 - 建立品牌动效识别体系 - 多元素编排与序列控制 ### 兼容性 该技能与具体实现无关，适用于 CSS、Framer Motion、GSAP、Lottie、Spring 等动画系统。支持包括 Claude Code、Cursor、Codex、GitHub Copilot 在内的 40 余种 AI 代理。项目基于 MIT 协议开源。
Key features
- 核心理念指导：通过 SKILL.md 提供 8 步检查清单、动效性格原型、时长与缓动表格等快速参考。
- Disney 原理 UI 适配：将 Disney 12 项动画原理转化为适用于 UI 设计的指导文档。
- 情感至动效映射：提供 emotion-mapping 文档，指导 AI 根据情感意图选择合适的动效表现。
- 多元素编排：包含 choreography 和 multi-element 模块，处理多个元素的协调与序列控制。
- 入场与退场配方：提供 entrance-exit 模式文档，给出可直接使用的入场和退场动画方案。
- 状态反馈动画：涵盖成功、错误、加载、悬停等状态的动画设计配方。
- 环境与连续运动：提供循环、呼吸感、视差等持续性动效的设计模式。
- 时序与缓动查找表：提供参考表格，帮助 AI 代理快速查找合适的动画时长与缓动函数。
- 属性选择指南：指导在不同场景下应选择哪些 CSS 或动画属性进行变化。
- 质量检查清单：提供评估动画质量的标准化检查项。
- 常见问题排查：列出常见的动画缺陷（animation smells）及其修复方法。
- 跨框架兼容：实现无关设计，适用于 CSS、Framer Motion、GSAP、Lottie、Spring 等系统。
Releases
Notify me
Initial · Motion Design SkillQ&A
- 这个技能支持哪些 AI 编程工具？AI-generated
- 原文提到支持 40 多种 AI 代理，明确列出的包括 Claude Code、Cursor、Codex 和 GitHub Copilot。
- 它绑定某个特定的动画库吗？AI-generated
- 不绑定。原文明确说明它是实现无关的（implementation-agnostic），可以与 CSS、Framer Motion、GSAP、Lottie、Spring 等任何动画系统配合使用。
- 如何安装这个技能？AI-generated
- 可以通过命令行运行 npx skills add LottieFiles/motion-design-skill 来安装。
- 什么时候会触发这个技能？AI-generated
- 当你在处理 UI 动画、微交互、状态反馈动画、滚动触发动画、品牌动效识别或多元素编排时，该技能会自动激活。
Bookmark
This product has no owner yet
It was listed by the platform or its author left. If it is your work, prove your relationship to become the owner.
Claim this product