前言¶
落地页、营销组件或产品详情里缺一段「刚好够用」的动效时，常见做法是翻 CSS 动画教程、搜 CodePen，再自己改参数对齐设计稿。耗时不短，且很难保证 HTML/CSS/JS 能直接贴进现有工程。下面介绍 SkillHub 上的 网站动画效果设计技能包（坐标 @user_7fecb76a/motion-lab）：把 Motion.Lab 动效库封装成 Agent Skill，在对话里按场景推荐动效并给出可复制源码。
这是什么¶
网站动画效果设计技能包 对应社区发布的 Motion.Lab 动效库 Skill，当前版本 v1.0.1，分类为 dev-programming，发布者为 user_7fecb76a，来源标注为 community。标签显示 requires_api_key=false，安装与使用不依赖额外 API Key。
官方简介概括为：收录 160 个精选前端动效，按 基础 / 文字 / 交互 / 高级 组织；每个动效提供可直接复制的 HTML、CSS、JS 源码，并附带 可调参数。当用户需要为网页、组件、落地页添加动画，或询问「有什么动效推荐」时，适合启用该 Skill。
核心功能¶
依据 SkillHub 页面与抓取元数据，可核实的能力如下：
- 分类动效目录：160 个动效覆盖基础、文字、交互、高级四类，便于按页面类型缩小范围。
- 可复制实现：每个条目提供完整前端片段（HTML/CSS/JS），减少从零写 keyframes 的时间。
- 参数可调：在源码基础上说明可调项，便于对齐时长、缓动、颜色等设计约束。
- 对话触发：Skill 描述中写明适用场景——页面动效需求、组件微交互、落地页装饰，以及「推荐动效」类提问。
安装与启用¶
SkillHub 官方给出的安装方式是：让 AI 参照安装文档，安装坐标 @user_7fecb76a/motion-lab。页面上提供的提示词为：
请根据 https://skillhub.cn/install/skillhub.md，安装 `@user_7fecb76a/motion-lab`。
若本机已安装 SkillHub CLI，可按 SkillHub 安装与优先源配置 第三节操作。安装时 必须 用 --dir 指向当前 Agent 的 skills 目录，否则默认落到 ./skills/ 可能不会被识别。
1、检查 CLI：
command -v skillhub && skillhub --version
2、未安装时可用官方脚本（完整安装或仅 CLI，以文档为准）：
curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash
3、安装本 Skill 到对应目录（路径按你使用的客户端替换）：
skillhub install user_7fecb76a/motion-lab --dir ~/.cursor/skills/
文档列出的常用 skills 目录包括：
- Cursor：
~/.cursor/skills/ - Claude Code：
~/.claude/skills/ - Codex：
~/.codex/skills/或项目下的.agents/skills/
安装完成后，按你所用客户端的要求刷新或重启 Agent，使新 Skill 被加载。抓取数据显示该包 安装计数为 0（统计口径以 SkillHub 为准），不影响按上述方式手动安装。
典型用法¶
官方资料未附带单独的命令行子工具；用法体现在 Agent 读取 Skill 指令后，在对话中检索动效并输出代码。可复现的流程如下：
- 在 Cursor、Claude Code 等已挂载 skills 目录的客户端中，确认 网站动画效果设计技能包 已安装。
- 用自然语言描述场景，例如：落地页主按钮 hover、标题入场、卡片列表滚动出现、表单焦点反馈等；也可直接问「有什么动效推荐」。
- Agent 根据 Skill 中的 Motion.Lab 分类（基础 / 文字 / 交互 / 高级）筛选合适条目，返回 HTML/CSS/JS 片段，并说明需要调整的参数（如持续时间、延迟、缓动函数）。
- 将片段合并进你的组件或页面，按项目规范处理类名冲突、无障碍（
prefers-reduced-motion）与性能（是否使用transform/opacity等）。
经过上面的步骤，动效来源统一在库内 160 个条目之中，避免每次临时搜索零散示例。
适用场景与注意¶
适合谁
- 前端或全栈开发者在赶落地页、活动页、展示型组件时需要快速加动效。
- 用 AI 结对写界面时，希望回答里直接带可粘贴代码，而不是只讲概念。
限制与注意
- 内容为 社区来源 的前端片段，接入前请自行审查许可、依赖与浏览器兼容性。
- 动效数量与分类以官方简介为准（160 个、四类）；具体条目名称与参数以安装后的 Skill 包内文档为准，本文未展开未抓取到的细节。
- SkillHub 元数据：评分 100000，下载 5454（页面与 API 摘要一致）；与第三方转载数据可能不一致时，以 SkillHub 为准。
- 不涉及后端或构建链配置；若项目使用 CSS Modules、Tailwind 等，需要在粘贴后做一层样式映射。
结尾¶
网站动画效果设计技能包 把 Motion.Lab 的 160 个前端动效整理成 Agent 可调用的知识包：按场景推荐、给出可复制源码与可调参数，适合在网页、组件与落地页里快速补齐动效。官方 SkillHub 页面：https://www.skillhub.cn/skills/user_7fecb76a/motion-lab；API 摘要地址：https://api.skillhub.cn/user_7fecb76a/motion-lab。
