前言¶
落地頁、營銷組件或產品詳情裏缺一段「剛好夠用」的動效時，常見做法是翻 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。
