不知不覺，已經來到第一週的最後一天了！
回顧這 6 天，我們從最初的貓咪 Persona 設計開始，一路完成了多模態圖片分析、JSON Schema、Structured Outputs，最後還把 Gemini API 串接到 Vite + React 前端。
一開始，《喵語日誌》還只是一個「想讓 AI 扮演貓咪陪伴者」的構想。到了 Day 06，我們已經可以讓使用者輸入生活近況，呼叫 Gemini 分析，再把結果渲染成一張真正的貓咪日誌卡片。
不過，如果要繼續往完整產品前進，除了 API 能正常運作之外，還需要先想清楚一件事：
使用者實際上要看到什麼畫面？又要如何操作這個產品？
因此今天暫時放下程式碼，先整理第一週的成果，再利用 AI UI 生成工具 v0，將《喵語日誌》的三大核心畫面快速做成 Wireframe，讓接下來的開發方向更清楚。
這週主要完成了 4 個重要里程碑。
我們先替 Gemini 設計了「喵喵」這個角色：
透過 System Instructions，原本比較制式的 AI 回應，開始有了比較一致的個性與語氣。
接著，我們讓 Gemini 不只理解文字，也能分析使用者上傳的照片。
例如看到晚餐照片時，可以歸納成「深夜美食」；看到筆電和文件時，可能判斷為「努力上班」。
接著再使用 Response Schema，將結果整理成固定的 JSON 欄位：
{
"mood_score": 7,
"lifestyle_label": "專案開發後的放鬆時光",
"cat_response": "喵嗚～今天完成專案骨架已經很棒了！先好好休息一下，讓喵喵陪你放空，喵～"
}
Response Schema 的好處，是讓模型依照指定的欄位和型別輸出，比單純在 Prompt 裡要求「請回傳 JSON」更適合拿來和程式串接。
在 Day 06，我們使用 Vite、React 和 TypeScript 建立前端專案，並將程式拆分成幾個主要區塊：
src/
├── components/
│ └── DiaryCard.tsx
├── services/
│ └── geminiService.ts
├── types/
│ └── diary.ts
├── App.tsx
└── main.tsx
這樣的結構讓 UI 元件、API 呼叫和資料型別各自分工，未來要增加月曆或成就頁面時，也比較容易維護。
另外，本週也練習了使用環境變數讀取 API Key。不過要特別提醒，Vite 中以 VITE_ 開頭的變數會被打包到前端程式碼，因此適合用於學習或 Demo，不代表真正隱藏了 API Key。
最後，我們引入 Google 官方的 @google/genai SDK，完成以下流程：
使用者輸入近況
↓
React 表單送出資料
↓
呼叫 Gemini API
↓
取得結構化 JSON
↓
更新 React State
↓
渲染貓咪日誌卡片
這代表《喵語日誌》的核心 AI 功能，已經從 AI Studio 裡的概念驗證，正式進入可以操作的前端原型階段。
完成 API 串接後，我開始思考下一個問題：
如果《喵語日誌》要變成一個完整產品，除了目前的輸入框和回應卡片，還需要哪些頁面？
這次我使用 v0 協助生成 UI 原型。它比較像是用文字描述需求，再產生前端介面草稿的工具，而不只是單純畫圖片。
我把前幾天整理好的資料欄位、使用者流程和產品想法，轉換成畫面需求，先快速確認版面配置和互動方向。
第一個畫面是整個產品最主要的入口，也就是日誌對話頁。
設計重點
▲《喵語日誌》日誌對話頁 Wireframe
這個頁面對應到我們 Day 06 已經完成的功能。
未來如果加入圖片上傳，就可以讓使用者一邊輸入文字、一邊上傳今天的照片，讓喵喵一起分析。
第二個畫面是情緒月曆。
既然每次日誌都有一個 mood_score，我們就可以把這些分數放到月曆上，用顏色呈現每天的情緒狀態。
設計重點
例如：
分數 1～3：偏低落的冷色系。
分數 4～6：中性的暖色系。
分數 7～10：比較明亮的開心色系。
▲《喵語日誌》情緒月曆頁 Wireframe
這個頁面就是把 API 回傳的資料進一步視覺化。
原本只是一個 mood_score: 7，經過月曆設計後，就可以變成使用者看得懂的長期情緒趨勢。
當然，這裡的情緒分數只是 AI 根據文字或照片做出的生活紀錄分類，不能當成心理或醫療診斷。它比較適合用來幫助使用者回顧自己的生活狀態。
第三個畫面是成就與親密度頁。
如果每天都只是寫日誌，使用者可能很快就失去動力。因此我想加入一些輕量的遊戲化設計，讓使用者有持續記錄的理由。
設計重點
可以設計成以下類型的徽章：
▲ 圖三：《喵語日誌》成就與親密度頁 Wireframe
這些功能不一定要第一版就全部完成，但先把畫面和資料需求想清楚，後面開發時就比較不會一直修改架構。
這次先使用 AI 生成 Wireframe，雖然畫面還不是最終版本，但至少可以提前確認：
這樣可以在還沒寫大量 CSS 之前，先快速驗證產品方向。
這次最有趣的地方是，API Schema 不只是後端格式而已，也可以直接影響 UI 設計。
例如：
interface CatDiaryResponse {
mood_score: number;
lifestyle_label: string;
cat_response: string;
}
看到這三個欄位後，就可以很自然地對應出：
mood_score → 情緒指數或月曆色塊lifestyle_label → 日誌卡片標籤cat_response → 貓咪陪伴語錄也就是說，先定義資料，再根據資料設計畫面，可以讓前後端更容易對接。
這次使用 v0 產生的畫面，主要是用來確認產品方向，不代表最後一定要完全照著做。
實際開發時，還是要根據以下條件調整：
所以我會把這次的結果視為產品藍圖，而不是直接交付的最終 UI。
第一週的 AI 基礎建設順利打好地基！我們從貓咪 Persona 與多模態分析出發，透過 JSON Schema 完成結構化輸出，並成功建立 Vite + React 前端骨架與 Gemini API 的端到端串接，最後繪製出《喵語日誌》三大核心畫面的產品原型。核心 AI 能力與產品藍圖已正式到位！
下一週我們將正式解鎖 Vibe Coding 模式！借助 AI 助理的力量，把 Wireframe 轉化為真正可操作的介面，陸續加入 Tailwind CSS 視覺樣式、動畫互動、LocalStorage 本機儲存與 RWD 響應式切換。
第一週我們準備好了 AI 的靈魂與骨架，第二週就要讓《喵語日誌》長出外觀與生命力了。準備好開始 Vibe Coding 了嗎？喵～
iThome鐵人賽
看影片追技術