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