昨天我們嘗試了從Claude轉移到Cursor的協作方式，實驗結果非常不錯！Cursor在即時預覽和調試方面的優勢很明顯，特別是能直接看到設計效果並快速調整。既然昨天Dashboard的設計獲得了不錯的實作狀態，今天設計產品查詢功能時，我決定繼續使用這樣的協作模式。

不過，今天面對的挑戰會更大一些。產品查詢不像Dashboard那樣主要是資訊展示，而是要處理真正的業務流程和互動邏輯。

開始實作前的思考：我們真正需要什麼？

在開始寫Prompt之前，我們的第一步是什麼？
沒錯，先靜下心來想清楚：在產品查詢這個功能裡，我們真正想要的內容是什麼？

以往在作為工程師時往往都有明確的 PRD, 用戶故事需求，所以一開始都是先想我什麼技術可以達到。
但在此時，最大的反轉是讓自己練習「說人話」，表達出我想要的功能與需求。

經過實際觀察門市的使用情境，我發現了幾個關鍵需求：

客戶的購物行為特點：
客戶逛門市時很少一次就決定要買什麼，更常見的情況是「這個不錯，那個也不錯，讓我比較一下」。所以我們需要一個暫存機制，讓店員可以把客戶感興趣的商品先「收集」起來，最多暫存5組商品供比較。

店員的操作習慣：
店員需要一邊篩選條件，一邊展示結果給客戶看。傳統的上下滾動式查詢在iPad上不太適合，左右分區會更符合實際操作流程。

客戶的觀看需求：
客戶站在80cm外看螢幕，商品圖片和價格必須夠大夠清楚。同時暫存的商品也要讓客戶能一目瞭然。

第一版Prompt實作

想清楚這些需求後，我設計了第一版的Prompt：

根據Layout框架設計.md和iPad設計規範.md，設計一個產品查詢系統：

使用情境：
- 店員協助客戶查詢商品，客戶可能想比較多個商品
- 需要暫存機制：最多可暫存5組商品供比較
- 客戶在80cm距離觀看，店員單手操作iPad

Layout要求：
- 使用固定框架：頂部60px + 底部80px
- 中間區域分成左右兩區：左邊搜尋條件(300px)，右邊結果展示
- 頂部區域顯示暫存商品數量，可展開查看暫存清單
- 保持與Dashboard的Tab導航一致性

功能需求：
- 左側：分類篩選、價格區間、庫存狀態等條件
- 右側：商品卡片展示，包含圖片、價格、暫存按鈕
- 暫存清單：支援快速移除、查看比較

請產出完整的HTML原型，包含互動效果。

第一版實作的教訓：發現業務邏輯的重要性

登愣！！看起來很漂亮沒錯，但是～怎麼會是化妝品的 demo 呢？

第一版產出讓我發現了幾個問題：

1. 假資料變成化妝品了，但我們是居家品牌
2. 右側的商品沒辦法上下滾動，無法瀏覽完整商品清單
3. 左側的搜尋條件出現橫向捲軸，破壞了左右分區設計
4. 多倉庫的條件沒有在裡面，不符合實際營運需求

這讓我意識到一個重要問題：我的第一版Prompt缺少了具體的業務背景資訊，AI無法理解我們實際在做什麼業務。

建立完整的業務知識庫

經過第一版的失敗，我決定先建立完整的業務背景資料，讓AI能真正理解我們在做什麼。

1. 公司背景.md

首先建立公司描述，讓AI理解品牌定位：

# 達利貓出任務 公司背景與品牌定位

## 公司簡介
達利貓出任務 是一家專注於居家生活的品牌，提供從家具到生活用品的完整居家解決方案。我們相信好的居家環境能提升生活品質，致力於讓每個家庭都能輕鬆打造理想的生活空間。

## 品牌定位
- 目標客群：25-45歲的都市家庭，注重生活品質
- 價格區間：中階到中高階，追求性價比
- 設計風格：現代簡約、北歐風格、日式無印風
- 核心價值：實用、美觀、品質、生活美學

## 門市特色
- 展示空間：實體商品展示，客戶可觸摸體驗
- 諮詢服務：專業店員提供居家搭配建議
- 客戶行為：重視品質、會比較多個商品、看重實用性
- 購買決策：通常需要時間考慮，很少衝動購買

## 商品特色
- 家具類：實木、金屬、布藝材質，強調耐用性
- 裝飾品：原創設計、手工製作、獨特性
- 收納用品：功能性強、節省空間、美觀實用
- 生活用品：天然材質、環保理念、日常必需

2. 業務邏輯.md

接著建立詳細的業務規範：

# 達利貓出任務 業務邏輯規範

## 商品分類
- 家具類：沙發、桌椅、床組、櫃子
- 裝飾品：畫作、花瓶、擺飾、燈具
- 收納用品：收納盒、衣架、置物架
- 生活用品：餐具、寢具、清潔用品

