站在貨架前，
一掃就知道哪裡最便宜

• 打開 App（PWA 從主畫面啟動，免安裝）→ 首頁三個大按鈕：輸入、掃碼、拍照。
• 掃碼成功震動提示 → 直接跳到比價頁，並請使用者輸入店內標價（可略過，用回報價）。
• 比價結果：最上方一句話結論（在哪買省多少），下方各通路實付價由低到高。
• 想再想想 → 「看走勢」確認是不是低點；或「設降價提醒」。
• 確定要網購 → 加入採購清單，回家一次結帳；或前往平台頁面購買。

• ① 用戶端送出 GTIN 或關鍵字 → Gateway 驗證與限流。
• ② 查 Redis：熱門商品 10 分鐘內有結果就直接回傳。
• ③ 未命中 → 比價聚合服務並行查詢 4 個電商來源，每個來源逾時 2.5 秒。
• ④ 比對引擎過濾非同款（例如 72 包與 24 包），計算單位價與實付價。
• ⑤ 寫入價格點到時序資料庫（非同步，不影響回應時間）。
• ⑥ 回傳排序結果＋走勢摘要；部分來源失敗時標記「暫無資料」而非整體錯誤。

所有任務進入佇列，失敗採指數退避重試 3 次；連續失敗的來源自動降級並通知值班人員。

每日最低價序列：取每天各電商實付價的最小值，形成 90 天序列。

價格百分位 P：目前價格在 90 天中贏過多少天。P 越低代表越便宜。

• P ≤ 25：建議入手（處於近期低點）
• 25 < P ≤ 60：價格合理（急用可買）
• P > 60：建議觀望，系統自動建議提醒價＝90 天第 25 百分位

清單組合最佳化：先為每件商品找最低實付通路，再依通路合併計算免運門檻；若合併到單一平台反而更省（運費門檻效應），就推薦單一平台方案。

• 每次寫入價格點時比對提醒條件，命中後進入通知佇列。
• 同一商品 24 小時內最多通知 1 次；夜間 22:00–08:00 延後發送。
• 通知內容附上目前最低通路、與提醒價差距、價格更新時間。

• 節奏：雙週 Sprint；週一規劃、每日 15 分鐘站會、雙週五 Demo 與回顧。
• 分支：主幹開發＋短命功能分支，所有合併需 1 人以上 Code Review。
• 品質：單元測試涵蓋比對引擎與計價邏輯；E2E 測試涵蓋掃碼→比價→加入清單主流程。
• 發佈：CI 自動建置、Lighthouse 分數低於 90 就擋下；新功能用 Feature Flag 先開給 5% 使用者。
• 監控：前端 Web Vitals、後端錯誤率與各來源成功率儀表板。

頂部列固定放「掃碼、深淺色、字級」三個最常用動作，任何頁面一鍵可達。

• 插圖：暖色調、圓潤造型、深咖啡描邊 2.2px；人物帶腮紅與微笑，傳達「買到好價的小確幸」。
• 圖示：24px 網格、1.8px 圓角線條，與插圖同一套圓角語言。
• 功能入口圖示：圓形淡色底＋紙張白＋一個強調色點綴（掃描紅線、愛心鏡頭）。
• 全部以內嵌 SVG 繪製，深色模式自動換色，不需額外圖片請求。

• 頁面切換：淡入＋上移 12px，420ms，緩動曲線 cubic-bezier(.22,.8,.24,1)。
• 收合面板：高度過渡 380ms，以 grid 列高動畫實作，不跳動。
• 比價列表：逐列滑入、價格長條由左長出，引導視線。
• 使用者若開啟「減少動態效果」，所有動畫自動關閉。

• 主題三選一：淺色、深色、跟隨系統；設定存在瀏覽器，下次開啟不閃爍。
• 字級四段：小 14px／標準 16px／大 18px／特大 20px；全站使用 rem，整體等比縮放。
• 色彩全部透過 CSS 變數（設計 Token）管理，新增主題只需改一組變數。

• 文字對比符合 WCAG AA；按鈕觸控區至少 44×44px。
• 所有圖示按鈕有 aria-label；收合面板有 aria-expanded。
• 鍵盤可完整操作，焦點框清楚可見；Esc 可關閉彈窗。

server {
  listen 443 ssl http2;
  server_name price.example.com;
  root /var/www/goodprice;
  index index.html;

  gzip on;
  gzip_types text/html text/css application/javascript image/svg+xml;

  location = /index.html {
    add_header Cache-Control "no-cache";
  }
  location ~* \.(js|css|svg|png|webp|woff2)$ {
    add_header Cache-Control "public, max-age=31536000, immutable";
  }
  add_header Strict-Transport-Security "max-age=31536000" always;
  add_header Permissions-Policy "camera=(self)" always;
}

• 零外部依賴：不載入字型、框架與圖片，一次請求即完成。
• 全部插圖與圖示為內嵌 SVG＋圖示 sprite 重複引用，體積小、可隨深色模式換色。
• 主題於 <head> 先行套用，避免開啟時白屏閃爍。
• 頁面模組延遲渲染：圖表、清單只在切換到該頁時才計算。
• 價格歷史記憶化快取，切換期間不重算。
• 動畫只用 transform 與 opacity，由 GPU 合成，不觸發重排。

• manifest.webmanifest：名稱、圖示（含 maskable 版）、主題色、獨立視窗模式，以及長按圖示出現的「掃碼／走勢／採購」捷徑。
• sw.js：頁面採網路優先、3 秒逾時改用快取，所以上線新版後馬上生效，沒訊號時也能開；圖示採快取優先、背景更新。
• 安裝：Android／電腦版 Chrome、Edge 會在頂部列與「顯示設定」出現「安裝到主畫面」按鈕；iPhone 用 Safari 的「分享 → 加入主畫面」。
• 離線提示：斷線時頂端顯示「離線中」，恢復時提示「網路已恢復」。
• 更新版本：改網站後把 sw.js 的 VERSION 換掉，舊快取會自動清除。

• 產品經理 1：需求、優先序、資料來源合作洽談。
• UI/UX 設計 1：插圖、元件庫、可用性測試。
• 前端工程 2：PWA、掃碼、圖表、效能。
• 後端工程 2：聚合服務、比對引擎、通知。
• 資料工程 1：收集排程、時序資料、分析模型。
• QA 1：自動化測試與裝置相容性。