結構與線框圖
原因： 內容先於設計。在決定外觀之前，先決定什麼放在哪裡。純灰色的線框圖能引發對結構的批評；一旦某些東西看起來完成，人們只會對顏色發表意見。能產出良好結果的 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<round>/*.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 px 和 1440 px 渲染並查看每個線框圖。
審查，第二部分
以並排截圖的方式（行動版和桌面版）展示訊息順序和線框圖，每個截圖連結到其 HTML 檔案。典型的決策：每個頁面的區塊順序、缺失或多餘的頁面類型、第一個畫面必須包含的內容。
完成條件： 頁面樹、導航、URL 規則、重定向以及關鍵頁面的區塊順序已決定。文案將在第 8 步細化；佈局細節可能在第 9 步發生變化。