feat: 優化教學內容和修復 bugs

- 改善場景 2 程式碼解釋的範例
- 完善場景 4 偵錯助手教學流程
- 修復購物車應用的多個 bugs
- 優化場景 8 綜合專案說明
- 更新 CLAUDE.md 強調輸入格式規範

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: yulin0629

02-code-explanation/README.md

@@ -42,9 +42,29 @@
 ```
 💡 **使用模式：Ask**
 
+### 階段 1.5：@workspace 的進階應用 (2分鐘)
+
+#### 步驟 4：從業務角度理解系統
+除了技術架構，@workspace 也能幫助理解業務邏輯：
+
+```
+@workspace 這個購物車系統支援哪些業務功能？有什麼功能是缺少但常見的電商功能？
+```
+💡 **使用模式：Ask**
+
+
+#### 步驟 5：快速產生文件
+當需要向團隊說明系統時：
+
+```
+@workspace 幫我整理這個系統的功能清單，用表格方式呈現功能名稱、檔案位置、目前狀態
+```
+💡 **使用模式：Ask**
+
+
 ### 階段 2：Ghost Text 體驗 (2分鐘)
 
-#### 步驟 4：使用註解引導 Auto Complete
+#### 步驟 6：使用註解引導 Auto Complete
 1. 開啟 `js/utils.js`
 2. 在檔案最後加入詳細的 TODO 註解：
 ```javascript
@@ -63,7 +83,7 @@
 
 ### 階段 3：Inline Edit 實戰 (3分鐘)
 
-#### 步驟 5：初識 Inline Edit - 優化運費計算
+#### 步驟 7：初識 Inline Edit - 優化運費計算
 1. 開啟 `js/utils.js`
 2. 找到 `calculateShipping` 函數（約第 10-16 行）
 3. **選取整個函數內容**（從 function 到結尾的 }）
@@ -75,7 +95,7 @@
 6. 按 Enter 送出
 7. 檢視修改預覽，按 `Ctrl+Enter` 接受
 
-#### 步驟 6：Inline Edit 實用修改 - 整合折扣
+#### 步驟 8：Inline Edit 實用修改 - 整合折扣
 1. 在 `js/cart.js` 找到 `calculateTotal` 函數（約 137-146 行）
 2. **選取整個 calculateTotal 函數**
 3. 按 `Ctrl+I`
@@ -86,7 +106,7 @@
 5. 按 Enter，等待 AI 生成程式碼
 6. 按 `Ctrl+Enter` 接受修改
 
-#### 步驟 7：測試修改效果
+#### 步驟 9：測試修改效果
 1. 開啟 `index.html` 在瀏覽器中
 2. 加入商品到購物車
 3. 觀察：
@@ -112,6 +132,11 @@
 - **Inline Edit**：定點修改，快速直接
 - **Chat Edit**：探索修改，需要 AI 定位
 
+### 💡 @workspace 的隱藏價值
+- **理解既有系統**：接手專案時快速掌握全貌（節省數小時文件閱讀）
+- **產生各類文件**：功能清單、API 文件、系統架構說明（減少 80% 文件時間）
+- **跨團隊溝通**：將程式碼邏輯轉換為業務語言，讓非技術人員也能理解
+
 ## 🎬 Demo 重點
 1. **@workspace 的專案理解能力**
 2. **Ghost Text 根據註解自動完成**

04-debugging-assistant/README.md

@@ -1,13 +1,16 @@
-# 場景 4：Agent 智能偵錯助手 (30% Agent)
+# 場景 4：靈活運用三種模式的偵錯助手
 
 ## 🎯 學習目標
-- 體驗 **Agent 模式**的智能錯誤診斷能力
-- 學習讓 Agent 自主分析和修復多個相關問題
-- 掌握與 Agent 協作進行代碼調試的技巧
-- 理解 Agent 如何提供系統性的解決方案
+- 學習使用 **@workspace** 進行全專案的錯誤分析 (Ask 模式)
+- 掌握 **Edit 模式**進行單檔快速修復
+- 體驗 **Agent 模式**處理複雜的跨功能問題
+- 理解何時選擇 Ask 諮詢、Edit 快速修復、Agent 自主執行
 
 ## 📝 場景說明
