Claude Design 提示詞指南：怎麼 Vibe 出好看的 UI

上篇講咗 Claude Design 嘅基本流程，有人問提示詞點樣寫。呢件事都幾得意——GitHub 上面有人將 Claude Design 嘅系統提示詞摷咗出嚟（elder-plinius/CL4R1T4S 呢個倉庫，專門收各家 AI 產品嘅 prompt，完整路徑：https://github.com/elder-plinius/CL4R1T4S/blob/main/ANTHROPIC/Claude-Design-Sys-Prompt.txt），唔長，讀一次就可以搞清楚好多之前莫名其妙嘅行為。今日結合呢個同埋 Anthropic 官方嘅前端審美指南，傾下點樣令 Claude 設計出真正好睇嘅嘢，而唔係嗰啲一眼就認得出「AI 做嘅」嘅嘢。

先睇下系統提示詞講緊啲咩

Claude Design 俾自己嘅定位係「為你工作嘅專家設計師，你就係佢嘅甲方」。呢句話定義咗成個對話框架——佢唔係喺度幫你出主意，而係執行你嘅需求，你話事。

佢嘅工作流程寫得好清楚：先理解需求（有需要嘅時候問問題）→ 探索你提供嘅設計資源 → 做計劃 → 構建 → 驗證 → 極簡總結。順序唔可以亂，特別係第二步——探索已有資源，呢個係佢最強調嘅一點。

提示詞入面有一句話令我印象好深："Mocking a full product from scratch is a LAST RESORT and will lead to poor design."（由零開始模擬一個產品係最後手段，而且會導致好差嘅設計。）

呢句話講嘅就係 vibe coding 嗰陣最成日踩中嘅坑：一開始就叫佢生成，咩上下文都冇俾，然後收到一個幾有 AI 風格嘅嘢，唔知由邊度改起。

問題唔係在於 Claude 唔夠聰明，而在於佢冇設計依據，只能靠訓練數據入面嘅「平均審美」嚟填充——而呢個平均審美，就係所謂嘅 AI slop。

AI 垃圾 係咩

Anthropic 喺佢哋嘅前端審美指南入面（platform.claude.com/cookbook/coding-prompting-for-frontend-aesthetics）有一段話講得好準：

"Claude tends to converge toward generic, 'on distribution' outputs. In frontend design, this creates what users call the 'AI slop' aesthetic."

翻譯過嚟就係——唔加引導嘅情況下，Claude 傾向於生成通用而且符合「平均分佈」嘅輸出。喺前端設計入面，呢樣嘢導致咗用戶所講嘅「AI 垃圾」美學2026 年喇，AI 生成嘅產品原型基本都喺 SaaS 三件套入面循環：Inter 字體、紫色漸變背景、圓角卡片。你認得出佢係 AI 做嘅，係因為佢揀咗最安全嘅選項。

要突破呢樣嘢，就要喺提示詞入面明確咁打斷呢條路。

提示詞嘅四個維度

Anthropic 官方俾咗一套提示詞框架，將前端審美拆成四個維度去引導。

字體係最直接拉開差距嘅。避開 Inter、Roboto、Arial、Open Sans 呢啲系統預設字體——唔係話佢哋唔好，而係佢哋太「無害」喇，加上去等於冇加過。替代選擇按風格行：代碼感要 JetBrains Mono 或 Space Grotesk，編輯感要 Playfair Display 或 Fraunces，技術感要 IBM Plex，創業感要 Satoshi 或 Cabinet Grotesk。配對邏輯係高對比度——Display 配等寬字體，襯線配幾何無襯線，權重差越大越有張力，100 同 900 搭埋一齊比起全部用 400 有趣好多。

顏色嘅核心邏輯係「承諾」。定一個主色調然後堅持落去，用 CSS 變量統一管理。弱嘅設計往往係顏色太分散，每個區塊都唔一樣，整體顯得冇主見。主色 + 一個鋭利嘅強調色比起五種顏色平均分佈好睇。紫色漸變+白色背景呢個組合而家已經成為 AI 嘅標誌喇，可以唔用就盡量唔用。

