Claude Design 和 Code 打通了：设计稿直接变代码，代码也能反哺设计

Anthropic 今天放了一个大招。Claude Design 和 Claude Code 正式双向联动了。

以前这两个东西是各干各的。你在 Claude Design 里画界面，画完了截图给 Claude Code，让它照着写。中间隔着一层人。现在不需要了。设计稿能直接拉进编码流程，代码改了也能反哺回设计。

Claude 官方原话是：Claude Design 和 Claude Code 现在两个方向都能跑。你可以从设计开始，交给 Code 去构建。也可以从 Code 开始，从终端同步设计项目。

具体怎么用

两个新命令。

/design 用在 Claude Code 终端里。你可以直接在命令行创建、编辑、同步设计项目，不用跳出编码工作流。

/design-sync 也是在 Claude Code 里用。它能把本地代码库的设计系统拉进 Claude Design。这样 Claude 画图的时候，用的是你真实的组件库，不是自己瞎编的。

这是最关键的一点。以前 Claude Design 的毛病就是它画的东西好看，但跟你的项目对不上。它自己有一套审美，但那套审美不一定是你们公司的设计规范。现在它能导入你 GitHub 仓库里的设计系统，用你的真实组件来画。画完还会自己检查输出是不是符合你的设计系统，不符合就自己改。

以前为什么不够用

Claude Design 四月份上线的时候，一周就拿了 100 万用户。但问题很快就暴露了。

PCWorld 有个测评人，25 分钟烧掉了 80% 的周额度，只出了 3 个网页变体。token 消耗太猛了，Pro 用户根本扛不住。

这次更新也修了这个问题。Claude Design 现在跟 chat、Claude Cowork、Claude Code 共享额度池，不再单独算。同时每轮平均 token 消耗也降了。还加了拖拽编辑器，你可以直接在画布上拖元素，不用每次都让模型重新生成一遍。

设计到代码这个老问题

设计到代码的交接一直是个痛点。不是格式不够好的问题，是两边的人在解读同一个意图时会有偏差。设计师画的东西，前端理解的可能差十万八千里。

Anthropic 的思路是：如果设计和代码是同一个 AI 系统在操作，它不需要"解读"对方的意图，它只是继续干。设计稿和代码在同一个脑子里，不存在交接损耗。

这个逻辑我觉得是对的。以前 Figma to Code 那些工具，本质上还是在"翻译"。现在 Claude 是自己设计自己写，中间没有翻译层。

导出也补齐了

Claude Design 现在能导出到 Adobe、Canva、Gamma、Miro、Replit、Vercel、Wix、Lovable、Base44，还有 PDF 和 PowerPoint。

定位很清楚：Claude Design 是起点，不是终点。你在 Claude 里把初稿做出来，然后扔到 Canva 去打磨，扔到 Vercel 去部署。

对开发者意味着什么

如果你是前端或者全栈，这更新直接砍短了你的工作流。以前设计稿到代码要手动对着画。现在 Claude 自己双向同步。你甚至可以在终端里敲 /design 直接改设计，浏览器都不用开。

独立开发者可能更赚。一个人干设计和代码两份活，以前还要纠结要不要学 Figma。现在 Claude Design 画布支持拖拽了，操作逻辑跟 Figma 差不多。

当然也有代价。token 消耗虽然降了，但生成式设计本质上就费 token。Pro 用户重度用的话额度可能还是紧。Max 和企业用户基本不用担心。

Anthropic 这步棋意图很明确。AI 编程从"写代码"延伸到"设计加代码"全链路。Claude Code 已经是终端编程的头部工具。现在 Claude Design 补上了前端设计的缺口。两个一打通，Claude 有了从设计到部署的完整链路。

关注我,及时了解更多 AI 资讯和 AI 知识。

大小项目开发和方案咨询,都可以私信。