12 個免費 Skills 解決 AI 罐頭設計問題

Inter 字體、紫色漸層、帶陰影的圓角卡片。當我剛開始用 vibe coding 的時候，真正的瓶頸從來不是程式碼，而是設計。每個 AI 生成的介面看起來都像是從同一座模板工廠出來的。

一個 SKILL.md 檔案就能改變 agent 對設計的思考方式。過去幾個月我安裝並測試了數十個設計 skills。大多數在一週內就被移除了，不是因為彼此衝突，就是改善效果微乎其微。以下 12 個是真正留下來的。

從哪裡開始

Anthropic 官方的 frontend-design plugin 是基準線。它隨 Claude Code 一起提供，為版面配置、字體排版和配色選擇設定了基礎規則。少了它，agent 每次都會預設產出同樣的 Inter 加紫色漸層組合。把它想成是地板，不是天花板。

Impeccable 在官方 plugin 之上額外提供了 20 個 slash commands：/polish、/audit、/distill、/bolder、/quieter 等等。每個指令針對特定的設計面向。/audit 會對無障礙性、主題設定和響應式斷點進行全面品質檢查。/distill 會把元件精簡到最核心的部分。我在每次部署前都會跑一次 /polish 作為最終檢查。

控制設計強度

Taste Skill 採取了不同的做法。它不用 slash commands，而是透過三個數值變數（例如 DESIGN_VARIANCE）來控制 agent 偏離預設值的程度。設低一點適合保守的企業介面，調高一點則適合實驗性的 landing page。這種細緻度很實用，不過找到最佳值需要一些反覆嘗試。我第一次把 variance 調到最高時，產出的東西看起來像 2006 年的 MySpace 頁面。

圖示與視覺素材

Better Icons 連結了 150 多個圖示庫，涵蓋超過 200,000 個圖示。你用關鍵字搜尋，它就會直接把 SVG 同步到你的專案裡。在這之前，我得手動從五個不同的網站下載圖示。搜尋品質因圖示庫而異，但對於常見的 UI 圖示，它能很快找到正確的結果。

元件層級的設計智慧

UI Design Brain 包含了 60 多個元件在五種設計風格下的設計原則。它會告訴 agent 一個 modal 在極簡風格系統和 glassmorphic 風格系統中應該如何表現。這種具體程度很重要，因為籠統的「讓它好看一點」指令只會產出籠統的結果。

UI UX Pro Max 涵蓋範圍更廣：50 多種設計風格、97 種配色組合、57 種字體搭配，以及針對超過 160 種產品類型的產業推理邏輯。這個規模很有企圖心。老實說，如果不限制 context，龐大的選項數量可能會拖慢生成速度。我通常會明確指定風格和色彩，而不是讓 agent 自己選。

審查與品質關卡

Vercel 的 agent-skills 包含一套 UI 審查規則集，有 100 多個檢查點。它會評估間距一致性、色彩對比度、互動狀態和響應式行為。在設計階段完成後跑一次，能抓到那些在筆電上看起來沒問題但在手機上會壞掉的問題。

UI Skills 增加了 Tailwind 專屬的品質檢查。像 /baseline-ui 這樣的指令會確保 utility class 的使用一致，而 /fixing-accessibility 會執行專門的無障礙性稽核。如果你的技術棧是以 Tailwind 為基礎，這能補上通用設計 skills 遺漏的缺口。

完整工作流程涵蓋

Designer Skills Collection 是這裡面最全面的套件：63 個 skills 和 27 個指令，涵蓋從 wireframe 到正式上線的整個設計流程。它有自己的主見，這意味著偶爾會跟其他 skills 衝突。我必須停用幾條重疊的規則，以避免矛盾的指令同時傳給 agent。

Design Plugin 在程式碼層級執行設計原則。它不是建議改善方向，而是直接阻擋違反你所設定之設計系統的寫法。這在多人對同一個 agent 下指令的團隊中特別有用。

高級感的呈現

Super Design 專注於高品質的字體排版和充裕的留白。它會引導 agent 做出有高級感的選擇：更大的字級、更寬的邊距、節制的配色方案。產出的結果明顯更精緻，不過在內容密集的頁面上留白可能會過多。

Make Interfaces Feel Better 專門處理微互動。Hover 狀態、載入轉場、捲動行為、按鈕回饋。這些小細節正是區分「看起來還行」和「用起來很舒服」的關鍵。跟這份清單上的其他 skills 相比，我從這個 skill 感受到最大的體驗品質提升。

什麼沒有用

不是每種組合都能和平共處。同時安裝全部 12 個會產生互相矛盾的指令，讓 agent 搞混。實際的做法是疊加三到四個涵蓋不同面向的 skills：一個負責基礎規則、一個負責元件層級的指引、一個負責審查，再加一個針對你專案中特定的美學缺口。

我也發現，針對同一層級的 skills（例如兩套互相競爭的配色系統）會彼此抵銷。每個面向選一個，然後堅持用下去。

這 12 個全部免費。從官方的 frontend-design plugin 和 Impeccable 開始，接著根據產出仍然看起來很制式的地方來添加。然後把 Inter 從你的字體清單中刪掉。