昨天客戶管理系統的90%一次到位成功，讓我對AI協作充滿信心。但今天面對的報價單功能，複雜度完全不在同一個層級。這不再是簡單的CRUD操作，而是一個完整的多步驟業務流程：從客戶選擇到最終送出，每個步驟都環環相扣，且必須在單一頁面中流暢完成。

這正是測試AI理解複雜工作流程的絕佳機會。關鍵問題是：如何透過精確的Prompt描述，讓AI理解並實現這種「多步驟但單頁面」的複雜需求？

從簡單CRUD到複雜工作流的挑戰升級

延續昨天的成功經驗，我原本預期報價單設計會是類似的順利協作。但仔細分析需求後發現，這次面對的是質的飛躍：客戶管理是典型的資料增刪改查，每個操作相對獨立；而報價單是一個完整的業務流程，每個步驟的狀態都會影響下一個步驟。

更挑戰的是，我希望將整個流程整合在單一介面中，透過三個區塊的分工協作來完成。這種設計對AI的理解能力提出了更高要求。

工作流程分析：將複雜步驟轉化為AI能理解的邏輯

在開始寫Prompt之前，我先將腦中的業務流程具體化：

完整報價流程：

1. 選定客戶或建立客戶 - 確定報價對象
2. 從暫存區載入商品，或新增商品 - 建立商品清單
3. 移除商品、修改數量 - 精細化商品內容
4. 確認金額 - 計算總價和折扣
5. 填寫配送資料 - 完善交易資訊
6. 送出 - 完成報價

關鍵洞察是：這些步驟雖然有順序性，但在實際操作中會有大量的來回調整。客戶可能看了總金額後想調整商品，或者填寫配送資料時發現需要修改數量。因此單頁面的設計不只是為了方便，更是符合實際使用邏輯。

三區塊分工邏輯：

• 左側：客戶與配送 - 交易的主體和終點
• 中間：商品操作 - 交易的核心內容
• 右側：金額與提交 - 交易的結算和確認

Prompt迭代 - 從合理到精確的完整過程

基於前12天累積的協作經驗和剛才對工作流程的分析，我的第一次Prompt已經有了相當的基礎，但仍需要迭代優化來達到精確描述。

第一次嘗試：基於經驗的合理描述

基於Layout框架設計.md和業務邏輯.md，設計一個報價單建立系統：

使用情境：
- 店員需要在單一頁面完成完整報價流程
- 客戶站在旁邊，能清楚看到商品選擇和價格計算過程

業務流程：
選定客戶或建立客戶 → 從暫存區載入商品或新增商品 → 移除商品、修改數量 → 確認金額 → 填寫配送資料 → 送出

Layout要求：
- 沿用Dashboard固定框架設計（頂部60px + 底部80px）
- 中間區域分為三個區塊：
  - 左側：客戶登入或建立、配送資料
  - 中間：商品暫存載入、新增、編輯功能
  - 右側：總金額顯示、折扣設定、提交按鈕

請產出HTML、CSS、JS三個獨立檔案。

AI的理解結果： Layout分區正確，基本功能都有，但有幾個關鍵問題：

• 左側選客戶後，中間區域沒有自動響應，仍顯示空白狀態
• 商品調整後，右側金額是手動更新而非即時計算
• 中間區域的「暫存載入」和「新增商品」變成並排顯示的兩個大區塊，而不是按鈕觸發的彈窗或展開功能
• 整個頁面感覺像三個獨立的小系統拼湊在一起

發現的問題： AI理解了靜態布局，但完全沒有掌握動態互動的概念。缺少「觸發→響應」的邏輯思維。

第二次嘗試：補強互動邏輯

基於Layout框架設計.md和業務邏輯.md，設計一個報價單建立系統：

使用情境：
- 店員需要在單一頁面完成完整報價流程
- 客戶站在旁邊，能清楚看到商品選擇和價格計算過程
- 支援快速調整：客戶可能隨時要求修改商品或數量

