跳到正文
IFAI

AI工具

Canva 接入 Claude Design:AI 产出的草稿与代码支持直接拖拽编辑

首次发布 传播指数 54

Canva 宣布接入 Anthropic 的 Claude Design,并上线 HTML 导入功能。用户在 Claude 中生成的草稿与交互式代码可直接导入 Canva,无需反复重写代码,通过拖拽就能改布局、换颜色。这意味着 AI 产出的原型终于能无缝进入团队设计流。

Canva 接入 Claude Design:AI 产出的草稿与代码支持直接拖拽编辑
图:canva.com

用 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)

  1. [1]
    canva.com(在新标签页打开)原文canva.com
  2. [2]
    anthropic.com(在新标签页打开)报道anthropic.com

每日 AI 内容精选