## 倉庫系統
- 主倉庫：大型商品存放，需要調貨
- 門市倉庫：常用商品，可立即取貨
- 供應商倉庫：客訂商品，需要預訂

## 庫存邏輯
- 多倉庫庫存顯示
- 規格別庫存查詢
- 即時庫存更新
- 庫存狀態：有庫存(綠色)/可調貨(黃色)/缺貨(紅色)

## 客戶分級
- 一般客戶：基本價格顯示
- VIP客戶：享有會員折扣
- 企業客戶：大宗採購專案價格
- 不同折扣權限和價格顯示

## 報價流程
1. 產品選擇 → 2. 規格確認 → 3. 數量調整 → 4. 折扣計算 → 5. 報價生成

## 價格區間
- 小型用品：100-1000元
- 中型商品：1000-5000元
- 大型家具：5000元以上

為什麼採用迭代修正而不是重新開始？

更新完以上的 prompt 後，接下來該怎麼做呢？
重新給完整的 prompt 嗎？
但是產出的第一版已經 80% 是我要的，我可以只改 bug 嗎？

答案是：可以的。

迭代修正的方式有幾個重要優點：

1. 保留已有的工作成果
第一版雖然有問題，但Layout架構、基礎互動都是對的，沒必要全部重來。

2. 讓AI理解修正邏輯
透過具體的修正指令，AI能學習到什麼是對的、什麼需要改進，這比重新開始更有學習效果。

3. 更貼近實際開發流程
實際開發中很少會因為部分問題就整個重寫，通常是針對性修正，這種協作方式更實用。

4. 節省時間和精力
迭代修正比重新開始快很多，特別是在複雜功能的開發中。

理解以上優點後，我們接下來就來實際做修正了。

迭代一：修正業務背景和假資料

針對第一版的化妝品假資料問題，我提供了明確的修正指令：

請根據公司背景.md和業務邏輯.md，修正以下問題：

1. 將所有假資料從化妝品改為達利貓出任務的居家用品
2. 商品名稱要符合「北歐風實木餐桌」、「手工陶瓷花瓶」這樣的命名規則
3. 價格範圍要符合100-1000、1000-5000、5000以上的區間
4. 商品分類改為：家具類、裝飾品、收納用品、生活用品

請保持現有的Layout架構，只修正假資料的內容。

修正後的效果：

• 假資料變成了「北歐風實木餐桌 $4,500」、「手工陶瓷花瓶 $850」等真實居家用品
• 價格符合實際業務範圍
• 商品分類完全貼合業務邏輯
• 整體風格更加專業真實

迭代二：解決技術問題

第二步針對具體的技術問題進行修正：

請修正以下技術問題：

1. 右側商品展示區域需要支援垂直滾動，現在無法看到下方商品
2. 左側篩選條件區域寬度固定300px，不要出現橫向捲軸
3. 左側篩選條件內容要垂直排列，避免擠壓

保持現有的假資料和整體佈局，只修正這些滾動和佈局問題。

修正後的效果：

• 右側商品區域可以正常垂直滾動瀏覽
• 左側篩選條件不再出現橫向捲軸
• 整體佈局更加穩定和實用

迭代三：補充業務功能

最後一步補充遺漏的業務邏輯：

請加入以下業務功能：

1. 在左側篩選條件中加入「倉庫來源」選項：主倉庫/門市倉庫/供應商倉庫
2. 商品卡片中的庫存狀態要有視覺區別：有庫存(綠色)/可調貨(黃色)/缺貨(紅色)
3. 暫存功能的視覺提示要更明顯，讓客戶容易理解

保持已修正的技術問題解決方案，在此基礎上新增這些功能。

修正後的效果驗證

唷呼，終於達到我們要的結果了：

假資料變真實了：
從化妝品變成「北歐風實木餐桌 $4500」、「手工陶瓷花瓶 $850」等居家用品，整個原型的真實感大幅提升。

技術問題都解決了：

• 右側可以正常垂直滾動瀏覽商品
• 左側篩選條件不再出現橫向捲軸
• 多倉庫篩選功能正常運作
• 庫存狀態有清楚的視覺區別

使用體驗更符合實際需求：

• 暫存功能更明顯，客戶容易理解
• 價格顯示更突出，符合注重性價比的客群特點
• 整體風格更貼近現代簡約的品牌定位

透過這次完整的實作經驗，我學到AI協作成功的關鍵不在於寫出完美的Prompt，而在於讓AI真正理解你的業務。當AI知道你是誰、做什麼、客戶是誰的時候，產出的結果會比單純的技術描述好太多。

好的業務描述是AI協作成功的基石，技術只是實現方式，業務理解才是核心價值。