Canva 接入 Claude Design:AI 產出的草稿與程式碼支援直接拖拽編輯
Canva 宣佈接入 Anthropic 的 Claude Design,並上線 HTML 匯入功能。使用者在 Claude 中生成的草稿與互動式程式碼可直接匯入 Canva,無需反覆重寫程式碼,通過拖拽就能改佈局、換顏色。這意味著 AI 產出的原型終於能無縫進入團隊設計流。

用 AI 寫程式碼做一個網頁元件或者互動圖表,最讓人崩潰的瞬間是什麼?往往不是寫不出來,而是寫出來之後你想把某個按鈕往右挪兩畫素,或者換個底色,結果 AI 順手把整段程式碼全重寫了一遍,原本好好的功能直接崩了。
Canva 和 Anthropic 聯手給這個痛點交了一份解法。Anthropic Labs 正式上線基於 Claude Opus 4.7 的全新實驗產品 Claude Design,而 Canva 則宣佈全面打通 Claude Design:你在 Claude 裡生成的各種視覺草稿甚至 HTML 互動程式碼,現在能一鍵丟進 Canva,用滑鼠拖拽著改。
告別「重寫程式碼」,HTML 變成可拖拽圖層
這次更新最抓人的細節,是 Canva 引入了 HTML 匯入功能。過去在 Claude 裡面生成的 Artifacts 和互動程式碼,往往被死死鎖在程式碼框裡。你想改個配色,就得重新對 AI 發號施令,祈禱它別改壞別的地方。
現在 Canva 相當於把這層程式碼直接扒開,轉成了視覺化的圖層。你在 Claude 裡生成的網頁小部件、落地頁或者動態圖表,傳進 Canva 後,換顏色、挪位置、調文字全靠滑鼠拖拽,完全不需要重新生成程式碼。
改完之後,這些內容也不是死在那裡的。你可以把它們直接塞進 Canva 簡報,或者掛上 Canva Form 收集表單,甚至用 Canva Websites 繫結獨立域名,一鍵釋出成一個真正的網站。
從畫草稿到調元件,Claude 做了個設計專用介面
這套連招能跑通,還得看 Anthropic 剛端出來的 Claude Design。這個工具目前向 Claude Pro、Max、Team 和企業訂閱使用者開放預覽測試,底層跑的是他們家最強的多模態模型 Claude Opus 4.7。
Claude Design 不只是給聊天框套個殼。它會在你接入時掃描你的程式碼庫和設計檔案,自動提取出一套品牌設計系統。不僅如此,Claude 還會自己生成調節滑塊,讓你直接拖動控制間距、顏色和排版,甚至支援像 Figma 一樣做行內批註和協同編輯。
當你做好了一套介面原型,既可以匯出成 PDF、PPTX 或獨立 HTML,也能打包成交付檔案一鍵丟給 Claude Code 去落地寫業務邏輯,或者直接送進 Canva 去排版。
兩家公司的合作其實已經磨合了兩年。從去年 7 月上線的 Canva MCP 外掛,到今年 1 月的品牌工具整合,再到昨天 Canva 在 Canva Create 剛剛釋出的 Canva AI 2.0,雙方的意圖很明確:Claude 負責當最聰明的發散大腦,Canva 則來當最後的落地操作檯。
為什麼重要
生成式設計最大的頑疾,一直是從「看個大概」到「真正能用」之間那條巨大的鴻溝。AI 畫個驚豔的概念圖只要三秒鐘,但交給團隊協作落地,改兩行字、換個品牌色,往往要花上半天,甚至逼得人重寫一遍。
Canva 和 Anthropic 這一步走得相當聰明。Anthropic 沒有試圖在 Claude 裡從頭造一個複雜的線上排版軟體,而是專心把 Opus 4.7 的多模態理解和程式碼生成打透;Canva 也沒有死磕最前沿的大模型研發,而是守好自己的陣地,把自己做成 AI 時代網際網路設計的「底座水管」。
對普通創作者和非設計背景的運營、產品經理來說,這套工作流非常值得第一時間上手。你不再需要盯著生澀的程式碼或者死板的圖片發愁,完全可以先在 Claude 裡用大白話把互動邏輯和結構立起來,再丟給 Canva 拖拖拽拽微調細節。唯一需要權衡的,是你的團隊是否願意為 Claude 的高階訂閱買單,以及這類解析後的 HTML 在面對極其複雜的動態互動時,還原度究竟還能撐住幾成。
來源 (2)
- canva.com(在新分頁開啟)原文canva.com
- anthropic.com(在新分頁開啟)報導anthropic.com