# Claude Code 与 Claude Design 实现双向同步

- 来源：小互 (@xiaohu)
- 发布时间：2026-06-18 08:32
- AIHOT 分数：64
- AIHOT 链接：https://aihot.virxact.com/items/cmqisdy9u03wgsl5w8jgqv10y
- 原文链接：https://x.com/xiaohu/status/2067405145558937664

## AI 摘要

Claude Code 和 Claude Design 打通双向同步：运行 `/design-sync` 可将设计拉取到代码库并基于真实组件构建，使用 `/design` 推回 Claude Design 继续画布编辑。编辑器新增拖拽、缩放、对齐元素功能，可直接修改字体、颜色等细节。导出格式扩展至 PDF、PPTX、Canva、HTML、Claude Code。用户可通过指向 GitHub 仓库（读取颜色变量、间距常量、组件样式）、上传 Figma 设计文件或品牌规范文档三种方式，让 Claude 读取设计系统源文件。生成设计时调用真实组件，并先自查输出是否偏离设计系统，自动修正。

## 正文

Claude Code 和 Claude Design 打通了

现在支持双向同步了

运行 /design-sync 可以将你的设计直接拉取到你的代码库中，并基于您的真实组件进行构建，

同时也可以使用/design 将你构建的内容推回到 Claude Design 并继续在画布上编辑…

同时编辑器新增了直接在画布上拖拽、缩放、对齐元素的功能，可以直接改字体、颜色这些细节，更接近传统设计工具的操作方式，不再只能靠对话调整。

导出格式：PDF、PPTX、Canva、HTML、Claude Code。这次扩展了更多第三方工具的连接。

同时这次更新让你直接把设计系统的源文件喂给 Claude Design。

让Claude真正"读懂"你的设计系统

三种方式：

- 指向你的 GitHub 仓库，Claude 直接读代码里的组件定义（颜色变量、间距常量、组件样式）
- 上传 Figma 之类的设计文件
- 直接上传品牌规范文档

Claude 读完之后，生成设计时直接调用你的真实组件，不是自己凭理解去"模仿"。

而且在把结果展示给你之前，它会先跑一遍自查，对照你的设计系统检查自己的输出有没有偏离，发现不对的地方自动修正。