AI 現在已經很會「把網頁做出來」。
你給它產品名稱、幾段文案，再說要一個 Landing Page，它通常很快就能交出可以打開的版本。
但真正麻煩的地方，往往從這裡才開始：
- 3D 場景可以跑，鏡頭、燈光和手機效能卻沒有處理。
- 動畫很多，但每個元素都用同一種淡入，看不出節奏。
- 參考網站明明很有特色，AI 重做後卻只剩相似配色。
- 頁面看起來完整，細節仍然有一股常見的「AI 模板味」。
問題不一定是模型能力不夠，而是它缺少一組能在專案中反覆使用的專業規則。
這就是 Agent Skill 值得注意的地方。
這篇整理的五個 Skill，分別處理 3D、GSAP 動畫、視覺系統、Motion Design 和整體創意方向。它們不是五個功能重複的工具，而是站在網站製作流程的不同位置。
這也是我整理那組 IG 輪播時留下的詳細版本。比起只翻譯五個 repository 的功能，我更想知道：它們分別替網站補上哪一種判斷，以及什麼時候其實不需要使用。
先講清楚：Skill 不是另一個網頁套件
在這篇裡，Skill 指的是提供給 AI Coding Agent 的專業指令與參考資料。
它可能包含：
- API 用法與正確的程式模式
- 設計判斷和工作流程
- 常見錯誤與驗收清單
- 什麼情境才應該載入哪一份資料
- 安裝、效能、無障礙與框架整合規則
所以安裝 GSAP Skill，不等於專案已經安裝 GSAP；加入 Three.js Skill，也不會自動替網站加入 3D。
比較準確的理解是：
程式套件提供能力，Skill 告訴 AI 怎麼正確使用這份能力。
如果把 AI 當成一位剛加入專案的協作者，Skill 就像交給它的專案手冊、設計規格與資深同事整理的注意事項。
五個 Skill 的快速比較
| Skill | 主要補足的能力 | 最適合的情境 | 它不負責什麼 |
|---|---|---|---|
| Three.js Expert | 3D 場景、模型、光影、Shader、互動 | 3D 商品展示、粒子場景、互動式 WebGL | 不會替你決定網站是否真的需要 3D |
| GSAP Skill | Timeline、ScrollTrigger、插件與框架整合 | 捲動敘事、文字動畫、複雜進場順序 | 不會自動產生好的動態美術方向 |
| Design DNA | 從參考圖拆出 Design System 與視覺語言 | 想分析並延伸既有品牌或參考網站 | 不保證分析結果就是品牌真相 |
| Motion Design | Timing、Easing、情緒與動作編排 | 先建立動畫原則，再選 CSS、GSAP 或 Lottie 實作 | 不是單一動畫程式庫 |
| Genjutsu | 整體視覺方向、互動提案、實作與稽核 | 從零做頁面，或替既有介面做全面精修 | 範圍很大，不適合每個小修改都全開 |
接下來逐一拆開看。
01｜Three.js Expert：讓 AI 不只會放一個旋轉方塊
CloudAI-X/threejs-skills 是一組針對 Three.js 的 Skill 集合。
Three.js 本身可以處理場景、相機、燈光、材質、模型與互動，但這些系統彼此相連。只要其中一段沒有處理好，就很容易出現「桌機可以跑，手機卡住」、「模型載入了，但光影像塑膠」或「畫面很華麗，實際無法操作」。
這個 repository 把 Three.js 拆成十個能力區塊：
- 基礎場景、相機、Renderer 與座標系統
- Geometry 與 Instancing
- Material 與 ShaderMaterial
- 燈光、陰影與環境光
- Texture、UV 與 Render Target
- 關鍵影格、骨架與 Morph 動畫
- GLTF／GLB、Texture Loader 與快取
- GLSL、Uniform 與自訂 Shader
- 後製、Bloom、景深與自訂 Pass
- Raycasting、相機控制與滑鼠／觸控互動
原本輪播裡的「沉浸式 3D、相機控制、GLTF／GLB、真實光影、粒子特效」，其實只是這套 Skill 的濃縮版。
適合什麼時候用
- 商品頁需要展示可旋轉的 3D 模型
- 作品集需要粒子、Shader 或互動式主視覺
- 已經確定 Three.js 是必要技術
- 想要求 AI 同時處理載入、Resize、動畫迴圈與錯誤狀態
不適合什麼時候用
如果只是讓圖片輕微位移、卡片 Hover 或標題進場，CSS 或 GSAP 通常已經足夠。
Three.js 的成本不只是多裝一個套件。它還會帶來模型檔案、GPU 負擔、載入時間、觸控操作、低效能裝置與靜態替代畫面的問題。
可以這樣要求 AI
使用 Three.js 載入 GLB 商品模型。建立柔和環境光與一盞主光，滑鼠移動時模型最多旋轉 8 度；手機版停用滑鼠跟隨，只保留緩慢自轉。請同時處理 Loading、錯誤狀態、Resize、資源釋放與靜態圖片 fallback。
安裝前要注意的文件落差
這個 repository 的官方 README 目前採用 Clone／Copy 的安裝方式，但 README 裡顯示的 Clone URL 與目前 repository 名稱並不一致，文字提到的目錄名稱和實際結構也需要再次確認。
比較安全的方式，是先從目前的 CloudAI-X/threejs-skills repository 檢查 skills/ 內容，再依你使用的 Agent 把需要的 Skill 放進正確目錄，不要直接複製舊指令執行。
02｜GSAP Skill：把「加動畫」變成可維護的時間軸
greensock/gsap-skills 是 GSAP 官方提供的 AI Skills。
它不只教 AI 寫 gsap.to()，還包含：
- Tween 與基本 Easing
- Timeline 的順序、Label、巢狀與播放控制
- ScrollTrigger 的 Trigger、Pin、Scrub、Refresh 與 Cleanup
- Flip、Draggable、SplitText、MorphSVG 等插件
- React 的
useGSAP、Ref、Scope 與卸載清理 - Vue、Svelte 與 Vanilla JavaScript 的生命週期整合
- Transform、Batching 與 ScrollTrigger 效能規則
這一層很重要，因為 AI 最容易寫出來的是「看起來會動」的程式，最容易漏掉的是元件重複掛載、事件沒有清除、ScrollTrigger 沒有 Refresh，以及用會觸發 Layout 的屬性做動畫。
適合什麼時候用
- Hero 標題需要逐字或逐行進場
- 多個元素需要按照時間軸編排
- 想做捲動觸發、Pin、Scrub 或橫向敘事
- React／Vue 元件需要正確初始化與 Cleanup
- 既有 GSAP 程式可以跑，但想做效能與結構檢查
GSAP Skill 和 Motion Design Skill 的差別
GSAP Skill 比較像「怎麼正確駕駛這台車」。
Motion Design Skill 處理的是「這趟路為什麼要這樣開、何時該快、何時該停」。
前者偏技術執行，後者偏設計判斷。兩個一起使用，通常比單獨叫 AI「幫我加一些 GSAP 動畫」可靠。
安裝
官方 README 建議使用 skills CLI：
npx skills add https://github.com/greensock/gsap-skillsCLI 會自動偵測目前使用的 Agent。Skill 裝好後，專案仍要依實際需求安裝 gsap 套件。
可以這樣要求 AI
先替這個 Hero 建立一條 GSAP Timeline。標籤、主標與 CTA 依閱讀順序進場，不使用串接 delay。React 版本請使用 useGSAP 與 scope，元件卸載時清除所有動畫；Reduced Motion 模式直接顯示最終狀態。
03｜Design DNA：把「像這個網站」拆成可重複的設計規格
zanwei/design-dna 處理的不是某一種動畫，而是視覺身份的提取與再使用。
它把一個參考介面拆成三個維度：
- Design System：顏色、字體、間距、版面、形狀、層級、Motion 與元件。
- Design Style：氣氛、視覺語言、構圖、影像方式、互動感與品牌語氣。
- Visual Effects：Canvas、WebGL、3D、粒子、Shader、捲動效果、Cursor 與 SVG Animation。
流程則分成三個階段：
參考圖片／截圖／網址
↓ Analyze
Design DNA JSON
↓ Generate
套用自己內容的新介面它真正有價值的輸出不是「一張很像的網頁」，而是中間那份可以儲存、版本控制、修改與重複使用的 Design DNA JSON。
適合什麼時候用
- 已有品牌網站，想把視覺規則整理出來
- 收集了多張參考圖，但不知道它們共同的視覺特徵
- 想讓不同 AI 工作階段維持相同顏色、字體與間距
- 想先建立設計規格，再把自己的內容套進去
最大的限制
分析出數值，不代表分析出品牌真相。
截圖看得到顏色、間距和構圖，但看不到品牌為什麼這樣選、哪些內容是例外，也看不到內部元件規則。參考網站可能有版權、商標或辨識度很高的設計元素，也不能因為 AI 能分析就直接複製。
比較好的用法是：
把分析結果當成可討論的初稿，再由人決定哪些要保留、哪些只是參考、哪些必須改成自己的版本。
安裝
npx skills add zanwei/design-dna可以這樣要求 AI
分析這三張參考網站截圖，輸出完整的 Design DNA。請把「畫面直接觀察到的規則」與「依據畫面推論的判斷」分開標示；再用我的內容生成新頁面，不複製原網站 Logo、文案或品牌識別。
04｜Motion Design：先決定怎麼動，再決定用什麼寫
LottieFiles/motion-design-skill 是一套 implementation-agnostic 的動態設計原則。
也就是說，它不綁定 GSAP、Framer Motion、CSS、Lottie 或 Spring。它先處理的是：
- Timing 和 Easing
- 動作的情緒意圖
- 多元素出場順序
- 進場、退場與狀態回饋
- Loading、Success、Error 與 Hover
- 品牌的 Motion Personality
- Disney 動畫原則如何轉譯到 UI
- 無障礙、平台與效能限制
這正好補到很多 AI 動畫最明顯的問題：所有元素使用同一個 Fade Up，動畫只是裝飾，沒有幫助使用者理解狀態與層級。
適合什麼時候用
- 還沒決定要用哪套動畫技術
- 想建立整個產品一致的動態語言
- 表單、按鈕與狀態切換需要明確回饋
- Dashboard 或 Landing Page 有多個元素要依重要性進場
- 想 Review 既有動畫，而不是重新換一套框架
安裝
npx skills add LottieFiles/motion-design-skill可以這樣要求 AI
先不要寫程式。請替這個付款完成頁定義動態意圖、主次順序、Duration、Easing 與 Reduced Motion 方案。確認動態規格後，再用現有的 CSS 實作，不要新增動畫套件。
這句「先不要寫程式」很有用。它能把設計決策和技術實作分開，避免 AI 一看到動畫需求就直接開始堆程式碼。
05｜Genjutsu：從創意方向一路做到最後稽核
AThevon/genjutsu 的範圍最大。
它不是單一小 Skill，而是一套會依專案環境載入不同子技能的 Creative Coding 系統。官方把主要流程分成兩個入口：
/genjutsu:cast：替既有介面加入動態與互動
流程是：
掃描技術棧
→ 評估範圍
→ 提出 Interaction Thesis
→ 載入需要的子技能
→ 實作
→ 快速稽核它適合單一 Hover、捲動段落、頁面轉場，或既有介面的動態精修。
/genjutsu:paint：從零建立完整視覺方向
流程是：
Brainstorm
→ 定義視覺與互動方向
→ 產生 Design System
→ 實作
→ 完整稽核它適合重新設計整個 Landing Page、作品集或 App 視覺系統。
Genjutsu 也會依環境選擇 GSAP、Framer Motion、Three.js、Canvas、原生 CSS，甚至 Android Compose 或 SwiftUI 的相關模組。
它真正特別的地方
不是「效果很多」，而是要求 AI 在寫程式前先提出一個 Interaction Thesis。
也就是先說明：
- 這個介面希望使用者感受到什麼？
- 哪個動作是主角？
- 動畫如何服務內容和操作？
- 哪些裝飾應該拿掉？
最後還會檢查 Reduced Motion、響應式、顏色一致性與效能。
限制
它的範圍很廣，也代表結果會受到專案現況和 Prompt 影響。
如果只是修正一個按鈕 Hover，不需要每次都啟動完整的 /paint 流程。若同時又安裝 GSAP、Motion Design 和其他設計 Skill，也要先說清楚誰負責方向、誰負責實作，避免規則彼此打架。
Claude Code 安裝方式
官方 README 提供的 Claude Code Plugin 安裝方式是：
/plugin marketplace add git@github.com:AThevon/genjutsu.git
/plugin install genjutsu其他 Agent 是否能直接使用同一種安裝方式，要依各自的 Skill／Plugin 格式確認。
五個 Skill 應該怎麼搭配
不建議把五個全部塞進每一個專案。
比較實際的做法，是先看現在卡在哪一層。
情境一：有參考網站，想做成自己的版本
Design DNA
→ 拆出可量化的視覺規則
→ 人工刪除不該複製的品牌元素
→ Genjutsu Paint 或既有設計流程實作
→ Motion Design 定義動態語言
→ GSAP Skill 處理複雜動畫情境二：網站已經完成，但看起來太靜或太普通
Genjutsu Cast
→ 找出真正需要動的地方
→ Motion Design 決定節奏與情緒
→ GSAP Skill 實作時間軸、ScrollTrigger 與 Cleanup情境三：商品頁真的需要 3D
先確認 3D 對理解商品有幫助
→ Three.js Expert 建立場景、模型與互動
→ Motion Design 定義相機和進場節奏
→ 檢查手機效能、載入與靜態 fallback情境四：只是一般內容網站
先不要裝 Three.js。
也不一定需要 GSAP。原生 CSS Transition、@keyframes 或 View Transitions 已經能完成時，越少依賴越容易維護。
Skill 的目的不是讓技術棧變長，而是讓 AI 在需要時做出比較正確的選擇。
我會怎麼選安裝順序
如果主要目標是「讓 AI 做出的網站不要那麼像 AI 模板」，我會先從這三個方向開始：
- Design DNA：先解決視覺規則不一致。
- Motion Design：再解決每個東西亂動、沒有主次。
- GSAP Skill：確定需要複雜動畫時，再補正確實作。
Three.js Expert 留給真的需要 3D 的專案。
Genjutsu 則適合需要更完整創意方向與全面稽核時使用，而不是把它當成每次修改都必開的萬用開關。
Skill 仍然不能替你做的五件事
1. 決定商業目標
Skill 可以讓 Hero 動得更漂亮，不能替你決定這個頁面要賣什麼、使用者為什麼要相信你。
2. 判斷內容優先順序
技術上能做 3D，不代表 3D 比產品價格、案例與 CTA 更重要。
3. 驗證真實裝置
AI 產出的程式仍要在桌機、手機、觸控裝置、慢速網路與 Reduced Motion 模式檢查。
4. 處理品牌與版權邊界
Design DNA 可以分析參考介面，但能分析不等於能直接複製。
5. 為結果負責
AI 可以縮短第一版時間，最後仍然需要有人驗收載入速度、可及性、內容正確性與維護方式。
這也是我認為 Skill 真正有價值的地方：
它不是替人拿走判斷，而是把原本模糊的判斷，變成可以被 AI 執行、被人檢查的規則。
最後：不要再問「哪一個最強」
這五個 Skill 沒有共同的第一名。
真正該問的是：
- 我現在缺的是 3D 技術，還是根本不需要 3D？
- 動畫問題出在 GSAP 寫法，還是沒有動態方向？
- 我想延伸品牌視覺，還是只是想複製一張漂亮截圖？
- 我需要局部精修，還是從零建立整套介面？
當問題說清楚，Skill 才會從「又一個收藏起來沒用的工具」，變成能真正縮短製作與修改時間的工作規則。
如果你是從 IG 輪播來的，可以先收藏那 7 張快速版；這篇則留著，在下一個網站專案開始前回來選工具。
我會繼續在 Instagram @raywang.tw 分享怎麼用 AI，把以前需要外包的網頁、貼文與工具做出來。完整的免費資源與實作討論放在 The AI tool lab。