在完成了全功能開發、雲端資料庫串接、跨平台實機除錯以及開源文件的規範化後，《喵語日誌 PurrDay》已經具備了可交付產品的完整度。

然而，在技術求職或作品集展示中，光是列出「我使用了哪些技術」往往難以凸顯工程深度。面試官與技術主管更在乎的是：在面對技術瓶頸時，你做出了什麼架構決策？採取了什麼工程手段？以及最後達成了多少量化成效？

今天我將透過 STAR 原則（Situation、Task、Action、Result），將這段開發歷程萃取為結構化的專案亮點，並整理出具備即戰力的履歷描述與成果對比表。

STAR 結構化技術亮點剖析

亮點 1：AI 推論延遲與使用者等待體感優化

Situation（情境）： 多模態影像分析與擬人情緒推論耗時較長，雲端 API 往返時間約需 2～4 秒。

Task（任務）： 避免傳統轉圈 Loading 造成使用者焦慮、重複點擊或直接跳出頁面，需大幅降低「感知延遲」。

Action（行動）：

• 後端模型選型精準鎖定輕量高效率的 gemini-3.1-flash-lite。

• 前端即時渲染粉嫩貓咪微光骨架屏（Skeleton UI），提供 0 秒即時視覺反饋。

• 設計貓咪碎念等待文案隨機輪播（如：「正在聞照片…」、「組織喵喵語言中…」），將等待轉化為情感陪伴體驗。

Result（成果）： 首字感知延遲降至 0 秒，有效降低使用者操作流失率，顯著提升互動陪伴感。

亮點 2：前端 Canvas 圖片壓縮與頻寬成本控制

Situation（情境）： 現代手機直拍相片多為 5MB～10MB，若未經處理直接轉為 Base64 字串，體積會膨脹約 33%。

Task（任務）： 降低行動端上傳 Payload 體積，避免網路延遲過長與超出 API 請求上限。

Action（行動）：

• 獨立封裝 imageUtils.ts 工具模組。

• 利用 HTML5 Canvas 於記憶體中進行等比縮放（限制最大邊界 1024px），並以 canvas.toDataURL('image/jpeg', 0.8) 進行前端有損壓縮。

Result（成果）： 圖片 Payload 體積從 5MB～8MB 驟降至 300KB～500KB，壓縮率達 85% 以上，大幅節省傳輸頻寬並加快上傳速度。

亮點 3：iOS Safari 邊界相容性修復（P0 Bug）

Situation（情境）： 在真機測試時，iPhone Safari 點擊輸入框會強制放大畫面，導致右側發送按鈕被推擠出螢幕外，造成功能阻礙。

Task（任務）： 徹底解決 iOS 自動縮放機制與底部手勢導覽條（Home Indicator）遮擋問題。

Action（行動）：

• 將手機端 <input> 基準字體設為 text-base（16px），破解 Safari 小於 16px 強制放大的預設行為。

• 設定 viewport-fit=cover 與 user-scalable=no 雙重防護。

• 容器套用 safe-area-inset-bottom 適配底部安全邊界，並補齊 break-words 防止長字串撐爆排版。

Result（成果）： 達成 iOS Safari、Android Chrome 與 Desktop 桌面端 100% 跨平台排版一致性。

專案架構與工程指標量化對比

履歷專案描述範本

喵語日誌 PurrDay | AI 貓咪情緒陪伴全端 Web App (2026)
專案連結：GitHub Repo (github.com/hsuanwenlin/purrday-web) / 線上 Demo

• 前端架構與效能優化：運用 React 18 與 TypeScript 開發 SPA，封裝 HTML5 Canvas 圖片壓縮模組，將行動端上傳 Payload 減少 85%+（降至 500KB 以下），大幅提升傳輸速率。
• 解決 iOS 相容性阻礙：破解 iOS Safari 虛擬鍵盤聚焦強制自動縮放（16px 基準機制）之重大破版問題，並適配 Safe Area 底部安全邊界，達成雙平台 100% 排版一致性。
• 多模態 AI 與體感設計：串接 Google Gemini API 實現圖文多模態情緒辨識，並設計粉嫩微光骨架屏（Skeleton UI）與隨機碎念輪播，消除推論等待期間的感知延遲。
• 雲端架構與遊戲化機制：整合 Firebase Auth 匿名驗證與 Cloud Firestore 即時同步情緒日記與 7 天折線圖，設計 6 大成長里程碑即時計算引擎。
• 工程規範與 CI/CD：串接 GitHub 與 Vercel Pipeline 實現自動化邊緣節點構建，撰寫標準開源架構圖與環境變數規範（.env.example）。

結語

將程式碼轉化為具備業務思維與量化數據的描述，是從「單純寫 Code」邁向「成熟工程師」的必經之路。透過 STAR 原則與成果對比表，我們成功將這段技術實作淬鍊為能夠在履歷與面試中發光發熱的亮點作品。

明天將迎來全系列的最終章——Day 30【完賽感言】30 天全端 AI 貓咪日記全紀錄：從 Localhost 到雲端全端產品的旅程！ 感謝大家一路以來的陪伴，明天最終回見，喵～ 🐾