Markdown 版本

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

# 在 Claude Code 中用固定版本的 DESIGN.md 参考修改一个页面

> 选定一个固定版本的 DESIGN.md 文件，让 Claude Code 据此修改你有权编辑的页面，再检查代码及桌面和手机端的实际显示。

By BIG CHANGE Editorial

Published: 2026-10-20T00:01:06.937Z
Updated: 2026-10-20T00:01:06.937Z
Canonical: https://bigchange.ai/blog/claude-code-pinned-design-reference-page-guide

![Conceptual charcoal illustration of one clipped design-reference sheet beside an unbranded display showing a simple webpage layout.](https://bigchange.ai/api/media/file/pinned-design-reference-one-page-hero-v1.png)
AI-generated conceptual illustration by BIG CHANGE; no Claude Code run, Notion or edited and tested page is depicted.

已有页面让你明确哪些地方要改进、哪些内容要保留。VoltAgent 的[Awesome DESIGN.md 合集](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/README.md)提供公共网站的纯文本分析，可作为 AI 编程代理的参考。本指南选用仓库 2026 年 10 月 14 日提交中的一个文件，为范围明确的 Claude Code 修改提供视觉参考。只有亲自检查改动后的代码和实际页面，才能确认结果。

BIG CHANGE 查阅了固定版本仓库和 Claude Code 文档。我们没有运行 Claude Code、修改页面、计时或检查生成结果。该版本目录树直接包含 84 个`design-md/*/DESIGN.md`文件；此数量只对应那个提交，并非目录的永久规模。

## 重大变化

- **变化是什么：** 可以将一份固定版本的设计分析明确提供为上下文，用于修改一个获准编辑的页面。
- **为什么重要：** 页面负责人可以借鉴有用的布局或间距思路，同时按页面真实内容、品牌身份和行为检查结果。
- **需要注意：** 参考来自社区分析，其中的品牌细节乃至部分内部指令可能错误，或不适合你的页面。

## 开始之前

你需要有权修改的页面和仓库、工作副本或分支、本地显示页面的方法，以及通过合资格账户或服务商使用[Claude Code](https://code.claude.com/docs/en/quickstart)的权限。明确要修改的页面文件，以及项目正常启动和检查页面的方法。写下目标读者、必要文案与链接、获准颜色、字体和标志，以及本次唯一要解决的视觉问题。把这些负责人决定放在工作副本旁，便于评估修改建议。

提供客户私密资料前，检查账户的[数据政策](https://code.claude.com/docs/en/data-usage)和[工具权限](https://code.claude.com/docs/en/permissions)。Claude Code 按账户条款处理提示和项目内容；项目保存在本地并不代表模型会话完全在本地运行。确认你有权分享此次任务可能暴露的私密文案、资源或代码。

## 一个页面使用一个参考

1. 打开[固定版本合集的 README](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/README.md)。选择一个`design-md/<name>/DESIGN.md`，其思路应与已确定的页面问题相关。使用前读完整个文件。[Notion 示例](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/design-md/notion/DESIGN.md)展示了格式：布局、字体、间距和组件建议。它同时提到胶囊形和矩形按钮。这种矛盾意味着应自行作出决定，而不是让 Claude Code 逐行照做。
2. 把这唯一的固定版本`DESIGN.md`复制到工作项目中，例如放在`design-reference/DESIGN.md`。在旁边记录原始 URL、路径和提交`3b605329240ce735b510037cca322f1831fdd7f8`。复制时保留仓库的[MIT 版权与许可声明](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/LICENSE)。Markdown 参考本身不需要安装软件包。许可证覆盖仓库材料，但不授予使用所述公司的标志、字体文件、图像或商标的权利。
3. 在获准项目中打开 Claude Code，明确将复制的文件作为上下文。Anthropic 分别介绍了[文件引用](https://code.claude.com/docs/en/common-workflows)和[项目指令文件](https://code.claude.com/docs/en/memory)；将独立的`DESIGN.md`放进文件夹，并不能证明 Claude Code 已加载它。把下面方括号内的页面路径和负责人规则替换为真实值，并在接受修改前确认 Claude Code 已读过参考。

```markdown
Read @design-reference/DESIGN.md as a visual reference. Edit only [path/to/owned-page] and the existing styles that page needs. Improve [one specific layout or hierarchy problem]. Keep the page's current audience, approved copy, links, brand colors, font and logo. Use only layout, hierarchy or spacing ideas that fit those rules. Do not copy the example site's name, assets or identity. Preserve working interactions and keyboard access. Show the proposed file changes and tell me how to render and check this page with this project's existing commands.
```

4. 执行或接受前，阅读建议的差异。检查每个改动文件、文案和链接。拒绝未要求的新依赖、资源或无关页面改动。使用项目已有文档中的运行命令显示页面。分别以桌面宽度和手机宽度打开；检查实际页面，而不是代理对自身意图的描述。
5. 按书面要求比较实际显示。检查目标文案和链接仍然存在，标题顺序合理，文字与控件对比度足够，手机布局没有内容截断或横向滚动。使用键盘到达并操作受改动影响的链接、按钮、菜单和表单。测试变更的交互，包括可见焦点和错误状态。记录页面版本、宽度、检查项目和缺陷。只有这些检查在你的页面上通过后，才接受修改。

如果 Claude Code 忽略参考，再次指出文件，并请它列明使用了哪些部分。若参考与品牌规则冲突，从请求中删除相应要求并调整受影响代码。若链接、焦点路径或交互失效，恢复先前可用行为，再缩小改动范围。如果无法显示页面或检查结果，就暂不接受修改，直到具备检查条件。

该合集由维护者按原样提供，内容是社区对其他网站的描述。其 Notion 文件包含矛盾的按钮形状、未获文档支持的悬停行为，以及本指南未验证的代码检查命令。请使用项目已知的检查，不要采用该建议命令。Claude Code 使用费用和后续托管或资源费用取决于账户与项目；此处未证实修改所需时间或最终设计质量。

如需了解另一种 AI 辅助页面制作方法，[我们的 Genspark 原型指南](https://bigchange.ai/blog/genspark-design-prototype-source-zip)介绍如何复制托管原型并检查导出的源代码 ZIP。该任务起始材料不同，完成标准也不同。

## 来源与延伸阅读

- [VoltAgent 的固定版本 README](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/README.md)说明合集及按原样提供的公共网站分析。文件数量来自固定版本的递归目录树，并非对未来版本的承诺。
- 固定版本的[Notion `DESIGN.md`](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/design-md/notion/DESIGN.md)展示参考格式及其内部矛盾。它不是 Notion 批准的规范，也不授予使用 Notion 资源的权利。
- 仓库的[MIT 许可证](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/LICENSE)要求在副本或重要部分中保留版权与许可声明。
- Anthropic 的[Claude Code 快速入门](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/costs)、[数据使用](https://code.claude.com/docs/en/data-usage)和[权限](https://code.claude.com/docs/en/permissions)文档说明不同账户的用量和控制。本指南没有测试会话、账单或产出页面。

## Sources

- [Awesome DESIGN.md 固定版本 README](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/README.md) — 仓库主要说明及不可变提交中的单文件复制指南。它说明材料是按原样提供的公共网站分析；其成果质量说法具有宣传性质。独立审查过的该提交完整目录树直接包含 84 个 DESIGN.md 文件，此数量仅对该版本有效。
- [固定提交中的 Notion DESIGN.md 示例](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/design-md/notion/DESIGN.md) — 布局、间距、排版和组件分析示例。关于胶囊形还是矩形按钮的描述自相矛盾，没有证实悬停或动画行为，还建议了未验证的代码检查命令。它是社区分析，不是 Notion 官方品牌规范，也不是复制资源的许可。
- [Awesome DESIGN.md MIT 许可证](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/LICENSE) — Copyright (c) 2026 VoltAgent；副本或重要部分必须保留版权与许可声明。仓库许可证并不确立对所述网站商标、标志、专有字体或图像的权利。
- [Claude Code 快速入门](https://code.claude.com/docs/en/quickstart) — 项目、账户或服务商与登录的官方前提条件。读者必须使用符合条件的方式和自己的项目；BIG CHANGE 没有测试 Claude Code 安装或付费账户。
- [Claude Code 常用工作流程](https://code.claude.com/docs/en/common-workflows) — 关于明确 @file 上下文和项目工作的官方说明。它支持在设置及限制允许范围内主动引用复制的文件，不代表任意 DESIGN.md 会自动加载。
- [Claude Code 项目记忆](https://code.claude.com/docs/en/memory) — 解释项目指令文件及依配置而定的加载方式。它没有说明独立 DESIGN.md 只要存在于仓库就会加载；本指南不改变指令配置。
- [Claude Code 费用](https://code.claude.com/docs/en/costs) — 依账户而定的用量和计费背景。Markdown 参考不增加软件包依赖，但本指南没有确立 Claude Code 任务固定价格、免费额度或节省时间。
- [Claude Code 数据使用](https://code.claude.com/docs/en/data-usage) — 依账户而定的数据处理及本地会话记录行为的官方说明。分享客户私密代码或资源前，负责人必须审查政策；此处不作普遍的纯本地处理或训练用途断言。
- [Claude Code 权限](https://code.claude.com/docs/en/permissions) — 官方工具权限控制。提示中的指令本身不授予或强制实施工具访问权；读者必须检查建议动作及实际修改文件。