PRODUCT

剛剛，Anthropic 發(fā)布 Claude Design，入口 claude.ai/design

只需要在輸入框里輸入：

幫我做一個暗色主題的交互圖形，展示城市之間的文化流動。一個旋轉(zhuǎn)的地球，城市之間用發(fā)光的弧線連起來

一句話輸入，Claude 開始干活

Claude 開始干活。左側(cè)把任務(wù)拆成 5 步：搭項目結(jié)構(gòu)、做交互地球組件、加城市節(jié)點和連線、排版面和字體、加氛圍光。右側(cè)畫布上，Every place has a story 的暗色著陸頁從零長出來，地球轉(zhuǎn)起來，112 座城市、168 條航線，一條一條連起來

Every place has a story，Claude 從零生成整個地球頁面

可以拖著旋轉(zhuǎn)，可以點擊響應(yīng)。真實能跑的界面

Brilliant 的產(chǎn)品設(shè)計師 Olivia Xu 說，他們最復(fù)雜的頁面在別的工具里要寫 20 個以上 prompt 才能還原，Claude Design 里 只要 2 個

Datadog 的 PM 形容他們現(xiàn)在開會的樣子：「會還沒散，原型已經(jīng)能跑」

Claude 自己造調(diào)節(jié)面板

頁面出來之后，點一下 Tweaks 按鈕，輸入：

給這個地球和連線加一套可調(diào)控件

Claude 把任務(wù)拆成 5 步，自己畫面板

Claude 把活拆成 5 步：讀現(xiàn)在的頁面布局和組件、搭 tweaks 狀態(tài)、做浮動面板 UI、加弧線和城市開關(guān)、加斷點切換器。幾秒之后，畫布上出現(xiàn)一個懸浮的控件面板

Claude 自己設(shè)計的滑塊面板

六個滑塊：Grid opacity 0.10、Grid density 10°、Country fill 0.07、Globe size 400、Rotation 11°/s、Tilt 21°。下面還有 Outer rings 和 Back grid 的開關(guān)。這些參數(shù)沒有在 prompt 里說過，是 Claude 自己判斷「用戶大概想調(diào)這些」

傳統(tǒng)設(shè)計工具里，設(shè)計師定義 Design Token，下游拿到成品。Claude Design 里反過來，Claude 主動把可變維度交出來，讓你拖

一句話做一個原型，Claude 自己決定哪些東西應(yīng)該可調(diào)

再來一個例子

冥想 App：

做一個平靜的手機(jī)冥想應(yīng)用原型，字體要讓人靜下來，配色偏自然，版面干凈

手機(jī)冥想 App 原型，自帶調(diào)節(jié)面板

iPhone 上的冥想 App，Good morning Jared，今天的練習(xí)是 Forest Rain。Tweaks 面板里有七種主題色（Stone / Moss / Mist / Clay / Dusk / Sakura / Ink），字號可以拖

覺得主色調(diào)太亮，點 Comment 按鈕，畫個框，寫一句「加一個深色模式」

一句評論，整個 App 翻成暗綠

整個 App 翻成暗綠，Tweaks 面板也同步變深色

文檔也能直接排

只需要上傳一個活動記錄，對它說：

幫我把這個整理成一份好看的、能打印的歡迎冊子，發(fā)給公司團(tuán)建的人

活動記錄變成 5 頁打印冊

5 頁的橫版冊子出來了。封面大圖、行程表、Big Sur 周邊介紹、打包清單，統(tǒng)一的品牌調(diào)性

覺得封面圖不對，點開 Comment 直接在圖上畫框，寫「換成海岸線那張」

畫框評論換圖，右邊還有精細(xì)到 CSS 級別的 Knobs 面板

旁邊還有個叫 Knobs 的面板，比 Tweaks 更精細(xì)。Font 是 Space Grotesk，Size 48px，Weight 700，Line 50.4，Tracking -1px。從字體、字號、字重、行高，到顏色、對齊、圓角、間距，一切 CSS 能調(diào)的都能調(diào)

順便把 Deck 也做了

扔一個 launch.doc 進(jìn)去，說：

把這些要點做成一份帶品牌調(diào)性的 Deck

從產(chǎn)品要點到 8 頁 Deck，自帶數(shù)據(jù)可視化

8 頁 Slide 從產(chǎn)品要點里長出來，serif 加 sans-serif 字體混搭，品牌色貫穿，數(shù)據(jù)頁有動態(tài)柱狀圖、趨勢線、三段版式。Traction 頁上寫著：啟動以來接入 3,200+ 工程團(tuán)隊，增長率 78%，平均評分 4.9。右邊是去年 9 月到今年 4 月的增長曲線

做完了，能去哪

Export 菜單里有六條路，包括 Handoff 到 Claude Code

點 Export，菜單里六條路：項目 zip、PDF、PPTX、發(fā)到 Canva、獨(dú)立 HTML、Handoff 到 Claude Code

選 Handoff to Claude Code，Claude Design 會把項目打包、生成一條 Fetch 指令、附上 readme，直接粘進(jìn)本地 Claude Code 或者 Claude Code Web。工程那邊拿到設(shè)計稿、設(shè)計意圖、和原項目的組件約束