動畫呢方面，Claude Design 系統提示詞入面提到一個反直覺嘅觀點：一個精心編排嘅頁面加載動畫，比起一堆零散嘅微交互效果更好。與其喺按鈕、卡片、輸入框上面各嚟少少抖動，不如將精力集中喺首屏嘅 staggered reveal——用 animation-delay 令元素依次出現，整體感即刻出嚟。CSS-only 優先，可以唔引入 JS 動畫庫就唔引入。

背景唔好預設純色。分層嘅 CSS 漸變、幾何圖案、同整體風格匹配嘅紋理，呢啲都可以令頁面有「被設計過」嘅感覺而唔只係「被生成」嘅感覺。

一段可以直接用嘅提示詞

官方指南入面俾咗一段提煉過嘅完整美學提示詞，可以直接追加喺你發俾 Claude Design 嘅 prompt 後面：

You tend to converge toward generic, "on distribution" outputs. In frontend design, 
this creates what users call the "AI slop" aesthetic. Avoid this: make creative, 
distinctive frontends that surprise and delight. Focus on:

Typography: Choose fonts that are beautiful, unique, and interesting. Avoid generic 
fonts like Arial and Inter; opt instead for distinctive choices that elevate the 
frontend's aesthetics.

Color & Theme: Commit to a cohesive aesthetic. Use CSS variables for consistency. 
Dominant colors with sharp accents outperform timid, evenly-distributed palettes. 
Draw from IDE themes and cultural aesthetics for inspiration.

Motion: Use animations for effects and micro-interactions. Focus on high-impact 
moments: one well-orchestrated page load with staggered reveals (animation-delay) 
creates more delight than scattered micro-interactions.

Backgrounds: Create atmosphere and depth rather than defaulting to solid colors. 
Layer CSS gradients, use geometric patterns, or add contextual effects that match 
the overall aesthetic.

Avoid generic AI-generated aesthetics:
- Overused font families (Inter, Roboto, Arial, system fonts)
- Clichéd color schemes (particularly purple gradients on white backgrounds)
- Predictable layouts and component patterns

Interpret creatively and make unexpected choices that feel genuinely designed 
for the context.

呢段內容可以放入 CLAUDE.md 令佢每次都生效，亦可以按項目需要單獨貼入去。

用呢套提示詞，同樣嘅需求發俾 Claude Design 三次，每次指定唔同嘅風格方向，出嚟嘅結果係咁樣嘅：

Terminal Dark — JetBrains Mono + 霓虹綠 + CSS 網格背景

Editorial Magazine — Playfair Display + 紅色強調色 + 報紙雙欄佈局

Startup Landing — Fraunces 襯線 + 暖橙 #e85d26 + 漸變光暈背景

三個用嘅係同一套審美提示詞骨架，差別只在於字體選擇同主色承諾。佢哋冇一個睇起嚟似「AI 做嘅」——呢個就係提示詞有冇方向感嘅分別。

Vibe UI 嘅實際打法

講完審美，講下流程上面點樣可以更順。

系統提示詞入面最值錢嘅建議之一係：先俾設計上下文，再動手做呢個上下文可以係代碼庫、截圖、Figma 文件、設計系統說明，或者就係幾句話描述你哋團隊嘅品牌調性。冇呢啲，Claude 就只能靠想像填——而佢想像出嚟嘅，基本就係 SaaS 三件套。

提示詞入面有咁一句話俾設計師睇嘅："You MUST spend time trying to acquire design context, including components. If you cannot find them, ask the user for them."（你必須花時間獲取設計上下文，包括組件。揾唔到就問用戶。）所以如果你發咗一句 prompt 佢反問你要截圖或者代碼，唔係為難你，而係做緊正確嘅事——俾佢就得啦。

