AGENT

DESIGN.md 的5种最佳使用方式

我认为 DESIGN.md 是 Claude Code 上下文中第二重要的 Markdown 文件，仅次于 CLAUDE.md

admin

• 5 min read
DESIGN.md 的5种最佳使用方式
梯形图转SCL | 博途AI辅助编程文档 | AI模型价格对比 | AI工具导航 | ONNX模型库 | Vibe Coding教程 | PLC在线仿真器 | Tripo 3D | Meshy AI | ElevenLabs | KlingAI | ArtSpace | Phot.AI | InVideo

CLAUDE.md 定义 Claude 应如何处理你的产品DESIGN.md 定义 你的产品应如何呈现外观和感觉。

许多产品团队创建 DESIGN.md 文件并在 CLAUDE.md 中引用它。但这只是在 Claude 中使用此文件的一种方式。在本文中，我将分享在 Claude Code 项目中使用 DESIGN.md 的五种不同方式。

1. 通过 CLAUDE.md 持久引用

在 CLAUDE.md 中持久引用 DESIGN.md 最适合 几乎每个 UI 任务都应遵循相同设计系统 的情况。我通常在产品设计流程的后期阶段采用这种方法，那时我已经有了设计系统，并希望 AI 在为我构建设计时使用它。

以下是我添加到 CLAUDE.md 的内容

=== CLAUDE.md ===

## 设计系统

使用 @DESIGN.md 作为所有 UI 和视觉设计工作的唯一真实来源。

创建或修改界面时：
- 遵循现有的 token 和组件模式
- 保留 DESIGN.md 中描述的视觉原则
- 在引入新模式之前重用现有模式
- 标记有意的偏差

这有助于保持提示简短简洁。例如，当我让 Claude 设计账户设置体验时，我只关注想要获得的内容，而不是它应该如何呈现：

设计账户设置体验。

包括个人信息、密码管理、
通知和账户删除。

2. 在提示中显式引用 DESIGN.md

显式引用在两种特定情况下很有价值：

  1. 当你不想让 Claude 为每个任务加载设计上下文时
  2. 当设计一致性对某个请求特别重要时

提示可能如下所示：

在开始此任务之前，请先阅读 @DESIGN.md。

为新用户设计引导流程。

遵循 DESIGN.md 中定义的视觉语言、布局原则、
组件模式和交互约定。

除非现有系统无法支持该体验，
否则不要引入新的视觉模式。

我通常在处理新流程或主要功能时使用显式引用，希望与设计系统保持最大一致性。

3. 在扩展现有 UI 时将 DESIGN.md 作为约束

一种非常常见的产品设计情况是，你需要添加新内容 而不使其看起来与设计格格不入。

DESIGN.md 可以同时充当护栏和验证器，防止 AI 引入你不希望看到的更改。

阅读 @DESIGN.md 并检查现有仪表板。

添加 AI 助手体验，允许用户：

- 询问有关其数据的问题
- 查看建议的提示
- 审查生成的答案
- 访问之前的对话

将 DESIGN.md 视为约束。

不要重新设计仪表板或建立新的视觉语言。
让 AI 体验感觉像是现有产品的自然延伸。

这种方法防止 AI 工具将 "添加新功能 X" 命令解释为重新设计一切的许可。

4. 仅引用 DESIGN.md 的相关部分

不是很多人都知道，你不一定需要 Claude 同等地对待整个文件。

你可以仅引用与当前任务相关的说明。

假设你正在设计一个密集的数据表。你可以将其注意力引导到特定规则：

阅读 @DESIGN.md。

特别注意：
- 排版
- 布局
- 数据表
- 密度
- 颜色使用

为高级用户设计交易历史屏幕。

界面应支持快速扫描大量信息，
同时保持与 DESIGN.md 中原则的一致性。

随着 DESIGN.md 的增长，这变得特别有用。

5. 使用 DESIGN.md 进行设计评审

不是很多人都知道的另一件事：DESIGN.md 引用不一定需要在生成之前发生。

你可以事后使用它（即作为设计 QA 文档）

你可以发送的提示是：

根据 @DESIGN.md 审查当前界面。

暂时不要重新设计。

识别实现与 DESIGN.md 之间的每个有意义的差异。

将问题分组为：

1. 设计 token
2. 排版
3. 间距和布局
4. 组件
5. 交互模式
6. 视觉原则

对于每个问题，解释：
- 什么不一致
- 违反了哪条 DESIGN.md 原则
- 你建议如何修复

按影响优先排序问题。

然后发送后续提示

修复审计中的所有高优先级问题。

不要更改功能或引入无关的设计改进。

额外技巧：让 Claude 演进 DESIGN.md

这有点冒险，但对 DESIGN.md 来说是非常有价值的用例

DESIGN.md 的问题是文件应始终保持最新。

你可以手动维护文件，也可以与 AI 合作完成。以下提示将此文件从静态文档转变为更接近 活的设计记忆 的东西。

我们在此流程中引入了用于 AI 生成
推荐的新模式。

审查最终实现和 @DESIGN.md。

确定哪些设计决策可在产品中复用，
并应成为我们设计系统的一部分。

仅使用可通用化的规则更新 DESIGN.md。

不要记录特定于实现的细节或一次性决策。

根据我的经验，这种方法并不理想。这意味着你总是需要验证 AI 在 DESIGN.md 中引入的更改

原文链接：My Top 5 Favorite Ways of Using DESIGN.md in Claude Code

汇智网翻译整理，转载请标明出处