讓 AI 寫出「有觀點」的網站：13 個 Claude 設計 skills 的決策地圖

以下依決策地圖逐層展開。體例：影片主張一律保留歸屬（「影片說明」「講者主張」）；Ci 的推論明確標示；本報告略過影片中的業配段落（SciSpace，約 07:00–07:50），該段與設計 skill 主題無關。

1. 方向層：Anthropic frontend design skill

影片把這個 skill 定位成「許多其他設計 skill 的地基」。它的機制是：在模型寫任何 code 之前，強制它承諾一個具體的設計方向——editorial、brutalist、luxury 這類有名字的路線——然後整頁維持一致，而不是讓每個局部決策各自倒向預設值。講者並稱該 skill 的 SKILL.md 直接點名要避開的 AI slop 元素，例如被用爛的字型與白底紫漸層。

講者的解讀值得單獨記一筆：一般模型建 landing page 時是在「最佳化正確性」，這個 skill 把目標改成「承諾一個方向」。這句話其實就是全片命題的具體版本。

證據強度（此段含能力宣稱，逐級拆開）：

• 主張：掛上此 skill 後，講者測試生成的 landing page 沒有常見 AI slop，因為模型守住了承諾的方向。
• 依據：講者的自述測試，影片中展示了結果畫面；無公開的可重現 repo 或對照組。
• 邊界：單次示範、由推薦者自己執行；且講者同時表示原版對較新的模型（他提及 Opus 4.8 與 Fable 5 都附有新的 prompting guide）已略顯過時，他們的設計系統用的是改過的版本——換言之連影片自己都不把原版當終點。
• 可以拿來做什麼：值得在行銷頁專案掛上一試，成本近乎零；不能拿來假設「掛了就沒有 AI slop」，也不能假設它對功能型 UI 有效（影片明說無效）。

2. 元件層：shadcn skill＋MCP，與 dashboard skill

進入功能型產品後，影片指出問題性質整個換掉：你不再是讓一頁好看，而是讓一大堆元件正確運作。shadcn 的邏輯是不生成、改組裝——dashboard 常用元件早已由專人做到專業水準放在 registry，模型直接取用，成品才會像「本來就要出貨的東西」而不是「粗稿慢慢修」。

影片把 shadcn 體系拆成兩件，並解釋了為什麼 MCP 存在還需要 skill：

• skill＝規則書：載有 shadcn 的正確用法，並讀取你專案的既有結構，讓輸出第一次就合規——且只在需要時載入。
• MCP＝零件通道：連向 registry 的即時連線，讓模型瀏覽並直接拉元件進專案——但常駐 context window。

Ci 補一句機制注解：這個「skill 按需載入、MCP 常駐」的差異與兩類機制的一般行為一致，但具體 token 成本影片沒有量化，本報告也不補數字。

Dashboard 再往下分一層。影片認為 dashboard 與一般 app 的核心問題不同：不是元件一致性，而是資訊編排——資料怎麼分組、一屏塞多少才不爆。有個名為 dashboard 的獨立 skill（非 shadcn 官方，另一位開發者作）專攻這件事，先推理編排再落版，講者稱結果更像真的分析工具。

3. 產業適配層：UI UX Pro Max

影片說這個 skill 與其他所有 skill 的差別在於：別的給模型「更好的品味」，它給模型「動筆前的一個決策」。

• 主張：收到需求後它不直接寫 code，先跑一個引擎——同時發五個搜尋查它在 GitHub 上的開源資料庫，從 161 個產業類別中選出合身的風格，再挑出配色、字型配對與版型，過濾掉不合適的選項，最後把一份為你的產業客製的設計系統交給模型執行。
• 依據：講者的流程描述；「五個搜尋」「161 個產業類別」兩個數字皆出自影片與描述欄，資料庫本身開源可查。
• 邊界：數字未經本報告獨立驗證；「產出更貼產業」是講者評價，無對照測試。
• 可以拿來做什麼：當你說不出想要什麼風格、但說得出「這是給誰用的什麼產品」時，這是四個方向型選項（frontend design、taste presets、UI UX Pro Max、自寫）中唯一把產業納入決策的；不能據此假設它在任何產業都優於人工選定方向。

4. 動畫層：GSAP skill

影片對 AI 動畫的診斷分兩刀。第一刀是單調：模型幾乎只會一招「捲動時滑入」，而那正是半數 AI 網站都在用的同一個動畫。第二刀是卡頓，而且給了機制：模型習慣用改變元素尺寸或位置的方式做動畫，這迫使瀏覽器每一幀都重建版面。GSAP skill 由 GSAP 官方團隊製作，涵蓋基礎位移到捲動驅動的敘事動畫，並把模型導向瀏覽器容易處理的移動方式——講者稱光這個習慣就是動畫流暢的關鍵。