第二個技巧係要變體。系統提示詞入面明確話要俾 3 個以上嘅選項，跨多個維度探索，包括"by-the-book designs"（按照已有規範嚟嘅）同"novel and interesting interactions"（新嘅、有意思嘅交互）撈埋一齊俾。你喺提示詞入面話「俾我三種風格嘅方向」，佢就會俾。唔講，佢默認俾一個。

第三個技巧係用 Tweaks 迭代，而唔係重新寫 prompt。上篇講過 Tweaks 呢個機制——Claude 喺生成嘅 HTML 入面埋入 EDITMODE-BEGIN/END 標記，透過 Tweaks 面板拖下滑塊就可以改顏色、字體、間距，改完直接寫返落文件，唔使再同佢講嘢。呢個機制喺系統提示詞入面有完整嘅技術實現——postMessage 協議、狀態持久化、實時更新，都係原生支援嘅。

Vibe coding 卡住嘅時候，十有八九唔係 prompt 冇寫好，而係迭代路徑揀錯咗。重新寫一遍 prompt 叫佢重新生成，同用 Tweaks 微調一個已經 80 分嘅稿，效率差好多。前者容易將之前好嘅部分都一齊丟失，後者係喺原稿上面疊加。

問題驅動，而唔係答案驅動

最後一點，亦都係我覺得最容易被忽略嘅。

系統提示詞入面關於問問題嘅篇幅出乎意料咁長。佢要求 Claude 喺開始新項目嘅時候至少問 10 個問題，涵蓋：目標用戶係邊個、要幾個變體、每個變體想探索咩維度、對視覺創新嘅接受程度、想要咩 Tweaks 控件、用咩字體方向……

呢個唔係喺度拖延，而係建立設計依據。一個問題都冇就直接開始生成嘅，大概率係偷懶，唔係效率高。

你俾佢嘅提示詞越具體，佢問嘅問題就越少，生成嘅嘢就越接近你想要嘅。反過來，你越模糊，佢越需要估——估嘅結果就係回到平均值。

所以寫提示詞嘅姿勢係：話俾佢知你做緊咩（產品類型、目標用戶）、已經有咩資源（設計系統/代碼庫）、你最在意邊個方向（視覺風格/交互創新/品牌一致性）、想要幾個方向。將呢四件事講清楚，剩下嘅交俾佢問。

呢個先至係真正嘅 vibe——唔係你乜都唔講然後期待奇蹟，而係你俾出足夠嘅方向，令佢喺呢個範圍入面真正發揮。嗰啲話設計師要失業嘅人，可以洗洗瞓喇，你自己都冇審美嘅時候，你又用咩去判斷 AI 設計嘅好壞呢？

上篇聊了 Claude Design 的基本流程，有人問提示詞怎麼寫。這事還挺有意思——GitHub 上有人把 Claude Design 的系統提示詞翻出來了（elder-plinius/CL4R1T4S 這個倉庫，專門收各家 AI 產品的 prompt，完整路徑：https://github.com/elder-plinius/CL4R1T4S/blob/main/ANTHROPIC/Claude-Design-Sys-Prompt.txt），不長，讀一遍能搞清楚很多之前莫名其妙的行為。今天結合這個以及 Anthropic 官方的前端審美指南，聊聊怎麼讓 Claude 設計出真正好看的東西，而不是那種一眼認出來的"AI 做的"。

先看系統提示詞在說什麼

Claude Design 給自己的定位是"為你工作的專家設計師，你是它的甲方"。這句話定義了整個對話框架——它不是在幫你出主意，而是在執行你的需求，你說了算。

它的工作流程寫得很清楚：先理解需求（必要時問問題）→ 探索你提供的設計資源 → 做計劃 → 構建 → 驗證 → 極簡總結。順序不能亂，特別是第二步——探索已有資源，這是它最強調的一點。

提示詞裏有一句話讓我印象很深："Mocking a full product from scratch is a LAST RESORT and will lead to poor design."（從零開始擬一個產品是最後手段，而且會導致糟糕的設計。）

這句話說的就是 vibe coding 時最常踩的坑：上來就讓它生成，什麼上下文都沒給，然後拿到一個頗具 AI 風格的玩意兒，不知道從哪改起。

