Claude Skills 做設計：Frontend Design、Canvas、UI/UX Pro Max

你有沒有這種經驗：

叫 Claude 幫你開一個網頁介面，等它跑完你打開一看 —— 又是那個熟到不能再熟的畫面：漸層背景、細細瘦瘦的無襯線字體、圓角卡片、置中的按鈕。跟你上禮拜看過的別家軟體官網首頁幾乎一模一樣。你不是要它爛，你只是想要「不那麼像機器生的」。

如果你點頭了，我先把話講清楚：

這不是它沒本事，是你沒告訴它要有主見。 官方這半年在做一件事，讓你不用每次都自己去教它 —— 那個東西叫 技能（Claude Skills）。

我最近把「拿來做設計」這個主題底下，安裝數最多、最有代表性的三個技能都翻了一輪原始說明，順便把技能機制的官方文件也看完。這篇是我整理的結論：三個技能各自解決什麼問題、該怎麼挑、以及為什麼「這個機制本身」比任何一個單獨的技能都值得懂。

先問一個更基本的問題：Claude Skills 到底是什麼

如果你之前只用 CLAUDE.md（放在專案根目錄那份給模型的長期指示檔）來管 Claude，這一段先看。

技能是一份帶 YAML 標頭的 SKILL.md 檔。也就是開頭夾一段結構化設定（用縮排標記的欄位表，寫給機器看的那種）的說明檔。個人裝的放在 ~/.claude/skills/<技能名>/SKILL.md，只跟某個專案有關的放在 .claude/skills/<技能名>/SKILL.md。標頭的 description 欄位告訴模型「什麼樣的任務要用我」，內文寫怎麼做。

也就是說，它讀到相關任務時才把內文載入，你不用手動叫它。你在對話裡開一句「幫我做個登入頁」，模型自己去掃底下所有 SKILL.md 的 description，判斷這次哪一個該進來坐。

跟 CLAUDE.md 差在這一點：

官方文件講白了就是這句：

跟 CLAUDE.md 不同，技能的內文只在被用到時才載入，所以長長的參考資料在沒被叫到之前幾乎不花成本。

（來源：官方技能文件——原本掛在 docs.claude.com，2026 年被搬到 code.claude.com。）

這件事的意義不只是省成本。它讓「灌一堆設計知識進來」這件事變成沒代價的——你可以同時裝十個、二十個技能，用不到的那幾個對這次對話來說就跟不存在一樣。以前拿 CLAUDE.md 幹這件事，你會很痛，因為每一段都要付通行費。

換句話說，技能給你三件 CLAUDE.md 給不了的東西：

• 按需觸發：對話裡沒需要就不進來，字數不會被吃
• 可堆疊：裝一百個都沒事，反正一次只上一到兩個
• 可攜帶：遵循開放標準，未來換工具還能繼續用

技能本身遵循的那個叫 Agent Skills 的開放標準（見 agentskills.io）就是最後一點的來源——同一份 SKILL.md 未來也能在別家支援這個標準的模型工具上跑，你灌的不是 Claude 專屬的東西。

想更完整地看 CLAUDE.md 這條路的邏輯，可以先看 Claude Code 專案家規四條。理解了「兩條路各解什麼」，下面三個技能才知道它們各自在解什麼問題。

為什麼「做設計」值得專門有一組 Claude Skills？

設計跟寫程式不太一樣。

程式碼的好壞比較二元——能跑或不能跑，測試綠或紅。你告訴模型「跑不過修一下」，它有明確目標可以往那邊試。設計沒有這種明確目標，一個介面可以「醜到爆」到「有點意思」中間有一百個梯度，而且梯度的定義還會因為你這個站要走的路線不一樣。

模型在沒有主見的時候會選一件事：選最不會出錯的樣子。這件事的物理表現就是文章開頭講的那個場景——每一個介面都長得跟上一個很像。不是它不會，而是它不敢。

