feat: 為首頁每個場景加入教學和應用的分流連結

- 將每個場景改為包含兩個按鈕的卡片
- 📚 查看教學：連結到 README.md 教學文檔
- 🎯 實際應用：連結到 index.html 互動應用
- 新增按鈕樣式和 hover 效果
- 保持原有的 Agent 百分比指示器
- 更新 CLAUDE.md 加入專案作者資訊

Author: yulin0629

01-first-experience/README.md

@@ -3,12 +3,13 @@
 ## 🎯 學習目標
 - 了解 GitHub Copilot 的**基本 Chat 功能**
 - 學習如何使用 **ask** 功能進行對話
+- **理解 @workspace 的重要性和實際差異**
 - 掌握**程式碼自動完成**的基礎操作
 - 熟悉 Copilot Chat 介面和快捷鍵
 - **建立使用 Copilot 的基礎認知**（為後續 Agent 學習打基礎）
 
 ## 📝 場景說明
-您是一位剛開始使用 GitHub Copilot 的開發者，需要建立一個簡單的待辦事項應用程式。這個階段**專注於傳統 Chat 功能**，不使用 Agent 模式，讓您先熟悉基本操作。
+您是一位剛開始使用 GitHub Copilot 的開發者，想要了解這個工具的基本功能。這個階段**專注於傳統 Chat 功能**（0% Agent），通過簡單的對話體驗建立基礎認知，特別是 **@workspace 與一般對話的重要差異**。
 
 ## 🛠️ 初始專案結構
 ```
@@ -21,75 +22,111 @@
 
 ## 📚 Demo 劇本
 
-### 階段 1：快速熟悉 Chat (2分鐘)
+### 階段 1：快速熟悉 Chat + @workspace 對比 (3分鐘)
 
-#### 步驟 1：開啟並體驗 Chat
-1. 在 VS Code 中開啟本資料夾
+#### 步驟 1：開啟並體驗基本 Chat
+1. 在 VS Code 中開啟本資料夾 (`01-first-experience/`)
 2. 按下 `Ctrl+Alt+I` (或 `Cmd+Option+I`) 開啟 Copilot Chat
-3. **對話** (Ask)：
+3. **一般提問**：
 ```
 你好！我想建立一個簡單的待辦事項網頁，請告訴我基本的檔案結構和需要的功能？
 ```
+💡 **使用模式：Ask**
 
-### 階段 2：核心 Chat 功能展示 (5分鐘)
+#### 步驟 2：體驗 @workspace 的差異
+🔄 **開啟新對話**
+- 點擊 Chat 面板右上角的「+」或「New Chat」按鈕
+- 或使用快捷鍵：`Ctrl+L`
 
-#### 步驟 2：**獲取實作指導** (Ask)
 ```
-我已經有 HTML 和 CSS 檔案了，現在需要 JavaScript 來實作新增、刪除待辦事項的功能。請給我具體的程式碼結構建議。
+@workspace 我想了解這個專案的結構，請告訴我現在有哪些檔案？
 ```
+💡 **使用模式：Ask**
 
-#### 步驟 3：**請求程式碼優化建議** (Ask)
+✅ **觀察差異**：
+- **一般對話**：給通用建議
+- **@workspace**：能看到實際檔案，給出針對性回答
+
+### 階段 2：核心 Chat 功能展示 (4分鐘)
+
+#### 步驟 3：**了解專案結構**
+```
+@workspace 這個專案有哪些檔案？每個檔案的用途是什麼？
 ```
-我的 JavaScript 程式碼應該遵循哪些最佳實踐？有什麼常見的錯誤需要避免？
+💡 **使用模式：Ask**
+
+#### 步驟 4：**獲取學習建議**
+```
+@workspace 我是初學者，想了解待辦事項應用通常有哪些功能？學習 JavaScript 時應該注意什麼？
 ```
+💡 **使用模式：Ask**
 
 ### 階段 3：程式碼自動完成體驗 (3分鐘)
 
-#### 步驟 4：體驗 Ghost Text
+#### 步驟 5：體驗 Ghost Text（僅體驗，不深入實作）
 1. 開啟 `script.js`
-2. 輸入：`// 待辦事項陣列`，按 Enter
-3. 繼續輸入：`const todos = `，觀察 Copilot 建議
-4. 按 `Tab` 接受建議
-
-#### 步驟 5：函數自動完成
-```javascript
-// 新增待辦事項函數
-function addTodo(
-```
-⚡ **重點觀察**：Copilot 如何預測參數和函數內容
+2. 輸入：`// 學習 GitHub Copilot`，按 Enter
+3. 繼續輸入：`console.log(`，觀察 Copilot 建議
+4. 按 `Tab` 接受建議，感受自動補全
+
+⚡ **重點觀察**：體驗 Ghost Text 的建議效果，但不進行複雜程式開發
 
 ### 🔍 重點觀察
