為什麼 Claude 預設產出的設計很普通，真正解決問題的 5 項技能，以及當這些技能都不符合你的品牌時，如何一步步建立自己的專屬技能。
你已經知道如何辨識它了。白色背景上的紫色漸層、Inter 字體、卡片上的柔和陰影、區塊中間一個突兀的表情符號。你看到它，心裡就想：這是 Claude 做的。
這不是模型的錯。這是它的預設行為。
當你要求「建立一個登陸頁面」而沒有提供任何進一步指示時，模型不會去尋找最有趣的選擇。它會去尋找最可能的選擇。而最可能的選擇，就是它在訓練期間所見一切的「平均值」：數百萬個安全、普通、容易被遺忘的頁面。結果就是一個看起來像 AI 設計的設計，因為它本質上就是網路上所有存在的東西的統計中心。
Anthropic 對此有個稱呼，他們稱之為「分佈收斂」。在實務上，這意味著一件事：沒有方向指引，Claude 總是會落入俗套。
「技能」就是將它帶離那個地方的方法。
什麼是技能，快速說明
把它想像成一個 Claude 在開始工作前會讀取的 Markdown（文字）檔案。你不需要在每次提示中都重複你的偏好、你的設計系統和你的語氣，你只需寫一次，它就會自動載入。這就像你在交辦任務前，先交給它一份職位說明。
輸出結果的差異非常巨大。同樣的提示詞，同樣的 Claude，但只要載入了正確的技能，它就不再是普通的設計師，而是一個了解你工作的協作者。
我測試了許多技能，並在相同的提示詞下做了前後對比，來看看哪些真正能帶來改變。我們可以分離出 5 個真正能為網頁設計帶來影響的技能。
1. Frontend Design（Anthropic 官方版）
這是生態系中最受歡迎的技能，而且理由充分：它是由 Anthropic 本身發布的。它已經超過了 277,000 次安裝。
它的秘訣不是教 Claude 如何畫得漂亮，而是教它 不要 做什麼。這個檔案明確列出了要避免的陳腔濫調：過度使用的字體、常見的配色方案、每個人都能認出的那種卡片陰影結構。這是一堂內建在模型中的、關於品味的小課。
在前後對比測試中，這點變得很明顯。同一個登陸頁面，原本是紫色漸層加表情符號，現在變成了更具編輯風格的設計，優雅的襯線字體配上乾淨的無襯線字體、滾動淡入動畫以及經過深思熟慮的懸停狀態。這一切只來自一個提示詞。
何時使用： 當你從頭開始一個專案，並希望第一次就能跳脫預設時。這就是你的基礎。
而且它不會限制你的風格。如果你想要其他規則，但只想用無襯線字體，只需編輯 markdown 檔案並告訴它：「只使用 Geist、Google Sans 或 DM Sans。」Claude 會調整檔案。
2. Impeccable（工具箱）
由 Paul Bakaus 製作，這在短時間內成為社群最愛之一，在 GitHub 上獲得了超過 45,900 顆星。原因很明顯。
它酷的地方在於指令。有純粹的 /impeccable，但它還附帶了約 20 個子指令，你可以根據上下文呼叫：
- /impeccable animate 會以連貫且對頁面有意義的方式加入開場動畫和動態效果
- /impeccable quieter 會對設計進行「雜訊」審核（太多漸層、每個標題都很粗的字重、散落的 emoji），並修剪多餘的部分，帶來優雅而非喧囂
- /impeccable audit 會進行品質和無障礙性檢查
- /impeccable document 會產生一個 design.md 檔案，捕捉你完整的設計系統，供任何 Agent 之後讀取
在底層，它有 46 條用於偵測「雜亂內容」的確定性規則——這些規則無需依賴模型猜測即可執行。它能精確地捕捉 AI 生成的模式。
何時使用： 用於迭代你已有的內容。有一個現成的頁面，想要控制過度的設計？用「quieter」。缺少生命力？用「animate」。只需兩個提示，網站就能提升一個檔次。
超越工具本身的細節：Impeccable 有一個「slop」標籤，顯示它教導 AI 避免的模式。自己看看這個清單。學會辨識卡片側邊的邊框強調色已經成為 AI 的陳腔濫調，這也能讓你手動設計時變得更好。
3. UIUX Pro Max（迫使 Claude 思考那一個）
這是一個超強大的設計資料庫，也是這個清單中獲得最多星星的：在 GitHub 上超過了 105,000 顆星。它包含 67 種 UI 樣式、161 個調色盤、57 組字體配對、99 條 UX 指南，以及 16 個技術棧，讓它知道如何在每個框架中實作。
它的重點不是快速給你程式碼；而是相反。它迫使 Claude 在寫任何一行程式碼之前先進行推理。它會將你的佈局同時在五個領域（產品、風格、色彩、登陸頁面、排版）中進行搜尋，應用推理規則，然後才回傳一個完整的設計系統，並已標記好要避免的反模式。
https://x.com/nett0eth/status/2073490435066982554
結果是刻意設計的區塊，而非裝飾性的。在測試中，它做了像是直接在 KPI 區塊中做從亮色到暗色的過渡，專門用來凸顯需要跳脫出來的數字。這是你能期待從人類而非生成器那裡得到的決策。
何時使用： 當你對內容有清晰的構想，並希望設計有深度時。還有一個價值千金的建議：你對每個區塊想要的內容描述得越具體，效果就越好。技能不會讀心術；它只會放大你的方向。如果你傳送「使用技能，做一個更激進的重新設計，探索調色盤和字體配對」，回傳的結果會完全不同。
4. Web Design Guidelines（稽核員，來自 Vercel Labs）
這個技能適用於專案結束時，而非開始時。它來自 Vercel Labs，在 GitHub 上有 29,000 顆星，它會根據 Vercel 的網頁介面指南清單（超過 100 條規則）審核你的程式碼：鍵盤焦點是否正常運作、永遠不要停用縮放、不要封鎖貼上、按鈕上要有載入指示器、標題階層、ARIA 等等。
而且它有一個我喜歡的技巧：你可以要求 Claude 直接在預覽畫面上標註問題。你不需要閱讀清單，而是直接在網站上，以橙色顯示哪裡缺少 aria-label、哪裡鍵盤導航失效、哪裡 CTA 缺乏焦點。它變得可視化。
何時使用： 當設計已經很好，而你希望確保它易於使用，不會讓使用鍵盤或螢幕閱讀器的人感到困擾時。這是在上線前進行的品質保證。
5. Astryx（專為 Agent 準備的設計系統，來自 Meta）
https://x.com/nett0eth/status/2073826299789889884
第五個屬於另一個類別：它不是一個關於品味的技能，而是一個完整的設計系統。上述 4 個技能教導 Claude 如何一次一個畫面地設計得更好。Meta 則選擇了相反的路徑，並開源了 Astryx，這個在內部發展了 8 年的設計系統，已成為公司內最大且使用最廣泛的系統，並在超過 13,000 個應用程式中運行。現在它已開源，而且這裡重要的細節是，它已為 Agent 準備就緒。
關鍵在於：與其期望模型對每個元件都有常識，不如給它一個萬事都已內建易用性和一致性的系統。它有超過 150 個元件、7 個現成的主題、深色模式，以及一個人和 Agent 都能以相同方式使用、讀取相同文件的 CLI。甚至在儲存庫中還有一個 CLAUDE.md，讓 Claude 在撰寫第一行程式碼之前先了解環境。
它基於 React 和 StyleX，目前處於測試階段，已獲得 8,200 顆星。
何時使用： 當你想要系統的一致性，而不只是一個漂亮的畫面時。技能能提煉模型的品味；Astryx 則確保在任何提示詞之前，基礎就已經穩固。兩者相輔相成。
在哪裡可以找到更多技能
這 5 個技能涵蓋了網頁設計師在 Claude 中約 90% 的工作。但如果你想探索更多，這裡有幾個不錯的目錄：
- UI Skills 專注於設計工程師，但也適用於網頁設計。它列出了這其中的幾個技能，並包含無障礙和 Shadcn 相關的內容。
- Type UI 是我最喜歡的，適合那些視覺優先的人。你滾動頁面就能看到每種美學的預覽（極簡、新粗獷主義、精緻企業風），然後直接呼叫你想要的，無需寫一大段指令。
- MCP Market 是一個大型社群儲存庫；前往 Agent Skills > Categories > Design Tools，裡面有無盡的清單。
- skills.sh 是 Vercel 和其他公司官方發布的地方，適合從源頭直接取得。
如何建立你自己的技能
當這些技能都無法 100% 符合你的品牌或技術棧時。這時你就該建立自己的技能。
在 Claude 應用程式或 Claude Code 中，前往 Customize > Skills > Create Skill > Create with Claude。它會先問你這個技能應該做什麼。
區分一個有用的技能和一個無用的技能的關鍵，在於你在此處描述的具體程度。不要說「讓設計漂亮」，而是提供推理規則。例如：
- 總是先識別產品類型（儀表板、登陸頁面、應用程式），因為設計會隨情境而改變。
- 在繪製之前，總是先推斷畫面的目標：哪個動作最重要，使用者應該先注意到什麼。
- 預設使用收斂的調色盤，背景和表面更中性。
- 一個主要內文字體，如果需要，可以為大標題使用一個展示字體。
Claude 會開始一段對話，詢問你的技術棧（例如 Tailwind tokens）、你的間距比例、你的佈局限制。細節越詳細越好；這正是讓技能有價值的關鍵。最後，它會將所有東西打包成一個帶有參考資料夾的 .md 檔案，你可以透過自己的斜線指令來使用它。
但是，建立技能是容易的部分。困難的部分是確保它在下一次會話中不會失效，而這就是許多人跳過的關鍵環節。我已經在另一篇文章中詳細介紹了 Matt Pocock 的 8 步驟框架，用於編寫能夠自我維持的技能（觸發、結構、方向、修剪），這比任何你安裝的設計技能都更有價值：
https://x.com/nett0eth/status/2075976597513830727
值得一起閱讀；這就像「給模型正確的尺」的相同邏輯，但應用在更高一層。Anthropic 的官方指南《The Complete Guide to Building Skills for Claude》也詳細說明了這些原則。
總結
Claude 預設並不是一個令人印象深刻的設計師。這對任何曾經要求一個登陸頁面卻收到常見紫色漸層的人來說，都不是新聞。
技能就是你縮小這個差距的方法。不是因為模型變聰明了，而是因為你給了它一個真正的設計師腦中攜帶的那把尺。模型本身的重要性，不如你圍繞它建立的循環。
設定一次。輸出結果的跳躍幅度之大，讓你從此不想再沒有它而工作。
問題依然存在：你有多少專案仍然因為你在提出要求之前從未載入過任何技能，而帶著常見的紫色漸層？請儲存並分享 👍
