# 用好 Claude Design 的一些经验

- 来源：宝玉 (@dotey)
- 发布时间：2026-06-10 14:52
- AIHOT 分数：81
- AIHOT 标记：精选
- AIHOT 链接：https://aihot.virxact.com/items/cmq7qgacz00ptslepe0e36kj9
- 原文链接：https://x.com/dotey/status/2064601571397185639

## 精选理由

宝玉这篇是 Claude Design 的实战避坑指南，第一条加设计系统直接解决了“AI 味”太重的问题，刚开始用的人照着做能少走很多弯路。

## AI 摘要

宝玉分享了5点心得：1. 加入设计系统（如 Adobe Spectrum 2）可避免 AI 味，设为默认后可专注布局与交互。2. 先搭建少量功能，再通过左侧聊天框逐步调整。3. 用 Markup 框选局部评论，Edit 可手动调整元素树。4. 注意上下文管理，新任务创建新会话。5. 通过 Tweaks 面板调整主题、布局、加载状态，也可添加导航快速切换界面。

## 正文

用好 Claude Design 的一些经验：

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

比如我偏好用 Adobe Spectrum 2 Design System https://github.com/adobe/react-spectrum

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

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

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

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

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

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

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

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

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

### 引用推文

> SagaSu：@dotey @howie_serious 感觉我用Claude design不是很顺利,宝玉老师有心得分享嘛hh