問題不在 Claude 不夠聰明，在於它沒有設計依據，只能靠訓練數據裏的"平均審美"來填充——而這個平均審美，就是所謂的 AI slop。

AI 垃圾 是什麼

Anthropic 在他們的前端審美指南里（platform.claude.com/cookbook/coding-prompting-for-frontend-aesthetics）有一段話很準：

"Claude tends to converge toward generic, 'on distribution' outputs. In frontend design, this creates what users call the 'AI slop' aesthetic."

翻譯過來就是——不加引導的情況下，Claude 傾向於生成通用且符合“平均分佈”的輸出。在前端設計中，這導致了用戶所稱的“AI 垃圾”美學。2026 年了，AI 生成的產品原型基本都在 SaaS 三件套裏循環：Inter 字體、紫色漸變背景、圓角卡片。你能認出它是 AI 做的，是因為它選擇了最安全的選項。

要突破這個，得在提示詞裏明確打斷這條路。

提示詞的四個維度

Anthropic 官方給了一套提示詞框架，把前端審美拆成四個維度去引導。

字體是最直接拉開差距的。避開 Inter、Roboto、Arial、Open Sans 這些系統默認字體——不是說它們不好，是它們太"無害"了，加上去等於沒加。替代選擇按風格走：代碼感要 JetBrains Mono 或 Space Grotesk，編輯感要 Playfair Display 或 Fraunces，技術感要 IBM Plex，創業感要 Satoshi 或 Cabinet Grotesk。配對邏輯是高對比度——Display 配等寬字體，襯線配幾何無襯線，權重差越大越有張力，100 和 900 搭在一起比都用 400 有趣得多。

顏色的核心邏輯是"承諾"。定一個主色調然後堅持下去，用 CSS 變量統一管理。弱的設計往往是顏色太分散，每個區塊都不一樣，整體顯得沒主見。主色 + 一個鋭利的強調色比五種顏色平均分佈好看。紫色漸變+白色背景這個組合現在已經成 AI 的標誌了，能不用盡量不用。

動畫這塊，Claude Design 系統提示詞裏提到了一個反直覺的觀點：一個精心編排的頁面加載動畫，比一堆零散的微交互效果更好。與其在按鈕、卡片、輸入框上各來一點抖動，不如把精力集中在首屏的 staggered reveal——用 animation-delay 讓元素依次出現，整體感立刻上來。CSS-only 優先，能不引入 JS 動畫庫就不引入。

背景不要默認純色。分層的 CSS 漸變、幾何圖案、跟整體風格匹配的紋理，這些都能讓頁面有"被設計過"的感覺而不只是"被生成"的感覺。

一段直接能用的提示詞

官方指南里給了一段提煉過的完整美學提示詞，可以直接追加到你發給 Claude Design 的 prompt 後面：

You tend to converge toward generic, "on distribution" outputs. In frontend design, 
this creates what users call the "AI slop" aesthetic. Avoid this: make creative, 
distinctive frontends that surprise and delight. Focus on:

Typography: Choose fonts that are beautiful, unique, and interesting. Avoid generic 
fonts like Arial and Inter; opt instead for distinctive choices that elevate the 
frontend's aesthetics.

Color & Theme: Commit to a cohesive aesthetic. Use CSS variables for consistency. 
Dominant colors with sharp accents outperform timid, evenly-distributed palettes. 
Draw from IDE themes and cultural aesthetics for inspiration.

Motion: Use animations for effects and micro-interactions. Focus on high-impact 
moments: one well-orchestrated page load with staggered reveals (animation-delay) 
creates more delight than scattered micro-interactions.

Backgrounds: Create atmosphere and depth rather than defaulting to solid colors. 
Layer CSS gradients, use geometric patterns, or add contextual effects that match 
the overall aesthetic.

Avoid generic AI-generated aesthetics:
- Overused font families (Inter, Roboto, Arial, system fonts)
- Clichéd color schemes (particularly purple gradients on white backgrounds)
- Predictable layouts and component patterns

