页面地图
在写第一行代码之前，把全部页面和它们之间的跳转画在一张图上。页面数量是范围，跳转关系是复杂度。
你会遇到的现象
- 做到一半发现某个页面没有入口，或者进去了出不来
- 同一个内容有三个入口，三处显示的东西还不一致
- 让 AI 一个页面一个页面地做，做完发现它们连不起来
一个页面一个页面地做，每个都合理，合在一起却不成立——这是 vibecoding 最常见的结构问题。AI 每次只看得到当前这一个页面，跳转关系只存在于你脑子里，你不画出来它就不存在。
怎么画
| 步骤 | 具体做什么 |
|---|---|
| 列页面 | 把每个独立页面写成一个方块。弹窗和抽屉不算独立页面，标注在所属页面上 |
| 连层级 | 用实线连出从属关系。这条线对应的是导航和面包屑 |
| 连跳转 | 用虚线画出「做完某个动作之后去哪」。这条线对应的是按钮 |
| 标状态 | 在需要登录、需要权限、可能为空的页面上做标记 |
画完检查四条
- 每个页面至少有一个入口。没有入口的页面等于不存在，除非它只通过链接分享访问。
- 每个页面都有出路。进得去出不来的页面在移动端尤其致命，用户只能退出应用。
- 数一下最深有几层。超过三层就回去看能不能提上来（见宽而浅）。
- 同一个内容有几个入口。多入口不是问题，问题是几个入口进去之后显示的东西不一样。
给 AI 的话
把地图放进上下文，AI 做每个页面时就知道它在整体里的位置。
PROMPT · 页面地图
这是产品的页面地图，之后每次做页面都要遵守它：
层级（实线）：
- 项目列表
- 项目详情
- 改稿记录
- 生成对账单
- 新建项目
流程跳转（虚线）：
- 新建项目 完成后 → 项目详情
- 生成对账单 完成后 → 项目详情
- 任何页面 未登录时 → 登录页
约束：
- 不要新增地图之外的页面。确实需要新页面时，
先告诉我它该挂在哪一层、入口从哪来，等我确认。
- 每个页面都要有返回上一级的路径。
- 做某个页面时，把它的入口和出口一并实现，不要留断头路。
现在开始做：[页面名]
最后那条约束能省掉很多返工。AI 默认只做你点名的那个页面，入口和返回经常是空的，等你点进去才发现。