Claude Code 怎麼做出沒有 AI 感的網站？三步驟把 AI 調教成懂品味的設計師
2026年8月7日 上午 8:01
AI 設計CLAUDE CODE · AI 設計 · 2026
QUICK ANSWER
Claude Code 做出來的網站有 AI 感，原因出在「通用」而非技術：所有人丟同一句 prompt，就拿到同一個平均值。解法是三步工作流——先建立自己的品味庫，再用官方 frontend-design skill 與 MCP 把品味裝進 Claude Code，最後永不 one-shot，同一頁先出五種風格用眼睛挑。本文附四段式 prompt 公式與護欄 always／never 清單。
這禮拜我把一個實驗跑完：讓 Claude Code 從零做一個設計工作室的官網，然後把「怎麼讓它做得不像 AI 做的」整套流程記下來。結論先講——模型不缺能力，缺的是你的品味。這篇把三個步驟完整拆開，照著走一次，你的下一個網站不會再被一眼看穿。
CHAPTER 01 · KNOW YOUR ENEMY
先認識敵人：什麼是 AI 感
打開任何一個 AI 一句話生出來的網站，你大概能在三秒內認出它：深色底、藍紫漸層的大標題、圓角卡片排成一面牆、四個罐頭 icon 各配一句功能描述。每一顆按鈕都圓得一模一樣，每一次生成都長得像上一次。
這件事跟技術力無關，問題出在「通用」兩個字。模型的本質是把訓練資料的平均值還給你——大家丟同一句 prompt，自然拿到同一個平均值。模型再強，也只是把平均值往上抬；能打破平均的，只有品味。連 Anthropic 自己都看不下去，官方推出的 frontend-design skill，開宗明義就是要打掉這種千篇一律的輸出。
「AI 味」這個問題我在〈去 AI 味怎麼做才有效〉拆過寫作版，這篇處理的是網頁版。解法的骨架是同一套：與其抄別人的 prompt，先把自己的品味變成 AI 讀得懂的資產。具體分三步。
01
養品味
建一座你真心喜歡的設計庫，照家族分類、命名。
02
武裝 Claude
裝上它出廠沒有的 skill 和 MCP，教它說設計的語言。
03
廣撒網
永不 one-shot，同一頁先出五種風格，用眼睛迭代。
CHAPTER 02 · BUILD YOUR TASTE
第一步：建立你的品味庫
品味是你的護城河，而護城河是挖出來的。從今天開始，把每一個讓你停下滑動的畫面收進同一個地方——Dribbble 搜 web design 按熱門排序、Pinterest 收你自己想不到的 hero 版型、Threads 追蹤那些天天貼設計實作的設計師。看到就截圖，能存連結就存連結，真實網站永遠勝過靜態圖片。
收集只是一半，整理才是關鍵。分類的原則只有一條：照設計家族分，別照專案分。「印刷紙感」「單色抖動」「留白極簡」「古典混搭」——這種分法會逼你看見風格的骨架，而不是客戶的名字。然後幫每一種風格取名字。命名這個動作比想像中重要，因為詞彙就是力量：你叫得出「半調網點質感」「mono 座標標記」，prompt 才寫得出這些字，Claude 才做得出這些東西。
讓 Claude 把品味庫做成一個 Web
收藏到一定的量之後，直接叫 Claude 把整個庫做成一個小網站。每個條目給你五樣東西：設計家族自動分組、風格詞彙（這個風格由哪些詞組成）、可以直接丟進 prompt 的關鍵字、生 hero 背景用的圖像 prompt，以及一份設計簡報當整個網站的地基。從此的邏輯很單純：截圖，進圖書館，每一次 prompt 都更準。
不會寫程式也做得出這種小工具，一句話描述需求就行，做法我在〈Claude Design 怎麼用〉整理過完整流程。
CHAPTER 03 · TEACH THE LANGUAGE
第二步：教 Claude 說設計的語言
AI 版型千篇一律，還有一個更根本的原因：它缺少描述層次和留白的詞彙。你不給它設計的語言，它就只能退回統計上最安全的那套版型。skill 就是把語言裝進去的方法——一份寫給 AI 看的工作手冊，裝一次，之後每一次 build 自動生效。
先裝官方的。Anthropic 自己維護的 frontend-design skill 把版面、字體、間距的設計原則直接塞進 Claude Code，明文禁止它偷懶用爛大街的字體和預設漸層，逼它在寫任何程式碼之前先做美學決策。安裝只要兩行指令：
$ /plugin marketplace add anthropics/claude-code
$ /plugin install frontend-design
再裝你自己的。把第一步的品味庫寫成一份自訂 skill：設計家族、風格詞彙、always／never 清單全部塞進去，存進專案的 .claude/skills/ 資料夾。官方 skill 給它設計的常識，你的品味 skill 給它你的口音——兩個疊起來，它寫出來的東西才會開始像你。懶得手寫的話，Claude Cowork 的 Record a skill 甚至可以用錄的。
frontend-design 只是最紅的一支。同一個官方 repo 裡還有一整組 skill，這幾支對設計師同樣值得直接裝：
skill-creator OFFICIAL
用問答引導你把任何工作流寫成 SKILL.md——把品味庫變成 skill 的最快路徑。
brand-guidelines OFFICIAL
把品牌的色票、字體、語氣鎖進去，之後每一次產出自動守規矩。
canvas-design OFFICIAL
海報、封面、視覺稿的設計原則，做社群圖卡和簡報封面直接受益。
theme-factory OFFICIAL
十套現成視覺主題隨選隨套，落地頁和簡報不用每次從零調色。
webapp-testing OFFICIAL
讓 Claude 自己開瀏覽器檢查渲染結果，抓跑版不用你一直截圖回報。
還沒實際摸過 Claude Code 的人，先花兩分鐘看官方這支影片，感受一下它怎麼自動運作：
CHAPTER 04 · EYES AND HANDS
再幫它裝上眼睛和手
Claude 出廠沒有眼睛，也沒有畫筆。skill 解決的是語言，MCP 解決的是能力——把外部工具接進 Claude Code，讓它在終端機裡直接生圖、看畫面、拿素材。
優先接三種。第一是生圖：接一個生圖 MCP，hero 圖不用離開終端機就能生，靜態圖我目前的首選是 ChatGPT Image 2。第二是動態與影片：網站開場動畫的素材交給 Seedance，它的一鏡到底能力我在〈Seedance 2.5 完整介紹〉寫過。第三是元件參考：把你喜歡的按鈕、卡片、定價表截圖直接餵進對話，讓它學那個感覺。
一個警告：小心「一招流」skill——那種太窄、太硬、每次產出都長一樣的套件，裝了等於把 AI 感換一種口味再吃一次。原則是彈性勝過教條，方向盤永遠要在你的品味手上。
CHAPTER 05 · NEVER ONE-SHOT
第三步：永不 one-shot，先廣後深
一次生成，等於在抽獎。你在終端機裡下一句 prompt、祈禱、開獎，不滿意就重抽——這叫 prompt 樂透，跟品味沒有關係。把順序倒過來：先廣，後深。
做法是叫 Claude 一次做出五個版本，同一頁、五個設計家族並排。挑一種，再出三個內文變體；再挑一次，這回換 hero 圖上場定生死；最後微調字體、顏色、動態，小步修。
5
種風格
3
個變體
1
個贏家
∞
微調
為什麼先廣後深？因為所有選項攤在同一個畫面上，你才能用比較代替猜測——終端機看不到選擇，瀏覽器看得到。而且越收斂，完成度越高：風格定了修內文，內文定了修 hero，每一輪的力氣都花在更小、更準的範圍。
CHAPTER 06 · THE FOUR-PART PROMPT
四段式 prompt 公式
不用寫一萬行的 design.md，每一次 build 只需要四個輸入。美學——設計家族，直接從你的品味庫拿。參考——截圖或網址，學它的感覺，絕不照抄。意圖——這是什麼、給誰看、看完要做什麼。護欄——always／never 清單，把 AI 感擋在生成之前。
抽象講不如直接看。以一個虛構的獨立設計工作室 PYPD 為例，完整的 prompt 長這樣：
# 任務
幫獨立設計工作室 PYPD 做作品集官網，轉換目標是「預約諮詢」，CTA 要出現在 hero、頁尾再重複一次。
# 意圖
安靜、有工藝感的自信，客戶看三秒就覺得「這個工作室懂設計」。
# 護欄 always
一張夠份量的主視覺錨定整頁；圖像必須處理過（半調網點、顆粒、線稿），絕不用生圖原檔；字級走極端，超大標題配極小註記；近單色底，只留一個暖色 accent。
# 護欄 never
藍紫漸層、圓角卡片牆、罐頭 icon 排排站、系統字體打天下、彩虹配色。
# 產出方式
一次出五版，各自資料夾，同一套意圖和護欄，風格絕不互混；hero 圖之後補，先用色塊佔位，版面照最終圖尺寸抓好。
四段裡最容易被忽略、也最值錢的是護欄的 never 清單。你在品味庫裡看膩什麼，就把什麼寫進去——這一行行的禁令，就是把 AI 感擋在生成之前的閘門。
CHAPTER 07 · ITERATE UNTIL YOURS
迭代到「像你」為止
最後一步是收尾的功夫。與其一直求 Claude「再高級一點」「再有質感一點」，先叫它把調整面板做出來，然後自己轉旋鈕——字體下拉選單、字級字重滑桿、強調色即調。用眼睛調，別在終端機裡用猜的。
順序上，先搞定 hero：生四張圖，選一張，再修顏色。再處理轉場，hero 和內文之間不要硬切。然後是動態，頁面進場要有重量感。接著讓調整列上場，字體、字級、強調色即時調。最後一件事永遠做不完——持續餵參考，餵到它長得像你為止。
“
品味，才是 AI 和設計之間的距離。
CHAPTER 08 · TAKEAWAYS
重點整理與觀點
整套流程收攏成一句話：先餵品味，再要產出。品味庫解決「你喜歡什麼」，skill 和 MCP 解決「它做不做得到」，先廣後深解決「怎麼挑」。四段式 prompt 是把三者接起來的那條線，而護欄 never 清單是全場最被低估的一段。
工具每半年換一輪，流程今天學明天改，帶得走的只有你花時間養出來的品味。你給方向，它給選項；你來決定，風格就會長成你想要的樣子。訓練 AI，從品味開始。
RELATED READS · 延伸閱讀
Claude Opus 5 是什麼？ →
跑分、Effort 旋鈕與設計師的實際用法一次看懂。
Figma Agent 是什麼？ →
直接在 canvas 上動手的設計 AI，完整解析與用法。
Kimi K3 是什麼？ →
前端設計評測拿下第一的開源模型，設計師實用指南。
Framer CMS 怎麼用？ →
Collection、動態頁面到 SEO 的完整教學。
Figma Projects 改名 Folders 了？ →
巢狀資料夾、10 層結構與權限大改完整解析。
EXTRA · LINKS
官方 frontend-design skill 介紹頁在 claude.com/plugins/frontend-design，skill 原始碼在 anthropics/skills，Claude 官方 YouTube 頻道是 @claude。
常見問題
Q：Claude Code 是什麼？要會寫程式才能用嗎？
A：Claude Code 是 Anthropic 推出的 AI 開發工具，在終端機裡對話就能寫程式、改檔案、跑指令。不會寫程式也能用它做出網站，但你要會描述你要什麼——這篇的品味庫和四段式 prompt 公式，練的就是描述的能力。
Q：frontend-design skill 是官方的嗎？怎麼安裝？
A：是，由 Anthropic 官方維護。在 Claude Code 輸入 /plugin marketplace add anthropics/claude-code 加入官方市集，再輸入 /plugin install frontend-design 就完成安裝，之後做前端會自動套用設計原則。
Q：品味庫一定要做成網站嗎？
A：不用。資料夾加上好的分類與命名就能開始運作。做成網站的價值在於風格詞彙和關鍵字隨手可查，寫 prompt 時直接複製，命中率會明顯提高。
Q：為什麼不要 one-shot？一次出五版不會很浪費嗎？
A：一次生成等於抽獎，抽不中就重抽，來回的成本遠高於一次並排比較。五版攤在同一個畫面上，用眼睛挑再逐步收斂，總時間反而更短，成品完成度也更高。
Q：生圖為什麼不直接用 Claude？
A：Claude Code 本身不生圖，要靠 MCP 外接生圖工具。目前靜態圖的首選是 ChatGPT Image 2，網站開場動畫等影片素材可以走 Seedance。
Q：這套流程只適用網頁設計嗎？
A：核心是「先餵品味，再要產出」，不限網頁。簡報、社群圖卡、品牌視覺都適用同一套邏輯——品味庫、護欄清單、先廣後深，換個載體照樣成立。
Q：除了 frontend-design，還有哪些官方 skill 值得設計師裝？
A：同一個 anthropics/skills 官方 repo 裡，skill-creator 幫你把工作流寫成 skill、brand-guidelines 鎖品牌規範、canvas-design 管視覺稿設計、theme-factory 提供現成視覺主題、webapp-testing 讓 Claude 自己開瀏覽器檢查成品，五支都可以直接裝來用。