三個技能各自從不同角度解這件事：

• Frontend Design：把「不敢」變成「有主見」，強迫先選定方向再動手
• Canvas Design：把「靜態視覺」跟「網頁」拆開，圖檔有它自己的做法
• UI/UX Pro Max：把「設計素材」變成可查詢的資料庫，先從裡面挑再實作

下面一個一個講。

第一個：Frontend Design —— 讓模型開網頁前先選一個明確風格

英文原名 Frontend Design，放在官方 GitHub 儲存庫 anthropics/skills 底下（就是 Anthropic 自己維護的那個放技能的倉庫），是那個儲存庫裡目前安裝數最高的一個。

它做的事情很直接：在模型開始寫網頁前，先強迫它把設計方向講清楚。要走粗獷排版？復古未來感？還是極簡奢華？選定之後才動手，而且動手時的顏色變數、間距、動畫延遲都要照著那個方向來。

用 SKILL.md 原文的講法，它要求模型在寫程式碼之前，先弄一份小小的設計計畫（design plan）——四個元素：

• 色：主色、輔色、背景，一整套設計變數（英文叫 token，簡單說就是把「主色」寫成一個名字，之後每次要用就叫這個名字，一次改到底）
• 字：字體選型、字級層次、行高
• 版：版面骨架、間距節奏
• 原則：這份設計要遵守的底線與方向。SKILL.md 用的原字是 principles——把顏色、字體、版面之外那層「怎麼做選擇」的邏輯明文寫下來

第四項是重點。SKILL.md 對這件事的態度很硬：要模型為這次的需求做刻意、有主見的選擇，站得住腳的話就冒一點美學風險（原句是「take aesthetic risk if justified」）。它不要你選最安全的，它要你選一個能講出理由的。

這個技能存在的意義就是把開場說的那種「機器味」擋掉 —— 不是靠列一份黑名單，而是逼你在開工前就把方向釘死，讓後續每一個決定都有依據。這跟叫模型「寫得漂亮一點」有本質上的差別：後者沒有錨點，前者有。

安裝：

npx -y skills add anthropics/skills --skill frontend-design --agent claude-code

上面那個 npx 是 Node.js 生態圈裝套件的工具（Node.js 就是那個讓 JavaScript 可以在你電腦本機跑的執行環境，寫前端的人幾乎都裝過），會直接把技能抓到你目前這個專案的 .claude/skills/ 底下。

適合你的情況：你在用 Claude 寫產品頁、活動頁、任何要有態度的介面。跟 幫模型裝紀律的 Superpowers 是不同層次的東西：那個管「怎麼工作」，這個管「開出來要長什麼樣子」。兩個一起裝並不衝突，反而互補——一個管過程紀律、一個管美感紀律。

第二個：Canvas Design —— 這個 Skill 產出的是圖檔，不是網頁

英文原名 Canvas Design，也是官方 anthropics/skills 倉庫底下的技能，但用途完全不一樣：上一個生的是可以跑的網頁，這一個生的是圖檔。

它的定位很挑：要的是真正的視覺作品，不是線框稿也不是網頁模擬。很多人會誤會這一點——以為「AI 出圖」都是同一件事。不是。開網頁跟做海報的思路完全不同，前者要考慮互動、狀態、螢幕大小，後者是一張固定尺寸的作品，重點在單張畫面的張力。

SKILL.md 對輸出範圍限得死死的：只吐 .md、.png、.pdf 三種副檔名，其他一律不做。這條看起來像限制，但它其實幫你隔開了「這個技能該來坐」跟「換一個吧」的邊界——你需要 SVG 圖示、需要動畫、需要網頁，這個不接。

內部流程很有趣 —— 它會先幫你寫一份「設計哲學宣言」，然後照那個哲學去產出視覺。SKILL.md 原文列了八種示範哲學給模型當靈感：

