Markdown 版本

AI-translated from English; not yet reviewed by a fluent editor.

# 为 Claude Code 创建经所有者批准的 DESIGN.md

> 依据已批准的品牌决策编写视觉规范，用它指导 Claude Code 完成两项小范围修改，并检查差异和渲染结果。

By BIG CHANGE Editorial

Published: 2026-10-20T01:05:55.739Z
Updated: 2026-10-20T01:05:55.739Z
Canonical: https://bigchange.ai/blog/claude-code-owner-approved-design-md-guide

![Conceptual charcoal illustration of a small visual reference clipped to a wall rail above two separate framed layout proofs.](https://bigchange.ai/api/media/file/owner-approved-design-reference-two-proofs-hero-v1.png)
AI-generated conceptual illustration by BIG CHANGE.

AI 编程代理能否遵循视觉参考，取决于参考中的决策是否明确。如果项目归你所有，而且已有获批的品牌规则，可以将规则写入一份可供审查的 `DESIGN.md` 文件，再让 Claude Code 做两项小修改，由你亲自检查。交付物是你批准的规范。这两次修改只能检验规范对这两个具体成果是否有用，不能证明以后修改的效果。

这是基于文档的操作流程。BIG CHANGE 于 2026 年 10 月 20 日审阅了固定版本的设计文件集合和 Anthropic 的 Claude Code 手册。我们没有运行 Claude Code，没有修改或渲染这两个成果，也没有测量成本或设计质量。

## 关键变化

- **变化是什么：** 所有者可以依据获批决策编写带版本的视觉规范，并在一次有限修改之前，将这份确切文件提供给 Claude Code。
- **为什么重要：** 一份经过核查的统一来源使颜色、字体和布局规则可用于对照两个真实修订版；所有者仍需决定每个结果是否可接受。
- **需要留意：** 每次修改前都必须完整读取文件。文件出现在项目中、提到路径，或 Claude 声称读过，都不能证明文件已加载或规则已得到遵循。

## 开始前的准备

你需要拥有该项目、获准修改项目、准备两个可以渲染的小型现有成果，以及一份可恢复的工作副本或版本控制检查点。成果可以是两个页面，也可以是一个页面和一份演示文稿，前提是你了解各自项目实际的编辑和渲染流程。分别选定一项有限的视觉修改。保留当前文案、链接和正常工作的交互，以便对照。

收集所有者已批准的颜色值**及其用途**、有许可或获准使用的字体及替代字体、标志和图片使用规则、目标受众、尺寸以及无障碍要求。使用真实的批准记录，或让所有者解决缺失的选择。企业公开网站或他人的设计分析，并不授权你在项目中使用相关值或素材。所有者批准使用素材，也不自动代表允许将素材发送给模型提供商。

使用符合条件的账号或提供商设置 [Claude Code](https://code.claude.com/docs/en/quickstart)，并在披露私有代码、文案或素材前，审阅账号的[数据使用条款](https://code.claude.com/docs/en/data-usage)和[工具权限](https://code.claude.com/docs/en/permissions)。存储在本地的项目仍可能将内容发送给模型服务。确认谁能看到材料、哪些工具可以读取或修改文件，以及你是否有权提交每一项材料。[费用说明](https://code.claude.com/docs/en/costs)取决于账号和提供商；本指南不能为你的会话确定固定价格。

可将[固定版本的 Awesome DESIGN.md 集合](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/README.md)作为文件章节安排的可选灵感。该集合分析公开网站，并非所有者批准的品牌手册。你可以直接依据获批决策编写文件。如果复制仓库文本，须保留其[MIT 版权及许可声明](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/LICENSE)。该声明并不授予使用其他网站商标、字体文件或图片的权利。

## 制作经所有者批准的参考文件

1. 在自有项目中创建 `brand-reference/DESIGN.md`。依据批准记录填写这个最小结构。方括号中的文字说明所有者必须提供的信息，并非推荐品牌。在所有者作出决定之前，将未决项目继续标为 `UNRESOLVED`。不要让 Claude 编造数值来补齐缺项。

```markdown
# Visual specification

Owner: [owner or approving role]
Approved version/date: [version and approval date, or UNRESOLVED]
Audience and artifact purpose: [owner-approved description]
Approval evidence: [internal record or location, without private data in a shared copy]

## Color roles and values
- Background: [approved value and color format, or UNRESOLVED]
- Text: [approved value and color format, or UNRESOLVED]
- Primary action: [approved value and color format, or UNRESOLVED]
- Link, border and status roles: [each approved value, or UNRESOLVED]

## Typography and scale
- Heading family and permitted fallback: [approved names, or UNRESOLVED]
- Body family and permitted fallback: [approved names, or UNRESOLVED]
- Heading/body sizes, weights and line heights: [approved scale, or UNRESOLVED]
- Font license or use restriction: [approved terms, or UNRESOLVED]

## Spacing and layout
- Spacing scale, content width and grid: [approved values, or UNRESOLVED]
- Target artifact dimensions: [approved sizes, or UNRESOLVED]

## Components and states
- Buttons, links, inputs and navigation: [approved appearance and behavior]
- Hover, focus, disabled and error states: [approved rules, or UNRESOLVED]

## Responsive and accessibility rules
- Desktop/phone behavior and breakpoints: [approved rules, or UNRESOLVED]
- Contrast, readable type, focus order and touch use: [approved requirements]

## Assets and forbidden substitutions
- Permitted logo/image assets and usage: [approved paths and permissions]
- Do not substitute: [owner-approved prohibited colors, fonts, marks or patterns]

## Owner approval and changes
- Approved by: [person or role and date, or UNRESOLVED]
- Version: [version]
- Changelog: [date, change, approver]
- Unresolved decisions: [list, or "none" after owner review]
```

2. 将填写的每一行与所有者的原始决策核对，包括字体和图片的使用权。若项目旧样式与当前获批规则冲突，应与所有者解决。请所有者批准这份确切文件，并记录版本。暂缓所有依赖未决值的修改。将批准的文件及两个初始成果存入版本控制或其他可恢复副本。

## 用文件指导两项有限修改

3. 在自有项目中，使用已核查的账号和权限启动 Claude Code 会话。提供 `brand-reference/DESIGN.md` 和第一个成果的准确路径。先要求 Claude **完整**读取参考文件和成果，然后停止，不作修改。检查实际的文件读取或工具结果，确认路径正确、内容完整。读取被拒、结果截断、仅提及路径或口头摘要都不够。Anthropic 将[项目指令文件](https://code.claude.com/docs/en/memory)作为单独的设置选项介绍；不要假设任意 `DESIGN.md` 都会被自动发现，也不要依赖 `@` 引用在不同版本中有相同表现。
4. 看到完整读取结果后，要求仅依据获批规则对第一个成果进行选定的那一项视觉修改。限制涉及的文件；保留文案、链接、控件和无关代码。要求查看拟议差异以及项目既有的渲染方法。接受前检查每个改动的文件。拒绝未获批准的颜色、字体、素材、依赖或额外修改。
5. 使用第一个成果的**实际项目流程**进行渲染。在适合该项目的桌面和手机尺寸下，将输出与批准文件及初始成果比较。检查改动文件中的设计令牌值、清晰可读的对比度、标题与字体层级、裁切或横向溢出、可见焦点、键盘及受影响交互，以及文案和链接是否保持不变。记录参考版本、成果修订版、检查项和修正。对渲染的文字描述并不是渲染结果。
6. 对第二个成果，再次说明其准确路径及 `brand-reference/DESIGN.md`。要求在**修改之前**重新完整读取，并检查读取的工具结果。然后要求一项有限修改，审查差异，使用第二个成果自身的流程渲染，并重复相同检查。将两个修订版与**同一份获批文件版本**比较。将每条规则记录为已遵循、未遵循，或需要所有者批准修订；修复偏差，若参考文件改变，则重新检查两个成果。

完成标准是：获得所有者批准且有版本的规范、两个已检查并渲染的修订版，以及一份简要的规则遵循或遗漏记录。保留原始修订版，以便回退。读取失败时，先检查准确路径、权限和文件大小或截断情况，再要求修改。如果规范与项目样式或无障碍要求冲突，先取得所有者的决定并缩小修改范围。如果成果无法渲染或交互无法检查，则在能够检查前不要接受该修改。以后品牌发生变化，必须主动重新审查之前的输出。

关于将社区文件用作单个页面参考的另一项任务，请参阅[我们的固定版本 DESIGN.md 指南](https://bigchange.ai/blog/claude-code-pinned-design-reference-page-guide)。本指南的任务首先是创建并批准你自己的规范。

## 来源与延伸阅读

- 这份[固定版本的 Awesome DESIGN.md README](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/README.md)提供示例章节，并将文件描述为按原样提供的公开网站分析。其关于输出质量的表述，不是我们在此测试出的结果。[MIT 许可证](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/LICENSE)约束复制的仓库材料，而不是第三方的身份标识或素材。
- Anthropic 的[快速入门](https://code.claude.com/docs/en/quickstart)涵盖账号和项目设置。其[常见工作流程](https://code.claude.com/docs/en/common-workflows)与[项目记忆手册](https://code.claude.com/docs/en/memory)介绍文件和指令流程；两者都不能证明读者会话中完整读取了这个独立文件。
- Anthropic 的[权限](https://code.claude.com/docs/en/permissions)、[数据使用](https://code.claude.com/docs/en/data-usage)和[费用](https://code.claude.com/docs/en/costs)手册说明控制措施和因账号而异的条款。它们不能证明本指南中观察到了修改、纯本地处理、固定账单或质量提升。

## Sources

- [固定版本的 Awesome DESIGN.md README](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/README.md) — 固定版本的社区集合及设计参考章节示例。它分析公开网站并按原样提供文件；其关于输出质量和即用性的宣传，不构成该所有者成果或所展示品牌授权的证据。获批的选题准入材料中保存了完整的私有来源快照及独立核验。
- [Awesome DESIGN.md MIT 许可证](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/LICENSE) — 复制仓库文本或其重要部分时，必须附带该固定版本的版权及许可声明。该声明本身不授予对所展示网站名称、商标、标志、专有字体或图片的权利。
- [Claude Code 快速入门](https://code.claude.com/docs/en/quickstart) — 官方账号或提供商、登录和项目的前提要求。BIG CHANGE 未为本指南测试安装、访问或 Claude 会话。
- [Claude Code 常见工作流程](https://code.claude.com/docs/en/common-workflows) — 官方项目文件和修改审查流程。本指南要求对每个成果观察到完整读取及实际差异，而非依赖随版本变化的文件引用简写。
- [Claude Code 项目记忆](https://code.claude.com/docs/en/memory) — 将项目指令和可选导入作为配置介绍。不能证明独立的 brand-reference/DESIGN.md 自动加载，也不能证明读者的任一次修改遵循了它。
- [Claude Code 权限](https://code.claude.com/docs/en/permissions) — 官方工具权限控制。所有者对品牌内容的批准、给 Claude 的提示词，与实际文件或工具权限及提交私有材料的许可是不同事项。
- [Claude Code 数据使用](https://code.claude.com/docs/en/data-usage) — 处理和保留方式因账号和提供商而异。本地项目不能证明模型会话仅在本地运行；提供私有内容前，读者必须检查相关权利。
- [Claude Code 费用](https://code.claude.com/docs/en/costs) — 官方按账号和提供商区分的使用与计费说明。本操作流程未测量固定价格、免费额度、节省时间或任务成本。
- [BIG CHANGE：在 Claude Code 中为单个页面使用固定版本的 DESIGN.md 参考](https://bigchange.ai/blog/claude-code-pinned-design-reference-page-guide) — 相关背景报道，介绍将固定版本的社区参考应用于现有页面。它不编写所有者专属的获批规范，不是本指南新增步骤的来源，也不是“In this story”中的后续发展。