能拿它做什么

官方列了幾類用法

設(shè)計師把靜態(tài)稿轉(zhuǎn)成可分享的交互原型，不用過 code review，也不用提 PR。PM 畫出功能流程扔給 Claude Code 實現(xiàn)，或者交給設(shè)計師繼續(xù)打磨。創(chuàng)始人和 AE 從粗略大綱出發(fā)，幾分鐘生成一份符合品牌的 Deck，導(dǎo)出 PPTX 或發(fā)到 Canva。市場做落地頁、社媒素材、Campaign 視覺，再拉設(shè)計師收尾

設(shè)計師也可以一次鋪出幾個方向做選擇

還有一類叫 Frontier Design，官方的原話是「任何人都能做帶語音、視頻、Shader、3D 和內(nèi)置 AI 的代碼原型」

底座和身份

Claude Design 出自 Anthropic Labs，底座是這周剛發(fā)布的 Opus 4.7

Anthropic Labs 1 月份正式擴(kuò)展命名，專注孵化 Claude 的實驗性產(chǎn)品形態(tài)。Instagram 聯(lián)合創(chuàng)始人 Mike Krieger 從 CPO 挪過來領(lǐng)導(dǎo) Labs，和 Ben Mann 一起帶隊。Claude Code、Cowork、MCP、Skills、Claude for Chrome，都是這種孵化模式的產(chǎn)物。Labs 掛名后，Cowork 是第一個 Research Preview，Claude Design 是第二個

工作流里的幾個細(xì)節(jié)

Onboarding 階段，Claude 讀團(tuán)隊的代碼庫和設(shè)計文件，自動抽出一套 Design System。之后每個項目都會默認(rèn)套用這套顏色、字體、組件。系統(tǒng)可以隨時迭代，一個團(tuán)隊也可以維護(hù)多套

起點可以是文字描述，也可以上傳圖片和文檔（DOCX、PPTX、XLSX），或者把 Claude 指到團(tuán)隊的代碼庫上。還有一個 Web Capture Tool，直接從網(wǎng)站抓元素，讓原型看起來就是真實產(chǎn)品

協(xié)作走組織維度。文檔可以設(shè)為私有，也可以給全組織開只讀、評論或可編輯權(quán)限。多人同時打開時，會進(jìn)入群聊式界面，大家一起跟 Claude 對話

三家早期客戶

博客里放了三家的原文反饋

過去兩年和 Anthropic 的合作讓我們很享受，我們都專注于把復(fù)雜的事變簡單。Canva 的使命一直是讓所有人都能做設(shè)計，這意味著我們要把 Canva 帶到想法開始的地方。從 Claude Design 里出來的稿子進(jìn)到 Canva，就變成可編輯、可協(xié)作的設(shè)計，隨時能改、能分享、能發(fā)布

Melanie Perkins，Canva CEO

Brilliant 的復(fù)雜交互和動畫一直是原型里最痛的部分。我們最復(fù)雜的頁面在別的工具里要 20 個以上的 prompt，用 Claude Design 只要 2 個。把設(shè)計意圖打進(jìn) Claude Code 的 Handoff 里，從原型到生產(chǎn)的跳躍變得無縫

Olivia Xu，Brilliant 高級產(chǎn)品設(shè)計師

Claude Design 讓我們的原型速度大幅加快。一場對話里，我們從粗糙想法做到能跑的原型。過去要一周 Brief、Mockup、多輪評審才能完成的事，現(xiàn)在一次對話搞定，結(jié)果還貼合品牌和設(shè)計規(guī)范

Aneesh Kethini，Datadog 產(chǎn)品經(jīng)理

訂閱和用量

Pro、Max、Team、Enterprise 訂閱者都能用。Enterprise 默認(rèn)關(guān)閉，管理員要去 Organization Settings 里打開

Claude Design 有 獨(dú)立的用量池，和 Chat、Claude Code 分開計量，每周重置。超出后可以買 Extra Usage

Pro 適合偶爾出個東西。Max 5x 適合 PM、工程師偶爾做 Mockup。Max 20x 適合設(shè)計師和創(chuàng)意人員。Team 和 Enterprise 分 Standard 和 Premium 兩種席位。Enterprise 如果走 Usage-Based 計費(fèi)，Claude Design 按標(biāo)準(zhǔn) API 費(fèi)率計入賬單，每人有一次性 credit 能用大約 20 個 prompt，7 月 17 日過期

在哪里能用

入口在 claude.ai/design

→ 官方公告：anthropic.com/news/claude-design-anthropic-labs

→ 演示視頻：youtube.com/watch?v=t_LBECIQQqs

一個觀察

Anthropic 現(xiàn)在的產(chǎn)品矩陣：Claude Code 管代碼、Cowork 管桌面 Agent、Claude Design 管視覺。三條產(chǎn)品線并列，背后跑的都是 Opus 4.7

獨(dú)立的用量池也說明，Anthropic 把 Claude Design 和 Claude Code 放到了 同一級

Labs 這套孵化機(jī)制上一次把 Claude Code 從實驗推成主線，這一次輪到 Claude Design

至于下一個是什么....我們還不知道，或許是科學(xué)研究，或許是生物制藥，也或許是其他...