前言
用 Claude Code 把網站做出來，能跑、功能也對，但畫面一看就知道是 AI 生的——圓角卡片、清一色的預設 icon、漸層按鈕，全都長一個樣（還不熟 Claude Code 能做到什麼的話，可以先看我寫的 MCP 核心功能詳解）。這篇講我怎麼拉 Claude Design 進來「協同設計」，把自己的網站從滿滿 AI 味救回有質感的樣子，也誠實講它做不到的地方，還有一個很多人搞錯的重點——現在用 Claude Design，會直接吃掉你 Claude Code 的 token 額度。
為什麼 Claude Code 做的網頁，一看就是「AI 做的」？
先說結論：這不是 Claude Code 笨，而是大型語言模型的本質是「機率預測」，它永遠在找統計上的「最大公約數」。當你只丟一句「幫我做一個現代感的 Landing Page」、卻沒給具體風格時，模型只能從訓練資料裡，撈出最符合「現代、流行、高評價」的那批程式碼來填。
而近年最紅的前端元件庫——Tailwind CSS、Shadcn UI、Magic UI——在它資料庫裡的權重最高、最不容易出錯。於是這些庫「開箱即用」的那套預設樣式，就成了 AI 的萬用解答——你叫它做網站，它就端出同一套。所以 AI 不是「挑了醜的」，而是挑了那張最安全、卻最沒有你的牌。這裡要先講清楚：AI 味跟「哪種顏色、哪種風格好不好看」完全無關，它真正的問題是——它給你的「變化」其實是假的：同一套 feature 卡片版型，只把兩格換成三格、配一批到處都有的廉價 icon，每個 AI 網站都這樣。
真正的問題：你在「無意識」中把設計決定權讓了出去
關鍵不在這些元素好不好看，而在它們全都不是「你決定的」。當你只輸入「幫我做一個記帳網站的個人主頁」，AI 就得自己把所有設計細節填滿：
- 佈局：三欄式卡片是最容易呈現「功能特點」、又保證 RWD 不破版的 Safe 結構，於是它每次都這樣排。
- 視覺：細線圖示（像 Lucide Icons）程式碼短、好調用、百搭，成了它的萬用貼圖。
- 結果：你驚嘆「5 秒就生出一個完整網頁」，卻沒發現色彩、間距、結構全是公版。
你可能會想：「那我請它換一種風格總可以了吧？」我特地做了個實驗——讓 AI 生六個完全不同產業的網站（記帳工具、法律科技、寵物健康、咖啡訂閱、健身 App、工程師作品集），風格隨它自由發揮。它確實端出了六種「流派」：深色紫光、淺色乾淨、Bento 格子、玻璃擬態、粉彩分欄、個人品牌公版。乍看真的不一樣，但瞇著眼再掃一次——徽章、漸層字、藥丸按鈕、卡片三連發，同一批零件換了六套衣服，每一張你都有「我在哪看過」的既視感。
所以「AI 味」的本質，是設計決定權的無意識讓渡——你以為你在「做網站」，其實是把長相整個外包給了統計平均值。反過來說，只要是你「刻意決定」的風格（哪怕你選的剛好跟大家撞），那就是你的設計，不再是 AI 味。差別從來不是好不好看，是「有沒有人做選擇」。問題只剩一個：一個不會設計的工程師，要怎麼做這些選擇？這就是 Claude Design 進場的地方。
Claude Code 與 Claude Design 怎麼分工？
很多人把這兩個搞混，以為是同一個工具的兩個名字。其實它們分工很清楚：Claude Code 負責「寫出能跑的程式」，Claude Design 負責「做設計決策與視覺」。一個是工程，一個是美感，剛好補上彼此的弱項。
| 比較項 | Claude Code | Claude Design |
|---|---|---|
| 主要工作 | 把需求變成可執行的程式碼 | 產生版面、配色、排版等設計決策 |
| 擅長 | 邏輯、功能、串接、修 bug | 視覺層級、間距、風格、畫面質感 |
| 輸出 | 真的能跑的網站／元件 | 可互動的設計稿（Prototype）、可交付給 Code 的規格 |
| 弱項 | 沒給方向就走 AI 味預設版型 | 不直接產出生產級程式碼 |
| 什麼時候用 | 實作、上線、之後維護 | 實作前先把「長什麼樣」定下來 |
協同設計的核心觀念只有一句：先把設計決策定下來，再叫 Code 去實作，而不是讓 Code 邊寫邊隨便決定畫面長怎樣。AI 味之所以出現，就是因為「設計」這一步被跳過、被 Code 自動代填了。把這一步交還給 Claude Design，畫面就有了主見。
我的協同流程：先用 Claude Design 定設計，再讓 Claude Code 實作
講概念太虛，直接用我自己的網站 aiqkangber.com 示範我實際的流程。我不是設計師，整個站都是我用 AI 一起做出來的，所以這套流程是真的在跑、不是紙上談兵。
流程拆解：從定方向到交付實作
① 先餵它「你的底」。開始前 Claude Design 有個「Set up your design system」步驟——可以接上你的 GitHub repo、從電腦拖入現有程式碼，或上傳設計檔（.fig）跟公司文件。這一步是它生出來「像你、而不是通用 AI 版型」的源頭：先學會你既有的設計語言，後面才不會端出一套陌生公版。
② 它會先反問你方向，再生視覺。有趣的是，Claude Design 不會悶頭丟設計——它常常先丟幾個方向的問題反問你（畫面左側那行「Claude has some questions」），確認清楚才動手，右側才給你可挑的方案。我這次請它重做按鈕，它一口氣給了三套路線（Aurora／Halo／Ink）讓我選；過程都由我下指令調間距、層級、配色——設計決定權握在自己手上，不讓它走預設。
③ 卡關時，先去 Dribbble 撿參考。如果你「也說不清楚自己要什麼」，下指令前先去 Dribbble 或 Pinterest 搜想要的風格元素，把看上眼的截圖＋連結貼回 Claude Design 當參考。它讀懂之後給的草案品質會跳一級——比你憑空想一堆形容詞讓它猜，又快又準。
④ 一鍵交付給 Claude Code 實作。方向定了、視覺也順了，按右上角 Share →「Send to…」，目的地清單裡就有 Claude Code，旁邊那行說明寫得很直白——「Hand off the project to your terminal」，把整個專案交接到你的終端機。它不是丟一張圖或一段提示，而是打包成一個結構化「交付包」——含元件規格、實際用到的 design tokens（顏色、間距、字級）、版面層級跟素材。Claude Code 直接讀這份規格、不用從像素猜，照著寫成程式碼，再來回微調幾輪就收斂。
📖 延伸閱讀：MCP 是什麼？Claude Code 核心功能詳解：以 Figma、n8n 為例打造會動手的 AI
實際對照：AI 公版 vs 我的網站，首頁、服務頁、電子報頁一次看
講再多不如直接看。下面第一張，是我特地做的一個典型「AI 公版」hero——置中大標、漸層字、底下三張線條圖卡片。它不醜，但你一定有「好像在哪看過」的既視感，因為每個 AI SaaS 落地頁都長這樣。
下面是我自己的網站 aiqkangber.com。一樣是深色、一樣有漸層，但首頁主視覺換成了一顆「整合中樞」的粒子地球，四顆衛星節點對應我實際在用的工具（Figma、Cursor、n8n、pgvector），底下還有一條 agent 即時動作的狀態列。
注意看，這兩張的配色其實是同一個色系——所以「有沒有 AI 味」從來不是看顏色，是看那個主視覺是「隨手生的公版」，還是「為你而做的東西」。
而且這個對比不只首頁，內頁更明顯。下面兩組都是「上：AI 公版、下：我的實頁」。公版服務頁你閉著眼睛都背得出來——置中漸層大標＋三張等寬的 ✓ 清單卡；公版電子報頁則永遠是一張置中訂閱卡＋漸層按鈕＋「10,000+ 訂閱者」三件套。我的服務頁拿斜置的工作流卡片當主視覺、底下接一條真的在跑的終端機狀態列；電子報頁則放了一隻太空人、直接攤開歷期內容。每一頁都有自己的記憶點，這就是公版給不了的東西。
但我得誠實講它的限制，免得你期待過高。Claude Design 做不出複雜的圖——它擅長的是版面、排版、配色，圖示這塊它很愛用 SVG 線條圖、簡單幾何形狀那種「向量、乾淨」的格式。要真實照片、複雜插畫、有質感的主視覺，它生不出來，那些還是得你自己準備（拍照、找素材、或用別的生圖工具）。所以協同設計救的是「版面與質感」，不是「幫你變出美術素材」——把期待放對地方，你才不會失望。
不想要一個「一看就是 AI 隨手做」的網站？從設計到實作，我可以幫你做出有你風格、又不廉價的成品。
看我的網站建置服務兩個一起用，額度燒更快——Claude Design 已併入共用額度，怎麼省？
這裡要破一個很多人（包括我一開始）都搞錯的迷思。Claude Design 剛推出時是獨立額度，用它不影響你的 chat 和 Claude Code。但從 2026 年 5 月底起，Anthropic 把 Claude Design 的額度併進了共用池，官方說法是「Claude Design now shares usage limits with Claude.ai and Claude Code」——也就是說，現在 chat、Claude Code、Claude Design 三個吃的是同一份額度。這個改動是伺服器端逐步推送、還沒大張旗鼓公告，所以四月那批教學文很多還停在「獨立額度」的舊資訊。
對協同設計的影響很直接：你一邊用 Claude Design 反覆調畫面、一邊用 Claude Code 實作，兩邊都在咬同一份額度，會比你想的更快見底，重度使用者尤其有感。所以「怎麼省」變成這套流程能不能持續跑的關鍵。
省額度的輕量替代做法
我自己在用的幾個省法，從最該做的開始：
- 設計方向先想清楚再 handoff：別把 Claude Design 當塗鴉板無限迭代，先在腦中或紙上定好調性，進去就是收斂，不是亂試。
- 把 Claude Design 留給關鍵頁：首頁、服務頁這種門面才動用它；內頁、重複版型讓 Claude Code 沿用既有 tokens 就好。
- 在 prompt 直接下 design tokens：把配色、字級、間距用文字明確告訴 Claude Code，它就不會走 AI 味預設，這招完全不花 Design 額度。
- 套用 anti-slop 的 skill：社群有專門對抗 AI 味的前端 skill，放進 Claude Code 就能讓它寫前端時帶點品味。
- 非關鍵視覺用免費工具：像 Google Stitch 這類也能補一部分版面，把貴的額度省下來。
📖 延伸閱讀：AI 寫程式的缺點有哪些？2026 vibe coding 實測，8 個 AI 生成程式碼的致命問題
常見問題 FAQ
Q1：Claude Design 免費能用嗎？費用怎麼算？
免費帳號用不了。Claude Design 包含在 Pro、Max、Team、Enterprise 訂閱方案裡，不用額外加購方案就能用。但要注意，它的用量從 2026 年 5 月底起已經併入和 chat、Claude Code 共用的額度池，Pro 額度少、Max 多（約 5 倍），額度不夠時可以另外加購 credits。
Q2：Claude Design 出的設計能直接變成程式碼嗎？
能，這正是它最強的地方。透過 Share →「Send to…」選 Claude Code，它會把設計打包成含元件規格與 design tokens 的結構化交付包，Claude Code 直接讀這份規格實作，不用從截圖去猜版面。這是同個模型家族之間的交接，比「丟一張設計圖叫工程師照著刻」精準很多。
Q3：我沒有設計底子，也能用 Claude Design 嗎？
可以，而且它正是為不會設計的人準備的。你不需要懂配色理論或排版規則，用對話描述你要的感覺，它幫你把設計決策補上。你要做的不是「會設計」，而是「會判斷哪個版本比較順眼」並把方向講清楚——這比從零學 Figma 低門檻太多。
Q4：Claude Code 跟 Claude Design 一定要一起用嗎？
不一定。如果你會在 prompt 裡明確下 design tokens（顏色、字級、間距），光用 Claude Code 也能擺脫不少 AI 味。Claude Design 的價值在於「幫你把設計方向視覺化、再無縫交給 Code」，當你對畫面沒把握、或想要更高的視覺完成度時，兩個一起用的效果才明顯。
Q5：Claude Design 和 Figma 差在哪？我該用哪個？
Figma 是給設計師的專業工具，自由度高但學習曲線陡。Claude Design 是用對話做設計、而且能直接交給 Claude Code 變程式碼，主打「不會設計也能用」和「設計到開發一條龍」。如果你是工程師、想快速把畫面做順又不想學 Figma，Claude Design 更適合；需要像素級精修、團隊協作設計規範，Figma 還是更專業。
總結
Claude Code 做的網頁有 AI 味，從來不是技術不行，而是「設計決策」這一步被跳過、被模型用安全牌代填了。把這一步交還給 Claude Design——先定方向、再用交付包無縫交給 Code 實作——畫面就從「某個 AI 隨手生的」變回「某個人的品牌」。我用自己的網站走過一遍，最有感的不是某個按鈕變漂亮，而是整個站終於不再撞臉。
記住三件事就夠了：先做設計決策再寫程式、把有限的額度花在門面頁、對 AI 生不出複雜美術素材這件事放對期待。握住這三條，你不用變成設計師，也能做出讓人覺得「有質感」的網站。
