📐 表格佈局，毫無視覺層次

👆 點擊目標太小，行動裝置操作困難

📱 沒有響應式設計 — 所有螢幕都是同一版面

🧠 老用戶早已習慣，新用戶直接離開

✅ HN 的資訊架構可以在不損失易用性的前提下被重新設計

✅ 6 頁的 React SPA 涵蓋真實的架構與設計複雜度

✅ 具有關聯結構的 Mock 資料（文章 ↔ 使用者 ↔ 留言）能實現逼真的跨頁導航

✅ 自治 Agent 團隊能端到端交付完整產品

文章 + 留言 — 核心 HN 流程。完整路由、URL 狀態、麵包屑。

使用者檔案 — 第二種實體，跨連結導航，不同版面模式。

投稿 — Feed App 中的表單頁面。驗證邏輯、不同互動模式。

搜尋 — URL 查詢參數、篩選控制項，與所有頁面相連。

書籤 — 唯一具有持久客戶端狀態的功能（localStorage），橫跨多頁。

1. 瀏覽 → 閱讀 → 探索
首頁 → 文章 → 留言作者 → 使用者檔案 → 他的投稿 → 文章詳情

2. 搜尋 → 發現 → 收藏
搜尋欄 → 結果 → 依分數篩選 → 點擊文章 → 加入書籤

3. 投稿 → 預覽 → 瀏覽
投稿頁 → 填寫表單 → 即時預覽 → 「送出」→ Toast 通知 → 首頁

4. 策展 → 回顧
瀏覽 → 收藏多篇 → /bookmarks → 點擊已存文章 → 閱讀

5. 依類型篩選
首頁 → 「Ask HN」標籤 → 討論串 → 「Show HN」標籤 → 不同文章

🧭 固定頂部導航 — Logo、文章標籤、搜尋、書籤徽章、投稿連結

📱 響應式版面 — 375px（iPhone SE）到 1440px 桌面版

🔙 瀏覽器歷史 — 前進/後退在所有路由皆正常運作

⚡ 頁面轉場 — CSS 淡入淡出（200ms）

👆 觸控目標 — 所有互動元素最小 44×44px

🚫 404 頁面 — 樣式化的錯誤頁，含回首頁導航

1. 可掃描勝過裝飾性 — 資訊密度是特色。視覺層級加速瀏覽，而非減速。

2. 溫暖中性色調 — 奶油色、柔和橙色，向 HN 經典致敬。現代對比度，不冷/不商業。

3. 大觸控區、緊密網格 — 44px+ 點擊目標、寬裕間距，桌面版仍保持資訊密度。

4. 漸進式揭露 — 重要資訊優先。留言可摺疊，metadata 為次要。

5. 系統原生感 — 系統字型堆疊，像是一個精心打造的工具 — 不是行銷網站。

🚀 零執行時期成本 — 樣式在建置時解析，無 JS 額外開銷

🔒 預設有作用域 — 無命名衝突、不需 BEM

🎨 設計 Token 作為 CSS 自訂屬性 — 設計師定義 Token，元件自然取用

📦 檔案並置 — Header.jsx + Header.module.css 放在一起

🧹 乾淨的 JSX — 不像 Tailwind 有大量 Utility Class

✅ 全部 5 個使用者流程已端對端測試

✅ 響應式版面在行動裝置與桌面版已驗證

✅ 設計系統 Token 在全站正確套用

✅ 乾淨建置 — 291KB JS、20KB CSS

⚠️ 4 個次要問題：檔案組織偏差（功能正常）

7 頁 · 45/48 規格項目 · 0 嚴重問題 · 🟢 通過

Agent Product Team · 2026 年 3 月