Sitemap
Before writing the first line of code, draw every page and the transitions between them on a single diagram. Page count is scope; jump relationships are complexity.
- 做到一半发现某个页面没有入口，或者进去了出不来
- 同一个内容有三个入口，三处显示的东西还不一致
- 让 AI 一个页面一个页面地做，做完发现它们连不起来
Building one page at a time, each one reasonable in isolation, yet the whole thing falls apart when stitched together—this is the most common structural problem in vibecoding. The AI only ever sees the current page; the jump relationships live only in your head, and unless you draw them out, they don't exist.
How to draw it
| 步骤 | 具体做什么 |
|---|---|
| 列页面 | 把每个独立页面写成一个方块。弹窗和抽屉不算独立页面，标注在所属页面上 |
| 连层级 | 用实线连出从属关系。这条线对应的是导航和面包屑 |
| 连跳转 | 用虚线画出「做完某个动作之后去哪」。这条线对应的是按钮 |
| 标状态 | 在需要登录、需要权限、可能为空的页面上做标记 |
Four things to check once it's drawn
- Every page needs at least one entry point. A page with no entry doesn't exist, unless it's only reached via a shared link.
- Every page needs a way out. A page you can enter but not leave is fatal on mobile — the user can only quit the app.
- Count how deep it goes. Beyond three levels, go back and see if you can pull things up (see Wide and Shallow).
- Check how many entry points the same content has. Multiple entries aren't the problem — the problem is when they each show something different.
Note for the AI
Put the map into context so the AI knows where each page sits in the overall picture when it builds it.
这是产品的页面地图，之后每次做页面都要遵守它：
层级（实线）：
- 项目列表
- 项目详情
- 改稿记录
- 生成对账单
- 新建项目
流程跳转（虚线）：
- 新建项目 完成后 → 项目详情
- 生成对账单 完成后 → 项目详情
- 任何页面 未登录时 → 登录页
约束：
- 不要新增地图之外的页面。确实需要新页面时，
先告诉我它该挂在哪一层、入口从哪来，等我确认。
- 每个页面都要有返回上一级的路径。
- 做某个页面时，把它的入口和出口一并实现，不要留断头路。
现在开始做：[页面名]
That last constraint saves a lot of rework. The AI defaults to building only the page you named; the entry point and return path are often empty, and you only notice when you click in.