Interpret creatively and make unexpected choices that feel genuinely designed 
for the context.

這段內容可以放進 CLAUDE.md 讓它每次都生效，也可以按項目需要單獨貼進去。

用這套提示詞，同樣的需求發給 Claude Design 三次，每次指定不同的風格方向，出來的結果是這樣的：

Terminal Dark — JetBrains Mono + 霓虹綠 + CSS 網格背景

Editorial Magazine — Playfair Display + 紅色強調色 + 報紙雙欄佈局

Startup Landing — Fraunces 襯線 + 暖橙 #e85d26 + 漸變光暈背景

三個用的是同一套審美提示詞骨架，差別只在字體選擇和主色承諾。它們沒有一個長得像"AI 做的"——這就是提示詞有沒有方向感的區別。

Vibe UI 的實際打法

說完審美，說說流程上怎麼更順。

系統提示詞裏最值錢的建議之一是：先給設計上下文，再動手做。這個上下文可以是代碼庫、截圖、Figma 文件、設計系統說明，或者就是幾句話描述你們團隊的品牌調性。沒有這些，Claude 就只能靠想象填——而它想象出來的，基本就是 SaaS 三件套。

提示詞裏有這麼一句話給設計師看的："You MUST spend time trying to acquire design context, including components. If you cannot find them, ask the user for them."（你必須花時間獲取設計上下文，包括組件。找不到就問用戶。）所以如果你發了一句 prompt 它反問你要截圖或代碼，不是在為難你，是在做正確的事——給它就完了。

第二個技巧是要變體。系統提示詞裏明確說要給 3 個以上的選項，跨多個維度探索，包括"by-the-book designs"（按照已有規範來的）和"novel and interesting interactions"（新的、有意思的交互）混着給。你在提示詞裏說"給我三種風格的方向"，它就會給。不說，它默認給一個。

第三個技巧是用 Tweaks 迭代，而不是重新寫 prompt。上篇聊過 Tweaks 這個機制——Claude 在生成的 HTML 裏埋入 EDITMODE-BEGIN/END 標記，通過 Tweaks 面板拖拖滑塊就能改顏色、字體、間距，改完直接寫回文件，不用再跟它說話。這個機制在系統提示詞裏有完整的技術實現——postMessage 協議、狀態持久化、實時更新，都是原生支持的。

Vibe coding 卡住的時候，十有八九不是 prompt 沒寫好，而是迭代路徑選錯了。重新寫一遍 prompt 讓它重新生成，和用 Tweaks 微調一個已經 80 分的稿子，效率差很多。前者容易把之前好的部分也一起丟掉，後者是在原稿上疊加。

問題驅動，而不是答案驅動

最後一點，也是我覺得最容易被忽視的。

系統提示詞裏關於問問題的篇幅出乎意料地長。它要求 Claude 在開始新項目時至少問 10 個問題，涵蓋：目標用戶是誰、要幾個變體、每個變體想探索什麼維度、對視覺創新的接受程度、想要什麼 Tweaks 控件、用什麼字體方向……

這不是在拖延，是在建設計依據。一個問題都沒有直接開始生成的，大概率是偷懶，不是效率高。

你給它的提示詞越具體，它問的問題就越少，生成的東西就越靠近你想要的。反過來，你越模糊，它越需要猜——猜的結果就是回到均值。

所以寫提示詞的姿勢是：告訴它你在做什麼（產品類型、目標用戶）、已有什麼資源（設計系統/代碼庫）、你最在意哪個方向（視覺風格/交互創新/品牌一致性）、想要幾個方向。把這四件事說清楚，剩下的交給它問。

這才是真正的 vibe——不是你什麼都不說然後期待奇蹟，是你給出足夠的方向，讓它在這個範圍裏真正發揮。那些說設計師要失業了的，可以洗洗睡了，你自己都沒有審美的時候，你那什麼去判斷ai設計的好壞呢。