-您接手了一個購物車計算器的 Web 應用，但這個應用有多個 Bug 需要修復。與傳統逐一修復不同，您將學習如何讓 **Agent 自主診斷**整個應用的問題，並提供完整的修復方案。
+您接手了一個購物車計算器的 Web 應用，但這個應用有多個 Bug 需要修復。您將學習如何靈活運用三種模式：
+- **Ask 模式**：診斷分析、理解問題
+- **Edit 模式**：單檔案的快速修復
+- **Agent 模式**：處理複雜的相關問題
 
 ## 🛠️ 專案結構
 ```
@@ -22,99 +25,167 @@
 ## 🐛 已知問題清單
 此應用包含以下 10 個刻意設計的 Bug：
 1. 總金額計算錯誤（數學運算錯誤）
-2. 商品重複加入購物車
+2. 商品重複添加時數量更新邏輯不完整
 3. 運費計算邏輯有問題
 4. 清空購物車按鈕沒反應（函數名稱錯誤）
 5. 優惠券折扣計算異常
 6. 免運費功能沒有實現
 7. 套用優惠券後沒有重新計算
 8. 結帳後沒有清空購物車
 9. 數量修改時價格不會重新計算
-10. 移除商品時索引計算錯誤
+10. 移除商品時沒有確認或動畫效果
 
 ## 📚 Demo 劇本
 
-### 🌟 **重點：Agent 30% 體驗**
-這個場景開始展示 Agent 的**自主診斷能力**，不再是一對一問答模式。
+### 🌟 **重點：快速修復與自主解決**
+這個場景展示 Edit 的快速修復能力和 Agent 的自主問題解決。
 
-### 階段 1：Agent 整體診斷 (5分鐘)
+### 階段 1：快速診斷 (2分鐘)
+
+#### 步驟 1：快速掃描問題 (Ask)
+📌 **Context 準備**：無需加入特定檔案到 context，Ask 模式會使用 @workspace 掃描整個專案
+
+```
+@workspace 這個購物車應用有哪些嚴重的 Bug？給我前 3 個最影響使用者體驗的問題。
+```
+💡 **使用模式：Ask**
+
+
+### 階段 2：實戰修復 (10分鐘)
+
+#### 步驟 2：Edit 連續快速修復 (Edit)
+📌 **Context 準備**：開啟 `script.js` 並點擊檔案標籤上的 **+** 加入 context
+
+```
+修復這些明顯的錯誤：
+1. 將 clearShoppingCart 改為 clearCart
+2. 將第 72 行的 + 改為 *（總金額計算）
+3. 刪除第 83 行（運費永遠是 150 的問題）
+```
+💡 **使用模式：Edit**
+
+
+#### 步驟 3：Agent 處理計算邏輯 (Agent)
+📌 **Context 準備**：保持 `script.js` 在 context 中（Agent 會自動分析需要的檔案）
+
+```
+請修復購物車的所有計算相關問題，包括總金額、運費、優惠券折扣的完整邏輯，並實現免運費功能。
+```
+💡 **使用模式：Agent**
+🔄 **開啟新對話**
+
+
+#### 步驟 4：Agent 實現缺失功能 (Agent)
+📌 **Context 準備**：
+- 保持 `script.js` 在 context 中
+- 可選：加入 `index.html` 了解 HTML 結構（點擊檔案標籤上的 **+**）
 
-#### 步驟 1：請 Agent 分析整個應用 (Agent)
 ```
-@workspace 請分析這個購物車應用，找出所有的 Bug 並分類問題的嚴重程度。給我一個完整的診斷報告。
+請實現這些缺失的功能：
+1. 結帳後自動清空購物車
+2. 數量輸入框變更時自動更新購物車
+3. 移除商品時加入確認提示
 ```
+💡 **使用模式：Agent**
 
-**⚡ 重點觀察**：
-- Agent 會自主閱讀所有檔案
-- 提供結構化的問題分析
-- 按優先級排序問題
 
-#### 步驟 2：請 Agent 制定修復策略 (Agent)
+#### 步驟 5：Ask 深入分析邏輯問題 (Ask)
+📌 **Context 準備**：無需額外準備，使用 @workspace 進行深入分析
+
 ```
