编程工具指南

如何在 v0 和 Lovable 中使用 DESIGN.md

浏览器编程工具不一定会加载仓库指令文件。把当前任务需要的 DESIGN.md 事实写进提示词，生成后再用完整文件检查结果。

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

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

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

v0：附加参考文件

在 v0 对话中附加 DESIGN.md 和相关界面文件，或粘贴需要的设计规则。先确认读到了哪些材料，再说明页面需求。检查生成的预览；若导出源码，使用导出项目自己的构建说明。

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

Lovable：加入项目 Knowledge

打开项目设置，将相关设计规则加入 Knowledge。说明完整参考文件的位置，并要求 Lovable 确认当前可用的上下文。每次修改后检查真实预览；源码导出是另一条工作路径。

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

v0: Shiftline

v0 根据 Atlas 参考做出了中文的 Shiftline 概览页和独立排班页。你可以新增班次，按日期和团队组合筛选，刷新后仍能看到当前浏览器里保存的排班。手机上的周视图可以横向滚动到周末。

v0 Mini · Next.js 16.3.3 ·

v0 生成的 Shiftline 概览页，1440px 浅色主题。
v0 生成的 Shiftline 概览页，1440px 浅色主题。
v0 生成的 Schedule 排班页周视图，390px 深色主题。
v0 生成的 Schedule 排班页周视图，390px 深色主题。
打开实际成品阅读成品的 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. v0：附加设计参考

    新建独立的 v0 项目。通过对话附件添加 REFERENCE_DESIGN.md 和页面相关源码，再粘贴同一份排班需求。生成前确认 v0 收到了哪些文件。文本文件提供视觉规则，不会导入可运行后端。

  4. Lovable：添加项目 Knowledge

    新建独立的 Lovable 项目，打开 Project settings → Knowledge，加入相关捕获规则和参考文件指令，再发送同一份排班需求。Lovable 也可以读取已连接项目仓库中的 AGENTS.md 或 CLAUDE.md。请核对当前项目真正可读取的文件，不要假定上传 ZIP 就已完成导入。

  5. 有源码时：分别构建项目

    通过 v0 的导出或仓库选项取得源码。如果也取得了 Lovable 源码，就单独检查该项目。将各自的代码和 REFERENCE_DESIGN.md 放在不同目录，按项目说明安装并构建。打开重建后的页面，与参考逐项对照。要把最终 DESIGN.md 作为新风格指南使用，还需确认它与这些页面一致。

  6. 未导出时：检查 Lovable 真实预览

    没有导出源码，也可以检查并展示 Lovable 中实际运行的成品。分别打开桌面和手机预览，为检查过的页面和操作保存真实截图或录屏。随图记录预览链接、检查日期，以及从 REFERENCE_DESIGN.md 提供的文件或摘录。分享时说明实际检查了哪些预览效果，并注明尚未独立重建源码或核对最终 DESIGN.md。

  7. 分别操作两个成品

    分别在 390px、768px、1440px 下检查 v0 和 Lovable 成品。通过导航进入看板和 Schedule 排班页，切换日期和团队筛选，添加班次，再刷新确认已经保存。用键盘打开和关闭控件，检查页面横向溢出；有可用主题切换时，也要检查刷新后的状态。

文件与命令

项目 Knowledge 指令

根据提供的 REFERENCE_DESIGN.md 事实使用字体、颜色角色、间距和响应式布局，保持参考文件不变。修改前先说明可以读取哪些参考文件或摘录，再按需求制作 Shiftline。如果生成新的 DESIGN.md，请分开保存，用它描述成品。

同一份排班需求

制作 Shiftline，为 8 至 20 人的团队提供一周排班看板。将 Atlas Dispatch 替换为新品牌、成员可用时间和人手覆盖摘要，再新增独立的 Schedule 排班页，在导航中提供入口并展示一周班次。支持在本地添加班次、按日期和团队筛选，刷新后保留新增班次。保留捕获的布局密度、字体、间距、表格行为及已有可用主题。不接入后端，不复制源页面的宣传内容。将捕获的 DESIGN.md 原样保存为 REFERENCE_DESIGN.md。在 390px、768px、1440px 下检查两个页面、键盘操作、页面横向溢出和刷新后的主题行为。有源码时，独立安装并构建项目；没有导出源码时，操作真实预览并保存截图或录屏。若有最终 DESIGN.md，再对照成品页面检查，并单独说明这项检查的结果。

交给工具前，先运行 CloneAny 下载项目

npm ci
npm run build
npm run preview

工具无法读取文件时

先确认项目能读取哪些文件。如果附件无法读取，就把相关设计事实粘贴到项目上下文，并记录实际提供了什么。将完整 REFERENCE_DESIGN.md 与项目记录保存在一起，便于分别对照两个成品。

取得源码后，按该项目的脚本安装和构建，原 Tailwind 命令可能不再适用。使用 Lovable 预览时，记录出问题的页面和操作，让工具修正后在更新的预览中重新操作。分别记录 v0 和 Lovable 的检查结果。

工具官方说明

把参考带进你的项目

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

生成设计参考

继续阅读