编程工具指南

如何在 Claude Code 中使用 DESIGN.md

DESIGN.md 记录视觉事实，CLAUDE.md 可以告诉 Claude Code 何时读取这些事实，以及它们与工程规则如何配合。

从自己的项目开始从网页生成 DESIGN.md

快速开始：使用自己的设计参考

已有 DESIGN.md 可以直接使用。还没有文件？先从公开网页生成，再回到你正在开发的项目。设计参考不能替代功能需求和页面验收。

将设计参考与代码放在一起

把 DESIGN.md 放在它所描述的前端代码旁，修改前保留副本。可以使用已有指南，不必先完成下方案例。

在 CLAUDE.md 中引用

将这段内容加入项目 CLAUDE.md，不要覆盖原有指令。@ 引用会引入设计文件；用 /memory 检查当前目录已加载的指令。

@DESIGN.md

界面开发时参考这份设计指南。工程规则和产品需求各自保留，完成后检查修改过的页面。

给 Claude 一个具体任务

修改前阅读 DESIGN.md 并检查现有界面。根据文档中的设计规则新增设置页。说明需要补充的设计选择，构建后检查桌面和手机效果。

完整案例（可选）：从看板到排班应用

一个高密度调度看板，包含状态卡片、运营表格、克制的颜色角色和紧凑的响应式导航。

CloneAny 生成的 Atlas Dispatch 页面预览
CloneAny 自有示例的生成预览，与下方 DESIGN.md 来自同一次生成。打开对比页即可检查源页面和生成结果。
对照源网页与克隆阅读这份 DESIGN.md

操作步骤

  1. 从一份可运行的下载项目开始

    在 Gallery 打开 Atlas Dispatch，对照源网页、克隆和 DESIGN.md。用这个公开源页面创建自己的克隆，下载开发项目并解压到新目录。先用 Node.js 24 安装和预览原始项目，再让工具修改。

  2. 保留捕获的风格参考

    第一次修改前，将 DESIGN.md 复制为 REFERENCE_DESIGN.md，并保持这份副本不变。最终的 DESIGN.md 描述新网站，参考副本用于检查保留了哪些捕获规则。

  3. 在 CLAUDE.md 导入参考文件

    在项目根目录添加下面这段 CLAUDE.md 示例。Claude Code 会读取 CLAUDE.md，并支持用 @ 加文件路径导入其他文件。目录若已有工程指令，把引用加进去，不要覆盖原文件。

  4. 检查已加载的上下文，再提交需求

    在解压目录启动 Claude Code，用 /memory 检查已加载的指令，再发送排班看板需求。要求它在修改前阅读源码入口和构建脚本。

  5. 运行成品并验证改动

    重新构建并预览。添加班次，切换两种筛选，并用键盘进入和关闭控件。检查 390px、768px、1440px 宽度；输入项目若有可用主题，再检查切换和刷新。确认参考文件与下载时一致，并对照实际页面阅读最终 DESIGN.md。

文件与命令

CLAUDE.md

@REFERENCE_DESIGN.md

保持 REFERENCE_DESIGN.md 不变，修改界面时参考它。更新 DESIGN.md，使其描述完成后的网站。运行 npm run build，并在 390px、768px、1440px 检查预览。

同一份项目需求

制作 Shiftline，为 8–20 人的团队提供一周排班看板。将现有 Atlas Dispatch 看板替换为新品牌、成员可用时间和人手覆盖摘要，再新增独立的 Schedule 排班页，在导航中提供入口并展示一周班次。主要操作是“添加班次”：支持在本地添加班次，并按日期和团队筛选。保留捕获的布局密度、字体、间距、表格行为及已有可用主题。不接入后端，不复制源页面的宣传内容。将捕获的 DESIGN.md 原样保存为 REFERENCE_DESIGN.md，再更新 DESIGN.md，使其描述 Shiftline。重新构建项目，并验证两个页面的键盘操作、390px、768px、1440px 下无页面横向溢出，以及主题切换和刷新后的状态。

运行下载项目

npm ci
npm run build
npm run preview

Claude 读取了错误指令时

检查 /memory 和当前工作目录。父目录或子目录的 CLAUDE.md 可能为会话添加指令。先解决冲突的设计要求，再让 Claude 重新阅读参考文件。

构建失败时，提供实际命令和错误。让 Claude 修正源码并更新最终指南，同时保持捕获参考不变。

工具官方说明

把参考带进你的项目

从一个公开网页开始，获取页面项目与设计指南，再用自己的需求继续开发。

生成设计参考

继续阅读