---
title: "Claude Code 怎麼做出沒有 AI 感的網站？三步驟把 AI 調教成懂品味的設計師"
slug: claude-code-design-taste-workflow
url: https://rar.design/posts/claude-code-design-taste-workflow
published_at: 2026-08-07
modified_at: 2026-08-07
author: "設計師 Riven"
category: "AI 設計"
tags: ["網頁設計", "AI 設計", "Claude", "Claude Code"]
access: public_access
---

# Claude Code 怎麼做出沒有 AI 感的網站？三步驟把 AI 調教成懂品味的設計師

> 品味庫、skill 與 MCP、永不 one-shot——完整工作流與四段式 prompt 公式一次拆解

By **設計師 Riven** - 資深數位產品設計師｜知名線上課程講師 | 2026-08-07

CLAUDE CODE · AI 設計 · 2026▲ 三個步驟，讓 AI 做的網站不再被一眼看穿。QUICK ANSWERClaude 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 各配一句功能描述。每一顆按鈕都圓得一模一樣，每一次生成都長得像上一次。▲ AI 感的標準長相——藍紫漸層、圓角卡片牆、每次都同一套版型。這件事跟技術力無關，問題出在「通用」兩個字。模型的本質是把訓練資料的平均值還給你——大家丟同一句 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 都更準。▲ 品味庫做成 Web 之後——每個條目一種風格，詞彙隨手可查。不會寫程式也做得出這種小工具，一句話描述需求就行，做法我在〈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 裝一次，品味長在 Claude 身上。再裝你自己的。把第一步的品味庫寫成一份自訂 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 圖和動態素材直接在工作流裡解決。優先接三種。第一是生圖：接一個生圖 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 感擋在生成之前。▲ 四個輸入，每一次 build 都用得上。抽象講不如直接看。以一個虛構的獨立設計工作室 PYPD 為例，完整的 prompt 長這樣：# 任務幫獨立設計工作室 PYPD 做作品集官網，轉換目標是「預約諮詢」，CTA 要出現在 hero、頁尾再重複一次。# 意圖安靜、有工藝感的自信，客戶看三秒就覺得「這個工作室懂設計」。# 護欄 always一張夠份量的主視覺錨定整頁；圖像必須處理過（半調網點、顆粒、線稿），絕不用生圖原檔；字級走極端，超大標題配極小註記；近單色底，只留一個暖色 accent。# 護欄 never藍紫漸層、圓角卡片牆、罐頭 icon 排排站、系統字體打天下、彩虹配色。# 產出方式一次出五版，各自資料夾，同一套意圖和護欄，風格絕不互混；hero 圖之後補，先用色塊佔位，版面照最終圖尺寸抓好。四段裡最容易被忽略、也最值錢的是護欄的 never 清單。你在品味庫裡看膩什麼，就把什麼寫進去——這一行行的禁令，就是把 AI 感擋在生成之前的閘門。CHAPTER 07 · ITERATE UNTIL YOURS迭代到「像你」為止最後一步是收尾的功夫。與其一直求 Claude「再高級一點」「再有質感一點」，先叫它把調整面板做出來，然後自己轉旋鈕——字體下拉選單、字級字重滑桿、強調色即調。用眼睛調，別在終端機裡用猜的。▲ 叫 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。SUBSCRIPTIONAI 覺醒設計應用攻略AI 工具每週都在更新，我幫你過濾雜訊，只留對設計師真正有用的應用。了解訂閱 →常見問題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 自己開瀏覽器檢查成品，五支都可以直接裝來用。