AI 编程代理能否遵循视觉参考，取决于参考中的决策是否明确。如果项目归你所有，而且已有获批的品牌规则，可以将规则写入一份可供审查的 DESIGN.md 文件，再让 Claude Code 做两项小修改，由你亲自检查。交付物是你批准的规范。这两次修改只能检验规范对这两个具体成果是否有用，不能证明以后修改的效果。
这是基于文档的操作流程。BIG CHANGE 于 2026 年 10 月 20 日审阅了固定版本的设计文件集合和 Anthropic 的 Claude Code 手册。我们没有运行 Claude Code，没有修改或渲染这两个成果，也没有测量成本或设计质量。
关键变化
- 变化是什么： 所有者可以依据获批决策编写带版本的视觉规范，并在一次有限修改之前，将这份确切文件提供给 Claude Code。
- 为什么重要： 一份经过核查的统一来源使颜色、字体和布局规则可用于对照两个真实修订版；所有者仍需决定每个结果是否可接受。
- 需要留意： 每次修改前都必须完整读取文件。文件出现在项目中、提到路径，或 Claude 声称读过，都不能证明文件已加载或规则已得到遵循。
开始前的准备
你需要拥有该项目、获准修改项目、准备两个可以渲染的小型现有成果，以及一份可恢复的工作副本或版本控制检查点。成果可以是两个页面，也可以是一个页面和一份演示文稿，前提是你了解各自项目实际的编辑和渲染流程。分别选定一项有限的视觉修改。保留当前文案、链接和正常工作的交互，以便对照。
收集所有者已批准的颜色值及其用途、有许可或获准使用的字体及替代字体、标志和图片使用规则、目标受众、尺寸以及无障碍要求。使用真实的批准记录，或让所有者解决缺失的选择。企业公开网站或他人的设计分析，并不授权你在项目中使用相关值或素材。所有者批准使用素材，也不自动代表允许将素材发送给模型提供商。
使用符合条件的账号或提供商设置 Claude Code，并在披露私有代码、文案或素材前，审阅账号的数据使用条款和工具权限。存储在本地的项目仍可能将内容发送给模型服务。确认谁能看到材料、哪些工具可以读取或修改文件，以及你是否有权提交每一项材料。费用说明取决于账号和提供商；本指南不能为你的会话确定固定价格。
可将固定版本的 Awesome DESIGN.md 集合作为文件章节安排的可选灵感。该集合分析公开网站，并非所有者批准的品牌手册。你可以直接依据获批决策编写文件。如果复制仓库文本，须保留其MIT 版权及许可声明。该声明并不授予使用其他网站商标、字体文件或图片的权利。
制作经所有者批准的参考文件
- 在自有项目中创建
brand-reference/DESIGN.md。依据批准记录填写这个最小结构。方括号中的文字说明所有者必须提供的信息，并非推荐品牌。在所有者作出决定之前，将未决项目继续标为UNRESOLVED。不要让 Claude 编造数值来补齐缺项。
# 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]- 将填写的每一行与所有者的原始决策核对，包括字体和图片的使用权。若项目旧样式与当前获批规则冲突，应与所有者解决。请所有者批准这份确切文件，并记录版本。暂缓所有依赖未决值的修改。将批准的文件及两个初始成果存入版本控制或其他可恢复副本。
用文件指导两项有限修改
- 在自有项目中，使用已核查的账号和权限启动 Claude Code 会话。提供
brand-reference/DESIGN.md和第一个成果的准确路径。先要求 Claude 完整读取参考文件和成果，然后停止，不作修改。检查实际的文件读取或工具结果，确认路径正确、内容完整。读取被拒、结果截断、仅提及路径或口头摘要都不够。Anthropic 将项目指令文件作为单独的设置选项介绍；不要假设任意DESIGN.md都会被自动发现，也不要依赖@引用在不同版本中有相同表现。 - 看到完整读取结果后，要求仅依据获批规则对第一个成果进行选定的那一项视觉修改。限制涉及的文件；保留文案、链接、控件和无关代码。要求查看拟议差异以及项目既有的渲染方法。接受前检查每个改动的文件。拒绝未获批准的颜色、字体、素材、依赖或额外修改。
- 使用第一个成果的实际项目流程进行渲染。在适合该项目的桌面和手机尺寸下，将输出与批准文件及初始成果比较。检查改动文件中的设计令牌值、清晰可读的对比度、标题与字体层级、裁切或横向溢出、可见焦点、键盘及受影响交互，以及文案和链接是否保持不变。记录参考版本、成果修订版、检查项和修正。对渲染的文字描述并不是渲染结果。
- 对第二个成果，再次说明其准确路径及
brand-reference/DESIGN.md。要求在修改之前重新完整读取，并检查读取的工具结果。然后要求一项有限修改，审查差异，使用第二个成果自身的流程渲染，并重复相同检查。将两个修订版与同一份获批文件版本比较。将每条规则记录为已遵循、未遵循，或需要所有者批准修订；修复偏差，若参考文件改变，则重新检查两个成果。
完成标准是：获得所有者批准且有版本的规范、两个已检查并渲染的修订版，以及一份简要的规则遵循或遗漏记录。保留原始修订版，以便回退。读取失败时，先检查准确路径、权限和文件大小或截断情况，再要求修改。如果规范与项目样式或无障碍要求冲突，先取得所有者的决定并缩小修改范围。如果成果无法渲染或交互无法检查，则在能够检查前不要接受该修改。以后品牌发生变化，必须主动重新审查之前的输出。
关于将社区文件用作单个页面参考的另一项任务，请参阅我们的固定版本 DESIGN.md 指南。本指南的任务首先是创建并批准你自己的规范。
