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