-基於你的診斷，請制定一個系統性的修復計劃。告訴我應該按什麼順序修復這些問題，以及為什麼。
+@workspace 分析購物車的優惠券系統邏輯，找出所有相關的計算問題和缺失功能。
 ```
+💡 **使用模式：Ask**
+
 
-### 階段 2：Agent 協助修復 (8分鐘)
+#### 步驟 6：Edit 修復 UI 互動問題 (Edit)
+📌 **Context 準備**：確保 `script.js` 在 context 中
 
-#### 步驟 3：讓 Agent 修復核心計算問題 (Agent)
 ```
-請先修復最嚴重的計算相關 Bug。一次處理多個相關問題，並解釋你的修復邏輯。
+修復以下 UI 互動問題：
+1. 移除第 145 行多餘的 event.preventDefault()
+2. 修正第 158 行的數量輸入框事件監聽器
+3. 修復第 167 行的移除按鈕事件綁定
 ```
+💡 **使用模式：Edit**
+
+
+### 階段 3：進階修復與優化 (5分鐘)
+
+#### 步驟 7：Agent 重構優惠券系統 (Agent)
+📌 **Context 準備**：保持 `script.js` 在 context 中
 
-#### 步驟 4：讓 Agent 處理使用者介面問題 (Agent)
 ```
-現在修復所有與使用者介面互動相關的 Bug，確保所有按鈕和功能都能正常運作。
+請重構整個優惠券系統，包括：
+1. 實現多種優惠券類型（固定金額、百分比折扣）
+2. 加入優惠券有效性驗證
+3. 確保優惠券與免運費規則正確結合
 ```
+💡 **使用模式：Agent**
+🔄 **開啟新對話**
+
+
+#### 步驟 8：Agent 完善使用者體驗 (Agent)
+📌 **Context 準備**：將 `script.js` 和 `index.html` 都加入 context
 
-#### 步驟 5：讓 Agent 完善功能邏輯 (Agent)
 ```
-最後處理優惠券和結帳流程的問題，讓整個購物流程變得完整且用戶友好。
+請改善購物車的使用者體驗，包括：
+1. 為所有操作加入適當的成功/錯誤提示訊息
+2. 加入載入狀態顯示
+3. 改善表單驗證和錯誤處理
+4. 為購物車商品加入簡單的動畫效果
 ```
+💡 **使用模式：Agent**
+
+
+### 階段 4：延伸應用 (3分鐘)
 
-### 階段 3：Agent 驗證與優化 (2分鐘)
+#### 步驟 9：產生測試案例文件 (Agent)
+📌 **Context 準備**：將 `script.js` 和 `index.html` 都加入 context（點擊檔案標籤上的 **+**）
 
-#### 步驟 6：請 Agent 進行完整測試 (Agent)
 ```