• Brutalist Joy（粗獷的喜悅）
• Chromatic Silence（沉默的色彩）
• Metabolist Dreams（新陳代謝的夢）
• Concrete Poetry（具象詩）
• Chromatic Language（色彩語言）
• Analog Meditation（類比冥想）
• Organic Systems（有機系統）
• Geometric Silence（幾何沉默）

名字聽起來像藝術學院的作業，但它們是拿來當方向感的錨點——先選一個哲學，接下來的字級、留白、配色都對齊那個方向。

先寫哲學再產圖這件事乍聽玄，但它是有邏輯的——一張海報如果沒有一個核心敘事，剩下的所有元素都會變成互相拉扯的雜訊；先把敘事釘死，字要多大、留白留多少、主色是什麼，才會有一個標準去對齊。

官方特別點出來的一點：它是故意避開版權問題，做原創的美學動作，不去複製既有作品。SKILL.md 的 description 欄位就白紙黑字寫：「Create original visual designs, never copying existing artists’ work to avoid copyright violations.」你可以想像它就是不會給你「照抄某某著名設計師風格」這種指令，它會硬要走一條有自己邏輯的路——這個限制對用它的人是保護，不是限制。哪天你把成品貼上社群，不會被人截圖說「這是抄某某某」。

安裝：

npx -y skills add anthropics/skills --skill canvas-design --agent claude-code

適合你的情況：你要做的是海報、活動封面、社群圖、簡報首頁這類靜態視覺。跟 讓 Artifacts 抓即時資料 那類做互動網頁的路徑完全不同。也跟第一個技能不衝突——今天要做網頁就叫第一個進來、要做圖檔就讓第二個接手，你不用手動切換。

第三個：UI/UX Pro Max —— 一整套資料庫，還會幫你把介面組出來

英文原名 UI/UX Pro Max。這一個不是官方，是社群作者 nextlevelbuilder 做的開源專案，放在 nextlevelbuilder/ui-ux-pro-max-skill 底下（GitHub 上直接搜這串就找得到）。雖然是社群作品，安裝數卻很有排面 —— 32 萬多，是官方 Canvas Design 的三倍多。

它的定位跟前兩個都有點不一樣：它先給模型一個很大的設計資料庫可以查，然後才動手把介面實作出來。

它預期的流程是「先查一輪、再動手寫」：讓模型先把該用什麼風格、什麼色盤、什麼字體配對、什麼互動模式在多個維度上查一輪，把方向定下來，之後才把介面實作出來。

這個「先查再寫」的順序，跟 Frontend Design 的「先選定方向再動手」精神上很像，只是資料密度差了一個檔次——一個是要你用自己的判斷選，一個是給你一整個貨架讓你挑。哪個對你比較好，看你對自己的美感有多少把握。

它的規則也很有立場，交件前會自己跑一輪檢查（官方 README 裡叫 pre-delivery checks）：

• 禁 emoji 當圖示：要求用專業向量圖示庫（像 Heroicons 或 Lucide 那類，就是把常用的介面小圖示打包成一整套、能保持粗細一致的圖示套件）
• 亮色模式對比度：文字對比度至少要達到 4.5:1，這是無障礙設計常見的最低標

這些不是建議，是它在交件前會逐條檢查的清單。

技術棧那 22 個涵蓋幅度值得多講一句，我把它們分成四組來看：

• 網頁常客：React、Next.js、Vue、Svelte、Astro、Nuxt、shadcn/ui
• 行動端：SwiftUI（iOS 原生）、React Native、Flutter、Jetpack Compose（Android 原生）
• Windows 桌面：WPF、WinUI 3、UWP、Avalonia、Uno Platform（原生桌面應用）
• 其他：Laravel（後端框架，常配前端模板）、Three.js（3D 圖形）、Angular、JavaFX、HTML+Tailwind

也就是說——這一套設計素材不是只給你做網頁用的，如果你在寫一個 macOS 上要跑的桌面工具、一個 Android 原生 App、甚至一個 Windows 內部系統，它都接得住。

