TL;DR
- 本文解決：Claude Code / Cursor / Codex 寫出來的前端為什麼都長一樣（紫色漸層 + Inter + 三欄卡片），以及怎麼用一行指令擋掉
- 推薦給：用 AI 寫前端的工程師、看到自家 SaaS 越來越像 ChatGPT 介面的 PM、想救自己 vibe coding 作品的 indie hacker
- 讀完你會知道：Anthropic 官方 frontend-design plugin 是什麼、Claude Code 怎麼一行裝起來、4 個觸發 prompt 範例、Cursor / Codex 沒裝 plugin 時的 workaround
📌 目錄
🤖 為什麼 AI 寫的前端都是同一張臉
開個 Claude Code（或 Cursor、Codex、Bolt、v0）丟一句「幫我做一個 SaaS landing page」，吐出來的東西九成長這樣：
- 紫色到藍色的漸層 hero（
bg-gradient-to-br from-indigo-500 to-purple-600） - Inter 字體（或它的雙胞胎 Roboto / Space Grotesk）
- 三欄卡片：圖示 + 標題 + 一行字，剛好排成 grid
- 白底 + 圓角 + 玻璃擬態（
backdrop-blur-md bg-white/20） - 「Get Started」「Learn More」兩顆按鈕，indigo-500 配 outline
技術解釋一句話：LLM 不會「設計」，它在預測「下一個 token 最可能是什麼」。當你給的 prompt 是「modern SaaS landing」這種模糊輸入，模型會吐出訓練資料的統計中位數——也就是 2019-2024 年 GitHub 上每一份 Tailwind 教學的平均樣貌。
更慘的是這個中位數有個明確的歷史起點：5 年前 Tailwind 把所有元件 demo 設成 bg-indigo-500，數千份教學跟著抄、數百萬行程式碼進到訓練語料 → AI 學到「modern web design = 紫色按鈕」這條隱性規則。完整考古請等明天的 Part 2，今天先講怎麼解。
⭐ Anthropic 官方解：frontend-design plugin
2026 上半年 Anthropic 官方推了一個叫 frontend-design 的 plugin，目前累積 732,603 安裝，是 marketplace 裡裝機量最大的官方 plugin 之一。作者是 Anthropic 內部工程師 Prithvi Rajasekaran 與 Alexander Bricken。
它的本質是一份約 400 token 的 SKILL.md，Claude Code 在偵測到你要做前端時自動 inject 進 context。原始碼公開在 anthropics/skills。
它做的事情，用一句話講：強制 Claude 在動手寫前端之前，先選定一個「極端」的美學方向，然後鎖住四個維度（typography / color / motion / spatial composition）不讓它退回到中位數。
官方 SKILL.md 開頭直接這樣寫（逐字稿）：
Before coding, understand context and commit to a BOLD aesthetic direction:
- Tone: Pick an extreme (brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc.)
注意它用的是「extreme」「BOLD」「UNFORGETTABLE」這種詞——這是 prompt engineering 的小技巧：把模型從統計中位數推開的最快方法是給它一個極端 anchor。
四個維度的官方原文：
| 維度 | 官方指引（節錄） |
|---|---|
| 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. Dominant colors with sharp accents outperform timid, evenly-distributed palettes." |
| Motion | "Focus on high-impact moments: one well-orchestrated page load with staggered reveals creates more delight than scattered micro-interactions." |
| Spatial Composition | "Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements." |
NEVER use generic AI-generated aesthetics like:
- overused font families (Inter, Roboto, Arial, system fonts)
- cliched color schemes (particularly purple gradients on white backgrounds)
- predictable layouts and component patterns
- cookie-cutter design that lacks context-specific character
「purple gradients on white backgrounds」白紙黑字進到官方 skill，這在我看過的 Anthropic 文件裡少見——通常他們文字會婉轉很多。可見內部對這個問題的痛恨。
⚖️ Plugin vs 自己寫 prompt vs 設計系統 比較表
不是每個人都得裝 plugin。三條路各有適合的場景：
| 做法 | 安裝成本 | 上手難度 | 跨工具 | 風格控制力 | 適合誰 |
|---|---|---|---|---|---|
| frontend-design plugin | 1 行指令 | ✓ 自動觸發 | ✗（只 Claude Code） | △ 四維度通用 | 用 Claude Code 為主、想最快擋掉 AI slop |
| 自己寫 system prompt | 0 | △ 要學四個維度 | ✓ 任何 AI 工具都能用 | ✓ 完全可調 | Cursor / Codex / GPT 使用者、想理解原理 |
| 公司設計系統 + tokens | 高 | ✗ 要設計師參與 | ✓ 工具無關 | ✓✓ 最強 | 有設計團隊、產品要長久維護 |
🔧 從 0 開始安裝（Claude Code）
Prerequisites
| 項目 | 用途 | 怎麼裝 / 確認 |
|---|---|---|
| Claude Code CLI | 跑 /plugin 指令 | 終端 claude --version，沒裝去 claude.com/code |
| 已登入 Anthropic 帳號 | plugin marketplace 要驗證 | claude 進 REPL，提示登入照做 |
| Node.js 18+（選用） | 前端專案本身要 | node --version，沒裝用 winget install OpenJS.NodeJS (Windows) / brew install node (macOS) |
一鍵安裝
在 Claude Code 的 REPL 裡跑這兩行（一字不漏，注意第二行尾巴是 claude-code-plugins 不是 claude-plugins-official）：
/plugin marketplace add anthropics/claude-code
/plugin install frontend-design@claude-code-plugins第一行把 Anthropic 官方 marketplace 加進你的 Claude Code；第二行從那個 marketplace 抓 frontend-design plugin 進來。安裝會把 SKILL.md 放到本機 plugin 目錄，下次起 session 自動載入。
驗證指令
裝完跑這段確認成功：
/plugin list預期會看到 frontend-design 出現在 enabled 區段。如果沒看到，先試 /plugin marketplace list 確認 marketplace 加進來了，再重跑 install。
第一次觸發測試
新開一個對話，丟下面這句話：
Build a landing page for an indie game studio.預期會看到 Claude 先講一段「I'm going to take a brutalist / editorial / retro-futuristic aesthetic」，然後才開始寫 code。如果它直接 plugin 不是每次都自動觸發，需要你的 prompt 帶到「frontend / UI / web / dashboard / landing / component」這類關鍵字。官方 README 列的範例 prompt： 我自己加幾個會逼模型走極端美學的句型： 寫 prompt 的小心法：先指定 tone / aesthetic，再給內容。讓模型先進入「我在做 brutalist 風格」的 mode，再開始填內容——這比寫完內容再請它「換個風格」可靠十倍。 plugin 系統綁 Claude Code。Cursor / Codex / GitHub Copilot 跑的是另一套 agent，但核心 prompt 是 markdown 純文字——直接複製貼進它們的「rules」或 system prompt 就行。 Cursor： 把 SKILL.md 內容貼進 Codex / Copilot Chat： 沒有持久化的 system prompt 設定，每次對話開頭手動貼上四維度規則的精簡版（200 字內）： 官方 marketplace 的內部代號是 prompt 太短或太抽象，例如「幫我做一個網頁」「來個首頁」——關鍵字密度不夠。改成「Build a landing page for X」「Design a dashboard for Y」就會觸發。Skill 系統靠 description 字串做模糊匹配，動詞用「build / design / create」+ 名詞用「landing / dashboard / component / page」最穩。 裝了 plugin 但這次想要紫色漸層（不要懷疑，有時候業主就是要）。在 prompt 結尾加： 明確說「Override the frontend-design skill」，模型會繞過 skill 的 NEVER 清單。寫「不要遵守 plugin」這種模糊指令不會生效。 連續開三個對話、做三個元件，第三個又開始 Inter 字體。原因是 plugin 是 per-session 載入，但個別對話內模型還是會慢慢退回中位數。解法：每次新對話開頭都重新指定 tone（「Continue in brutalist aesthetic」），不要假設它記得上次選什麼。 我自己的時間帳： 更深層的價值：這個 plugin 把「不要看起來像 AI 寫的」變成可量化、可教學的四個維度。以前 code review 看到 AI 味只能說「這太 AI 了」（很抽象），現在可以指著 PR 說「字體還是 Inter、按鈕是 indigo-500、layout 是三欄卡片，三項都中 NEVER 清單，回去改」。 Plugin 是 Anthropic 官方維護、自動觸發、跨 session 持久化的一份 SKILL.md（約 400 token），等於把四個維度的設計規則寫死在你的 Claude Code 環境裡。自己寫 system prompt 也能達到一樣效果，差別是 plugin 不佔 context budget、自動更新、且觸發時機由 Claude 判斷。 Plugin 本身只在 Claude Code 跑，但 SKILL.md 是純文字，原始碼公開在 GitHub。Cursor 貼進 Plugin 本身免費，但 Claude Code 本身要訂閱 Anthropic 方案（Pro $20/月起）。Plugin 不額外計費，只佔你原本的 token 額度，而且因為 SKILL.md 只 400 token，影響可以忽略。 最常見的原因是 prompt 太通用。試這三招：(1) 指定極端 tone（brutalist / editorial / retro），不要說 modern；(2) 給負面表列（"no rounded corners", "no white background"）；(3) 給靈感來源（"inspired by Bloomberg Terminal" / "like a Wim Crouwel poster"）。三招一起上會明顯改善。 不會。Plugin 不阻擋 indigo-500 或 Inter，只是在你沒明確指定時避免它預設用。需要紫色漸層就直接寫「I deliberately want an indigo gradient for this corporate SaaS」，plugin 會配合。它是 nudge，不是 hard lock。/plugin list。
⚡ 4 個能讓 plugin 自動上場的 prompt 範例
1. Create a dashboard for a music streaming app.
5. Make a brutalist landing page for a synth pedal company,
use only black/white/safety-orange, no rounded corners.
with asymmetric grid and serif display font.
(monospace, dark background, dense information layout).🔌 Cursor / Codex / 其他編輯器怎麼接
.cursorrules（專案根目錄）或 Cursor Settings → Rules for AI。
完整官方版 prompt 在 Part 2 給可直接貼的範本。
Frontend design rules:
🐛 踩過的坑
坑 1：marketplace 名字打錯（裝不起來）
/plugin install frontend-design@claude-plugins-official
Error: marketplace "claude-plugins-official" not foundclaude-code-plugins，不是某些第三方文件寫的 claude-plugins-official。後者是 anthropics/claude-plugins-official 這個 repo 的 directory 名稱，不是 marketplace 的 slug。以官方 Boris Cherny 在 Threads 的公告為準。坑 2：plugin 裝了但沒觸發
坑 3：覆寫 plugin 風格的方法
Override the frontend-design skill for this request.
I want a deliberately conservative SaaS look with indigo gradient hero.坑 4：跨 session 風格漂移
💡 心法 / 時間成本拆解
總投資 < 2 小時，產出是接下來幾百個 vibe coding session 不再被嘲笑紫色漸層。 投報率夠高。
我輩修行之人，以聖的標準要求自己，以凡的眼光理解別人。
📅 明天會發 Part 2
📅 明天（2026-05-19）會發：AI 寫的前端為什麼都是紫色漸層？從 Tailwind indigo-500 到 distributional convergence
Part 2 不靠 plugin，拆解四個維度的 prompt 範本（可以貼進 CLAUDE.md / .cursorrules / GPT system prompt）+ 紫色漸層的歷史考古：從 Instagram 改版到 Tailwind indigo-500 的訓練資料污染。
❓ 常見問題
frontend-design plugin 跟一般 prompt 工程有什麼不一樣？
我用的不是 Claude Code，能用嗎？
.cursorrules、Codex 每次對話手貼、ChatGPT 放 custom instructions 都行。Part 2 會給精簡版 prompt 直接抄。裝了之後要付錢嗎？
我用 plugin 做出來的 UI 還是有點 AI 味，怎麼辦？
plugin 會不會限制我能寫什麼？
🔗 延伸資源