-- **Chat 回應速度**：了解等待時間，學會耐心
+
+#### **@workspace vs 一般對話差異**：
+- **一般對話**：籠統建議，不了解專案脈絡
+- **@workspace**：針對性強，程式碼可直接使用
+- **效率差異**：@workspace 節省 50-70% 的溝通成本
+
+#### **Chat 使用體驗**：
+- **回應速度**：了解等待時間，學會耐心
 - **需要明確指導**：問題越具體，答案越有用  
 - **逐步建構**：傳統模式需要分步驟完成專案
 
 ## 💡 重點提示
 
-### Ask 模式使用技巧：
+### **@workspace 最佳實踐**：
+1. **永遠使用 @workspace**：這是最重要的聊天參與者
+2. **讓 AI 先了解專案**：讓它分析現有結構
+3. **要求針對性建議**：避免通用範例程式碼
+
+### **Ask 模式使用技巧**：
 1. **明確具體**：問題越具體，答案越精準
 2. **提供上下文**：說明您的需求和限制
 3. **迭代改進**：根據回答繼續深入詢問
 
-### Ask 模式常用提示詞範例：
-- "請解釋這段程式碼的功能"
-- "如何優化這個函數的效能？"
-- "這個錯誤訊息是什麼意思？"
-- "請提供最佳實踐建議"
+### **常用提示詞範例**：
+- `@workspace 請分析這個專案的結構`
+- `@workspace 如何優化這個函數的效能？`
+- `@workspace 這個錯誤在我的專案中如何解決？`
+- `@workspace 根據現有架構提供最佳實踐建議`
+
+### **Chat 管理技巧**：
+- **何時開啟新對話**：切換不同主題或想要清晰對比時
+- **如何開啟新對話**：點擊 Chat 面板上方的「新對話」按鈕
+- **對話歷史**：Copilot 會記住同一對話中的上下文
 
 ## 🎬 Demo 重點
-1. **快速開啟 Chat**：`Ctrl+Alt+I` 熟練操作
-2. **有效提問技巧**：具體、有上下文的問題
-3. **Ghost Text 體驗**：灰色建議 → Tab 接受
-4. **建立基礎認知**：為後續 Agent 學習做準備
+1. **@workspace 對比展示**：先不用 → 再使用，展現明顯差異
+2. **快速開啟 Chat**：`Ctrl+Alt+I` 熟練操作
+3. **專案感知能力**：展示 AI 如何理解專案結構
+4. **Ghost Text 體驗**：灰色建議 → Tab 接受
+5. **建立基礎認知**：為後續 Agent 學習做準備
 
 ## ✅ 預期成果
 完成本場景後，您應該：
+- **深刻理解 @workspace 的重要性**
 - 能夠開啟並使用 Copilot Chat
 - 了解如何提出有效的問題
-- 掌握基本的程式碼自動完成
-- 建立一個簡單但功能完整的待辦事項應用程式
+- 體驗基本的程式碼自動完成功能
+- **建立對 GitHub Copilot 的基礎認知**（為後續學習做準備）
 
 ## 🔍 延伸練習
