體驗課路線規劃器：Hero 背景圖除錯與部署驗證
目標唔係「再重做一版 Hero」，而係快速找出阻塞點，令同類問題之後 10-15 分鐘內可定位。
技術焦點係 CSS selector、Cloudflare Pages 部署版本同快取驗證流程。
起點問題（Before）
- Hero 視覺辨識度不足，需要加入背景圖。
- 本地修改後前台無變化，無法判斷失效層級。
- 團隊每次遇到類似問題都由頭試錯，效率低。
決策與做法（Why + How）
- 先驗素材可讀：先測圖檔 URL，排除資產失效。
- 再驗 CSS 命中：由 `hero{}` 改為 `.hero{}`，修正 selector 命中失敗。
- 最後驗部署版本：比對線上原始碼 + 硬刷新，確認新規則上線。
結果對比（After）
排錯更快
建立固定順序，唔再同時猜圖檔/樣式/快取。
線上恢復一致
Hero 視覺恢復預期，前台與本地顯示一致。
可重用 SOP
後續同類問題可直接套「圖檔→selector→部署」。
註：本案主軸係技術排錯，不含文案重寫或轉換率 A/B 測試。
範圍與限制（Scope）
今次有做
- Hero 圖檔/selector/部署三段排查
- 線上版本核對與快取驗證
- 排查流程文檔化
今次未做
- 完整 UI 重設計
- 追蹤事件與報表佈建
- 多版本視覺測試
可複製條件
- 「本地正常、線上失效」的靜態頁問題。
- 團隊需把排錯由經驗流變成流程流。
- 要先恢復交付穩定，再做視覺深度優化。
你的頁面也有「本地正常、線上失效」問題？
我可以幫你做一次前端與部署流程診斷，快速找出阻塞點。
預約 30 分鐘診斷：幫你定邊啲值得自建、邊啲可以遲啲先換。