结构与线框图
原因： 内容先于设计。在决定外观之前，先决定内容放在哪里。仅使用灰色的线框图会鼓励对结构提出批评；一旦某件事看起来很完整，人们只会评论颜色。效果良好的AI网站构建工具（如Relume、Google Stitch）也遵循站点地图 → 线框图 → 样式的流程，原因相同。
需要： 01-facts/facts.md、01-facts/inventory.md（重新设计时）、02-personas/personas.md、03-brand/brand.md。
产出： 04-structure/sitemap.md（页面树、导航、URL规则、重定向、消息顺序）、04-structure/wireframes/r<轮次>/*.html。
本步骤分为两部分，每部分有一次审查，因为结构和线框图在一个轮次中处理量太大：第一部分确定页面树，第二部分展示线框图。
1. 页面树
从角色的问题出发，而不是从旧网站或组织架构图出发。每个页面向一个主要角色回答一个主要问题。
在 sitemap.md 中，为每个页面列出：URL、标题、主要问题、主要角色、主要操作、状态（发布 / 后续）。然后：
- 导航： 顶层项目（目标为5–7个）、页脚内容、是否需要巨型菜单。
- URL规则： 语言前缀、是否使用尾部斜线、小写、使用单词而非ID。
- 重定向： 针对清单中标记的每个页面，旧URL → 新URL。
- 发布范围： 能够回答主要角色问题的最小页面集。空部分（例如“博客 – 即将推出”）不予包含。
保持尽可能精简，以产品或服务的范围为准。每个页面都需要编写、设计和维护。
第一部分审查（review/04-structure-r1.html）：页面树、导航、URL规则、重定向、发布范围。停止： 在构建线框图之前等待决策。
2. 每个关键页面的消息顺序
将其写入 sitemap.md，每个页面一个块。对于首页和每种页面类型（产品、定价、关于、联系、文章等）：从上到下列出各部分。对于每个部分：访问者此时的问题、一句答案、来自 facts.md 的证据，以及引导至下一部分的内容。首屏需说明承诺和主要操作。
3. 线框图
为每种关键页面类型构建一个HTML线框图，移动端优先，同时在桌面宽度下检查。第一轮线框图最多展示四个：首页和最重要的三种页面类型。其余类型在下一轮中处理。将每个轮次保存在自己的文件夹中（wireframes/r2/ 等）并共享一个样式表。
- 仅使用灰色，一种系统字体，用带叉号的方框表示图片，无品牌颜色，无图标集，无阴影。
- 使用来自
brand.md和facts.md的真实草稿文案，绝不使用Lorem Ipsum。标题仍可以粗糙；将其标记为draft。 - 真实长度：如果列表将有12项，则显示12项。
- 为每个部分标注其回答的问题，用其上方的小灰色文字显示。
- 在展示之前，分别以390像素和1440像素宽渲染并查看每个线框图。
第二部分审查
并排展示消息顺序和线框图的截图（移动端和桌面），每个截图链接到对应的HTML文件。典型决策：页面各部分顺序、缺失或多余的页面类型、首屏必须包含的内容。
完成条件： 页面树、导航、URL规则、重定向以及关键页面的各部分顺序已确定。文案在第8步中细化；布局细节可能在第9步中更改。