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