專案定位
不是聊天機器人，而是可掃讀的職涯指南
Stratum 不是單純讓使用者和 AI 聊天，而是把 AI 建議整理成一份好讀的職涯指南。使用者可以快速看職涯方向、能力缺口，以及下一步可以做什麼。
角色與範圍
負責 UI 架構、AI 互動狀態與前端原型
我負責規劃資訊架構、設計畫面與互動狀態，並用 Nuxt 3 串接 Gemini API 做出可操作原型，確認真實 AI 回覆放進介面後是否仍然好讀。
問題背景
AI 職涯建議有用，但不容易信任與掃讀
AI 常常一次回很多內容，但段落長、重點不固定。使用者雖然拿到很多建議，還是不一定知道哪個最重要、該不該相信、下一步要做什麼。
設計目標
讓 AI 建議變得可讀、有節奏、可行動
我的目標是讓等待和閱讀都比較不累。畫面不直接丟出一整片文字，而是把內容拆成清楚區塊，並在生成時讓使用者知道系統正在處理。
互動洞察
使用者會先掃讀 AI 建議，再決定是否信任
我觀察到，AI 回覆不是越多越好。使用者通常會先看標題、標籤、理由和下一步，判斷這份建議值不值得繼續讀。
困難與取捨
為不可預測輸出設計可預期容器
主要困難是 Gemini 每次回覆的長度和結構不一定一樣。我用固定區塊、流式回饋和卡片層級去承接內容，避免回覆一變長，整個頁面就變得很亂。
關鍵設計決策
將不可預測的 AI 輸出轉成可預期的 UI 區塊
- 把答案拆成職涯方向、判斷理由、能力缺口和下一步行動，讓使用者不用從頭讀到尾。
- 設計流式回饋，讓使用者在等待 AI 生成時知道系統還在處理。
- 用清楚標籤和卡片層級，讓不同建議更容易比較。
主要畫面展示
從原始 AI 資料到結構化職涯路徑
這些畫面呈現原本很散的 AI 回覆，如何被整理成有標題、有分類、比較容易掃讀的介面。
AI 產品案例
為不確定性設計，而不只處理成功狀態
AI 回覆會因為問題和模型狀態而改變，所以介面需要固定的容器、等待時的回饋，以及清楚的下一步。
- 固定模組可以避免 AI 回覆變成一大段很難讀的文字。
- 流式動態讓使用者在答案還沒完成前，也知道正在生成。
- 建議卡片讓使用者更容易比較，也更容易檢查 AI 建議是否合理。
設計系統案例
以對比與焦點建立深色介面系統
視覺系統使用 mesh gradient、高對比重點色與重複的卡片樣式，讓 AI 資訊很多時仍然能讀。
檢查重點是：使用者能不能快速看懂第一個建議，並且不需要逐字讀完整篇內容，也能知道下一步可以做什麼。
- 3 秒
- 核心概念辨識目標
- 4 個模組
- 職涯答案結構
- 1 個原型
- 真實 AI 回覆流程
反思與下一步
下一版應讓 AI 信心與依據更明確
目前原型已經讓 AI 回覆比較好讀。下一步需要讓使用者更清楚知道：這個建議為什麼成立、可以怎麼重新生成、還能追問什麼。
- 補上更清楚的重新生成和條件調整，讓使用者可以修正自己的職涯背景。
- 呈現建議成立的理由，讓 AI 建議更容易被檢查。