--- title: Claude Design：Anthropic 把「形容詞」還給設計師的新工具 description: Anthropic 推出 Claude Design，從一張完課證書 demo 看見它在解的真正問題：人講不清楚自己要什麼。 tags: ClaudeDesign, Anthropic, AI設計工具, Opus47, 設計系統, blog lang: zh-tw breaks: true --- # Claude Design：Anthropic 把「形容詞」還給設計師的新工具 ###### tags: `Claude Design` `Anthropic` `AI 設計工具` `Opus 4.7` `設計系統` [TOC] --- ## 你也經歷過這種對話 你跟美編說「這張海報要有質感一點」，對方改了五版，你還是覺得「不對」。 你跟裝潢師傅說「這面牆要溫馨一點」，師傅貼了暖色壁紙，你看完只說「還好」。 你跟做簡報的同事說「再大器一點」，同事把字級放大，你皺眉：「不是這個意思。」 你會懷疑是不是對方理解力有問題。其實「質感」「溫馨」「大器」這些字，每個人腦中浮現的畫面差很多。你自己腦中也常常沒有畫面，所以對方只能猜，猜中的機率本來就不高。 我昨天用 AI 做一張結業證書，活生生踩了一次。從「要更浮誇」到「要有尊榮感」改了十幾輪，每一輪我都覺得「還好」。直到我停下來，把「證書」這個詞換掉，改成「博物館典藏登錄卡」（不是頒獎，是被永久編入館藏），下一版就突然對了。 > [!IMPORTANT] > 換的不是設計，是==名詞==。 隔天 Anthropic 發布了 Claude Design。我看了一下，它解的好像就是這件事。 --- ## Claude Design 是什麼 :::info **TL;DR**：Anthropic 在 2026-04-17 發布的 research preview，由前一天剛上線的 Opus 4.7 驅動。聊天 + 畫布介面，給 Pro/Max/Team/Enterprise 用戶免費使用[[出處]](https://support.claude.com/en/articles/14604397-set-up-your-design-system-in-claude-design)。 ::: 介面長得像 ChatGPT：左邊是聊天框，右邊是畫布。你說你要什麼，它在畫布上做出來。然後可以聊天微調，或點畫布上的元素直接做內嵌註解。 ![image](https://hackmd.io/_uploads/H17pN6Z6Ze.png) 但這只是表層。Claude Design 比較有意思的地方，是它有==兩層架構==： | 層級 | 給誰 | 做什麼 | |---|---|---| | **使用層** | 個人 Pro/Max 用戶 | 去 `claude.ai/design` 開專案，每張設計從零開始 | | **設定層** | 組織管理員 / 設計主管 | 上傳 codebase、簡報、品牌資產,Claude 萃取「品牌的設計系統」（色票、字體、元件規範）。設完後整個團隊的專案都自動套用 | 如果你是個人 Pro/Max 用戶，第二層你不會碰到，直接用第一層就好。要是你是公司的設計主管，第二層才是這個工具的大招。下面我先帶你看第一層。 --- ## 小白實戰：我用 Claude Design 重做一次「完課證書」 我把昨天那個情境，丟進 Claude Design 跑一次。流程一字不漏寫給你看。 ### 第一輪：故意用形容詞 我在輸入框打： > 幫我做一張完課證書，給「Claude Code 基礎班」的結業學員，要有質感一點。 按下 Send。 接下來幾分鐘，Claude 一邊跟我聊它的設計方向，一邊在畫布上把東西生出來： :::spoiler 點開看 Claude 自述的設計方向（原文） > 風格：經典學院派證書，暖色調（象牙白底 + 深墨綠 + 金色點綴） > 字體搭配：Cormorant Garamond（襯線標題）+ Inter（副文字）+ Italiana（裝飾字）+ JetBrains Mono（序號，呼應 Code 主題） > 細節：紙張紋理、放射狀暈影、極淡的代碼浮水印、MMXXVI 年份、證書序號 > Tweaks：可切換學員姓名、課程名、時數、日期、4 款色系（墨綠金/深藍金/酒紅金/黑金）、3 款印章（CC/★/`</>`） ::: 它沒給我一張 PNG。它幫我建了一棵 React 元件樹，`<CornerOrnament>`、`<Seal>`、`<Watermark>` 都是可以個別調整的元件。生完之後，畫面右邊還自動長出一個叫 `Tweaks` 的控制面板：4 款色系切換、3 款印章樣式，學員姓名、課程名、時數、日期都能改。 輸出不是一張靜態圖，是一個==可以參數化的東西==。這跟我以前用過的 AI 設計工具差別很大，那些通常給你一張 PNG，要改就重跑。 ### 它自己會檢查自己 正當我以為跑完了，畫面跳出一行： > A background task has completed. Here are the results: fork_verifier_agent result 什麼？Claude Design 還有一個==自動驗證 agent==。它會生完之後再去截圖比對，看排版有沒有問題。 它截了，然後跟自己說： > 確實很嚴重的重疊。我需要大改版面結構：改成 flow-based（非絕對定位）的 footer，縮小標題，統一垂直節奏。 然後 Claude 自己重寫整個 layout，重新截圖,再驗證一次，又發現截圖還是舊的（cache 問題），還會自己強制 reload。整個迴圈，它自己跑完，我中間沒打半個字。 ```mermaid graph LR A[使用者下 prompt] --> B[Claude 寫 React 元件] B --> C[第一版渲染] C --> D[fork_verifier_agent<br/>截圖檢查] D -->|發現重疊| E[Claude 自己重寫 layout] E --> F[重新截圖] F -->|還是舊的<br/>強制 reload| D F -->|通過| G[交付 + Tweaks 面板] ``` 最後它總結： > 標題「完課證書」改為單行顯示(white-space: nowrap) > Footer 改為 flow-based，不再絕對定位 > Seal 縮小，簽名與印章間距重新平衡 成品是一張很標準的「完課證書」：大字標題、襯線字體、印章、簽名、邊框。如果你 Google「完課證書範本」，會看到一百張長得跟這張差不多的東西。 說實話我看完只覺得還好。它做得不差，但「證書」這個類別本來就長這樣。我不管怎麼下「要更有質感」「要更尊榮」的形容詞，都跳不出這個類別。 ![第一輪：經典學院派證書](https://hackmd.io/_uploads/SkLQf6Zabe.png) *Tweaks 面板可以即時切換色系、印章樣式、學員姓名* *圖中姓名為AI虛擬* ### 第二輪：把名詞換掉 於是我打第二個 prompt： > 不要改目前這版，請開一個新版：把這張「證書」改成「博物館典藏登錄卡」的格式——不是頒獎、而是學員被「永久收錄進 Claude Code 使用者名人堂」。風格參考大英博物館的文物標籤卡，有 Accession Number、Catalogued by、Date of Entry 等欄位。 Claude Design 跑了一輪。設計方向直接變了： :::spoiler 點開看 Claude 對博物館卡的設計方向（原文） > Metaphor: British Museum-style specimen label / archive accession card > Aesthetic: Aged manila/kraft paper, institutional typography, typewriter-y field labels > Layout: Grid of metadata fields (Accession No., Object, Provenance, Catalogued by, Date of Entry, Condition, Classification, Location) > Details: Rubber-stamped "ACCESSIONED", hole-punch for archive binding, barcode, specimen tag, file-clip feel ::: 成品換了個世界：牛皮紙底、打字機字體、左邊有檔案夾的打孔、右邊有橡皮章「ACCESSIONED」、欄位排得像真的博物館目錄卡： :::success **Accession No.**: CCHOF.2026.0418.0073 *(permanent)* **Object · Inductee**: 林子涵 *LIN, Tzu-Han* **Classification**: Practitioner of Claude Code, *Codex claudius aedificatori* **Provenance**: 臺灣・臺北・Cl… **Location · Display Case**: Gallery III · Vitrine 14 · Shelf B ::: 它連學名都自己編了一個。你拿到這張卡，不會覺得自己「結業」了，會覺得自己是被「編入館藏」的稀有物件。 驗證 agent 又跑一次，又抓到右上的鉛筆手寫註記跟 Shelf B 重疊，自己挪位。 ![第二輪：博物館典藏登錄卡](https://hackmd.io/_uploads/SywtX6WTWg.png) *同個工具、十分鐘後跑出的另一個世界(圖中姓名為AI虛擬)* ### 兩張的差別 工具沒換、帳號沒換、十分鐘內接連跑。差的是我打字的時候，用的是形容詞還是名詞。 | Prompt | 結果 | |---|---| | 證書 + ==要有質感== | 經典學院派印製品 | | 博物館典藏登錄卡 + ==大英博物館風== | 牛皮紙打字機檔案 | --- ## 為什麼是 Claude Design，不是 v0 或 Lovable 你可能會想，AI 生介面的工具一堆，v0、Lovable、Figma Make 早就在做。Claude Design 跟它們差在哪？ 整理成一張表： | | Claude Design | v0 (Vercel) | Lovable | Figma Make | |---|---|---|---|---| | 主要產出 | 簡報、原型、海報、行銷素材 | React/Tailwind 元件、整支 app | 整套全端網頁 app（含資料庫、Auth） | Figma 內的互動原型 | | 模型 | Opus 4.7 | 自家 v0 agent | Claude | Claude 3.7 | | 品牌系統 | 自動讀 codebase + 設計檔萃取 | 手動指定 | 手動指定 | 完整 Figma 元件庫 | | 匯出 | PDF / URL / PPTX / Canva | React 程式碼、deploy 到 Vercel | 整支 app deploy | Figma Sites | | 給誰用 | 設計師、非設計師、PM、創辦人 | 開發者、設計師 | 沒寫程式的創辦人 | 專業設計團隊 | | 狀態 | research preview | 公開上線 | 公開上線 | 公開上線 | v0 做元件，Lovable 做整支 app，Figma 做協作畫布。Claude Design 在做的事比較怪：把整個組織的品牌塞進一個對話框裡。 而且 Anthropic 現在有了一條完整鏈： ```mermaid graph LR A[Claude<br/>思考 / 寫文字] --> B[Claude Design<br/>視覺 / 原型] B --> C[Claude Code<br/>實作 / 部署] style A fill:#FFE4B5 style B fill:#FFE4B5 style C fill:#FFE4B5 ``` 三層工具同一個底層模型。Figma 隔壁有 v0 跟 Lovable，但中間的「設計」跟「實作」是兩家公司。Anthropic 把這條線打通了。 市場反應誠實。Claude Design 上線當天 Figma 股價跌 4.26%[[出處]](https://www.reddit.com/r/ClaudeAI/comments/1so6z2t/claude_design_just_launched_and_figma_dropped_426/)。同一週 Anthropic 的 Chief Product Officer 還剛從 Figma 董事會退下來。我不覺得這是巧合。 :::warning **爭議當然也有。** - 有用戶說它的輸出是「cookie-cutter」、「比真的 Figma 工作流差一截」[[出處]](https://www.reddit.com/r/ClaudeAI/comments/1so6z2t/claude_design_just_launched_and_figma_dropped_426/) - Pro 訂戶哀號一次 session 吃掉 50% 月配額[[出處]](https://decodethefuture.org/en/claude-design-explained/) - 但 Brilliant 早期測試的人說，他們的設計迭代從 20 個 prompt 降到 2 個[[出處]](https://www.anthropic.com/news/claude-design-anthropic-labs) - Datadog 團隊說，原本要幾週的設計工作，現在幾分鐘就好[[出處]](https://www.reddit.com/r/ClaudeAI/comments/1soqutr/10_hours_of_claude_design_my_thoughts/) 兩種聲音都是真的。專業設計師繼續用 Figma，但「需要做設計但不是設計師」的人，多了一個能用的工具。 ::: --- ## 形容詞 vs 名詞：這個工具的真正破口 開頭講的「質感」「大器」「溫馨」這些形容詞為什麼會失敗？因為它們在每個人腦中沒有對應的畫面。 那如果畫面被事先定義好呢？ 這就是 Claude Design 第二層、組織設計系統那層在幹的事。當公司把品牌資產上傳，Claude 萃取出來的不只是色票，還會把「我們公司的質感」翻譯成具體的設定： | 形容詞 | 翻譯後的名詞 | |---|---| | 「質感」 | Pantone 2597C + Söhne Medium + 1.5em line-height | | 「俐落」 | 8px grid + 不超過兩種字體 + 角圓 4px | | 「品牌色」 | `#8B1538`，所有按鈕的 hover 自動降 10% lightness | 當這些定義存在，你說「要有質感一點」，工具知道你是什麼意思。==形容詞被翻譯回名詞了。== 所以 Anthropic 把 Claude Design 跟組織設計系統綁在一起，解的不只是「AI 怎麼做漂亮的圖」，還有「人怎麼跟 AI 描述美感」這個更深的問題。 ### 這個觀察 Anthropic 自己也說過 我寫到這邊本來以為是個人觀察。後來翻了一下 Claude Cookbook，發現 Anthropic 自己在 [Prompting for Frontend Aesthetics](https://platform.claude.com/cookbook/coding-prompting-for-frontend-aesthetics) 裡面早就寫了： > 「沒有指引時，Claude 預設輸出『簡單的白色與紫色背景設計』。」 他們列的修正策略全是「給具體參考來源（IDE 主題、文化美學）」「明白指出該避免什麼預設」——**沒有任何一條教你用形容詞**[[出處]](https://platform.claude.com/cookbook/coding-prompting-for-frontend-aesthetics)。 這不是我從一個證書 demo 推測出來的個人感想，是 Anthropic 在自家文件裡承認的模型行為。 ### 一個漂亮的對照實驗 設計師 Kirkland 在 YouTube 上跑了一個更乾淨的測試。同一句 prompt：「幫我做一個加密貨幣銀行的 landing page」，跑兩次： - **第一次**（什麼參考都不給）：「狂用漸層、基本款、AI 味很重，沒什麼特別的。」 - **第二次**（同一句話 + Linear 跟 Rocks 兩個產品的截圖）：「你會想真的拿來做的東西。」 ==prompt 文字一字沒改==，唯一變數是塞了兩個名詞當參考[[出處]](https://www.youtube.com/watch?v=nbk0PMS0tos)。 ### 一場以名詞為核心的開源運動 最有趣的是社群已經把這件事做成系統。`awesome-design-md` 這個 GitHub 專案上線**三天衝到 4,385 顆星**[[出處]](https://www.aiposthub.com/design-md-ai-coding-agent-generate-stripe-linear-level-ui/)，做的事就是把 Stripe / Linear / Notion 這些品牌的設計規範整理成 `DESIGN.md` 檔，丟進專案根目錄。 Prompt 變成這樣： > 「按這個 DESIGN.md，做一個像 Linear 風格的後台頁。」 一個形容詞都沒有。整句話的訊息密度全在那兩個專有名詞上：`DESIGN.md`（規範來源）、`Linear`（風格錨點）。 LinkedIn 上有人寫了一篇講這件事的理論[[出處]](https://www.linkedin.com/pulse/only-reason-youll-ever-need-stop-using-adjectives-prompts-gruener-y4n4c)，講得最白：「形容詞會在語意向量空間裡擴散熵；名詞錨定一個密集、清晰的 token 群。」翻成人話就是——**你說「更高級」，模型不知道朝哪個方向走；你說「像 Linear」，模型知道有一整片資料可以對齊。** ### 對小白的意義 我們這些沒有品牌系統、沒有 codebase 可以丟給 Claude 的人怎麼辦？ 答案就是中段那兩輪 demo 示範的：自己手動把形容詞換成名詞。「要有質感」改成「像紐約客封面」、「要大器」改成「像奧斯卡頒獎手冊」、「要尊榮」改成「像博物館典藏卡」。 不需要做 `DESIGN.md`，不需要 codebase，不需要會寫程式。只需要在 prompt 裡多塞一個你心裡有畫面的名詞。 --- ## 小白上手三步 > [!TIP] > 1. **去 [`claude.ai/design`](https://claude.ai/design)**：登入 Pro/Max 帳號，按 New prototype，輸入專案名，選 High fidelity，點 Create。 > 2. **第一個 prompt 寫名詞，不要寫形容詞**：「做一張像古董股票證書的會員卡」、「做一個像 Stripe Atlas 的歡迎信封」這種。 > 3. **打開右邊的 Tweaks**：色系、字體、欄位都能即時切換。Claude 已經自動幫你準備好變化版。 :::danger **警告**：一次 session 可能吃掉 ==50% 的 Pro 月配額==。盡量在同一個專案裡迭代，別反覆開新專案。 ::: --- ## 結語 形容詞本身沒錯，問題是它要對應到具體的名詞才有意義。 以前我們覺得 AI 設計工具的問題是「做得不夠漂亮」。現在 Anthropic 想解的是另一個問題：人講不清楚自己要什麼。Claude Design 的設計系統那層，就是在替「品牌」這個抽象詞建立一本翻譯字典。 至於我們這些沒有品牌系統、只是想做一張證書的人，下次再卡住的時候，與其加形容詞，不如試著換個名詞看看。我昨天就是這樣救自己的。 --- ###### 延伸閱讀 - 👉 **[〈Claude Design 攻略：你的 prompt 為什麼卡——5 個換名詞手法〉](https://hackmd.io/@us/Sy6p90baWl)**（本系列第二篇：5 個換名詞的具體手法） - [Introducing Claude Design by Anthropic Labs（官方公告）](https://www.anthropic.com/news/claude-design-anthropic-labs) - [Get started with Claude Design（官方使用指南）](https://support.claude.com/en/articles/14604416-get-started-with-claude-design) - [Set up your design system in Claude Design（管理員設定指南）](https://support.claude.com/en/articles/14604397-set-up-your-design-system-in-claude-design)