Repolode
LottieFiles

LottieFiles/motion-design-skill

一套教 AI 智能体进行 UI 动效设计的技能包,涵盖时序、缓动与编排,与具体动画库无关。

Star
2,329
Fork
149
未关闭 Issue
1
最近提交
5个月前

这是什么?

Motion Design Skill 是一套供 AI 智能体使用的指令包,让智能体在编写动画代码之前先像动效设计师一样思考,确定时序、缓动、编排以及动效背后的情绪意图,而不是只针对某个库直接输出代码。

该技能包将迪士尼十二条动画原则改编到用户界面场景中,并提供八步检查清单、动效性格原型,以及时长与缓动的速查表。它还包含可直接套用的配方,涵盖入场与离场动画、加载、成功、错误等状态反馈、环境循环动效,以及多元素错峰编排。

它可以配合 CSS、Framer Motion、GSAP、Lottie 和弹簧动画系统使用。通过 npx skills add 安装,支持 40 多种编程智能体,包括 Claude Code、Cursor、Codex 和 GitHub Copilot。

核心功能

  • 01在动手实现前梳理时序、缓动、编排与情绪意图
  • 02将迪士尼十二条动画原则改编用于界面设计
  • 03提供入场离场、状态反馈、环境动效和多元素错峰的配方
  • 04附带时长与缓动速查表及质量检查清单
  • 05与动画库无关,可配合 CSS、Framer Motion、GSAP、Lottie 或弹簧动画使用

适用场景

  • 为 Web 应用的卡片或列表组件添加入场动画
  • 为表单提交按钮设计加载、成功与错误状态的过渡
  • 编排仪表盘各组件的出现顺序
  • 依据动效设计原则审查现有动画代码

快速上手

  1. 1

    为你的智能体安装该技能

    npx skills add LottieFiles/motion-design-skill

使用前须知

  • 通过 skills.sh 支持 40 多种智能体,但 README 除安装命令外未说明其他设置步骤。

标签

常见问题

motion-design-skill 是什么?
一套教 AI 智能体进行 UI 动效设计的技能包,涵盖时序、缓动与编排,与具体动画库无关。 Motion Design Skill 是一套供 AI 智能体使用的指令包,让智能体在编写动画代码之前先像动效设计师一样思考,确定时序、缓动、编排以及动效背后的情绪意图,而不是只针对某个库直接输出代码。
motion-design-skill 可以免费使用吗?用的什么许可证?
motion-design-skill 以 MIT 许可证开源。用于商业产品前,请先确认许可证条款。
motion-design-skill 还在维护吗?
半年内有更新。motion-design-skill 最近一次提交是在 2026年5月18日。
motion-design-skill 适合用来做什么?
为 Web 应用的卡片或列表组件添加入场动画 为表单提交按钮设计加载、成功与错误状态的过渡 编排仪表盘各组件的出现顺序 依据动效设计原则审查现有动画代码
motion-design-skill 怎么安装和运行?
为你的智能体安装该技能: npx skills add LottieFiles/motion-design-skill
在哪里获取 motion-design-skill?
源代码和安装说明在 GitHub 上:https://github.com/LottieFiles/motion-design-skill

概要由 AI 根据项目 README 生成;GitHub 数据每日更新。

相关项目