Anthropic 在 6 月 18 日发布了 Claude Design 的重大版本更新。这次更新直指设计与开发协作中最痛的环节——设计稿到代码的有损传递。如果你是用 Claude Code 写代码、用 Claude Design 出界面的开发者或设计师，这次更新能帮你省掉大量来回沟通的时间。

四个核心更新

设计系统一键导入

Claude Design 现在支持从 GitHub 仓库一键导入设计系统（颜色、字体、组件库、间距规则）。导入后，每次生成设计稿时，Claude 都会拿你的真实组件去搭，搭完自己审，不合规的地方自己改好再给你看。

Anthropic 设计师 Nate Parrott 在演示中展示了这个流程：Claude 先读取设计规范两遍，然后精修输出六遍，总共跑了八轮自查，才敢把暗色版本的设计稿呈现出来。

/design-sync 和 /design 双向命令

这是本次更新最关键的部分，两条命令打通了 Claude Design 和 Claude Code：

• /design-sync：在 Claude Code 里执行，会把代码仓库中的设计系统（颜色、字体、组件库、间距规则）全部拉进 Claude Design。
• /design：反向操作，在 Claude Code 终端里一行指令就能创建设计项目、编辑已有设计、同步整个设计文件夹，不需要开浏览器或切窗口。

以前设计师在一个工具里做完，工程师在另一个工具里重新搭。现在设计在 Claude Design 里做，做完一个动作就能推进 Claude Code 写代码。

9 大平台一键导出

导出目的地一口气扩展到了 9 个：

• Adobe
• Canva
• Vercel
• Replit
• Miro
• Gamma
• Lovable
• Wix
• Base44

覆盖了从设计协作到代码部署的完整链路。

画布编辑重做

拖拽、缩放、对齐可以直接在画面上操作，不需要每改一个像素都烧一轮模型调用。生成出来的不是改不动的效果图，而是活的组件——可以像用 Figma 一样拖动，也可以像写代码一样修改。

谁适合用

• 前端开发者：配合 Claude Code，设计稿直接变成可维护的组件代码
• 独立开发者/全栈：一个人搞定从设计到部署的全流程
• 产品经理：快速产出高保真原型，直接导入 Vercel 或 Replit 验证
• 设计师：用品牌规范约束 AI 生成，减少返工

竞争格局

这次更新让设计工具赛道的竞争更加激烈。2026 年上半年，Claude Design、Figma AI、Google Stitch、Vercel v0、Lovable 五方混战。Claude Design 的差异化优势在于它背靠 Claude Code，拿下了从"想法"到"上线"的完整链条。

---

原文链接：今天起，Claude Design要把设计师和程序员变成同一种人了