---
# System prepended metadata

title: Claude Design：Anthropic 把「形容詞」還給設計師的新工具
tags: [' AI設計工具', ' 設計系統', ' Opus47', ClaudeDesign, blog, ' Anthropic']

---

---
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)