TL;DR
- 本文解決：AI 寫出來的前端為什麼統一長那樣（紫色漸層、Inter 字體、三欄卡片），背後的訓練資料污染、Tailwind indigo-500 歷史、distributional convergence 機制
- 推薦給：用 Cursor / Codex / GPT / Gemini 寫前端的工程師、想把官方 frontend-design skill 移植到其他工具的人、想理解 prompt engineering 為什麼這樣寫的人
- 讀完你會知道：紫色漸層的歷史考古、4 個維度的完整 prompt 範本（可直接貼 CLAUDE.md / .cursorrules / GPT custom instructions）、自我檢查清單
📚 這是系列文的第 2 篇：第 1 篇講 Claude Code 官方 plugin 一行裝起來。本篇深入原理 + 給跨工具通用的 prompt 範本。
📌 目錄
🟣 紫色漸層是怎麼變成 AI 內建品味的
這個故事要從 2015 年的 Instagram 改版開始。Instagram 把橘色相機 icon 換成紫紅漸層的新 logo，引爆「twilight aesthetic」（暮光美學）這條設計趨勢線。Stripe、Twitch、Spotify、後來的一票 SaaS 接力跟進，2015-2020 整整五年，紫色漸層是「modern web」的視覺代名詞。
這還只是文化背景。真正讓 LLM 中毒的是 Tailwind。
Tailwind UI（Tailwind CSS 創辦人 Adam Wathan 賣的元件庫）在 2020 年推出時，把所有 demo 元件的主色設成 bg-indigo-500。這個決定在當時毫無爭議——就是要選一個顏色，indigo 不討厭、夠中性、夠「modern」。
接下來發生的事情是滾雪球：
- 數千份 Tailwind 教學跟著抄
bg-indigo-500 - 數百萬個 side project、boilerplate、starter kit 用 indigo
- GitHub、CodePen、Medium、Dev.to 上的範例碼大規模 indigo 化
- 2021-2024 LLM 訓練資料抓取網路內容 → 「modern web design = indigo-500 漸層」這條規則被烤進權重
When LLMs trained on code scraped from the internet, they learned an implicit rule: 'modern web design = purple buttons.'
當 LLM 從網路抓的 code 訓練，它們學到一條隱性規則：「modern 網頁設計 = 紫色按鈕」。
這不是 Anthropic 的問題、不是 OpenAI 的問題、也不是 Google 的問題。這是整個產業共享同一桶訓練資料的問題。換 GPT-5 / Gemini 3 / Claude Opus 4.7 都一樣，因為水源被污染。
🧠 Distributional Convergence：LLM 為什麼吐中位數
「Distributional convergence」是 Anthropic 官方部落格用來描述這個現象的詞，直譯「分布收斂」。三句話講完：
Anthropic 官方 cookbook 用的原話：
You tend to converge toward generic, 'on distribution' outputs. In frontend design, this creates what users call the 'AI slop' aesthetic.
你會傾向收斂到通用、「在分布之內」的輸出。在前端設計裡這就創造了使用者所稱的「AI slop」美學。
注意這段是寫給 Claude 看的 system prompt。Anthropic 自己承認模型有這個傾向，然後在 SKILL.md 裡寫一段「請別這樣」來推它一把。這就是整個 frontend-design plugin 的本質——一個 anti-bias 推力。
理解這個機制之後，解法就清楚了：
- 不能靠選不同的 AI 模型解決（換 GPT 也一樣）
- 不能靠等模型變強解決（更強的模型只是把中位數吐得更精緻）
- 只能靠 prompt 把模型從中位數推開——指定極端 tone、給 NEVER 清單、給靈感 anchor
🎨 四個維度逐項拆解
Anthropic 官方 Cookbook（GitHub 版本）把「不要看起來像 AI」拆成四個可量化的維度。下面是每個維度的官方原則 + 具體可用清單。
1. Typography（字體）
官方原則： 避免通用字體（Inter / Roboto / Arial），用 distinctive display + body 配對。
| 類型 | 禁用 | 推薦（從 Cookbook 抄） |
|---|---|---|
| 通用無襯線 | Inter, Roboto, Arial, system fonts, Space Grotesk（已過度使用） | — |
| Code aesthetic | — | JetBrains Mono, Fira Code |
| Editorial（雜誌風） | — | Playfair Display, Crimson Pro, Fraunces |
| Startup | — | Clash Display, Satoshi, Cabinet Grotesk |
| Technical | — | IBM Plex 全家族, Source Sans 3 |
| Distinctive | — | Bricolage Grotesque, Obviously, Newsreader |
"High contrast = interesting. Display + monospace, serif + geometric sans, variable font across weights. Use extremes: 100/200 weight vs 800/900, not 400 vs 600. Size jumps of 3x+, not 1.5x."
翻譯：對比要極端。100/200 配 800/900（不要 400 配 600）；標題比內文大 3 倍以上（不要 1.5 倍）。
2. Color & Theme（色彩）
官方原則： 鎖一個主導色 + 銳利 accent，避免「均勻分布的怯懦色盤」。
| 反模式 | 推薦做法 |
|---|---|
| 紫色漸層 + 白底（NEVER） | 從 IDE theme 找靈感（Solarized / Dracula / Tokyo Night） |
| Google 配色（紅綠藍紫各一） | 從文化美學找靈感（Wim Crouwel / Memphis Group / Y2K / Solarpunk） |
| 七彩 rainbow accent | 主導色 + 單一銳利 accent（黑底 + safety orange） |
| 全部 50% lightness 的 pastel | 高反差：純黑配亮黃、深綠配米白 |
3. Motion（動畫）
官方原則： 「一個編排好的 page load > 散落各處的 hover 微互動」。
GOOD: 進站時 staggered reveal（標題、副標、CTA 順序浮現，animation-delay 控制）
BAD: 每個按鈕 hover 都有不同的 transition、scale、shadow技術選擇：
- HTML 純頁面：CSS-only（
animation,@keyframes,transition） - React 專案：Motion library（前身 framer-motion）
4. Spatial Composition（空間構圖）
官方原則： "Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density."
| 反模式 | 推薦做法 |
|---|---|
| 對稱三欄 hero | 不對稱兩欄（66/33）、有東西「掉出」grid |
| 整齊的 12-col grid | 元素重疊、突破 grid 邊界 |
| 平均間距 | 一個元素佔超大空間、其他擠在角落（controlled density） |
| 水平 / 垂直流向 | 對角線（diagonal）視覺動線 |
🎯 可直接貼的 system prompt 範本
下面是官方版的精簡 system prompt（從 GitHub Gist 抓的逐字稿），約 350 token，可以直接貼進：
- Claude Code：
~/.claude/CLAUDE.md或.claude/CLAUDE.md - Cursor： 專案根目錄
.cursorrules - GPT-5 / GPT-4o： Custom Instructions（"How would you like ChatGPT to respond"）
- Gemini： System instructions（API 或 Gemini Advanced 的 Gem 設定）
<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. Draw from IDE themes and cultural
aesthetics for inspiration.
Motion: Use animations for effects and micro-interactions. Prioritize
CSS-only solutions for HTML. Use Motion library for React when
available. 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
- Cookie-cutter design that lacks context-specific character
Interpret creatively and make unexpected choices that feel genuinely
designed for the context. Vary between light and dark themes,
different fonts, different aesthetics. You still tend to converge on
common choices (Space Grotesk, for example) across generations.
Avoid this: it is critical that you think outside the box!
</frontend_aesthetics>注意三個寫法細節：
🔌 移植到 Cursor / Codex / ChatGPT / Gemini
四個工具的具體放法：
Cursor
在專案根目錄建立 .cursorrules，把上面的 prompt 整段貼進去。Cursor 每次對話會自動讀。
# 專案根目錄
cd ~/your-project
# 貼進去（用你慣用的編輯器）
code .cursorrulesCodex（GitHub Copilot Chat）
沒有持久化的 system prompt 機制。每次新對話開頭手動貼，或者放成 snippet：
# VSCode 的 User Snippets 裡建一個
# "frontend-aesthetics-prompt" 觸發詞
# 然後在 Copilot Chat 打 /frontend-aesthetics-prompt 取出ChatGPT（GPT-5 / GPT-4o）
Settings → Personalization → Custom Instructions → "How would you like ChatGPT to respond"，貼進去。會套用到所有對話，不只前端任務——影響可能太大，建議改用「Project」功能，只在前端專案套用。
Gemini
如果用 API：放 systemInstruction 欄位。
如果用 Gemini Advanced 網頁版：建一個 Gem（自訂助理），把 prompt 貼進指令區，叫「Frontend Aesthetics」之類的名字。需要時切換到這個 Gem。
✅ 自我檢查清單
寫完一個前端任務，問自己這 8 題。任何一題答 yes = 違反規則：
□ 我有用 bg-indigo-500 / bg-purple-* / from-violet 開頭的 class 嗎？
□ 字體有 Inter / Roboto / Arial / system-ui 嗎？
□ Hero 是不是「大標 + 副標 + CTA + 配圖」對稱三層？
□ Feature 區是不是「icon + 標題 + 一行字」三欄 grid？
□ 按鈕是不是圓角 + indigo / blue 主色 + outline 副色組合？
□ 動畫是不是只有 hover scale 跟 fade-in？
□ 背景是不是純色或 indigo-purple 漸層？
□ 整體 layout 對稱、grid 整齊、間距平均？8 題全 no = 你做出來的不是 AI slop。1-3 題 yes = 還救得回來，補規則繼續改。4 題以上 yes = 砍掉重寫，明確指定一個極端 tone 再做。
💡 心法：把 AI 從中位數推開
最有效的單一動作：在 prompt 開頭指定一個極端 aesthetic anchor。
不是「modern」「clean」「professional」這種詞——這些詞就是中位數的關鍵字。要用：
brutalist,editorial,magazine,Y2K,retrofuturisticinspired by Bloomberg Terminal/like a Wim Crouwel poster/Memphis Group aestheticsolarpunk,vaporwave,art deco,Bauhaus
第二有效的動作：給 NEVER 清單。LLM 對「不要做 X」比「要做 Y」反應更明確，因為「不要做 X」是 hard constraint，「要做 Y」是 soft suggestion。
第三：給靈感來源 URL 或圖片。能塞圖最好（Cursor / Claude Code 支援拖圖）；不能塞圖就具體描述（「a Stripe-era 2018 SaaS landing, but make the hero monospace and remove all gradients」）。
回到原點：「不要看起來像 AI 寫的」這個目標，本質上就是「不要採樣到統計中位數」。理解這個之後，所有技巧都是同一件事的不同角度。
不怕死，只怕不過癮。
❓ 常見問題
為什麼 AI 寫的前端都喜歡用紫色？
直接原因：2020 年 Tailwind UI 把所有元件 demo 設成 bg-indigo-500，數百萬份教學跟進，這些範例碼進到 LLM 訓練語料，模型學到「modern web = indigo 紫」的隱性規則。深層原因：2015-2020 年 Instagram 改版引爆「twilight aesthetic」設計趨勢，整個產業跟進，網路上的範例都是紫色。換 GPT / Gemini / Claude 都一樣，因為訓練資料來自同一桶網路。
自己寫 system prompt 跟裝官方 plugin 哪個比較好？
裝官方 plugin 比較省事但只限 Claude Code；自己貼 system prompt 跨工具但要手動維護。Pro tip：兩個一起用——Claude Code 裝 plugin，CLAUDE.md 補上「extra strict on AI slop, override Inter even if it appears」這類專案級規則。Plugin 是 baseline，CLAUDE.md 是 override。
我用 GPT-5 / Gemini 也會有 purple problem 嗎？
會。所有用 2021-2024 網路語料訓練的大模型都有這個 bias，因為 Tailwind indigo 已經污染整桶訓練資料。GPT / Gemini / Claude 解法都一樣：明確的 system prompt + NEVER 清單 + 極端 aesthetic anchor。Anthropic 的官方 prompt 直接搬給 GPT 用也有效。
Space Grotesk 為什麼也被禁？它看起來不錯啊？
Cookbook 原話：「You still tend to converge on common choices (Space Grotesk, for example) across generations.」意思是 Space Grotesk 在「逃離 Inter」這條路上變成了新的中位數——所有想擺脫 Inter 的 AI 開發者都跑去用 Space Grotesk，所以它本身又變成 AI 的預設選擇。禁它不是因為它醜，是因為它變成下一個 cliché。
我給了具體 tone 還是出 AI slop，怎麼辦？
通常是因為 tone 不夠極端，或是同時開太多自由度。試這三招：(1) 在 tone 後面加反例（"brutalist, NO rounded corners, NO gradients, NO white background"）；(2) 鎖死配色到 3 個 hex（"only #000000, #FFFFFF, #FF6B00"）；(3) 指定一個具體參考作品（"reference: Bloomberg Terminal homepage circa 2015"）。三招都用上幾乎不可能再退回中位數。
系列文第 1 篇講的 plugin 跟這篇的 prompt 範本有衝突嗎？
沒有，是同一套東西的不同打包方式。Plugin = Anthropic 把 SKILL.md 包成自動觸發的形式；本篇的 prompt = 同樣內容的 portable 文字版。用 Claude Code 就裝 plugin（省事）；用其他工具就貼 prompt。兩者規則一致：四個維度 + NEVER 清單 + 極端 aesthetic anchor。
🔗 延伸資源
- Anthropic Cookbook: Prompting for Frontend Aesthetics
- Anthropic Blog: Improving frontend design through Skills
- GitHub Gist: Claude's Frontend Aesthetics Prompt 逐字稿
- Why Your AI Keeps Building the Same Purple Gradient Website
- Where does that purple gradient come from? - Jack Pearce
- 系列前一篇：Claude Code 寫的前端為什麼都長一樣？Anthropic 官方 frontend-design plugin 完整教學