今天,Anthropic 正式發布 Claude Design,一個新的 Anthropic Labs 產品,讓任何人都能與 Claude 協作創作精緻的視覺作品——包括設計、原型、簡報、單頁文宣等等。
這不是另一個 AI 生成圖片的工具,而是一個完整的設計協作環境。Claude Design 由 Anthropic 最強的視覺模型 Claude Opus 4.7 驅動,目前已開放給 Claude Pro、Max、Team 和 Enterprise 訂閱者進行研究預覽。
經驗豐富的設計師也會受限
即使是有經驗的設計師,也必須節省探索的時間——很少人有機會嘗試十幾個不同的方向,所以通常只能限制自己選幾個。而對於創始人、產品經理和行銷人員來說,有一個想法卻沒有設計背景,要創作並分享這些想法,會讓人望而卻步。
這是一個普遍存在的問題。在台灣的新創圈,我聽過太多類似的故事:一個創始人有很棒的想法,但需要等兩週才能排到設計師的時間;一個產品經理要花三天準備一份 PRD,但沒有視覺輔助,工程團隊很難理解他的構思;一個行銷團隊想要測試五種版本的廣告圖片,但設計資源有限,只能選兩個。
這不是因為設計師不夠專業,而是因為時間和資源有限。每個人都知道探索多種方向的價值——你不知道哪個方向最好,直到你試過。但現實是,你只能選幾個深入,其他的就放棄了。
Claude Design 想要解決的正是這個問題。
它能做什麼
Claude Design 給設計師更多的探索空間,也給其他所有人一個產出視覺作品的方式。描述你需要的東西,Claude 會建構第一個版本。從那裡,你可以透過對話、行內註解、直接編輯或自訂滑桿來精煉,直到滿意為止。當獲得存取權時,Claude 還可以自動將你團隊的設計系統套用到每個專案,讓輸出與公司的其他設計保持一致。
根據 Anthropic 的說明,團隊已經使用 Claude Design 完成了多種類型的工作。
真實原型:設計師的超級加速器
設計師可以將靜態 mockup 轉換為容易分享的互動式原型,用來收集回饋和進行使用者測試,不需要程式碼審查或 PR。
這個聽起來很抽象,但實際場景很具體。想像你是一名 UX 設計師,你有一個新功能的想法,需要驗證它的可行性。傳統流程是:在 Figma 畫一個靜態畫面,截圖,傳到群組,等待回饋,修改,再傳,再回饋。整個過程可能需要幾天。
用 Claude Design,你可以說:「幫我建立一個登入流程的原型,包含三個步驟,使用我們的品牌顏色。」Claude 會在幾分鐘內產生一個可互動的原型。你點進去可以實際操作,分享連結給同事,他們也能直接使用。收集回饋後,你說:「第三步的按鈕移到右邊」,幾秒鐘後就改好了。
Brilliant 的經驗很能說明這一點。他們的複雜互動和動畫歷史難以原型化——這些在其他工具需要 20 個以上的 prompt 才能重建,在 Claude Design 只需要 2 個。這不只是速度的提升,更是工作流程的變革。
產品線框圖和 mockup:產品經理的好夥伴
產品經理可以草擬功能流程,交給 Claude Code 實作,或與設計師分享進一步精煉。
在台灣的產品團隊中,產品經理和設計師之間的溝通常常是瓶頸。產品經理用文字描述需求,設計師理解後繪製,再回來確認。來回幾次,時間就花掉了。
現在,產品經理可以先說:「幫我建立一個訂單結算流程的線框圖,包含購物車、付款方式選擇、運送資訊、確認頁面。」Claude 產出後,產品經理可以直接在畫面上標註:「這裡應該有折扣碼欄位」、「付款方式應該排成橫列」。調整完畢後,再交給設計師精煉視覺。
更重要的是,因為 Claude Design 能直接交割給 Claude Code,產品經理甚至可以要求:「幫我把這個線框圖變成實際的程式碼,使用 React 和 Tailwind CSS。」這是從想法到可執行程式碼的最短路徑。
設計探索:打破創作的限制
設計師可以快速創造廣泛的方向進行探索。
這是 Claude Design 最令人興奮的功能之一。設計師在探索階段常常受限於時間——你知道有很多種可能的設計方向,但你只能選擇其中幾個深入,因為每一個都需要花時間繪製。
現在,你可以說:「幫我創造十種不同風格的首頁設計,從極簡到充滿活力,都用我們的品牌色。」Claude 會在短時間內產生十個版本。你可以快速瀏覽,挑出最有前景的幾個,再深入精煉。
這對於 A/B 測試特別有用。你可以快速創造五種版本的 landing page,進行小規模測試,看看哪個轉化率最好,再決定深入哪個方向。
簡報和投影片:創始人的救星
創始人和業務執行長可以從粗略的大綱到完整的品牌調性投影片,只需要幾分鐘,然後匯出為 PPTX 或傳送到 Canva。
每個創始人都經歷過這個場景:你明天要向投資人 pitch,今天還沒有簡報。或者你需要為一個重要的客戶準備一份產品介紹,但你沒有時間細緻設計。
Claude Design 讓這個流程變得簡單。你提供一個大綱,說:「幫我創造一個 10 頁的投影片,介紹我們的 SaaS 產品,包含問題、解決方案、功能、競品比較、定價、團隊。」Claude 會在幾分鐘內產生一個完整的投影片,自動使用你公司的設計系統——顏色、字體、logo 都符合品牌調性。
你可以在裡面直接編輯文字,調整佈局,然後匯出為 PPTX 或傳送到 Canva 做最後潤飾。原本需要幾天的簡報製作,現在壓縮到幾小時。
行銷素材:行銷團隊的加速器
行銷人員可以創造 landing page、社群媒體素材和活動視覺,然後找設計師進行最後潤飾。
行銷需要速度。你想要在產品發布的同時推出多種版本的社群圖片,測試哪個效果最好;你想要針對不同的受眾調整 landing page 的視覺風格;你想要快速產生活動的視覺素材。
在傳統流程下,這些都需要設計團隊的參與。但設計資源有限,行銷活動常常卡在設計排程上。
用 Claude Design,行銷人員可以快速創造多個版本,進行小規模測試,確定方向後再找設計師做最後的品質把關。這不是在取代設計師,而是在讓行銷團隊有更多的自主性和速度。
前沿設計:技術原型的實驗場
任何人都可以建構具備程式碼能力的原型,包含語音、影片、著色器、3D 和內建 AI。
這是一個特別有趣的功能。大多數設計工具只能處理靜態的設計元素,但 Claude Design 能夠處理程式碼驅動的互動。
你可以要求:「幫我建立一個語音控制的原型,使用者可以說出指令來控制介面。」Claude 會建立一個具備語音識別和回應的原型。你可以在裡面實際測試語音控制的功能,不需要寫任何程式碼。
或者你可以說:「幫我建立一個 3D 物件互動的原型,使用者可以旋轉、縮放物體。」Claude 會使用 WebGL 和著色器建立一個 3D 原型。
這對於探索性的技術特別有用。你不需要先學習 React Three Fiber 或其他技術框架,就能快速建立和測試想法。
自然流程的設計工作
Claude Design 的核心設計理念是「自然創作流程」。
你的品牌,內建其中
在 onboarding 期間,Claude 會透過讀取你的程式碼庫和設計檔案,為你的團隊建構一個設計系統。之後的每個專案都會自動使用你的顏色、字體和元件。你可以隨時間精煉這個系統,團隊也可以維護多個。
這聽起來很抽象,實際上是什麼意思?
假設你的公司有一套設計系統:主色是 #2563EB(一種藍色),次色是 #64748B(一種灰藍色),標題用 Inter 字體,內文用 Roboto 字體,按鈕的圓角是 8px,卡片陰影是 0 4px 6px -1px rgba(0, 0, 0, 0.1)。
在傳統的設計工具中,你需要手動設置每一個元素的顏色、字體、間距。這很花時間,而且容易出錯。
用 Claude Design,你只需要在 onboarding 時提供這些資訊。之後,你說「幫我建立一個按鈕」,Claude 自動會使用你的主色、Inter 字體、8px 圓角。你說「幫我建立一個卡片」,Claude 自動會使用次色、Roboto 字體、陰影。
這不只是省時間,更重要的是確保一致性。所有設計都會自然符合你的品牌調性,不需要每次都手動檢查。
從任何地方匯入
從文字 prompt 開始,上傳圖片和文件(DOCX、PPTX、XLSX),或讓 Claude 參考你的程式碼庫。你也可以使用網頁擷取工具,直接從你的網站抓取元素,讓原型看裡面像真實產品。
這個功能的靈活性讓許多場景變得可能。
如果你已經有一份 PPTX 檔案,不需要重新設計。上傳檔案,Claude 會理解內容結構,然後你可以說:「幫我重新設計這份簡報,使用我們的品牌風格。」
如果你有一份競品的網頁截圖,你可以說:「幫我分析這個設計,然後創造一個我們的版本,保留核心佈局但使用我們的設計系統。」
如果你的產品有現有的程式碼,你可以讓 Claude 參考程式碼庫,確保新設計的元件名稱、顏色變數、間距設定與現有程式碼一致。
網頁擷取工具特別有用。你可以說:「幫我從我們網站的 header 抓取導航列的設計,然後建立一個新的 header。」Claude 會直接從網站抓取實際的 HTML 和 CSS,然後讓你修改。
精細控制的精煉
在特定元素上行內註解,直接編輯文字,或使用調整旋鈕來即時微調間距、顏色和佈局。然後要求 Claude 將你的變更套用到整個設計。
這是 Claude Design 的另一個強項——它不是「一次生成,定案」,而是「持續對話,迭代精煉」。
行內註解的流程很自然。你點擊一個按鈕,在旁邊輸入「這個文字應該改為『立即開始』而不是『開始使用』」。Claude 幾秒鐘後就改好了。
直接編輯文字也很直覺。你點擊標題,直接在裡面打字,就像在 Google Docs 一樣。
調整旋鈕讓微調變得容易。你可以拖動間距滑桿,即時看到間距變大變小的效果;拖動顏色滑桿,即時看到顏色變化的影響。
最有用的是全域套用。你調整一個按鈕的圓角,然後說:「把所有按鈕都改成這樣。」Claude 會自動找到所有按鈕,應用相同的設定。你不需要手動一個個修改。
協作
設計具有組織層級的分享。你可以將文件保持私密,分享讓組織內任何人都能透過連結查看,或授予編輯權限讓同事可以修改設計並在群組對話中與 Claude 一起互動。
這個功能讓設計從「個人創作」變成「團隊協作」。
權限設計很靈活。你可以在早期探索階段保持私密,只有你能看見;在收集回饋階段開放只讀權限,讓任何人都能查看並留言;在精煉階段開放編輯權限,讓團隊成員能一起修改設計。
群組對話特別有趣。多個人可以在同一個設計文件中與 Claude 對話。你說:「把標題改大點」,同事同時說:「把這個圖片換成另一張」。Claude 會同時處理多個要求,讓協作變得更流暢。
匯出到任何地方
以組織內部的 URL 分享設計,儲存為資料夾,或匯出到 Canva、PDF、PPTX 或獨立的 HTML 檔案。
Claude Design 不是一個封閉的工具。你可以隨時匯出設計,整合到你現有的工作流程。
如果你的設計團隊使用 Figma,你可以匯出為 Figma 相容格式,讓設計師在 Figma 中繼續精煉。
如果你的行銷團隊使用 Canva,你可以直接傳送到 Canva,讓行銷人員在 Canva 中進行最後調整。
如果你的客戶需要 PDF 簡報,你可以匯出為 PDF,直接發送。
如果你需要一個可獨立運行的原型,你可以匯出為 HTML,任何人都能在瀏覽器中打開。
交給 Claude Code
當設計準備好建構時,Claude 會將所有東西打包成一個交割包,你只需要一個指令就能傳給 Claude Code。
這是 Claude Design 最具革命性的功能之一。
傳統的設計到開發流程是:設計師在 Figma 完成設計,工程師在 Figma 查看設計,然後手動將設計轉換成程式碼。這個過程容易出錯——工程師可能誤解設計意圖,可能忽略某些細節,可能因為技術限制而妥協設計。
用 Claude Design,你可以說:「把這個設計交割給 Claude Code,使用 React 和 Tailwind CSS。」Claude 會分析設計,理解設計意圖,然後產生完整的程式碼。不只是 HTML 和 CSS,還包含狀態管理、事件處理、資料流動的邏輯。
Brilliant 表示:「在 Claude Code 的交割中加入設計意圖,讓從原型到生產的跳躍變得無縫。」這不是技術細節,而是工作流程的變革。
Canva 的深度整合
在未來幾週,Anthropic 會讓整合 Claude Design 變得更容易,讓你能夠連接到更多團隊已經使用的工具。
Canva 是第一個公開的合作夥伴。Canva 的合作團隊表示:
「我們很高興能與 Claude 擴大合作,讓人們能夠將 Claude Design 的想法和草稿無縫帶入 Canva,在那裡它們立刻變成完全可編輯和協作的設計,準備好精煉、分享和發布。」
這個整合的意義很明顯:Claude Design 擅長快速創作和探索,Canva 擅長協作和發布。兩者結合,覆蓋了從想法到發布的整個流程。
未來,我們可能會看到與 Figma、Notion、Linear、GitHub 等更多工具的整合。這會讓 Claude Design 成為一個真正的「設計樞紐」,連接整個產品開發生態系。
使用者的實際體驗
Anthropic 分享了幾個使用者的真實回饋,這些回饋讓我們更了解 Claude Design 在實際工作中的價值。
Brilliant:複雜互動的突破
Brilliant 這家複雜互動和動畫歷史難以原型化的公司,表示:
「Claude Design 將靜態設計轉換為互動式原型,對我們來說是一個巨大的改變。我們最複雜的頁面,在其他工具需要 20 個以上的 prompt 才能重建,在 Claude Design 只需要 2 個。在 Claude Code 的交割中加入設計意圖,讓從原型到生產的跳躍變得無縫。」
這個對比很震撼。20 個 prompt 對比 2 個,不只是效率的問題,更是工具能力層次的差異。Claude Design 能夠理解設計意圖,能夠理解上下文,能夠執行高層次的指令,這是其他工具無法做到的。
匿名團隊:速度和品質的雙重提升
另一個使用者的回饋:
「Claude Design 讓我們團隊的原型製作速度大幅提升,能夠在對話中進行即時設計。我們已經從一個粗略的想法,變成在任何人離開房間之前就能運作的原型,而且輸出始終符合我們的品牌和設計指南。以前需要一週來回的簡報、mockup 和審查輪次,現在一個對話中就發生了。」
「一週對比一個對話」——這是工作流程的根本性變革。以前,設計是一個線性的過程:需求 → 簡報 → mockup → 審查 → 修改 → 定稿 → 開發。每個階段都需要時間,每次迭代都需要溝通。
現在,設計變成一個對話。你在對話中提出想法,Claude 立即產生設計;你提出回饋,Claude 立即調整;你提出新想法,Claude 立即探索新方向。整個迭代循環壓縮到一個 session 之內完成。
更重要的是,「輸出始終符合我們的品牌和設計指南」。這不是靠人工檢查,而是靠 Claude 在 onboarding 時學習了設計系統,然後在每次生成時自動套用。
如何開始使用
Claude Design 目前開放給 Claude Pro、Max、Team 和 Enterprise 訂閱者。存取權包含在你的方案中,使用你的訂閱額度,你也可以透過啟用額外使用來繼續超過這些額度。
對於 Enterprise 組織,Claude Design 預設關閉。管理員可以在組織設定中啟用它。
開始設計請前往 claude.ai/design。
這對設計工作流程的意義
過去,設計流程通常是線性的:需求 → 簡報 → mockup → 審查 → 修改 → 定稿 → 開發。每個階段都可能需要幾天甚至幾週。
現在,Claude Design 將這個流程壓縮成一個對話。你可以在一個 session 中完成探索、設計、審查、修改和準備開發。更重要的是,因為 Claude 理解你整個設計系統,輸出自然符合品牌調性。
這對台灣的新創公司和中小企業特別重要。
台灣的新創公司常常面臨資源限制。你可能有一個很棒的團隊,但設計資源有限。你可能需要與其他部門競爭設計師的時間,可能需要等幾週才能排到設計師的檔期。
Claude Design 讓非設計師也能快速產出高品質的設計。創始人可以在一個下午內完成從想法到可原型的過程,產品經理可以在一個會議中完成從需求到線框圖的轉換,行銷團隊可以在一天內測試多個版本的廣告創意。
這不是在取代設計師——而是在移除設計流程中的摩擦,讓每個人都能更快地把想法變成看得見的東西。
與其他工具的差異
市面上已經有許多設計工具和 AI 生成工具。Figma 讓協作變得簡單,Midjourney 和 DALL-E 能生成漂亮的圖片,Canva 讓非專業人士也能快速設計。
Claude Design 的差異在於它是「對話式設計」——你不只是在告訴它「生成一張圖片」,而是在與它協作建立一個完整的設計。它能夠理解上下文、記住你的設計系統、理解你想要達成的目標。
更重要的是,它能夠與 Claude Code 無縫連結。設計完成後,交割到開發不需要切換工具,不需要在 Figma 與 VS Code 之間複製貼上——一個指令,Claude 就能準備好所有需要的程式碼。
這讓 Claude Design 不只是一個設計工具,而是連接設計和開發的橋樑。
實務建議
如果你決定嘗試 Claude Design,建議從這裡開始。
準備你的設計系統
收集品牌顏色、字體、logo、常用元件。讓 Claude 在 onboarding 時就有足夠的上下文。
這個步驟很關鍵。如果你的設計系統不完整,Claude 只能猜測你的品牌風格,輸出可能不符合你的期待。
建議準備:
– 品牌色板(主色、次色、強調色、背景色、文字色)
– 字體系統(標題用什麼字體、內文用什麼字體、字級規則)
– 間距系統(標準間距、元件間距、區塊間距)
– 元件庫(按鈕樣式、輸入框樣式、卡片樣式)
– logo 檔案(不同尺寸、不同顏色)
從小專案開始
不要第一個專案就試圖建立一個完整的產品原型。從簡單的 landing page 或單頁文宣開始,熟悉工具的能力與限制。
這聽起來很基本,但很多人會因為興奮而直接跳到複雜的專案。這會導致幾個問題:
– 你會花很多時間調整細節,反而忽略了解工具的核心能力
– 你會遇到超出工具能力的場景,容易覺得失望
– 你會累積太多變數,難以判斷是工具問題還是自己的使用問題
建議從這些場景開始:
– 簡單的 landing page(標題、副標、按鈕、三個特色區塊)
– 簡單的線框圖(五個步驟的流程)
– 簡單的投影片(五頁的產品介紹)
保持對話
Claude Design 的強項在於對話。不要期待一個 prompt 就能得到完美的結果——像與真人設計師溝通一樣,給它回饋,持續迭代。
這是使用 Claude Design 最重要也最容易忽略的技巧。
很多人因為使用過其他 AI 生成工具,會期待「給一個 prompt,得到完美結果」。但 Claude Design 不是這樣的工具。它的強項在於持續對話、累積上下文、迭代精煉。
建議的使用流程:
1. 用一個簡單的 prompt 得到第一個版本(「幫我建立一個 landing page」)
2. 給出整體回饋(「風格太複雜了,希望更簡潔」)
3. 給出具體回饋(「標題字級太大,改小點」「這個按鈕顏色不對,用主色」)
4. 要求全域套用(「把所有按鈕都改成這樣」)
5. 要求探索新方向(「幫我創造三種不同風格的版本」)
善用匯出功能
完成設計後,記得匯出到你現有的工作流程——可能是 Canva 進行最後潤飾,可能是 PDF 進行內部審查,可能是 HTML 進行用戶測試。
Claude Design 不是一個封閉的生態。你應該把它視為你工作流程的一部分,而不是替代所有工具。
常見的匯出場景:
– 匯出到 Canva:讓設計師進行最後的視覺精煉
– 匯出到 PDF:準備內部審查或客戶簡報
– 匯出到 HTML:進行用戶測試或技術驗證
– 匯出到 Claude Code:開始實際開發
連結 Claude Code
如果你的目標是開發產品,不要忘記使用 Claude Code 的交割功能。這是讓設計變成真實產品的最快方式。
這是 Claude Design 最強大的功能之一,但很多人可能會忽略。
建議在設計接近定稿時,說:「把這個設計交割給 Claude Code,使用 [你的技術棧]」。Claude 會產生完整的程式碼,不只是 HTML 和 CSS,還包含狀態管理、事件處理、資料流動的邏輯。
然後,你可以要求 Claude Code:「幫我加入這個功能的邏輯」「幫我連接到我們的 API」「幫我加入錯誤處理」。在幾分鐘內,你就能從設計到實際可執行的程式碼。
設計工具的演進
從紙筆到 Photoshop,從 Sketch 到 Figma,設計工具一直在演進。每個時代都降低了設計的門檻,讓更多人能夠參與創作。
Claude Design 代表了下一個階段:AI 不再只是生成圖片,而是理解設計上下文、融入工作流程、連結整個開發過程。
這不是設計工具的終點,而是一個新的起點。
未來幾年,我們會看到設計工具與 AI 的深度融合。設計工具會變得更聰明、更上下文感知、更整合工作流程。AI 會從「生成工具」變成「設計協作夥伴」。
這不是在降低設計的門檻,而是在移除設計流程中的摩擦。真正有創意的設計師會用這些工具放大自己的創意,真正有想法的人會用這些工具快速實現自己的構思。
對台灣團隊的啟示
對台灣的新創團隊和中小企業來說,這意味著什麼?
如果你是新創創始人,以前你可能需要外包設計、花時間溝通需求、等待多個回合的修改。現在,你可以在一個下午內完成從想法到可原型的過程。
如果你是產品經理,你不再需要先寫一份冗長的 PRD,然後等設計師有時間才能看到東西。你可以先用 Claude Design 快速探索方向,有清晰的視覺後再與設計師深入合作。
如果你是行銷人員,你可以快速創造多個版本的社群素材,然後讓設計師做最後的品質把關,而不是所有創作都卡在設計排程上。
如果你是設計師,你可以用 Claude Design 快速探索更多方向,然後將時間花在最有價值的精煉工作上,而不是在重複的繪製上。
但它不是萬能的
雖然 Claude Design 很強大,但它不是在完全取代設計師。複雜的互動設計、精細的微動畫、高度客製化的視覺語彙——這些仍然需要專業的設計眼光。
它更像是一個「設計副駕駛」:幫你快速啟動、探索方向、建立框架,然後讓專業人員接手進行深度精煉。
未來的可能性
Anthropic 表示會在未來幾週讓整合更容易。這意味著我們可能會看到:
- 與 Figma 的深度整合,讓 Claude Design 的輸出能直接在 Figma 中編輯
- 與 Notion、Linear 當產品管理工具的連結,讓設計與需求直接對接
- 與 GitHub 的更緊密合作,讓設計變更與程式碼變更同步
這些整合會讓整個產品開發流程變得更流暢。
你已經有了一個想法。現在,把它變成看得見的東西,需要的不再是學會複雜的設計軟體,而是一個對話。