不知不覺，鐵人賽已經進行到第 15 天，也正式迎來整個挑戰的半程里程碑。
回顧過去兩週，我們從零開始構思《喵語日誌》，一步一步完成了視覺調性設計、即時陪伴對話介面、圖片壓縮與拖曳上傳預覽、情緒折線圖與日曆熱力圖、遊戲化成就收藏牆，以及手機與電腦雙端的 RWD 響應式適配。
今天我們不再急著新增大型功能，而是將這段時間完成的所有模組整合起來，進行一次完整的靜態版功能驗收。除了展示目前的 Demo 成果，也藉這個機會回顧這兩週透過 Vibe Coding 進行人機協作後，開發方式與思考模式產生了哪些改變。
目前《喵語日誌》由三個核心分頁組成，分別負責日常陪伴、情緒紀錄與自我激勵，形成一個完整的使用流程。
喵喵對話是整個 App 的主要互動入口。除了基本的文字對話氣泡與可愛貓咪頭像之外，我們加入了五種低飽和色彩的心情標籤、圖片壓縮演算法、拖曳上傳與即時預覽功能。
在使用者發送訊息後，系統會觸發自然跳動的打字動畫，模擬貓咪正在思考與回覆的過程，增加了互動的節奏感。搭配柔和的粉嫩配色與圓角卡片設計，希望讓使用者在記錄心情時，感受到像是在和一隻溫柔的貓咪聊天，而不是單純填寫表單。
情緒分析提供「折線走勢圖」與「情緒日曆」兩種檢視方式。
折線走勢圖利用平滑的貝茲曲線、自訂 Emoji 情緒刻度與清楚的日期標示，幫助使用者快速觀察一段時間內的心情起伏；情緒日曆則以月曆網格呈現每日紀錄，每一天使用不同的柔和色系圓圈代表當日的情緒狀態。點選特定日期後，下方卡片即可即時查看該天的心情評分與狀態說明，讓使用者更直覺地回顧生活點滴。
成就收藏牆則是用來鼓勵使用者持續記錄。這個頁面透過遊戲化機制，將日常情緒紀錄轉化為徽章收集體驗。
介面採用雙欄卡片佈局，搭配貓咪主題 Emoji 徽章、解鎖進度條與頂部的總完成度統計。已解鎖的成就會以明亮的粉紅色呈現；尚未解鎖的成就則使用灰階與鎖頭效果，並透過進度條提示使用者目前距離目標還有多遠，有效提升長期持續記錄的動力。
完成三大模組整合後，我們也針對整體操作體驗進行了細緻調校，包含 Tab 頁籤淡入動畫、電腦端置中卡片配置，以及手機端透過 100dvh 動態高度實現的滿版原生操作感，確保在不同裝置上都能維持一致的視覺語言。
以下依序展示目前完成的四組成果畫面：
聊天室傳送美食照片與貓咪回覆
情緒分析折線走勢圖
情緒分析情緒日曆
成就收藏牆與雙端響應式畫面
目前所有頁面皆使用精心設計的 Mock Data 進行渲染。雖然資料尚未連接真正的後端服務，但整體前端操作流程與視覺風格已經具備相當完整的雛形。
回顧這 15 天的開發過程，Vibe Coding 帶來最明顯的改變在於大幅縮短了「想法」轉化為「畫面」的距離。在傳統前端開發流程中，工程師往往需要花費大量時間手寫 CSS 樣式、刻排版網格以及除錯微小的 Margin 與 Padding 邊界。
而在與 AI 深度協作的模式下，開發者的角色更接近產品架構師與指揮家。我們負責定義清楚的產品需求、挑選統一的色彩語言、規劃 Component 元件樹狀結構，並將重複性高的樣式建構交由 AI 快速產出。接著我們再針對細部的圖表高度、按鈕防擠壓、圓角接縫與使用者體驗進行微調。
這種先產出、再觀察、持續微調的高頻迭代節奏，讓開發過程更接近設計與創作，而不只是單純敲打程式碼。
前半程我們成功完成了《喵語日誌》完整的前端靜態外觀與互動介面。雖然目前日曆數據與貓咪回覆仍是固定的 Mock Data，但這正是為了後半程打下最穩固的基石。
從明天開始，我們將正式跨入 【API 串接、Firebase 資料庫與邏輯整合】 的全新階段！明天我們將直接從 【Gemini API 聊天室整合】 啟程，將第一週驗證好的 Gemini 3 Flash 模型與結構化分析正式接入全新完工的對話元件中，告別固定假資料，讓貓咪真正開口說話、具備即時陪伴的靈魂！
明天見，喵～
iThome鐵人賽
看影片追技術