為什麼 Claude Code 做出的畫面總是很醜？實測 7 個方法讓質感追上 Claude Design

你用 Claude Code 花了兩小時做出一個 landing page。功能完美、邏輯正確、手機版面也沒問題。打開瀏覽器一看——白底、紫色漸層、Inter 字體、三欄 feature grid。

然後你打開 Claude Design，輸入幾乎一樣的需求。三分鐘後，畫面出來了。

你沉默了。

同一家公司做的 AI，甚至底層是同一個模型，為什麼 Claude Design 產出的畫面就是好看那麼多？這不是你一個人的疑問。Reddit 上 r/ClaudeAI 社群幾乎每天都有人問：「為什麼 Claude Code 做出來的 UI 那麼醜？」

Anthropic 自己也知道這件事。他們甚至幫這種現象取了一個名字——AI Slop（AI 泥巴）。Anthropic 官方 Cookbook 裡直接寫道：「Claude 預設會收斂到通用的、分佈中心的輸出。在前端設計中，這會產生使用者所說的 AI slop 美學。」

好消息是，這個問題有解。而且解法比你想像的簡單——不需要換工具，不需要學設計，只需要改變你跟 Claude Code 說話的方式。這篇文章整理了 Anthropic 官方、YC CEO Garry Tan、以及 GitHub 上幾萬顆星的開源社群，實測有效的 7 種方法。

同一個 AI，為什麼做出的畫面差這麼多？

先釐清一件事：Claude Design 和 Claude Code 背後跑的是同一個語言模型。差異不在「腦力」，在「環境設定」。

Claude Design 是 Anthropic Labs 推出的視覺設計工具。你打開它，它會先問你品牌色、字體、風格偏好，然後把這些資訊寫成一份 DESIGN.md 設計系統文件，塞進模型的 context 裡。之後你不管下什麼指令，模型都會參照這份設計系統來產出畫面。（想更了解 Claude Design 的功能，可以看我們之前寫的 Claude Design 新手完全指南）

Claude Code 呢？你打開終端機，輸入 claude，然後說「幫我做一個 landing page」。

就這樣。沒有品牌資訊、沒有色彩系統、沒有字體偏好、沒有任何視覺指引。

這就像叫一個非常厲害的全端工程師做設計——他什麼都能寫，但你沒告訴他要什麼風格，他就會預設選最安全的選項：白色背景、紫色按鈕、Inter 字體、圓角卡片。因為這是訓練資料裡最常見的組合。

MindStudio 的測試報告 也證實了這個結論：Claude Design 因為有內建的設計 context，產出品質穩定且一致；Claude Code 則高度依賴使用者提供的 prompt 品質。用他們的原話說：「Claude Code 更像一個資深工程師坐在你旁邊——你描述目標、他制定計畫、你給回饋。產出品質完全取決於你的指揮能力。」

「AI Slop」美學：Claude Code 到底在偷懶什麼？

Anthropic 在官方 Cookbook 裡毫不客氣地列出了 Claude Code 預設會產出的「AI slop」特徵。簡單說，就是一組讓人一眼就能辨認出「這是 AI 做的」的視覺套路：

紫色漸層背景——不知道為什麼，AI 特別愛紫色。白色背景配上紫色漸層 header，已經是 AI 生成頁面的招牌特徵。

Inter / Roboto / Arial 字體——這三個字體佔了 AI 產出的 90%。問題出在它們太常見了，缺乏辨識度，本身的品質其實沒有問題。

三欄 feature grid——icon 圓圈 + 標題 + 說明文字，整齊地排成三欄。幾乎每個 AI 做的 landing page 都有這個區塊。

統一圓角——所有元素都用一樣的 border-radius，看起來軟趴趴的，缺乏設計層次。

裝飾性 blob 和 wave SVG——沒有功能性的波浪分隔線和色塊，純粹是為了「看起來有設計感」。

為什麼 Claude Code 會這樣？因為語言模型天生傾向「分佈中心」的選擇。訓練資料裡，紫色漸層 + Inter 字體 + 三欄 grid 就是最常見的網頁設計組合。模型沒有被明確告知「不要用這些」，它就會預設走最安全的路。

YC CEO Garry Tan 在他的開源專案 gstack 中建立了一套 80 項的設計審核系統，其中專門有一個「AI Slop Score」。只要你的頁面觸發上面那些特徵，就會被自動扣分。他甚至在 SKILL.md 裡把這些列為「自動不及格」的條件——出現任何一項，整個設計審核直接 fail。

Anthropic 官方解法：一段 Prompt 改變一切

Anthropic 自己也承認 Claude Code 的前端產出有 AI slop 問題，所以他們做了兩件事來解決。

