《買對不買貴》：AI 實驗室系列｜一位 UI/UX 設計師用 AI 打造的個人化價格 Web app
《買對不買貴》是我 AI 實驗室（AI Lab Series） 的第一個 Side Project。
這個系列的宗旨很明確：
「探索 UI/UX 設計師如何運用 AI 工具加速產品落地，將設計能量延伸到真實可用的產品形態。」
我不是工程師，甚至在做這個 App 之前：
❗我只會寫CSS，無法進行完整的 Coding
但透過 AI Code Assistant，我使用了近來興起的 「Vibe Coding」 模式：
用對話、描述需求、貼介面、丟問題的方式引導 AI 產生可執行的程式碼。
在這個過程中，我成功：
☑️ 學會如何部署 App 至雲端
☑️ 建立 Firebase 後端
☑️ 讓 App 真正可以在手上安裝與使用
☑️完整驗證從 UI/UX → 可落地產品的全流程
這個專案不只是設計作品，而是一個 AI 與 UX 能力結合的實驗成果。
✦ 專案背景
作為一名極度精打細算的使用者，我在實際購物時經常面臨痛點：
🔎 痛點
Shopee 上次買多少？
Momo 這陣子有沒有活動？
眼前的價格可以買嗎？
賣場特價 4 公斤 $500 和線上購 10 公斤 $1100，哪個單價更便宜？
我發現市面上的記帳 App 操作方式不適合比價紀錄，而電商 App 只能看自己平台的價格。
因此，我提出這個專案的初衷：
❇ 我需要一個極度輕量、個人化、比價專注的價格資料庫。
也因此誕生了《買對不買貴》。
✦ 5W1H 需求拆解
🙋 Who
家庭採購者、寵物飼主、囤貨者、價格敏感者。
❓ Why
避免買貴、避免跨平台價格記憶斷層；建立個人的價格智慧。
🕙 When
在家整理購物清單
在賣場快速判斷價格是否划算
📱 Where
移動場景，以單手操作為主。
🤔 What
一款輕量、快速、專注價格的個人比價工具。
🛠️ How
深色模式、手勢操作、單位價格優先顯示、外部比價整合。
✦AI 協作：Vibe Coding 的實踐
我在這個過程中完成了：
☑️ AI 協作
☑️ 建立 Firebase 雲端資料庫
☑️ 部署
☑️ 讓 App 打包成可安裝版本
☑️ UX 驗收與迭代
✦核心設計亮點
單位價格優先
我把「單位價格」視為本 App 的 核心資訊。
自動計算/ 格式統一 / 視覺層級最高
目標是讓使用者在 0.5 秒內判斷這個商品值不值得買。
手勢優先的互動設計
以 iOS Pattern 為靈感：
左滑加入待買清單
編輯與刪除藏在次層手勢中
讓例行操作變得更接近「肌肉記憶」
Barcode Scanner（條碼掃描）
📸 掃一下貓砂袋子上的條碼 → App 自動搜尋資料庫
若已存在 → 直接開啟商品卡片
若不存在 → 自動帶入條碼，使用者補上名稱即可
這能大幅提升更新價格的速度，也讓「資料庫維護」變得零摩擦。
外部比價整合
點一下即可跳轉至：
Shopee
Momo
Coupang酷澎
並自動帶入商品名稱。
把原本 4 步驟變成 1 步驟，是最能強化體驗的設計之一。
資料庫模式 / 採購模式
雙模式切換有效降低心智負擔：
「資料庫模式」整理資訊
「採購模式」專注購買清單
✦ 迭代
顯示邏輯
若使用者選擇單位為 個、包、組、罐 → ❌ 不顯示（不需換算）
若選擇 kg、g、L、ml → ❌ 不顯示（本身就是公制）
只有選擇 lb、oz 時 → ✔️ 顯示換算 Checkbox
互動/呈現方式
當勾選後：
「1 lb → 約 0.45 公斤」
會即時顯示在 Checkbox 旁，避免使用者切換畫面找資料。
商品卡片會呈現：
$10.9 / lb（主單位）
($24.1 / kg)（輔助公制單價）
設計價值
☑️ 保留原始資料（如進口商品常用磅）
☑️ 給想比公制的人可切換
☑️ UI 在大部分情境下仍保持極度乾淨
☑️ 在需要換算的場景，自動亮相協助判斷
這是「進階但不打擾」的 UX。
✦ AI 協作中的挑戰
AI 鬼打牆
常見情況：
修完 A 又壞掉 B
同一段 bug 用三種方式修壞
我提的問題是功能 A，但 AI 卻跑去動功能 B
一直重複同樣錯誤邏輯
我嘗試了多種方法後，意外找到一個非常有效的小技巧：
👉 當 AI 在某個功能陷入迴圈時，不要強攻，先轉去做其他任務。
例如：
換成請它寫文案
請它調整 UI 描述
請它協助產生規格文件
或讓它先做其他開發項目
當 AI 的上下文思路被 “重置” 後，再回到原本卡住的程式碼 bug，通常就能成功修復。
技術限制影響UIUX體驗
✦ 結語：AI × UIUX 的實踐