这个技能支持哪些 AI 编程工具？

原文提到支持 40 多种 AI 代理，明确列出的包括 Claude Code、Cursor、Codex 和 GitHub Copilot。

它绑定某个特定的动画库吗？

不绑定。原文明确说明它是实现无关的（implementation-agnostic），可以与 CSS、Framer Motion、GSAP、Lottie、Spring 等任何动画系统配合使用。

如何安装这个技能？

可以通过命令行运行 npx skills add LottieFiles/motion-design-skill 来安装。

什么时候会触发这个技能？

当你在处理 UI 动画、微交互、状态反馈动画、滚动触发动画、品牌动效识别或多元素编排时，该技能会自动激活。

2026年9月26日

Motion Design Skill

设计与体验动效设计0

获取资源

为 AI 编程代理提供通用动效设计原则，涵盖时序、缓动、编排与 Disney 动画原理的 UI 适配。

MITClaude CodeCursor文本代码文档

Lottie 动效微交互设计动效规范

安装 / 调用方式bash

```bash
npx skills add LottieFiles/motion-design-skill
```

调用示例json

```
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
```

产品信息

形态: AI技能 & 智能体
分类: 设计与体验 › 动效设计
定价: 开源
平台: Claude Code · Cursor
授权协议: MIT
首发日期: 2026年9月26日
收录时间: 2026年9月26日
官网: github.com

概览

GitHub GitHub

**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 协议开源。

功能特性

核心理念指导：通过 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 等系统。

版本更新

新版本提醒我

首个版本 · Motion Design Skill

2026年9月26日

Q&A

这个技能支持哪些 AI 编程工具？由 AI 生成: 原文提到支持 40 多种 AI 代理，明确列出的包括 Claude Code、Cursor、Codex 和 GitHub Copilot。
它绑定某个特定的动画库吗？由 AI 生成: 不绑定。原文明确说明它是实现无关的（implementation-agnostic），可以与 CSS、Framer Motion、GSAP、Lottie、Spring 等任何动画系统配合使用。
如何安装这个技能？由 AI 生成: 可以通过命令行运行 npx skills add LottieFiles/motion-design-skill 来安装。
什么时候会触发这个技能？由 AI 生成: 当你在处理 UI 动画、微交互、状态反馈动画、滚动触发动画、品牌动效识别或多元素编排时，该技能会自动激活。

获取资源

这个产品还没有主理人

由平台收录或原作者已注销。如果它是你的作品，证明与它的关系后即可成为主理人。

认领这个产品