安裝：

npx -y skills add nextlevelbuilder/ui-ux-pro-max-skill --skill ui-ux-pro-max --agent claude-code

適合你的情況：你在做一個結構比較完整的產品，需要先想清楚一整套設計系統再開工。或者你自己對這方面沒把握、想要一個有意見的顧問幫你限縮選項。做小活動頁的話，前面兩個技能就夠了，這個殺雞用牛刀。

三個一起裝會打架嗎？該怎麼挑

先給結論：機制上不會打架。模型依 description 判斷這次任務用哪個，用不到的技能就不會被載入。

但如果你要挑一個先裝、看看有沒有解決你的痛，我的判斷是這樣：

為什麼不建議一次全裝？不是因為機制上有問題，是因為你會分不清楚哪一個在起作用。你今天覺得介面變好看了，是 Frontend Design 逼你定調的效果？還是 UI/UX Pro Max 挑了個好色盤？

兩個一起上路，你等於在做多變數實驗——變數沒隔離，結論就沒意義。一個一個裝，兩週為一個實驗週期，你會很快知道哪一個真的對你有用。

我不覺得三個都裝有什麼壞處 —— 技能的機制就是「用不到不占對話字數」，所以你在同一台電腦上裝一百個都沒事。真正要挑的是「這次做什麼任務」，不是「灌哪一個進來」。

一個容易忽略的事：這些技能不只 Claude 能用

官方這批技能掛在一個叫 anthropics/skills 的公開儲存庫，遵循前面提過的 Agent Skills 開放標準。這代表同一份 SKILL.md 未來也能被別家支援這個標準的模型工具讀。

換句話說，你灌的不是 Claude 的專屬功能，是一份可以帶著走的設計知識庫。哪天你想換工具，這份東西還是你的資產。

這件事在做技術選型時很少被強調，但它很重要——AI 這行變得快，你今天在某家平台上重度使用的東西，明年可能出現一個更適合你的替代品。如果你的所有工作流都綁在那家的專屬格式上，換家的成本就會很高。開放標準幫你把這個成本壓低。

之前寫長期設定檔拆解 時就有讀者問「這些設定綁死在 Claude 是不是很吃虧」，這條路正好回答了那個問題——Skills 這個機制在設計時就把「可攜性」考慮進去了。

最後說兩句

設計比程式碼難用文字指令校準 —— 因為程式碼的好壞是二元的（能跑或不能跑），設計的好壞是連續的（醜到爆到很有意思，中間有一百個梯度）。這也是為什麼要用這個機制持續更新對「好設計」的定義，你不用自己維護那個字典。

你也可以自己寫技能——SKILL.md 只是一份帶 YAML 標頭的 markdown 檔，格式門檻很低。看熟前三個之後，你會發現「幫我開電商頁」「幫我做 dashboard」這類反覆做的事，其實都可以包成你自己的技能，讓下次不用再從零解釋一遍。這是這個機制長遠來看最有意思的地方——它不只是安裝別人的東西，它是把你的工作流變成模型可以繼承的資產。

你的 AI 不缺聰明，缺的是一個懂設計的顧問 —— 而這個顧問，一行指令就能請進來。

會拍成一支影片實測這三個技能開出來的畫面差別，訂閱 酷可實驗室 YouTube 不會漏。

接下來看什麼

Claude 生態系列：

• Claude Code 專案家規四條：CLAUDE.md 寫法
• 幫模型裝資深工程師的工作紀律
• 長期設定檔拆解：我用六個月的心得
• 幫模型換一雙好眼睛的爬蟲工具

AI 使用觀念：

• vibe coding 跟叫 AI 寫程式根本不是同一件事
• MCP 是什麼？三個新手最常搞錯的誤解
• AI 幻覺是什麼？三個真實案例＋怎麼在它唬你的時候看出來