用好Claude Design的11条实战经验

用好 Claude Design 的一些经验： 1. 加上 Design System 可以有效避免设计 AI 味 比如我偏好用 Adobe Spectrum 2 Design System 设置为默认设计系统，后续就会默认使用这个设计系统，你就可以把重点放在界面布局和交互上。 2. 不要指望一次性做个完美的版本

6. 要设计好也要抽卡 LLM 有随机性，设计也是如此，跟出图一样，得多试几次 7. 先线框草图确定好布局和交互，再高精度交互 如果你还没有想清楚交互、布局这些粗粒度的，可以先选择线框草图，反复调整布局、交互。

8. PRD 和线框图原型最好搭配着来。 PRD是文本的，AI友好，好管理版本，但无法直观看到啥样子 线框图原型有交互，可以直观看到布局和交互，可以互动，调整起来也方便 通常我的顺序是： 1). 先手写 PRD 不用讲究格式、结构，想到哪写到哪。这部分也可以配合 Chat、Cowork 之类

9. 设计结果要用版本管理起来 Claude Design 交付的结果是 HTML + CSS + React + data.js，通过 CSS 一下就可以看清楚设计系统的颜色系统、尺寸规范，通过 React 可以看清楚组件结构，通过 data 可以知道数据结构什么样子。 这几个组合可比 figma 对于 AI 来说友好多了，尤其是

10. 把 Claude Design 当做唯一设计源 设计好了，在开发的时候做调整很正常，但是一定要先改设计稿，再改代码。哪怕临时改了代码，也要在设计稿那边同步一下，不然时间一长两边的版本就无法同步了。 好的设计同步流程应该是单向的：Claude Design -> Code

11. 使用 CLAUDE.md 可能很多人不知道 Claude Design 是支持 CLAUDE.md 文件的，你可以通过左侧聊天窗口初始化 CLAUDE.md ，把一些需要反复叮嘱的事情放到里面，和在 Claude Code 里面用 CLAUDE.md 一样的