# Claude Design 与 Claude Code 联动示例：设计变更自动改代码

- 来源：宝玉 (@dotey)
- 发布时间：2026-06-14 07:32
- AIHOT 分数：74
- AIHOT 链接：https://aihot.virxact.com/items/cmqd0m73f03mhsltt1jwsp12h
- 原文链接：https://x.com/dotey/status/2065940342264770589

## AI 摘要

宝玉分享了 Claude Design 与 Claude Code 联动的实际案例：在 Claude Design 上修改字幕编辑器 UI 设计稿后，导出 zip 并用 git diff 查看变更，然后通过一句提示让 Claude Code 参考设计目录变更自动修改 Swift 代码，全程只需手动同步设计文件。他解释为何 Codex 没有类似产品：Claude Design 依赖 Claude Opus 4.8 模型同时具备 UI/UX 设计和系统架构设计能力，能一次性交付可交互原型（含数据结构、状态管理、交互逻辑）；而 GPT-5.5 还做不到。Harness 层可复制，模型层才是关键门槛。

## 正文

举一个具体的用 Claude Design 更新设计和代码的例子

我有一个视频字幕编辑器工具，是 Claude Design 做的设计，之前标题文字和下面的信息是放在一行，标题一长就放不下，于是我就让它变成两行。

图1 是我在设计稿上做的修改，修改好了后导出下载 zip 文件，放到项目中，用 git diff 很容易看到做了哪些变更（图2）

然后一句简单的提示给 Claude Code：
> 参考设计稿 design 目录下的相关变更，对 UI 进行变更

Claude 自己通过 git diff 去分析变更，然后找出所有设计稿修改了的位置，自己帮我修改了相应的 Swift 代码，任务完成！（图4是修改后的效果）

全程我主要是在 Claude Design 上修改，然后需要手工去同步一下。

### 引用推文

> 宝玉：为啥 Codex 还不推出类似 Codex Design 的产品? Anthropic 最近推出了 Claude Design,是我除了编程之外用得最多的 Agent,也推荐过很多次。效果真的好:你用一句话描述想要的 App,它直接给你生成一个可交互的原型,点哪哪都有反应,不仔细看还以为在操作真实的 App。 有网友问...