DESIGN/设计资源·MOTION

motion-design-skill

LottieFiles/motion-design-skill

让 AI 代理像动画总监一样，为 UI 注入有情感、有节奏的动效Teaches AI agents to think like motion directors — creating emotionally-driven, technically sound UI animations with perfect timing and easing.

教AI代理像动画导演一样做UI动效的规则集。A motion design knowledge pack for AI coding assistants — teaches them to think like motion directors before writing animation code.

打开仓库Open repository 上升中Rising

怎么装：Install: npx skills add LottieFiles/motion-design-skill

02 / 现在的位置02 / Why now

它现在处在什么位置Where it stands right now

首次发现FIRST SEEN

03 OCT 202603 OCT 2026

增长GROWTH

+1.9%+1.9%

1.9k → 1.9k stars · 3 个快照1.9k → 1.9k stars · 3 snapshots

状态STATUS

长期未更新Not updated

项目在两个月内获得1912星，说明社区认可度高Created by LottieFiles, the experts behind the Lottie animation format

03 / 它能帮你做什么03 / What it helps you do

它能帮你做成什么What it helps you do

01
让按钮和弹窗动起来时有情绪
02
给加载、成功、报错状态配上动画
03
安排多个元素依次出现的入场顺序
04
为滚动或进度变化设计动画节奏
05
检查现有的动画代码是否合格

01
Add playful entrance animations to UI components
02
Create loading-to-success state transitions
03
Choreograph multi-element entrance sequences
04
Review and improve animation code using motion principles

04 / 安装04 / Install

怎么装How to install

SKILLS-CLI

$

README 里给出的安装方式。The installation method given in the README.

两种装法选一个即可 —— 上面那条给命令行用户，下面那条给写代码的用户。Pick one of the two — the first is for command-line users, the second for people writing code.

在终端运行 npx skills add LottieFiles/motion-design-skillInstall with a single npx command: npx skills add LottieFiles/motion-design-skill.

05 / 限制与风险05 / Limits and risk

限制与风险Limits and risk

风险不是警告，是可信度的一部分。以下结论只基于文档静态扫描，我们不会执行项目里的任何代码。Risk here is evidence, not an alarm. These findings come from static scanning of the docs; we never execute a project’s code.

限制LIMITS

未知Unknown

01需要 API KeyREQUIRES API KEY: 未在文档中发现Not found in the docs
02需要本地环境NEEDS LOCAL RUNTIME: 未在文档中发现Not found in the docs
03需要 DockerNEEDS DOCKER: 未在文档中发现Not found in the docs
04难度DIFFICULTY: 一键安装One-click install

PROVENANCE · 这些结论的依据是什么Where these conclusions come from

来源 URLSource URL: https://github.com/LottieFiles/motion-design-skill
原始数据哈希Raw data hash: 1fe04eaf22dd6412a9769f8808da0137
解析时间Parsed at: 2026-10-05T22:14:23.886Z
最后一次验证Last verified: 2026-10-05T13:45:39.240Z
增长测量时间Growth measured: 2026-10-05T22:16:26.213Z
发现查询Discovery queries: focus:design:repo:design-skill, focus:motion:repo:animation-skill, focus:motion:repo:lottie
分类来源Category source: rules
焦点Focus

完整解析证据 JSONFull parse evidence JSON

{
  "agents": [
    {
      "agent": "claude-code",
      "evidence": "readme: …(https://skills.sh) including Claude Code, Cursor, Codex, GitHub Copilo…"
    },
    {
      "agent": "copilot",
      "evidence": "readme: …g Claude Code, Cursor, Codex, GitHub Copilot, and more. ## What's include…"
    }
  ],
  "apiKey": null,
  "docker": null,
  "taxonomy": {
    "scores": {
      "design": 13,
      "ai-tools": 0,
      "dev-tools": 0,
      "indie-web": 0,
      "skill-agent": 4,
      "productivity": 0
    },
    "primary": "design",
    "secondary": "motion"
  },
  "localRuntime": null,
  "skillMdTotal": 1,
  "skillMdErrors": [],
  "treeTruncated": false,
  "categoryScores": {
    "data": 0,
    "agent": 0,
    "media": 0,
    "design": 21,
    "browser": 0,
    "devtool": 0,
    "security": 0,
    "marketing": 0,
    "productivity": 0
  },
  "classification": [
    {
      "signal": "1 SKILL.md with name + description",
      "weight": 0.95
    },
    {
      "signal": "skills/ directory with 17 markdown files",
      "weight": 0.75
    },
    {
      "signal": "README describes a Claude / Agent Skill",
      "weight": 0.7
    },
    {
      "signal": "name contains 'skill'",
      "weight": 0.4
    },
    {
      "signal": "description mentions AI",
      "weight": 0.2
    }
  ],
  "scannedSources": [
    "readme",
    "skills/motion-design/SKILL.md"
  ],
  "skillMdFetched": 1
}