DISTILLED_AESTHETICS_PROMPT：貼進 CLAUDE.md 立刻見效

第一件事是在 官方 Cookbook 發布了一段精煉過的美學提示詞。這段 prompt 經過 Anthropic 內部測試，能顯著改善 Claude Code 的前端產出品質。你只需要把它貼進專案根目錄的 CLAUDE.md 檔案：

<frontend_aesthetics>
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.

Motion: Use animations for effects and micro-interactions.
Focus on high-impact moments: one well-orchestrated page load
with staggered reveals 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.

Avoid generic AI-generated aesthetics:
- Overused font families (Inter, Roboto, Arial, system fonts)
- Clichéd color schemes (particularly purple gradients on white)
- Predictable layouts and component patterns
- Cookie-cutter design that lacks context-specific character

Interpret creatively and make unexpected choices that feel
genuinely designed for the context.
</frontend_aesthetics>

這段 prompt 的核心邏輯是告訴 Claude：「你有收斂到通用選擇的傾向，我要你跳脫這個模式。」它從四個維度給指引——字體、配色、動態效果、背景——同時明確列出禁區。

效果有多顯著？一位開發者在 DEV Community 分享測試結果：加入這段 prompt 後，Claude Code 產出的頁面從「一眼 AI」變成「需要仔細看才分辨得出」。關鍵差異在於字體選擇和配色深度——Claude 不再預設用 Inter，而是開始挑選像 Fraunces、Crimson Pro 這類有個性的字體。

Anthropic 還提供了一段字體專用的 prompt，適合對排版有更高要求的場景：

<use_interesting_fonts>
Typography instantly signals quality. Avoid boring, generic fonts.

Never use: Inter, Roboto, Open Sans, Lato, default system fonts

Impact choices:
- Code aesthetic: JetBrains Mono, Fira Code, Space Grotesk
- Editorial: Playfair Display, Crimson Pro, Fraunces
- Startup: Clash Display, Satoshi, Cabinet Grotesk
- Technical: IBM Plex family, Source Sans 3
- Distinctive: Bricolage Grotesque, Obviously, Newsreader

Pairing principle: High contrast = interesting.
Display + monospace, serif + geometric sans.

Use extremes: 100/200 weight vs 800/900, not 400 vs 600.
Size jumps of 3x+, not 1.5x.
</use_interesting_fonts>

官方 Frontend Design Plugin：直接安裝就能用

第二件事更直接——Anthropic 在 Claude Code 的 Plugin Marketplace 發布了官方的前端設計 Skill。安裝只需要一行指令：

claude plugin add anthropic/frontend-design

安裝後，每次你要 Claude Code 做前端，它會先問你四個問題：

這四個問題的設計很聰明。它強迫你在寫程式碼之前先思考設計方向，同時也讓 Claude 有足夠的 context 來做出有意識的美學選擇，而不是落入預設的 AI slop 模式。如果你之前用過 Claude Code 的 Skill 系統，這個 plugin 會很熟悉——安裝和管理方式跟其他 Skill 一模一樣（詳見 Claude Code Skill 完整教學）。

社群神器：GitHub 上最受歡迎的前端設計 Skill

Anthropic 的官方解法已經很有效，但 GitHub 社群更瘋狂。過去幾個月，前端設計類的 Claude Code Skill 幾乎爆炸式成長，其中幾個專案的星數直接破萬。

Taste Skill：三個旋鈕調出你要的風格

Taste Skill 自稱是「Anti-Slop Frontend Framework for AI Agents」，GitHub 上超過 13,000 顆星。它的核心概念很簡單：用三個參數來控制設計輸出——

安裝方式：

npx skills add Leonxlnx/taste-skill

它還有九個風格變體可以選，包括 soft-skill（沉穩精品風）、brutalist-skill（粗野主義風）、minimalist-skill（編輯雜誌風）。每個變體都有獨立的 SKILL.md，定義了該風格下的色彩邏輯、字體偏好、和排版規則。

UI/UX Pro Max：最完整的設計資料庫

UI/UX Pro Max 是目前星數最高的前端設計 Skill，超過 71,000 顆星。它的強項在於背後有一個完整的設計資料庫——50 種以上的 UI 風格、161 組配色方案、57 種字體搭配、還有 99 條 UX 設計準則。你不需要懂設計，只需要告訴它你的產品類型，它會自動推薦最適合的組合。

/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill

v2.0 版本還新增了 AI Design System Generator，能根據你的品牌描述自動產生完整的設計系統——從配色到字體到元件樣式。等於幫你做了 Claude Design 的工作，但完全整合在 Claude Code 的工作流裡。

更多值得關注的社群 Skill