-1. 嘗試用不同方式詢問相同問題，比較回答差異
-2. 請 Copilot 解釋它生成的程式碼
-3. 要求 Copilot 提供程式碼的其他實作方式
+1. **對比測試**：同樣問題分別用一般對話和 @workspace 詢問
+2. 請 @workspace 解釋它對專案結構的理解
+3. 要求 @workspace 提供符合專案風格的不同實作方式
+
+## 🎯 為下階段準備
+- 第一階段建立了 @workspace 的基礎認知
+- 第二階段將深入探索 @workspace 的程式碼解釋能力
+- 第三階段開始引入 Agent 模式，展現更強大的功能

CLAUDE.md

@@ -1,5 +1,9 @@
 # GitHub Copilot 教學專案 - 專案指令
 
+## 👤 專案作者
+- **作者**: Yulin Wang (yulin0629)
+- **GitHub**: https://github.com/yulin0629
+
 ## 📋 專案概述
 建立一個完整的 GitHub Copilot 教學課程，時長 2 小時，專注於 **Agent 模式**的實際應用。
 
@@ -22,16 +26,32 @@
 - **多指令檔案系統**：`.github/instructions/*.instructions.md`
 - **Prompt Files**：`.github/prompts/*.prompt.md`
 
-### **核心工具**
+### **核心工具和模式**
 - **@workspace**：最重要的聊天參與者
 - **Inline Chat** (`Ctrl+I`)：即時編輯輔助
 - **Ghost Text**：智能程式碼建議
 
+### **⚠️ GitHub Copilot 操作模式說明**
+#### **Chat 模式** (Ctrl+Alt+I)
+- **Ask**：純對話，獲取建議和指導
+- **Agent**：自主執行任務，多步驟操作
+
+#### **模式使用指導**
+- **場景 1-2**：只使用 **Ask 模式**，建立基礎認知
+- **場景 3+**：逐步引入 **Agent 模式**，展示自主能力
+
+#### **⚠️ Prompt 撰寫規範**
+- **每個 Prompt 後必須加上模式指示**：
+  - `💡 **使用模式：Ask**`
+  - `💡 **使用模式：Agent**`
+- **新對話指示**：需要時加上 `🔄 **開啟新對話**`
+- **目的**：明確告訴學員在 VS Code 中應該選擇哪個模式和何時重新開始
+
 ## 📁 8 個漸進式學習場景
 
-### **🌱 基礎階段** (建立認知)
-1. **初次對話體驗** (0% Agent) - 傳統 Chat 功能
-2. **程式碼解釋實作** (0% Agent) - @workspace 核心應用
+### **🌱 基礎階段** (建立認知) ⚠️ **0% Agent 嚴格執行**
+1. **初次對話體驗** (0% Agent) - 傳統 Chat 功能，@workspace 認知建立
+2. **程式碼解釋實作** (0% Agent) - @workspace 核心應用，程式碼理解
 
 ### **🚀 進階階段** (引入 Agent)
 3. **函數生成** (20% Agent) - 體驗 Agent 協助編程
@@ -77,11 +97,21 @@
 
 ## 📚 課程設計原則
 
-### **由淺入深的學習路徑**
-- **前期**：建立基礎認知，不使用 Agent
+### **由淺入深的學習路徑** ⚠️ **嚴格遵守**
+- **前期**：建立基礎認知，**絕對不使用 Agent**
+  - 場景 1：純對話體驗，重點是 @workspace 認知
+  - 場景 2：程式碼解釋，@workspace 應用但無 Agent
 - **中期**：逐步引入 Agent，展示價值差異  
 - **後期**：深度應用 Agent，展示完整潛力
 
+### **⚠️ 課程設計鐵律**
+1. **嚴格按照 Agent 比例**：場景 1-2 必須是 0% Agent（只用 Ask）
+2. **不可超前實作**：前期場景只能是對話和學習，不能進行複雜開發
+3. **漸進式體驗**：每個階段都有明確的學習重點，不可混淆
+4. **建立認知為主**：前期重點是讓學員理解工具價值，而非完成專案
+5. **模式標示強制**：每個 Prompt 範例後必須標明 `💡 **使用模式：Ask**` 或 `💡 **使用模式：Agent**`
+6. **新對話管理**：必要時指示學員 `🔄 **開啟新對話**`，避免上下文混淆
+
 ### **實戰導向**
 - 每個場景都有具體的程式碼範例
 - 包含完整的 Demo 劇本和 Prompt