Ci 注解：「改 size／position 觸發整頁重排」的描述與前端效能的一般認知（layout thrashing，相對於只動 transform／opacity）一致，此處講者的機制解釋有旁證，但仍以影片為歸屬主體。

值得注意的一個訊號：講者說 AI Labs 自家的 marketing UI skill 裡明文規定「需要動畫一律呼叫 GSAP skill」——skill 呼叫 skill 的組合用法，這是影片中唯一一處展示 skills 如何被編排成系統。

5. 風格層：四個 taste presets

這組不解決系統問題，是風格快捷鍵：你已經知道要什麼感覺，直接把方向塞給模型。影片給的對位是——minimalist UI（留白、讓內容呼吸，適合報紙與部落格）、industrial brutalist（生猛、反企業）、frontend UI/UX（不極端的安全全能款，適合一般商業頁）、premium frontend UI（精品時尚 landing page 的質感）。用法規則只有一條：單選，不疊加，選跟你要的氛圍對得上的那個。

Ci 注解：這組與第 1 節的 frontend design skill 功能重疊（都在決定方向），差別是決策者——frontend design 讓模型自己承諾一個方向，taste preset 是你替它決定。有明確偏好時用後者更快，沒有偏好時前者與第 3 節的 Pro Max 才有價值。

6. 素材層：Higgsfield 與 SeeDance

影片指出視覺素材是靜態頁最後一塊短板：模型自己找圖多半抓網路 stock 圖，常不合需求。Higgsfield 的定位是把圖像／影片生成直接接進 agent——在終端機裡直接要 hero 圖或背景影片，不用離開工作環境，且它接了多家模型不綁定單一家。

• 主張：講者評價 SeeDance 是「目前最好的影片生成模型之一」，做影片素材時值得優先選。
• 依據：講者的個人評價，影片未附任何比較測試。
• 邊界：模型排名是高時效主張，此評價的時間點是 2026 年 6 月；本報告成稿時無法重查，不沿用「目前」措辭。
• 可以拿來做什麼：把它當「2026 年 6 月一位創作者的偏好」參考；選影片模型前應查當期的獨立評測。

7. 行動端：四件組

影片對行動端的診斷：模型把手機當縮小版網站，把網頁習慣直接壓縮進小螢幕——但持機方式、拇指可及區、導航慣例、平台設計語言全都不同。四個 skill 各管一段：

• mobile app UI design（原則層）：把拇指熱區、一致間距、有限字級這些規則直接內建。講者稱這些與 Airbnb、Duolingo、Spotify 等 app 遵循的底層規則相同——這是類比，不是這些公司的背書。
• Material 3：講者稱它是「shadcn 的行動版」——把 Google 實際的設計系統交給模型，給一個顏色就展開整套主題，還能檢查成品與 Google 指南的符合度。
• SwiftUI skills：走 Apple 路線——影片描述它從 Mac 上的 Xcode 直接抽出 Apple 官方文件當規則，讓模型依 Apple 實際指引（克制、半透明的 liquid glass 風格）工作，而不是憑印象模仿 iPhone app。
• Expo（官方 skill）：一套 code 同時出 iOS 與 Android，涵蓋導航、樣式與平台功能——雙平台需求的選項。

Ci 注解：這四件的分工邏輯與 web 側完全平行（原則層＝frontend design、設計系統層＝shadcn、平台語言＝taste preset），影片沒有明說這個對稱，但它讓整張地圖好記一倍。

8. 邊界與時效層

把全篇的「不能推論之處」集中在這：

• 單一來源、未實測：所有 skill 能力描述都出自同一支影片。多數 skill 開源、SKILL.md 可直接閱讀，這是把「講者說」升級成「我查過」最便宜的路徑——但那一步是讀者自己的。
• 商業動機：頻道經營付費社群並販售自家設計系統，影片中關於自家 skill（break the default、marketing/functional 雙 skill 架構）的段落屬產品介紹，本報告僅作背景轉述。
• 連結未驗證：描述欄的 13 個連結以 2026-06-23 的影片描述為準，本報告成稿時未逐一開啟確認仍有效。
• 高時效主張：三處無法二查——「Anthropic 原版對新模型已過時」（講者評價）、「Opus 4.8 與 Fable 5 附新 prompting guide」（講者轉述）、SeeDance 排名（見第 6 節）。閱讀時請帶上 2026 年 6 月這個時間戳。
• 已略過內容：業配段（SciSpace）與頻道社群推廣段不影響設計 skill 主題的理解，本報告省略。

讀完 L2，你能指出每個 skill 的採用範圍與證據強度（全部為歸屬主張）、知道哪三處主張時效最短，以及下一步該自己查什麼（SKILL.md 原文與當期模型評測）。