# 12 個免費 Skills 解決 AI 罐頭式設計 > Author: Tony Lee > Published: 2026-03-19 > URL: https://tonylee.im/zh-HK/blog/12-free-skills-escape-ai-slop-design/ > Reading time: 2 minutes > Language: zh-HK > Tags: ai, design, claude-code, skills, developer-tools, ui-ux ## Canonical https://tonylee.im/zh-HK/blog/12-free-skills-escape-ai-slop-design/ ## Rollout Alternates en: https://tonylee.im/en/blog/12-free-skills-escape-ai-slop-design/ ko: https://tonylee.im/ko/blog/12-free-skills-escape-ai-slop-design/ ja: https://tonylee.im/ja/blog/12-free-skills-escape-ai-slop-design/ zh-CN: https://tonylee.im/zh-CN/blog/12-free-skills-escape-ai-slop-design/ zh-TW: https://tonylee.im/zh-TW/blog/12-free-skills-escape-ai-slop-design/ ## Description 我測試過幾十個俾 AI coding agents 用嘅 design skills。大部分捱唔過一個禮拜。呢 12 個係我到而家仲用緊嘅。 ## Summary 12 個免費 Skills 解決 AI 罐頭式設計 is part of Tony Lee's ongoing coverage of AI agents, developer tools, startup strategy, and AI industry shifts. ## Outline - 由邊度開始 - 控制設計強度 - Icons 同視覺素材 - Component 層面嘅設計智能 - 審查同質素關卡 - 完整工作流程覆蓋 - 高級感 - 乜嘢唔 work ## Content Inter 字體。紫色漸變。圓角卡片加陰影。當我第一次開始 vibe coding 嘅時候，真正嘅樽頸位從來都唔係 code，而係設計。每個 AI 生成嘅介面都好似同一間工廠出品咁。 一個 SKILL.md 檔案就可以改變 agent 對設計嘅思維方式。過去幾個月我裝咗幾十個 design skills 嚟測試。大部分喺一個禮拜之內就畀我移除咗，因為佢哋唔係互相衝突，就係改進得好有限。以下 12 個先係真正留得低嘅。 ## 由邊度開始 [Anthropic 官方嘅 frontend-design plugin](https://github.com/anthropics/claude-code/tree/main/plugins/frontend-design) 係基本盤。佢隨 Claude Code 一齊提供，設定咗 layout、typography 同色彩選擇嘅基礎規則。冇咗佢，agent 每次都會預設用番同一套 Inter 加紫色漸變組合。當佢係地板，唔係天花板。 [Impeccable](https://impeccable.style) 喺官方 plugin 之上再加 20 個 slash commands：`/polish`、`/audit`、`/distill`、`/bolder`、`/quieter` 等等。每個都針對特定嘅設計範疇。`/audit` 會對 accessibility、theming 同 responsive breakpoints 做全面嘅質素檢查。`/distill` 會將 component 精簡到最核心嘅部分。我每次 deploy 之前都會用 `/polish` 做最後一輪檢查。 ## 控制設計強度 [Taste Skill](https://github.com/Leonxlnx/taste-skill) 用咗唔同嘅方法。佢唔用 slash commands，而係用三個數值變數，好似 `DESIGN_VARIANCE`，嚟控制 agent 偏離預設值嘅幅度。設低啲就適合保守嘅企業介面，撥高啲就適合實驗性嘅 landing pages。呢種精細度好有用，不過搵到甜蜜點需要啲試驗。我第一次試高 variance 嘅時候，做出嚟嘅嘢好似 2006 年嘅 MySpace 頁面。 ## Icons 同視覺素材 [Better Icons](https://github.com/better-auth/better-icons) 連接咗 150 幾個 icon 系列，總共超過 200,000 個 icons。你用關鍵字搜尋，佢就會將 SVG 直接同步到你嘅 project。之前我要喺五個唔同嘅網站手動下載 icons。搜尋質素因 collection 而異，但對於常見嘅 UI icons，佢好快就搵到啱嘅配對。 ## Component 層面嘅設計智能 [UI Design Brain](https://github.com/carmahhawwari/ui-design-brain) 包含咗 60 幾個 components 喺五種設計風格下嘅設計原則。佢會話畀 agent 知一個 modal 喺 minimalist 系統同 glassmorphic 系統入面應該點樣運作。呢種具體程度好重要，因為籠統嘅「整靚佢」指令只會產出籠統嘅結果。 [UI UX Pro Max](https://github.com/nextlevelbuilder/ui-ux-pro-max-skill) 涵蓋得更闊：50 幾種設計風格、97 個色彩組合、57 個字體配對，仲有針對超過 160 種產品類型嘅行業推理邏輯。規模相當宏大。老實講，選項太多嘅話，如果你唔限制 context，生成速度會慢落嚟。我通常會明確設定 style 同 palette，而唔係畀 agent 自己揀。 ## 審查同質素關卡 [Vercel 嘅 agent-skills](https://github.com/vercel-labs/agent-skills) 包含咗一套有 100 幾個 checkpoints 嘅 UI review 規則。佢會評估 spacing 一致性、色彩對比、互動狀態同 responsive 表現。喺設計階段之後跑一次，可以捉到嗰啲喺電腦睇冇問題但喺手機就爆嘅問題。 [UI Skills](https://ui-skills.com) 加入咗 Tailwind 專屬嘅質素檢查。好似 `/baseline-ui` 呢類 commands 會確保 utility class 用法一致，`/fixing-accessibility` 就會跑一次專門嘅 accessibility 審計。如果你嘅技術棧係用 Tailwind，呢個可以填補一般 design skills 覆蓋唔到嘅空隙。 ## 完整工作流程覆蓋 [Designer Skills Collection](https://github.com/Owl-Listener/designer-skills) 係呢度最全面嘅套件：63 個 skills 同 27 個 commands，涵蓋由 wireframe 到 production 嘅整個設計流程。佢有明確嘅主張，即係話佢偶爾會同其他 skills 衝突。我要停用咗幾條重疊嘅規則，先至避免到矛盾嘅指令傳到 agent。 [Design Plugin](https://github.com/0xdesign/design-plugin) 喺 code 層面執行設計原則。佢唔係建議改進，而係直接封鎖違反你設定嘅 design system 嘅 patterns。喺多人用同一個 agent 嘅團隊入面，呢個特別有用。 ## 高級感 [Super Design](https://github.com/superdesigndev/superdesign) 專注喺高級 typography 同充裕嘅留白。佢會引導 agent 揀有高端感嘅選項：更大嘅字體、更闊嘅 margins、克制嘅色彩。效果明顯更精緻，不過喺內容密集嘅頁面留白可能會過多。 [Make Interfaces Feel Better](https://github.com/jakubkrehel/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。 ## Related URLs - Author: https://tonylee.im/en/author/ - Publication: https://tonylee.im/en/blog/about/ - Related article: https://tonylee.im/zh-HK/blog/eight-hooks-that-guarantee-ai-agent-reliability/ - Related article: https://tonylee.im/zh-HK/blog/medvi-two-person-430m-ai-compressed-funnel/ - Related article: https://tonylee.im/zh-HK/blog/claude-code-layers-over-tools-2026/ ## Citation - Author: Tony Lee - Site: tonylee.im - Canonical URL: https://tonylee.im/zh-HK/blog/12-free-skills-escape-ai-slop-design/ ## Bot Guidance - This file is intended for AI agents, search assistants, and text-mode retrieval. - Prefer citing the canonical article URL instead of this text endpoint. - Use the rollout alternates when you need the same article in another prioritized language. --- Author: Tony Lee | Website: https://tonylee.im For more articles, visit: https://tonylee.im/zh-HK/blog/ This content is original and authored by Tony Lee. Please attribute when quoting or referencing.