Claude Design

資料來源#

• A Field Guide to Fable: Finding Your Unknowns
• Anthropic's Boris Cherny: Why Coding Is Solved, and What Comes Next
• Designing with Claude: From prompt to production
• How the product designer who built Claude Design uses it

摘要#

這是 Anthropic Labs 推出的產品，讓你用日常語言描述需求，與 Claude 協作打造精緻的視覺作品——包括設計、原型、投影片、單頁文件等。開發團隊「大部分時間只有三個人」，從構想到推出「大約花了十週」；產品以研究預覽版形式上線，時間約在 Dan Carey 於 2026 年 5 月演講前一個月（約 2026 年 4 月）。它是多個 wiki 概念的實例：Prototype Over PRD、Compounding Loop Optimization，以及 Build for the Next Model。

起源#

團隊中的設計師 Nate Parrott（先前曾任 Claude Code 設計師）在參與另一項探索時，利用一個週末拼出了第一版原型。這個原型刻意做得很精簡：Agent SDK、一個非常精簡的 IDE 包裝層，以及他早已在 Claude Code 中使用的一項 skill。第一版原型「大概就只有一個終端機和一個瀏覽器」。他把原型貼到 Slack 上，團隊的回饋（「哪些地方有前景／哪些地方完全壞掉了，請修好」）成了頭幾週的開發路線圖。Carey 的說法是，原型本身帶來的價值只有 1%；其餘價值來自「十週不間斷地反覆迭代、推出產品，而且每天都和使用者交流」。

主要功能（以及各自消除的阻力）#

多數功能一開始都是為了解決團隊自己的工作流程問題（Compounding Loop Optimization）：

• 多人協作——即時共同編輯同一份設計。團隊成員原本得依序把原型交給彼此，因此才打造這項功能；產品推出後，它成了使用者最先提出的需求。
• 交接給 Claude Code——無須重新匯出檔案、重新輸入對話脈絡，就能把設計推進到正式製作階段。這是產品推出後使用者提出的第二項需求（「那我要怎麼把這個做成正式產品？」）。
• 探索程式碼庫／連結 GitHub——以你的品牌風格，並建構在你現有的程式碼之上。
• 開放格式匯出——設計可匯出為 HTML、CSS、JavaScript（不是封閉格式），體現了「成為開放工具」的理念。
• 自行託管——團隊用「Claude Design 設計 Claude Design」，這是 Dogfooding as Product Discipline 最徹底的實踐。

產品理念#

• 提升每個人的基本水準，而非只拉高上限。 團隊曾打造進階的像素級「進階使用者」控制項，少數高聲量測試者很喜歡，但「其他所有人都討厭它們」——不但令人困惑，還「造成實際傷害」。團隊在一週內就把它們移除了。教訓是：要成為「能提升每個人技藝水準的工具，而不只是拉高進階使用者上限的工具」（參見 Vibe Coding vs. Agentic Engineering 中「vibe coding 提升基本水準」的說法）。
• 保持開放，滿足你永遠無法涵蓋的需求。 有些進階使用者需要工具不會支援的細節，因此團隊選擇盡可能保持開放——提供 HTML/CSS/JS 匯出和整合功能，讓有特殊需求的使用者能把設計帶進自己的工具。
• 面向未來的整合說法（待查證）。 Carey 在 2026 年 5 月的演講中表示，團隊會在「這週或下週」推出功能，讓任何設計工具都能透過既有的 MCPs 與 Claude Design 整合（參見 MCP and Computer Use）。當時說法是即將推出，並未確認已上線——應視為有日期的未來承諾，仍待查證。

推出與迭代指標#

• 從週五推出到隔週一，團隊推出了 62 項改進，全部來自推出當天使用者的回饋（token 效率、影像處理、程式碼庫探索、近乎即時的匯出）。Carey 表示，這不是熬夜趕工的成果，而是因為團隊已經連續十週練習每天迭代的循環，所以執行起來「非常自然」。
• 推出約一個月後，token 限額加倍，回應喜歡這項產品、也想更常使用的使用者。
• 早期原型的能力缺口並非靠工程工作補齊，而是隨著 Opus 4.7 推出而消失——這是 Build for the Next Model 的典型成果。

後來的發展——打造者的說法（2026 年 7 月）#

Nate Parrott 在第一版原型推出一年後，親自撰寫了一篇第一人稱文章，提供第二份詳盡資料，並從三方面修正了原先的描述。

起初的動機是速度落差，而非被指派的探索任務。 Parrott 是 Claude Code for VS Code 唯一的產品設計師；Opus 4.5 在 2025 年 11 月推出時，「工程師的交付速度遠勝以往，我卻還是維持原本的速度。我得找到方法追上。」這項工具之所以誕生，是因為 AI 加速了三人團隊中的一個職能，卻沒有加速另一個職能。完整經過請見 Nate Parrott（從失敗的「把螢幕截圖貼進聊天」嘗試，到一個月的副專案探索，再到 HTML 加分割檢視，以及把 Anthropic 的品牌風格提煉成提示）。

