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

Inter 字體。紫色漸變。圓角卡片加陰影。當我第一次開始 vibe coding 嘅時候，真正嘅樽頸位從來都唔係 code，而係設計。每個 AI 生成嘅介面都好似同一間工廠出品咁。

一個 SKILL.md 檔案就可以改變 agent 對設計嘅思維方式。過去幾個月我裝咗幾十個 design skills 嚟測試。大部分喺一個禮拜之內就畀我移除咗，因為佢哋唔係互相衝突，就係改進得好有限。以下 12 個先係真正留得低嘅。

由邊度開始

Anthropic 官方嘅 frontend-design plugin 係基本盤。佢隨 Claude Code 一齊提供，設定咗 layout、typography 同色彩選擇嘅基礎規則。冇咗佢，agent 每次都會預設用番同一套 Inter 加紫色漸變組合。當佢係地板，唔係天花板。

Impeccable 喺官方 plugin 之上再加 20 個 slash commands：/polish、/audit、/distill、/bolder、/quieter 等等。每個都針對特定嘅設計範疇。/audit 會對 accessibility、theming 同 responsive breakpoints 做全面嘅質素檢查。/distill 會將 component 精簡到最核心嘅部分。我每次 deploy 之前都會用 /polish 做最後一輪檢查。

控制設計強度

Taste Skill 用咗唔同嘅方法。佢唔用 slash commands，而係用三個數值變數，好似 DESIGN_VARIANCE，嚟控制 agent 偏離預設值嘅幅度。設低啲就適合保守嘅企業介面，撥高啲就適合實驗性嘅 landing pages。呢種精細度好有用，不過搵到甜蜜點需要啲試驗。我第一次試高 variance 嘅時候，做出嚟嘅嘢好似 2006 年嘅 MySpace 頁面。

Icons 同視覺素材

Better Icons 連接咗 150 幾個 icon 系列，總共超過 200,000 個 icons。你用關鍵字搜尋，佢就會將 SVG 直接同步到你嘅 project。之前我要喺五個唔同嘅網站手動下載 icons。搜尋質素因 collection 而異，但對於常見嘅 UI icons，佢好快就搵到啱嘅配對。

Component 層面嘅設計智能

UI Design Brain 包含咗 60 幾個 components 喺五種設計風格下嘅設計原則。佢會話畀 agent 知一個 modal 喺 minimalist 系統同 glassmorphic 系統入面應該點樣運作。呢種具體程度好重要，因為籠統嘅「整靚佢」指令只會產出籠統嘅結果。

UI UX Pro Max 涵蓋得更闊：50 幾種設計風格、97 個色彩組合、57 個字體配對，仲有針對超過 160 種產品類型嘅行業推理邏輯。規模相當宏大。老實講，選項太多嘅話，如果你唔限制 context，生成速度會慢落嚟。我通常會明確設定 style 同 palette，而唔係畀 agent 自己揀。

審查同質素關卡

Vercel 嘅 agent-skills 包含咗一套有 100 幾個 checkpoints 嘅 UI review 規則。佢會評估 spacing 一致性、色彩對比、互動狀態同 responsive 表現。喺設計階段之後跑一次，可以捉到嗰啲喺電腦睇冇問題但喺手機就爆嘅問題。

UI Skills 加入咗 Tailwind 專屬嘅質素檢查。好似 /baseline-ui 呢類 commands 會確保 utility class 用法一致，/fixing-accessibility 就會跑一次專門嘅 accessibility 審計。如果你嘅技術棧係用 Tailwind，呢個可以填補一般 design skills 覆蓋唔到嘅空隙。

完整工作流程覆蓋

Designer Skills Collection 係呢度最全面嘅套件：63 個 skills 同 27 個 commands，涵蓋由 wireframe 到 production 嘅整個設計流程。佢有明確嘅主張，即係話佢偶爾會同其他 skills 衝突。我要停用咗幾條重疊嘅規則，先至避免到矛盾嘅指令傳到 agent。

Design Plugin 喺 code 層面執行設計原則。佢唔係建議改進，而係直接封鎖違反你設定嘅 design system 嘅 patterns。喺多人用同一個 agent 嘅團隊入面，呢個特別有用。

高級感

Super Design 專注喺高級 typography 同充裕嘅留白。佢會引導 agent 揀有高端感嘅選項：更大嘅字體、更闊嘅 margins、克制嘅色彩。效果明顯更精緻，不過喺內容密集嘅頁面留白可能會過多。

Make Interfaces Feel Better 專門處理 micro-interactions。Hover 狀態、loading 過渡、scroll 行為、按鈕回饋。呢啲細節正正係「睇落 OK」同「用落好正」之間嘅分界線。同呢份清單入面其他 skills 相比，呢個俾我感受到最大嘅質感提升。

乜嘢唔 work

唔係每個組合都夾得埋。同時裝晒 12 個會產生互相矛盾嘅指令，搞到 agent 混亂。實際嘅做法係疊三至四個涵蓋唔同範疇嘅 skills：一個管基礎規則、一個管 component 層面嘅指引、一個管審查，再加一個針對你 project 入面特定嘅美學短板。

我亦發現針對同一層面嘅 skills（好似兩套互相競爭嘅色彩系統）會互相抵消。每個範疇揀一個就夠，然後堅持用佢。

12 個全部免費。由官方嘅 frontend-design plugin 同 Impeccable 開始，再根據你嘅輸出仲邊度睇落太普通嚟加。仲有，刪咗你 font stack 入面嘅 Inter。