業務流程：
1. 選定或建立客戶 → 2. 從暫存載入商品或新增商品 → 3. 調整商品數量/移除商品 → 4. 確認總金額和折扣 → 5. 填寫配送資料 → 6. 送出

Layout要求：
- 沿用固定框架設計（頂部60px + 底部80px）
- 中間區域分為三個區塊：
  * 左側區域（固定300px）：
    - 上半部：客戶登入或建立新客戶功能
    - 下半部：配送資料填寫表單
  * 中間區域（自適應寬度）：
    - 商品暫存區載入功能
    - 商品新增/搜尋功能
    - 已選商品的編輯（數量調整、移除）
  * 右側區域（固定280px）：
    - 上半部：總金額顯示、折扣設定、優惠券功能
    - 下半部：大型提交按鈕

核心互動邏輯：
- 左側選定客戶後，中間區域自動載入該客戶的暫存商品
- 中間區域的商品數量調整，右側金額要即時更新
- 右側的提交按鈕要等所有必填欄位完成才能點擊

請產出三個獨立檔案，保持與其他頁面的視覺一致性。

AI的理解結果： 這次接近了！互動邏輯基本實現，但發現一個關鍵問題：「暫存商品載入」的概念AI理解有偏差，它把暫存理解成草稿，而不是客戶專屬的購物暫存。

第三次嘗試：精確化業務概念

基於Layout框架設計.md和業務邏輯.md，設計一個報價單建立系統：

使用情境：
- 店員需要在客戶面前完成完整報價流程
- 客戶可能想比較多個商品，需要暫存機制
- 支援即時調整：客戶隨時可要求修改商品或數量

業務邏輯說明：
- 每個客戶都有專屬的「商品暫存區」，類似購物車概念
- 店員可以將客戶感興趣的商品先暫存，最多5組商品供比較
- 最終報價單是從這些暫存商品中選出要購買的商品

完整流程：
1. 選定或建立客戶 → 2. 載入該客戶的暫存商品清單 → 3. 從暫存中選擇或新增其他商品 → 4. 調整數量、移除不要的 → 5. 確認總金額和折扣 → 6. 填寫配送資料 → 7. 送出報價

Layout要求：[保持相同的三區塊設計]

關鍵互動邏輯：
- 左側客戶選擇後，中間立即顯示「載入 XXX 的暫存商品」按鈕
- 點擊載入後，顯示該客戶之前暫存的商品清單
- 商品數量調整時，右側金額即時重新計算
- 折扣設定會影響最終總價顯示

請產出完整的三個獨立檔案。

AI的理解結果： 完美！這次AI完全理解了暫存商品的業務邏輯，互動流程順暢，符合門市實際使用需求。

關鍵發現：從經驗基礎到精確描述的三個層次

1. 經驗基礎 → 運用之前累積的Layout框架和協作模式
2. 互動邏輯 → 明確各區塊間的響應和更新關係
3. 業務概念 → 精確定義專業術語的具體含義

最關鍵的發現是：專業術語需要具體解釋。「暫存商品」對我們來說很清楚，但AI可能理解成不同的概念。越複雜的業務邏輯，越需要將專業概念具體化描述。

Prompt實作案例：完整的需求描述模板

基於以上分析和昨天學到的檔案分離經驗，我設計了這樣的完整Prompt：

基於Layout框架設計.md和業務邏輯.md，設計一個報價單建立系統：

使用情境：
- 店員需要在單一頁面完成完整報價流程
- 客戶站在旁邊，能清楚看到商品選擇和價格計算過程
- 支援快速調整：客戶可能隨時要求修改商品或數量

業務流程：
1. 選定或建立客戶 → 2. 從暫存載入商品或新增商品 → 3. 調整商品數量/移除商品 → 4. 確認總金額和折扣 → 5. 填寫配送資料 → 6. 送出

