用好 Claude Design 的一些经验：

1. 加上 Design System 可以有效避免设计 AI 味

比如我偏好用 Adobe Spectrum 2 Design System http://t.cn/AXXwdR7U

设置为默认设计系统，后续就会默认使用这个设计系统，你就可以把重点放在界面布局和交互上。

2. 不要指望一次性做个完美的版本

一开始少做一点功能，把架子搭好，然后通过左侧的聊天框，一点点调整，一点点添加功能

3. 多用 Markup 功能去局部修改

Markup 功能可以框选特定的位置，然后评论，缺点是不能添加附件、截图

Edit 功能是给你手动调整的，选中元素左侧可以修改树形，比如调整一下字体大小

4. 注意上下文管理
左侧的对话框不是无限聊天的，也要做上下文管理，当新的任务就创建新的会话

5. 用 Tweaks 去尝试不同风格、导航
Tweaks 是一个设置面板，你可以通过它来调整应用属性，比如theme、布局、加载状态等等

另外如果你界面多，也可以通过 Tweak 添加导航，快速进入相应的界面而不必一步步点击

6. 要设计好也要抽卡
LLM 有随机性，设计也是如此，跟出图一样，得多试几次 http://t.cn/AXa7Vj7q

7. 先线框草图确定好布局和交互，再高精度交互
如果你还没有想清楚交互、布局这些粗粒度的，可以先选择线框草图，反复调整布局、交互。

满意了后可以新建一个高进度交互原型项目继续，有几种方式可以把草图给它
1). 直接把之前项目链接发给它作为基础，它可以基于草图实现

2). 让 Claude Design 基于已有设计写一份详细的 PRD （需求说明文档）
这其实是个非常好的做法，它写文档的水平很高，写出来的结果很详尽，主要是写完了你可以再看看，人工再补充一些文字，比在 Claude Design 上调整简单方便多了。

文档调整完再作为附件发给 Claude Design 就可以二次创作了。

8. PRD 和线框图原型最好搭配着来。
PRD是文本的，AI友好，好管理版本，但无法直观看到啥样子
线框图原型有交互，可以直观看到布局和交互，可以互动，调整起来也方便

通常我的顺序是：
1). 先手写 PRD
不用讲究格式、结构，想到哪写到哪。这部分也可以配合 Chat、Cowork 之类

2). 基于手写 PRD 去生成线框图原型
有了线框图原型，还要去反复调整，直到布局和交互满意了为止。

3). 生成最终 PRD
有了确认好的线框图原型，加上之前写的 PRD，就可以让 AI 写一份详细的 PRD了。这个适合版本管理起来，作为讨论、开发的一个参考。

9. 设计结果要用版本管理起来

Claude Design 交付的结果是 HTML + CSS + React + data.js，通过 CSS 一下就可以看清楚设计系统的颜色系统、尺寸规范，通过 React 可以看清楚组件结构，通过 data 可以知道数据结构什么样子。

这几个组合可比 figma 对于 AI 来说友好多了，尤其是 data.jsx，这是一般的设计 App 不会有的，但对开发特别重要的。

还有一个优势就是交付的结果都是文本格式的，可以一起提交到 git 做版本管理，用 git diff 就可以清楚的让 AI 知道设计稿修改了什么。

所以我每次都是下载 zip，本地解压缩后放到项目中，替换项目中旧的版本，配合 git 很好跟踪设计变更。

10. 把 Claude Design 当做唯一设计源

设计好了，在开发的时候做调整很正常，但是一定要先改设计稿，再改代码。哪怕临时改了代码，也要在设计稿那边同步一下，不然时间一长两边的版本就无法同步了。

好的设计同步流程应该是单向的：Claude Design -> Code