產品範圍是由使用者重新界定，而非團隊自行決定。 在 Anthropic Labs 的外地會議構想提案環節中，「每個人都用它快速做出了投影片，很多人甚至在會議進行中、輪到自己報告之前就做完了。那場活動說服 Labs 團隊為這項產品配置人力。」接著，團隊「不再把它描述成產品模型製作工具」：Claude Design 適用於任何視覺溝通——簡報、登陸頁面、可列印的單頁文件、電子郵件、動畫、社群視覺素材。Parrott 的說法是：「比產品設計再廣一點……主要用來溝通和發想的視覺內容。」

產品界線有明確說明（第一方文章中少見的坦率）：

• 沒有影像模型。「不太適合設計標誌——雖然這並沒有阻止人們嘗試。」建議改用現有素材。
• 不適用於正式上線的軟體。「如果你要推出正式上線的軟體，請使用 Claude Code。」兩者可以雙向交接：把 Claude Code 原型同步到 Claude Design，用畫布繼續迭代；也可以把 Claude Design 原型交給 Claude Code，從中建構產品。這是發想與正式製作的分工，不是能力高下的排名。
• 能力範圍受模型限制。「模型的視覺能力越好，Claude Design 能處理的工作範圍和品質也越好。」文中指出，Opus 5 閱讀圖表、示意圖和螢幕截圖的能力優於先前的 Opus 模型，因此簡報與備忘錄的用途才得以實現。這再次體現了 Build for the Next Model，不過這次提升的是視覺能力，而非程式撰寫能力。

**狀態：**截至 2026 年 7 月，已在 Claude Pro、Max、Team 和 Enterprise 方案中進入 beta（相較 Carey 說法中的研究預覽版，已有所進展）。

日常工作方式——離開鍵盤思考、要求產生十個選項再混搭其中兩個、先畫線框、最後一哩手動完成——另整理於 Design by Selection。

wiki 先前的提及#

Boris Cherny 曾將它列為視覺能力的案例（記錄於 Cowork 條目）：「我覺得 Claude design 是個很好的例子。它現在已經相當不錯，未來還會進步很多。」Carey 的演講是第一份詳述它實際打造過程的資料。

相關連結#

• Anthropic Labs——孕育這項產品的孵化團隊；外地會議上，大家不待提示就開始做投影片，說服 Labs 為它配置人力
• Nate Parrott——打造第一版原型並親自分享經過的設計師
• Design by Selection——使用這項工具時採取的日常做法：離開鍵盤思考、產生十個選項、混搭其中兩個，再手動完成最後一哩
• Claude Opus 5——視覺能力的提升（圖表、示意圖、螢幕截圖）擴大了簡報與備忘錄的適用範圍
• Dan Carey——帶領這項產品、並分享打造經過的 PM
• Claude Code——起源技術（Agent SDK、Claude Code skill、精簡的 IDE 包裝層），也是交接到正式製作階段的目標
• Cowork——Anthropic 旗下的姊妹代理程式產品，處理非程式類的知識工作；Claude Design 則是處理視覺作品的姊妹產品
• Anthropic——供應商
• Claude Opus 4.7——補足早期原型能力缺口的模型版本
• Prototype Over PRD——快到足以讓原型取代 PRD 的工具
• Compounding Loop Optimization——其功能是從反覆迭代流程中提煉而成的最佳化
• Build for the Next Model——最明確的案例研究
• Dogfooding as Product Discipline——「用 Claude Design 設計 Claude Design」
• Living Design System——HTML/CSS/JS 匯出加上設計系統輸出，同樣是打造可攜式作品的做法
• MCP and Computer Use——「透過 MCP 整合任何設計工具」的整合介面
• Vibe Coding vs. Agentic Engineering——「提升每個人的基本水準」呼應了 vibe coding 提升基本水準的說法
• Unknowns as the Agentic Bottleneck——將參考技術產品化：指定一個你喜歡的元件，它會「讀取底層程式碼，而不只看螢幕截圖」，取得標記與結構資訊，而不只是外觀（Thariq Shihipar）

尚待解答的問題#

• 「透過 MCP 整合任何設計工具」是否真的按原定時程推出？（2026 年 5 月提出的未來承諾。）#oq/wait 部分已有答案：Nate Parrott 在 2026 年 7 月的文章確認：「網頁搜尋和 MCP 連線在 Claude Design 中也能使用，只要設計需要外部資訊就可以。」這表示承諾中的用戶端功能已上線。但各種設計工具是否透過自己的 MCP 伺服器整合，目前仍未確認。
• Claude Design 如何評估視覺或美學成果？這類成果沒有編譯器或測試可用。（這和 Cowork 的非程式類作品面臨的是同一個問題；也與 character/taste evals 有關。）

資料來源#

• Designing with Claude: From prompt to production——Dan Carey，〈Designing with Claude: From prompt to production〉，2026 年 5 月
• Anthropic's Boris Cherny: Why Coding Is Solved, and What Comes Next——Boris Cherny 先前將它列為視覺能力案例的提及
• How the product designer who built Claude Design uses it——Nate Parrott，2026 年 7 月（case-study）：打造者視角的起源、Labs 外地會議、產品範圍重新界定、明確說明的限制，以及 beta 供應狀況