這些 Skill 可以疊加使用。比較常見的組合是 Taste Skill（控制整體風格）+ Vercel Agent Skills（確保品質和無障礙）+ 官方 Frontend Design（建立設計方向）。三個一起裝，Claude Code 的前端產出品質會有質的飛躍。

DESIGN.md 檔案：讓 Claude Code 擁有設計系統

Claude Design 好看的秘密就是它有一份設計系統文件，跟魔法毫無關係。好消息是，你可以自己建一份，讓 Claude Code 也享受同樣的待遇。

DESIGN.md 是一份純文字的 Markdown 文件，放在專案根目錄，描述品牌的完整視覺語言。Claude Code 啟動時會自動讀取這份文件，就像 Claude Design 讀取你的品牌資料一樣。

一份好的 DESIGN.md 要包含什麼？

awesome-design-md 這個 GitHub 專案收錄了 69 個知名品牌的 DESIGN.md 模板，從 Apple 到 Notion 到 Linear 都有。每份模板遵循標準格式，包含 9 個核心區塊：

最快的建立方式：從 Claude Design 匯出

如果你已經在用 Claude Design，最快的方式是直接把 Claude Design 產生的設計系統匯出成 DESIGN.md，然後放進 Claude Code 的專案裡。這等於讓 Claude Code 繼承 Claude Design 的設計品質——兩邊共用同一套視覺語言。（不知道怎麼開始的話，看 這篇入門教學）

MindStudio 的實測 證實了這個工作流的效果：先在 Claude Design 探索視覺方向，確認風格後匯出 DESIGN.md，再用 Claude Code 實作。兩邊產出會維持一致的設計語言。

如果你沒有用 Claude Design，也可以自己從零建立。在 CLAUDE.md 中加入以下指引：

# Design System

Always refer to DESIGN.md when generating or modifying any UI component.
Use only colors, fonts, and spacing values defined in DESIGN.md.
Do not invent new values or use defaults from any framework.
Match component states (hover, focus, active, disabled) to patterns
in DESIGN.md.

進階技巧：OKLCH 單變數配色

另一個讓配色系統更靈活的技巧是使用 OKLCH 色彩空間。MindStudio 的建議 是在 DESIGN.md 中用單一 hue 變數控制整個配色系統：

@theme {
  --brand-hue: 250;
  --color-primary: oklch(0.6 0.2 var(--brand-hue));
  --color-background: oklch(0.995 0.005 var(--brand-hue));
  --color-foreground: oklch(0.15 0.02 var(--brand-hue));
  --color-muted: oklch(0.94 0.01 var(--brand-hue));
  --color-border: oklch(0.88 0.015 var(--brand-hue));
}

改一個 --brand-hue 數字，整個網站的配色就自動跟著調整。這比手動定義 20 個色碼有效率得多，也更容易在開發過程中做風格實驗。

Prompt 實戰對比：模糊指令 vs 精準美學描述

Skill 裝了、DESIGN.md 也寫了，但你下指令的方式依然會決定產出品質的上限。

爛 Prompt 長這樣

