mcpField
M
motion-design-skill

motion-design-skill

github.com/podo设计与 UI29170 次安装1 天前更新
代码仓库

关于 motion-design-skill

motion-design-skill 是 LottieFiles 提供的技能，为 AI 编码 Agent 提供与具体实现无关的动效设计指导，涵盖节奏、缓动、编排及适用于 UI 的经典动画原则。

主要功能

  1. 01节奏曲线与缓动指导
  2. 02动画编排原则
  3. 03适用于 UI 的迪士尼原则
  4. 04不依赖特定动画工具链的建议

适用场景

  1. 01为 UI 动画选择缓动方式
  2. 02规划复合动画的先后顺序
  3. 03判断何时以及如何使用动画

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/podo/design-agent-skills --skill motion-design-skill

安装后在 Claude Code 中输入/motion-design-skill确认已加载。

附带文件stub.yaml

详细介绍

motion-design-skill

目录占位内容 — 完整软件包：lottiefiles/motion-design-skill

决策树

  1. 是否已安装软件包？ 检查：你的 Agent 的技能目录中是否包含 motion-design-skill，且其内容不止此占位内容。

    • 是 → 调用 motion-design-skill 并继续
    • 否 → 转到第 2 步

  2. 你使用的是哪种 Agent？

    • Claude Code → npx skills add LottieFiles/motion-design-skill — 或发送 ! npx skills add … 作为聊天消息（全局安装请添加 -g，仅用于当前项目则省略）
    • Cursor → npx skills add LottieFiles/motion-design-skill
    • 其他 → npx skills add LottieFiles/motion-design-skill 或查看 GitHub README

安装命令

npx skills add LottieFiles/motion-design-skill

安装后调用

  • 技能名称：motion-design-skill
  • 触发短语："motion design"、"animation principles"、"LottieFiles"、"Disney principles UI"、"timing curves"

功能

LottieFiles 官方动效设计原则技能。涵盖时间曲线、缓动函数、动画编排，以及适用于 UI 场景的迪士尼 12 条经典动画原则。帮助 Agent 判断何时使用动画、如何选择缓动方式、如何编排复合动画，以及如何平衡动效中的活力与重量感。与具体实现无关 — 这些指导同样适用于 CSS 过渡、GSAP、Framer Motion、Lottie 或任何其他动画工具链。支持 40 多种 AI 编码 Agent。

不适用场景

  • GLSL／着色器级动画（使用 shader-dev）
  • 特定框架的实现（使用 gsap-skills 或 framer-motion-skills）

评论

支持 Markdown