快速开始：使用自己的设计参考
已有 DESIGN.md 可以直接使用。还没有文件？先从公开网页生成，再回到你正在开发的项目。设计参考不能替代功能需求和页面验收。
打开已有项目
把 DESIGN.md 放在它所描述的前端代码旁，修改前保留副本。可以使用已有指南，不必先完成下方案例。
添加 Cursor 项目规则
创建 .cursor/rules/design-reference.mdc，写入下方内容，并与已有规则协调。这个小规则用 alwaysApply 在每次请求中加载；检查当前上下文，并要求 Cursor 阅读引用文件。
---
description: 遵循项目设计参考
alwaysApply: true
---
修改界面前阅读 @DESIGN.md。除非任务要求调整，否则保留已有设计规则，并验证实际页面。说明你的改动
修改前阅读 DESIGN.md 并检查现有界面。根据文档中的设计规则新增设置页。说明需要补充的设计选择，构建后检查桌面和手机效果。
Cursor: Shiftline
Cursor 用同一份 Atlas 项目做出了 Shiftline，包含独立的 Schedule 排班页、日期和团队筛选，以及把新增班次保存在当前浏览器中的表单。这次生成时，Cursor 只读取了参考 DESIGN.md 的一部分。
Cursor CLI 2026.09.02-c22c1a3 ·
完整案例（可选）：从看板到排班应用
一个高密度调度看板，包含状态卡片、运营表格、克制的颜色角色和紧凑的响应式导航。
操作步骤
从一份可运行的下载项目开始
在 Gallery 打开 Atlas Dispatch，对照源网页、克隆和 DESIGN.md。用这个公开源页面创建自己的克隆，下载开发项目并解压到新目录。先用 Node.js 24 安装和预览原始项目，再让工具修改。
保留捕获的风格参考
第一次修改前，将 DESIGN.md 复制为 REFERENCE_DESIGN.md，并保持这份副本不变。最终的 DESIGN.md 描述新网站，参考副本用于检查保留了哪些捕获规则。
在 Cursor 中打开目录
打开解压后的项目，在 .cursor/rules/design-reference.mdc 创建项目规则。这个小示例可设为始终应用，并引用 REFERENCE_DESIGN.md。在 Agent 对话中确认规则已加载，再要求它阅读所引用的文件。
提交排班看板需求
将下面的需求发给 Cursor Agent，让它先检查源码再修改。若它提出替换项目配置，要求说明哪项需求必须如此处理；下载项目本身应已能运行。
运行成品并验证改动
重新构建并预览。添加班次，切换两种筛选，并用键盘进入和关闭控件。检查 390px、768px、1440px 宽度；输入项目若有可用主题，再检查切换和刷新。确认参考文件与下载时一致，并对照实际页面阅读最终 DESIGN.md。
文件与命令
.cursor/rules/design-reference.mdc
---
description: 修改 Shiftline 时遵循捕获的设计
alwaysApply: true
---
修改界面前阅读 @REFERENCE_DESIGN.md，保持参考文件不变。更新 DESIGN.md，使其描述最终网站。修改后构建并验证相关页面。同一份项目需求
制作 Shiftline，为 8–20 人的团队提供一周排班看板。将现有 Atlas Dispatch 看板替换为新品牌、成员可用时间和人手覆盖摘要，再新增独立的 Schedule 排班页，在导航中提供入口并展示一周班次。主要操作是“添加班次”：支持在本地添加班次，并按日期和团队筛选。保留捕获的布局密度、字体、间距、表格行为及已有可用主题。不接入后端，不复制源页面的宣传内容。将捕获的 DESIGN.md 原样保存为 REFERENCE_DESIGN.md，再更新 DESIGN.md，使其描述 Shiftline。重新构建项目，并验证两个页面的键盘操作、390px、768px、1440px 下无页面横向溢出，以及主题切换和刷新后的状态。运行下载项目
npm ci
npm run build
npm run previewCursor 没有采用参考文件时
先检查当前项目目录和已加载规则，再决定是否重复提示。作用范围不包含当前文件的规则不会帮助这次修改。让 Cursor 说明正在采用的字体和间距值，再与 REFERENCE_DESIGN.md 对照。
预览没有更新时，先从源码重新构建并打开预览。缺失的导入、资源或溢出应在代码中修正，不接受只修截图的结果。
工具官方说明
把参考带进你的项目
从一个公开网页开始，获取页面项目与设计指南，再用自己的需求继续开发。
生成设计参考