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

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

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

重大变化

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

开始之前

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

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

一个页面使用一个参考

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

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 原型指南介绍如何复制托管原型并检查导出的源代码 ZIP。该任务起始材料不同，完成标准也不同。

来源与延伸阅读

• VoltAgent 的固定版本 README说明合集及按原样提供的公共网站分析。文件数量来自固定版本的递归目录树，并非对未来版本的承诺。
• 固定版本的Notion DESIGN.md展示参考格式及其内部矛盾。它不是 Notion 批准的规范，也不授予使用 Notion 资源的权利。
• 仓库的MIT 许可证要求在副本或重要部分中保留版权与许可声明。
• Anthropic 的Claude Code 快速入门、文件引用说明和项目指令文档说明使用权限和明确提供上下文的方法。它们没有验证此次页面修改，也没有证实独立参考会自动加载。
• Anthropic 的费用、数据使用和权限文档说明不同账户的用量和控制。本指南没有测试会话、账单或产出页面。