Anthropic Labs · Research Preview
2026.04.17 — Product Launch
Issue 01 — Product Dispatch

設計
變成
一場對話.

Anthropic 把「做視覺設計」這件事搬進聊天視窗—— 你描述,Claude 畫出來,然後你們一起改到對

產品
Claude Design
所屬
Anthropic Labs
視覺模型
Claude Opus 4.7
開放方案
Pro · Max · Team · Enterprise
狀態
Research Preview
入口
claude.ai/design
01/
For Whom · 目標族群

光譜的 兩端

Claude Design 想同時解決兩種痛點——設計師時間不夠非設計背景的人打不開工具。產品設計刻意橫跨光譜,不是單押一邊

Fig. 01 · Audience Spectrum design skill axis 設計師 designer pain point 時間不夠 想跑 10 種方向,只做 2–3 個 非設計背景 founder · pm · marketer pain point 工具打不開 有想法,但做不出視覺 CLAUDE DESIGN 橫跨兩端
source — wiki/concepts/claude-design.md figure · audience positioning
02/
Interface · 兩區架構

左邊聊,右邊畫

打開 Claude Design 就是兩半——左邊是跟 Claude 對話的聊天框右邊是一張會長出設計的畫布。你描述,它產出;你改,它重畫

Fig. 02 · Workspace Layout claude.ai/design CHAT 幫我做一個月度收入儀表板 要能篩選地區 claude → 建立第一版中⋯ 把配色改深一點 describe your design⋯ CANVAS Revenue Dashboard TOTAL $847K GROWTH +24% REGIONS 6 FILTERS All regions ▾ 2026 YTD ▾ describe →
source — wiki/concepts/claude-design.md figure · workspace mock
03/
Iteration · 四種改法

改東西不只靠打字

Claude Design 提供四種改設計的管道——從整體對話到動態生成的調整旋鈕。最特別的一種是 Claude 會自動產生你需要的 sliders,而不是只有固定的控制面板

Fig. 03 · Four Iteration Modes SCOPE global local 01 聊天 chat 「配色改深一點」 「重排版面」 「給我 3 個版本」 02 內嵌註解 inline comment 點某元素 → 下指令 「按鈕內邊距再大」 「改成下拉式清單」 03 直接編輯 direct edit 畫布上點文字直接改 不用透過聊天 適合微調 copy 04 自訂 sliders adjustment knobs spacing color.h radius CLAUDE-GENERATED, ON-DEMAND 旋鈕本身也是 AI 產出 live 預覽 → 滿意後請 Claude「套用到整份」 每一種都可以隨時混用
source — wiki/concepts/claude-design.md · wiki/howto/claude-design-使用指南.md figure · four iteration modes
04/
Use Cases · 場景

實際在做什麼

Anthropic 公告列的六大使用場景橫跨設計師、產品、業務、行銷——共通點是:以前要懂工具或找設計師,現在自己先做出一版

01
For · Designer

互動原型

把靜態 mockup 變成可分享的互動原型,不用跑 code review 或開 PR 就能做使用者測試

02
For · PM

Wireframes

PM 畫出 feature flow,直接交接給 Claude Code 實作,或給設計師細修

03
For · Designer

Design Explorations

快速產出多個方向讓團隊比較,原本只跑兩三個方向,現在可以跑十個

04
For · Founder / AE

品牌簡報

從粗略大綱到品牌一致的完整簡報,幾分鐘完成,可匯出 PPTX 或送 Canva

05
For · Marketer

行銷素材

Landing page、社群圖、campaign 視覺都能做,做完再交給設計師潤飾

06
For · Anyone

Frontier Design

用 voice、video、shaders、3D、內建 AI 做 code-powered 原型——實驗性場景

過去要做視覺,要嘛找設計師
要嘛花時間學工具——
現在可以讓 AI 先做出一版

— Claude Design 的核心命題
05/
Workflow · 從輸入到交接

一句話到可執行

Claude Design 的工作流從多種輸入收斂到聊天+畫布,再散出多種輸出。最後一條路徑最關鍵——Handoff bundle 直接丟給 Claude Code 寫程式,設計到實作之間幾乎沒有接縫

Fig. 05 · End-to-End Workflow INPUTS · 純文字 prompt · 圖片 / 截圖 · DOCX / PPTX / XLSX · Codebase · 既有設計檔 ★ web capture CORE Claude Design chat + canvas 4 iteration modes powered by opus 4.7 ALWAYS APPLIED 你的品牌設計系統 OUTPUTS → 內部 URL → PDF / PPTX → Canva → 獨立 HTML → .zip / folder ★ handoff bundle ONE COMMAND → Claude Code 開始寫程式
source — wiki/concepts/claude-design.md figure · end-to-end workflow

打開來試試

下次有想法需要視覺化,但又懶得打開一堆設計工具的時候,可以先跟 Claude 聊一下——包在你現有訂閱裡

claude.ai/design