前端设计的下半场，已经从"画得对"转向"动得对"。过去半年我们评过设计系统、主题换肤、设计转代码、结构可视化，但有一个一直被低估的层级始终缺席——动效与微交互（motion & micro-interaction）。它是把静态界面"点活"的那一层：页面加载序列、滚动叙事、按钮按下回弹、表单校验抖动、骨架屏退场。一个页面是否"像作品"，往往不取决于配色，而取决于这一层。
2026 年中，Claude Code 的 Skills 生态出现了一批专门啃这根硬骨头的引擎。它们普遍绕开"再生成一个组件库"的红海，转而把 GSAP、Framer Motion、Lottie、CSS keyframes 这些动效基建封装成可被 Agent 直接调用的能力。本期第 2 轮评测锁定这个垂直赛道，从十余个同类 Skill 中筛出 7 个代表，按功能完整度、上手难度、变现潜力、训练营适用性、社区活跃度五个维度拆解，给出谁该装、谁能卖、谁能进课表的明确判断。
| Skill | 来源 | 功能完整度(25%) | 上手难度(20%) | 变现潜力(25%) | 训练营适用(15%) | 社区活跃(15%) | 加权 |
|---|---|---|---|---|---|---|---|
| ai-animation | arcasilesgroup | ★★★★☆ | ★★★★☆ | ★★★★☆ | ★★★★☆ | ★★★★☆ | 4.10 |
| animation-forge | Eskapeum | ★★★★★ | ★★★☆☆ | ★★★★★ | ★★★★★ | ★★★☆☆ | 4.20 |
| framer-motion-skill | Schoepplake | ★★★★★ | ★★★☆☆ | ★★★★☆ | ★★★★☆ | ★★★☆☆ | 4.00 |
| web-animation-skills | iart-ai | ★★★★☆ | ★★★☆☆ | ★★★★☆ | ★★★★☆ | ★★★☆☆ | 3.70 |
| motion-design | LottieFiles | ★★★★☆ | ★★★★☆ | ★★★★★ | ★★★★☆ | ★★★★☆ | 4.25 |
| micro-interaction-designer | Eli-yu-first | ★★★☆☆ | ★★★★☆ | ★★★☆☆ | ★★★★★ | ★★★☆☆ | 3.45 |
| animation-micro-interaction-pack | majiayu000 | ★★★☆☆ | ★★★★★ | ★★★☆☆ | ★★★★☆ | ★★☆☆☆ | 3.35 |
评分说明：功能完整度看是否覆盖多库/多场景，上手难度看是否需动效基础（星多=更易上手），变现潜力看能否改造为付费组件或课程，训练营适用看是否适合教学拆解，社区活跃看 Star/更新频率。
来源：arcasilesgroup/ai-engineering（同时托管在 copilotline），跨 Claude / Codex / OpenCode 多 Agent 平台分发。安装：/plugin marketplace add arcasilesgroup/copilotline 或将 .claude/skills/ai-animation 复制到本地 skills 目录。
它是这批里定位最"正"的一个：触发词覆盖"给这个组件加点动画""设计一个微交互（按钮按下、悬停、聚焦）""加转场"。核心能力围绕三件事——弹簧动画（spring）、手势响应（gestures）、状态转场（state transitions）。它不会硬塞某一个库，而是先判断你的栈（React 用 Motion，纯 Web 用 CSS/GSAP），再给方案。
评分：功能完整度 ★★★★☆（多库但深度不及专用 skill），上手 ★★★★☆（触发自然），变现 ★★★★☆（可直接打包进外包交付），训练营 ★★★★☆（案例齐全适合做"动效入门"课的 demo 库），社区 ★★★★☆（多平台分发，曝光度高）。
变现/训练营：适合做"动效即外包溢价"的小课——客户分不清 React 状态机和 spring 物理参数，但能感知"这个网站有质感"。可改造为按页面计费的动效套餐。对比：比 framer-motion-skill 更通用，比 animation-forge 更轻；属于"什么都不极致但什么都不缺"的中位选择。
来源：Eskapeum/animation-forge，README 自称"The world's most comprehensive web animation skill for Claude Code"，封装了"25+ 年动效设计经验"。安装：git clone 到 .claude/skills/animation-forge。
它的野心写在标题里。深度评测下来，它确实把动效当成一门"工程"而非"装饰"来处理：覆盖 CSS keyframes、GSAP 时间线、Motion、Lottie JSON、SVG path 动画、滚动驱动、可访问性兜底，并且强调性能预算（will-change、GPU 合成层、prefers-reduced-motion）。它适合一次性把整个产品的动效语言定下来——加载、入场、悬停、成功/失败、错误抖动、骨架退场，一次生成一套规范。
评分：功能 ★★★★★（这批最全），上手 ★★★☆☆（信息量大，新手会迷路），变现 ★★★★★（可直接产出"动效设计系统"交付物，按项目报价），训练营 ★★★★★（是天然的进阶课教材），社区 ★★★☆☆（单仓库，热度依赖口碑）。
变现/训练营：这是本期最适合做"动效训练营"主课的引擎。把它拆成 7 周——CSS / GSAP / Motion / Lottie / SVG / 滚动 / 可访问性，每周一个模块，结业作业是给一个真实落地页设计全套动效。对比：iart-ai 的 web-animation-skills 库覆盖面接近，但 animation-forge 的"叙事性"更强，更接近教学。
来源：Schoepplake/framer-motion-skill，GitHub 开源。安装：git clone 后放入项目 .claude/skills，依赖 framer-motion（现 Motion，npm 最新 12.x）。
如果你 90% 的前端是 React/Next.js，这是最省心的选择。它不做"什么库都聊两句"的万金油，而是把 Framer Motion 的 AnimatePresence、useScroll、useInView、手势拖拽、布局动画（layoutId）这些高价值 API 做成 production-grade 模式库。给一个组件描述，它直接产出可运行的 .tsx，入场/退场/滚动触发一气呵成。
评分：功能 ★★★★★（在 React 域内极深），上手 ★★★☆☆（需要懂 React 和基本 hooks），变现 ★★★★☆（React 外包场景硬通货），训练营 ★★★★☆（适合"前端进阶"课的动效章节），社区 ★★★☆☆（个人维护，更新随作者节奏）。
变现/训练营：适合嵌进已有的"React 实战训练营"，作为第 N 周"让你的应用有生命"的模块。单独卖略薄，组合卖很香。对比：比 ai-animation 在 React 上更深更快，但出了 React 就哑火。mcpmarket 上的 framer-motion-interactive-animation 与之高度同质，二选一即可。
来源：iart-ai/web-animation-skills，GitHub 开源。安装：克隆到 skills 目录，按需启用子模块。
它的定位是"动效基建全家桶"：GSAP、SVG、Lottie、微交互、粒子效果各自独立成模块。亮点在于粒子效果——大多数同类 skill 不碰 canvas/WebGL，它敢碰。适合需要"会下雪的落地页""鼠标跟随的光斑""品牌发布会那种粒子聚合 logo"的场景。
评分：功能 ★★★★☆（多库 + 粒子加分），上手 ★★★☆☆（模块多需挑选），变现 ★★★★☆（粒子效果是高客单视觉，能单独报价），训练营 ★★★★☆（模块化适合分章），社区 ★★★☆☆。
变现/训练营：粒子/3D 感的视觉是品牌方愿意付溢价的"Wow 时刻"。可把粒子模块单独抽出来做"品牌发布会落地页"高端课。对比：在纯 Web（非 React）场景下，它是 animation-forge 的有力替补；GSAP 部分两者重叠，粒子部分 web-animation-skills 独有。
来源：LottieFiles 出品的 motion-design skill（awesomeskill.ai/skill/lottiefiles-motion-design-skill-motion-design）。安装：经 LottieFiles 官方分发渠道或 skills 市场索引。
这是本期唯一有"正规军"血统的——LottieFiles 本身就是动效基建的供应商，Lottie 格式的定义者。它的 skill 因此在 Lottie 工作流上无人能敌：从 After Effects 导出的 JSON 如何瘦身、如何按状态切换 Lottie、如何在 React/Vue 里挂载与控制播放段落，它都给了官方级的范式。同时强调"emotionally-driven"——动效要先服务情绪再服务技术。
评分：功能 ★★★★☆（Lottie 域顶级，泛动效中等），上手 ★★★★☆（有官方文档兜底），变现 ★★★★★（厂商品牌可借势，Lottie 资产本身可变现），训练营 ★★★★☆，社区 ★★★★☆（厂商维护，更新稳定）。
变现/训练营：变现天花板最高。一条路是做"Lottie 资产订阅"——把动效打包成可卖的素材库；另一条是借 LottieFiles 品牌做联名课。对比：它是这批里唯一能讲"资产变现"而非"代码变现"故事的，定位独特。mcpmarket 的 motion-design-ui-animation 更偏"让 Claude 当动效工程师"，偏代码侧，与之互补。
来源：Eli-yu-first/skillshub（开放 Skills 平台）。安装：经 skillshub 或 LobeHub 索引拉取。
它走了一条与众不同的路——不直接写代码，而是产出微交互规格：触发器（trigger）、规则（rules）、反馈（feedback）、循环（loops）四要素，配上 timing、easing、状态转移表。本质是把 Dan Saffer 的微交互理论变成结构化输出。Owl-Listener 的 micro-interaction-spec 是同类思路。
评分：功能 ★★★☆☆（只到规格不到代码），上手 ★★★★☆（不需要编程基础，设计师友好），变现 ★★★☆☆（规格文档难以单独定价），训练营 ★★★★★（绝佳的"动效思维"入门教具），社区 ★★★☆☆。
变现/训练营：训练营价值被严重低估。用它做"动效设计基础"第一课——先让学生学会用结构化语言描述一个微交互，再进入实现。这是把"凭感觉调动画"的人变成"有方法论"的人的关键一步。对比：它和 animation-micro-interaction-pack 是这批里"不写代码"的两个，前者偏规格文档，后者偏代码原则片段。
来源：majiayu000/claude-skill-registry（OpenSkillIndex / eliteai.tools 索引）。安装：经 registry 拉取，单文件级 skill。
它是这批里最轻的——不追求覆盖所有库，而是沉淀几条"铁律"：微交互用 200–300ms、尊重 prefers-reduced-motion、只动 transform/opacity、弹簧优于线性。本质是一份"动效纪律"，挂在 Agent 上下文里，避免它生成花哨但卡顿的动画。
评分：功能 ★★★☆☆（原则而非实现），上手 ★★★★★（即装即用零门槛），变现 ★★★☆☆（太轻难独立成产品），训练营 ★★★★☆（适合当"避坑清单"发给学生），社区 ★★☆☆☆（个人小项目）。
变现/训练营：不适合单独变现，但适合作为任何前端训练营的"动效卫生"插件——学生交付前过一遍这几条原则，立刻提升档次。对比：它是 ai-animation / animation-forge 的"轻量补丁"，和它们叠加使用效果最好。
mindmap
root((动效/微交互 Skills))
按能力层级
规格与原则层
micro-interaction-designer
animation-micro-interaction-pack
实现代码层
ai-animation
framer-motion-skill
web-animation-skills
全栈系统层
animation-forge
按动效基建
CSS Keyframes
GSAP 时间线
Framer Motion / Motion
Lottie JSON
SVG Path
Canvas 粒子
按典型场景
页面加载序列
滚动叙事/视差
悬停/按下微交互
成功失败反馈
骨架屏退场
按变现路径
外包溢价
动效训练营
Lottie 资产订阅
品牌发布会视觉
🥇 综合首选 Top 3 1. motion-design（LottieFiles） — 厂商背书 + 资产变现双引擎，加权 4.25。 2. animation-forge — 功能最全、最像"产品"，加权 4.20。 3. ai-animation — 多平台通用、零短板，加权 4.10。
💰 变现潜力榜 1. motion-design（资产可订阅、品牌可借势） 2. animation-forge（可直接交付"动效设计系统"） 3. web-animation-skills（粒子视觉高客单）
🎓 训练营教学榜 1. animation-forge（天然 7 周进阶课骨架） 2. micro-interaction-designer（动效思维入门第一课） 3. ai-animation（案例库式 demo 集合）
⚡ 上手最快榜 1. animation-micro-interaction-pack（即装即用的纪律包） 2. ai-animation（触发词自然） 3. motion-design（官方文档兜底）
⚛️ React 专精榜 1. framer-motion-skill（深度无人能及） 2. ai-animation（自动识别 React 栈） 3. motion-design（Lottie 在 React 的挂载范式）
这个垂直赛道目前呈现清晰的"三层结构"：规格层（怎么想）、实现层（怎么写）、资产层（怎么卖）。绝大多数人的误区是直接跳到实现层去比谁的 GSAP 调得溜，却忽略了——真正决定交付质感的是规格层的纪律，真正决定能否变现的是资产层的厚度。
落地建议分三种人：外包/独立开发者装 ai-animation + animation-micro-interaction-pack 组合，覆盖 80% 场景且不会跑偏；做课/做内容的老师把 animation-forge 当主课、micro-interaction-designer 当第一课；想做被动收入的人盯住 motion-design，把 Lottie 动效沉淀成可订阅的素材库。三套打法互不冲突，但别指望一个 skill 同时把三件事做完——这正是这个生态目前最诚实的地方：垂直、分工、各赚各的钱。
[!tip] 51学通信知识星球 星主：爱卫生（微信：gprshome201101）——公众号「51学通信」创办者，19 年通信行业运维与讲师经验，著有《GPRS网络信令实例详解》《EPC原理与实践》《5G核心网原理与实践》三本纸质书（各大电商平台有售）。 星球定位：深耕 5G 核心网、IMS、NFV/AI、云原生等 ICT 领域，主打运维岗位与信令分析。 当前规模：5200 篇主题 / 990 个回答，198 元/年。 加入福利：加入星球后请加爱卫生微信，拉您进知识星球年度陪伴与答疑群——不限量回复您的各种问题，另有群内分享。 AI 加持：51学通信知识星球已作为 skill 接入 WorkBuddy，使用 deepseek-4-flash 在海量星球帖子中精准找贴、找视频、找 FAQ 和案例，做总结、找文档和 PPT 等场景全覆盖。