快速开始：使用自己的设计参考
已有 DESIGN.md 可以直接使用。还没有文件？先从公开网页生成，再回到你正在开发的项目。设计参考不能替代功能需求和页面验收。
从已有仓库开始
把 DESIGN.md 放在它所描述的前端代码旁，修改前保留副本。可以使用已有指南，不必先完成下方案例。
通过 AGENTS.md 引用参考
在约束前端代码的 AGENTS.md 中加入一条简短指令，并保留已有工程要求。DESIGN.md 描述外观，AGENTS.md 说明何时阅读以及如何验证。
修改界面前阅读 DESIGN.md 和现有源码，采用文档中的设计规则。运行项目检查，并在桌面和手机宽度验证修改后的页面。发送产品需求
修改前阅读 DESIGN.md 并检查现有界面。根据文档中的设计规则新增设置页。说明需要补充的设计选择，构建后检查桌面和手机效果。
Codex: Shiftline
Codex 从 Atlas 的 Tailwind 项目和 DESIGN.md 开始，做出了 Shiftline 概览页和独立的 Schedule 排班页。你可以新增班次，按日期和团队组合筛选，刷新后仍能看到保存在当前浏览器中的排班。两页在手机和桌面上都支持明暗主题。
Codex CLI 0.153.4 ·
完整案例（可选）：从看板到排班应用
一个高密度调度看板，包含状态卡片、运营表格、克制的颜色角色和紧凑的响应式导航。
操作步骤
从一份可运行的下载项目开始
在 Gallery 打开 Atlas Dispatch，对照源网页、克隆和 DESIGN.md。用这个公开源页面创建自己的克隆，下载开发项目并解压到新目录。先用 Node.js 24 安装和预览原始项目，再让工具修改。
将需求写入下载项目
在“下载开发项目”的需求输入区填写排班看板需求，再下载项目。在 Codex 中打开解压目录，阅读 AGENT_PROMPT.md，确认需求已包含其中。工程指令放在 AGENTS.md，捕获的视觉事实放在 DESIGN.md。
让 Codex 按交接文件执行
发送“阅读 AGENT_PROMPT.md 并完成项目”。交接文件要求保留捕获的风格指南为 REFERENCE_DESIGN.md，修改源码、重建 dist，再更新最终 DESIGN.md。接受结果前检查参考文件。
运行成品并验证改动
重新构建并预览。添加班次，切换两种筛选，并用键盘进入和关闭控件。检查 390px、768px、1440px 宽度；输入项目若有可用主题，再检查切换和刷新。确认参考文件与下载时一致，并对照实际页面阅读最终 DESIGN.md。
文件与命令
发给 Codex 的第一条消息
阅读 AGENT_PROMPT.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 preview需求或成品不完整时
若 AGENT_PROMPT.md 没有你的需求，先检查下载目录，不急着重开任务。构建通过还不算完成：打开预览，使用“添加班次”和筛选，再检查最终 DESIGN.md。
若 Codex 只修改了 dist，要求它将改动写入 index.html 或 src，再重新构建。源码必须能重现你检查过的页面。
工具官方说明
把参考带进你的项目
从一个公开网页开始，获取页面项目与设计指南，再用自己的需求继续开发。
生成设计参考