想讓 AI 編碼代理打造滾動 3D 著陸頁或精緻 UI？本文整理 30 個 GitHub Agent Skills，涵蓋動畫、設計系統、色彩與簡報生成，並說明安裝方式與適用場景。
Agent Skills 是近年 AI 編碼代理生態中快速崛起的擴充機制：它們以結構化的指令與範例，讓 Claude Code、Codex CLI、Cursor 等工具在特定任務上表現得更專業。其中 scroll-world 這類技能，能將品牌故事轉化為可滾動探索的 3D 世界，特別適合產品發布頁、品牌官網、旅行專案、地產展示或個人作品集。
本文整理 30 個 GitHub 上與 scroll-world 類似或互補的 Agent Skills，涵蓋滾動 3D、UI/UX 設計、動畫、簡報生成與圖表素材等面向，並說明安裝方式與選用建議。
什麼是 Agent Skills？
Agent Skills 是提供給 AI 編碼代理的「專業能力包」，通常包含：
- 結構化的任務指令與工作流程
- 設計原則與最佳實踐
- 程式碼範例與參考模式
- 驗證與自我檢查機制
安裝後，代理在執行相關任務時會自動載入這些知識，大幅提升輸出品質與一致性。
30 個 GitHub Agent Skills 總覽
以下依功能分類整理：
滾動 3D 與沉浸式體驗
| Skill | 說明 | 國家 |
|---|---|---|
| scroll-world | 建立滾動驅動的連續 3D 著陸頁，AI 生成場景與鏡頭飛行 | TW |
| scroll-craft | 高品質滾動驅動網站技能，含設計指導與截圖驗證 | US |
| oil-motion | 互動式網頁動畫技能，支援滾動、拖曳、觸控等控制 | US |
| build-threejs-scroll-worlds | 使用 Three.js 建立沉浸式滾動 3D 體驗，以真實幾何與光照呈現 | US |
UI/UX 設計與美感提升
| Skill | 說明 | 國家 |
|---|---|---|
| frontend-design | Anthropic 官方前端設計技能，提升 UI 美感與排版判斷 | US |
| ui-ux-pro-max-skill | 提供專業 UI/UX 設計智慧，避免通用 AI 風格 | US |
| taste-skill | 提升前端程式碼的審美與設計品味 | DE |
| emilkowalski/skills | 專注於前端動畫與產品介面拋光的設計技能 | PL |
| make-interfaces-feel-better | 基於實際 UI 優化原則的互動細節技能 | US |
| designer-skills | 強化 UI 判斷、視覺方向與產品設計輸出的設計代理技能 | US |
| awesome-design-skills | 為 agentic 設計工具、Codex、Cursor 等整理的設計技能集合 | US |
| material-3-skill | Material Design 3 組件、設計 token、主題與響應式佈局技能 | US |
| jakubkrehel/skills | 介面動畫、拋光、無障礙與產品文案的代理技能 | PL |
| ui-design-brain | UI 組件知識庫，涵蓋佈局模式、最佳實踐與設計系統慣例 | US |
| hue | 品牌學習設計系統技能，確保跨產品畫面的 UI 一致性 | US |
| ai-design-skills | AI 編碼工具的設計技能，從著陸頁結構、文案、排版到動作的完整流程 | US |
| web-design | 規範優先的網頁設計技能，強調一致視覺系統與前端實現 | US |
| refactoring-ui-skill | 應用具體 Refactoring UI 規則（間距、排版、色彩、陰影、層次）的技能 | US |
| lazyweb-skill | UI 研究技能與截圖參考，用於介面設計與評論 | US |
動畫與運動設計
| Skill | 說明 | 國家 |
|---|---|---|
| design-motion-principles | 基於實際運動原則的互動組件與動畫審核技能 | US |
| motion-design-skill | LottieFiles 運動設計技能，涵蓋計時、緩動、編排與 UI 動畫判斷 | US |
| gsap-skills | 官方 GSAP 指導，涵蓋最佳實踐、動畫模式與插件使用 | US |
色彩專業
| Skill | 說明 | 國家 |
|---|---|---|
| skill.color-expert | 色彩科學技能，涵蓋色彩空間、無障礙對比、調色盤與歷史色彩理論 | US |
簡報與視覺呈現
| Skill | 說明 | 國家 |
|---|---|---|
| frontend-slides | 建立豐富動畫 HTML 演示的技能 | US |
| guizang-ppt-skill | 從提示建立橫向滑動雜誌風格 HTML 簡報的技能 | CN |
| html-ppt-skill | 24 種主題、31 種佈局、20+ 動畫的 HTML 簡報技能 | US |
圖表與素材生成
| Skill | 說明 | 國家 |
|---|---|---|
| architecture-diagram-generator | 生成深色主題系統架構圖的技能 | US |
| excalidraw-diagram-skill | 為 Claude Code 等生成 Excalidraw 圖表的技能 | US |
| agent-sprite-forge | 從提示生成 2D 精靈圖、地圖、透明 PNG 幀與動畫 GIF 的技能 | US |
| video-shotcraft | 在 Remotion 中建立電影級產品影片的技能，含鏡頭配方與預覽 | US |
如何挑選適合的技能？
想要滾動 3D 著陸頁
scroll-world 是首選，但若需要更嚴謹的設計驗證，scroll-craft 提供截圖自我審核機制；build-threejs-scroll-worlds 則以真實 Three.js 幾何與光照呈現，而非預渲染影片。
想要提升整體 UI 品質
frontend-design（Anthropic 官方）與 ui-ux-pro-max-skill 是很好的起點；refactoring-ui-skill 則將經典的 Refactoring UI 規則直接轉化為可執行的設計指令。
想要專業動畫效果
gsap-skills 提供官方 GSAP 最佳實踐；motion-design-skill 涵蓋 LottieFiles 的運動設計判斷；oil-motion 則支援滾動、拖曳、觸控等多種互動控制。
安裝與使用方式
大多數技能可透過以下兩種方式安裝：
方式一：使用 npx 指令
npx skills add <author>/<repo>
方式二：手動 clone
git clone https://github.com/<author>/<repo>.git ~/.claude/skills/<repo>
安裝後，這些技能即可與 Claude Code、Codex CLI、Antigravity、Cursor 等 AI 編碼代理搭配使用。
注意事項
- 品質參差不齊：社群技能維護狀況不一，使用前建議檢查 repository 的更新頻率與 issue 回覆情況。
- 版本相容性：不同 AI 代理對技能的載入機制可能略有差異，安裝後應先以小任務驗證。
- 安全考量：技能本質上是可執行的指令集，從不明來源安裝前應先檢視內容。
- 組合使用：多數技能可互相搭配，例如用
scroll-world建立 3D 場景，再用refactoring-ui-skill打磨細節。
結論
Agent Skills 正在快速改變 AI 編碼代理的能力邊界。無論你是想打造令人驚豔的滾動 3D 著陸頁、提升 UI 設計品味，還是生成專業簡報與圖表，上述 30 個 GitHub 技能都能提供具體的幫助。建議從與你當前專案最相關的技能開始嘗試，逐步建立屬於自己的技能組合。