Build a hero section with 1200px container, 80px padding,
H1 at 64px Inter Bold, subtitle at 18px, CTA button with
#6C5CE7 background and 8px border-radius,
linear-gradient(135deg, #667eea, #764ba2) for the background.

這個 prompt 的問題不是太少——是太多、太死。你把每個像素值都鎖死了，Claude 完全沒有空間做美學判斷。而且諷刺的是，你指定的 Inter 字體和紫色漸層，正好就是 AI slop 的招牌元素。

DEV Community 上的熱門討論 揭露了一個反直覺的發現：過度規範的指令反而會產出更差的結果。因為你指定了精確的 hex code 和 px 值，Claude 會 pattern-match 到它訓練資料中最「安全」的實作方式——結果就是更多 AI slop。

好 Prompt 長這樣

Landing page for a fitness coaching app.

Aesthetic: editorial magazine, not SaaS template.
Pair a serif display font like Fraunces with a geometric sans.
Dominant warm earth tone with one sharp accent color.
One coordinated motion moment on page load — staggered reveals,
not scattered micro-interactions.

Avoid: Inter, purple gradients, generic three-card feature grids,
blob decorations.

差別在哪？好的 prompt 描述的是氛圍和原則，而不是像素和色碼。它告訴 Claude「我要雜誌風格，不要 SaaS 模板」，然後讓 Claude 自己去選擇最適合的實作方式。這給了模型足夠的創意空間，同時又用 Avoid 段落畫出明確的禁區。

進階技巧：研究先行法

Hassan Tayyab 在他的部落格 分享了一個三步法，特別適合做複雜的 UI 元件：

第一步：開一個新 session，讓 Claude 先做功課。例如：「Research how chat interfaces are implemented in modern apps like Discord, Slack, and Linear. Focus on design patterns, animations, and UX details.」

第二步：檢視研究結果，挑出你喜歡的設計模式和細節。

第三步：開第二個 session，把研究結果貼進去當 context，再下你的實作指令。

多花五分鐘做研究，產出的精緻度會明顯提升。因為 Claude 不再是憑空想像，而是有了真實的參考基準——它知道 Discord 怎麼處理訊息氣泡的圓角、Slack 怎麼做 hover 動畫、Linear 怎麼配色。

AI Slop 黑名單：這些元素讓畫面一秒穿幫

不管你用了多好的 Skill 或寫了多精確的 prompt，如果成品裡出現以下任何一個元素，使用者都會直覺反應：「這是 AI 做的。」

以下是整理自 Garry Tan 的 gstack design-review SKILL.md 的完整黑名單和替代方案：

四階段打磨流程：從粗糙到精緻的迭代工作法

裝了 Skill、寫了 DESIGN.md、改了 prompt 方式——然後呢？

Thomas Wiegold 在他的部落格 提出了一套四階段的 polish pipeline，每個階段用不同的 Skill 處理不同層次的設計問題。這套流程的好處是，它把「做出好看的畫面」拆解成可重複執行的步驟，不再是碰運氣。

Phase 1：用 /frontend-design 建立設計方向

第一步真正該做的是確認方向，寫 code 反而是後面的事。用 Anthropic 官方的 frontend-design Skill 回答四個問題——Purpose、Tone、Constraints、Differentiation——讓 Claude 產出一個有設計意識的初版。

這一步最重要的是不要跳過 Tone 的選擇。「Brutally minimal」和「Maximalist chaos」做出來的東西天差地別。大部分人跳過這題，Claude 就會預設走中間路線——也就是回到 AI slop。

Phase 2：用 baseline-ui 打磨基礎

初版完成後，跑一次 baseline-ui 檢查。這個階段處理的是間距不一致、字體大小跳躍不合理、顏色對比不足這些「基本功」。不需要大改設計方向，但能讓頁面從「看起來粗糙」變成「看起來乾淨」。

具體來說，baseline-ui 會檢查：body text 是否 ≥ 16px、對比度是否 ≥ 4.5:1、是否有使用 CSS variables 管理顏色、卡片是否只用在真正需要的地方。這些都是 Garry Tan gstack 裡列出的「hard rules」。

Phase 3：用 fixing-accessibility 處理無障礙

確保鍵盤導航正常、所有互動元素都有 label、focus 狀態清楚可見、語意化 HTML 正確。很多人會跳過這一步，但無障礙做得好，往往也意味著 UX 做得好——因為你被迫去思考每個元素的目的和互動方式，而不是只關注它「好不好看」。

Phase 4：用 fixing-motion-performance 加入動畫

最後才處理動畫和效能。加入 prefers-reduced-motion 的 media query 支援、設定效能預算、確保動畫不會拖慢頁面載入。

這四個 Skill 都來自 ibelick 的 UI Skills 套件，一行指令全裝：

npx skills add ibelick/ui-skills

重點是按順序來——先確認方向、再打磨基礎、再處理無障礙、最後加動畫。很多人犯的錯是一開始就想加花俏的動畫，結果基礎排版都沒做好。就像蓋房子，地基沒打好就急著裝潢，結果反而更難修。

Claude Code 前端設計工具全景：依角色選擇最佳組合

前面介紹了一堆工具，你可能已經資訊過載了。這裡幫你整理一張決策表——根據你的角色和需求，選最適合的組合：

不管你選哪種組合，最基本的起手式都是：把 Anthropic 的 DISTILLED_AESTHETICS_PROMPT 貼進 CLAUDE.md。這是投入產出比最高的一步——零成本、30 秒完成、立刻見效。

常見問題

讓你的 AI 產出達到專業水準

Claude Code 做出醜畫面真正的原因是缺乏設計指引，AI 本身並不是問題所在。一段 prompt、一份 DESIGN.md、幾個社群 Skill——加起來花不到半小時，但能讓你的前端產出從「一眼 AI」變成「看不出是 AI 做的」。

如果你想更深入了解 Claude Design 的能力和限制，我們有一系列完整的教學文章：

→ Anthropic 推出 Claude Design：功能完整解析

→ Claude Design 做不好的 5 件事：誠實局限評測

→ Claude Design 實戰：設計師提案從 3 天壓到 3 小時

如果你的團隊正在評估如何導入 AI 來加速產品開發——不只是前端設計，而是從需求分析到上線的完整流程——我們可以幫你規劃。