-請為這個購物車應用設計一個完整的測試流程，確保所有功能都正常運作，並建議任何可能的改進。
+請為這個購物車應用產生完整的測試案例文件，包括正常流程和異常情況的測試項目。
 ```
+💡 **使用模式：Agent**
+
+
+#### 步驟 10：Agent 產生修復報告 (Agent)
+📌 **Context 準備**：保持所有相關檔案在 context 中
+
+```
+請產生一份詳細的修復報告，包括：
+1. 修復的問題清單和解決方案
+2. 系統改進建議
+3. 未來維護注意事項
+```
+💡 **使用模式：Agent**
+
 
 ## 💡 重點技巧
 
-### 🤖 Agent 協作要點：
-1. **整體思維**：讓 Agent 從系統角度分析問題
-2. **信任 Agent 判斷**：讓 Agent 自主決定修復順序
-3. **分批處理**：按邏輯相關性分組修復問題
-4. **驗證導向**：讓 Agent 負責測試和驗證
+### 🚀 快速選擇模式：
+1. **簡單替換 → Edit**：拼字錯誤、函數改名、簡單修正
+2. **複雜邏輯 → Agent**：計算邏輯、功能實現、跨函數修改
+3. **需要理解 → Ask**：分析問題、學習概念、全專案掃描
 
-### 📋 有效的 Agent 指令：
-- "分析整個應用並找出所有問題"
-- "制定系統性的修復策略"
-- "一次修復所有相關的計算問題"
-- "設計完整的測試流程"
+### 📋 高效提示詞：
+```
+Edit: "修復第 X 行的錯誤"
+Agent: "實現完整的 XX 功能"
+Ask: "@workspace 分析 XX 問題"
+```
 
-### 🚫 避免的做法：
-- 不要一個一個問題單獨處理
-- 不要只描述問題而不讓 Agent 自主分析
-- 不要跳過讓 Agent 制定整體策略的步驟
 
 ## 🎬 Demo 重點
 
-### 傳統方式 vs Agent 方式對比：
-- **傳統**：發現一個 Bug → 問如何修復 → 修復 → 發現下個 Bug
-- **Agent**：請 Agent 分析所有問題 → 制定修復策略 → 系統性修復 → 整體驗證
 
-### 展示要點：
-1. **Agent 的診斷能力**：能發現人類可能忽略的問題
-2. **系統性思考**：Agent 會考慮問題之間的相關性
-3. **效率提升**：一次處理多個相關問題
-4. **品質保證**：Agent 會主動建議測試和驗證
 
 ## ✅ 預期成果
 完成本場景後，您應該：
-- ✅ 體驗到 Agent 的自主診斷能力
-- ✅ 學會讓 Agent 制定修復策略
-- ✅ 掌握系統性問題解決方法
-- ✅ 理解 Agent 協作的效率優勢
+- ✅ 掌握 Ask、Edit、Agent 三種模式的使用時機
+- ✅ 學會根據問題類型選擇最適合的模式
+- ✅ 理解 Edit 模式在快速修復中的價值
+- ✅ 體驗模式組合帶來的效率提升
 - ✅ 擁有一個完全正常運作的購物車應用
 
 ## 🔄 下一步

04-debugging-assistant/script.js

@@ -14,9 +14,10 @@ function addToCart(productId, price) {
         return;
     }
 
-    // Bug 2: 沒有檢查商品是否已存在，會重複添加
+    // Bug 2: 沒有正確處理商品重複添加的數量更新
     const existingItem = cart.find(item => item.id === productId);
     if (existingItem) {
+        // Bug: 應該要更新價格或其他邏輯
         existingItem.quantity += quantity;
     } else {
         cart.push({
@@ -82,7 +83,7 @@ function updatePricing() {
     // 超過 30000 免運費，但這個邏輯被下面的代碼覆蓋了
     shipping = 150; // Bug: 永遠是 150
 
-    // Bug 5: 折扣計算有問題
+    // Bug 5: 優惠券折扣在某些情況下計算異常
     const discountAmount = subtotal * (discount / 100);
     const total = subtotal + shipping - discountAmount;
 
@@ -94,6 +95,7 @@ function updatePricing() {
 }
 
 function removeFromCart(index) {
+    // Bug 10: 移除商品時沒有確認或動畫效果
     cart.splice(index, 1);
     updateCartDisplay();
 }
@@ -128,7 +130,8 @@ function applyCoupon() {
     }
 
     document.getElementById('coupon-code').value = '';
-    updatePricing(); // Bug 8: 套用優惠券後沒有重新計算
+    // Bug 7: 沒有正確更新優惠券狀態
+    updatePricing();
 }
 
 function checkout() {
@@ -140,9 +143,9 @@ function checkout() {
     const total = document.getElementById('total').textContent;
     alert(`結帳成功！總金額：${total}`);
 
-    // Bug 9: 結帳後沒有清空購物車
+    // Bug 8: 結帳後沒有清空購物車
     // clearCart();
 }
 
-// Bug 10: 當使用者修改商品數量時，沒有自動更新購物車
+// Bug 9: 當使用者修改商品數量時，沒有自動更新購物車
 // 應該要監聽 input 事件並重新計算