Layout要求：
- 沿用固定框架設計（頂部60px + 底部80px）
- 中間區域分為三個區塊：
  * 左側區域（固定300px）：
    - 上半部：客戶登入或建立新客戶功能
    - 下半部：配送資料填寫表單
  * 中間區域（自適應寬度）：
    - 商品暫存區載入功能
    - 商品新增/搜尋功能
    - 已選商品的編輯（數量調整、移除）
  * 右側區域（固定280px）：
    - 上半部：總金額顯示、折扣設定、優惠券功能
    - 下半部：大型提交按鈕

技術要求：
- 產出三個獨立檔案：HTML、CSS、JS
- 保持與Dashboard、客戶管理頁面的視覺一致性
- 所有觸控元素符合iPad操作標準
- 支援即時金額計算和狀態更新

請產出完整的原型，重點展現工作流程的順暢性。

Prompt設計的關鍵技巧：

1. 情境優先於功能 - 先說明使用場景，讓AI理解設計目標
2. 流程描述具體化 - 用箭頭符號清楚標示步驟順序
3. Layout描述數值化 - 給出具體的像素尺寸，避免理解偏差
4. 區塊職責明確化 - 詳細說明每個區域要放什麼功能
5. 技術要求前置化 - 直接要求檔案分離，避免後續重構

AI協作修正策略：預期理解偏差與精準修正

複雜功能的AI協作中，第一版產出幾乎不可能完美。重要的是建立有效的修正策略：

常見的AI理解偏差：

• 將三區塊理解成三個獨立頁面
• 忽略區塊間的互動關係
• 過度複雜化簡單功能
• 商品編輯功能變成彈出視窗而非即時編輯

精準修正的指令範例：

請修正以下問題：
1. 左側客戶選擇後，中間區域應該立即顯示該客戶的暫存商品
2. 中間區域的商品數量調整，右側金額要即時更新
3. 右側的提交按鈕要等所有必填欄位完成才能點擊
4. 保持所有功能在同一頁面，不使用彈出視窗

迭代修正的優勢：
相比重新開始，針對性修正能讓AI更好地理解你的真實需求。每次修正都是在教導AI什麼是對的、什麼需要調整，這種學習過程比單次完美產出更有價值。

檔案分離在複雜功能中的關鍵價值

昨天學到的檔案分離經驗，在今天的複雜工作流設計中更顯重要：

複雜度管理：
報價單的互動邏輯複雜，如果混在單一HTML檔案中，很快就會超過2000行。分離後的檔案結構讓每個部分都有清楚的職責。

修正效率提升：
當需要調整「商品數量變更時金額即時更新」的邏輯時，直接在JS檔案中定位相關函數，比在混合檔案中搜尋快很多。

AI協作精確度：
告訴AI「請在quote-system.js中的updateTotal函數加入折扣計算」，比「請修改金額計算邏輯」更精準有效。

複雜工作流協作的心得

透過今天的報價單設計協作，我總結出幾個關鍵經驗：

情境描述比功能列表重要：「客戶站在旁邊能清楚看到價格計算過程」這樣的情境描述，比「需要金額顯示功能」更能讓AI理解設計意圖。

**分區邏輯的清楚說明是關鍵：**三區塊的Layout不是隨意分割，而是基於操作邏輯的合理分工。把這個邏輯說清楚，AI才能產出符合實際使用需求的設計。

**檔案分離不是過度工程化：**在複雜功能的開發中，良好的程式碼組織是協作效率的基礎。早期建立好的檔案結構，比後期重構省時省力。

**工作流程的視覺化能力：**AI在理解單點功能上表現很好，但對於多步驟工作流程的整體把握仍需要精確的引導。描述得越具體，AI的表現越好。

從簡單的CRUD到複雜的工作流程，AI協作的挑戰不只是技術實現，更在於如何將抽象的業務邏輯轉化為AI能理解的具體描述。好的Prompt不只是功能清單，更是完整的設計思維傳達。