feat: 合併介面簡化改進

從 gh-pages 分支合併最新的介面簡化改進，包括：
- 移除教學檔案中的裝飾性 emoji
- 移除快速開始區塊的綠色線條
- 簡化各種提示文字
- 整體採用更簡潔專業的設計風格

🤖 Generated with Claude Code

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

Author: yulin0629

.gitignore

@@ -0,0 +1,8 @@
+node_modules/
+*.png
+*.jpg
+*.jpeg
+capture-iphone-screenshot.js
+capture_iphone.html
+package-lock.json
+package.json

01-first-experience/LESSON_GUIDE.md

@@ -8,10 +8,10 @@
 - 熟悉 Copilot Chat 介面和快捷鍵
 - **建立使用 Copilot 的基礎認知**（為後續 Agent 學習打基礎）
 
-## 📝 場景說明
+## 場景說明
 您是一位剛開始使用 GitHub Copilot 的開發者，想要了解這個工具的基本功能。這個階段**專注於傳統 Chat 功能**（0% Agent），通過簡單的對話體驗建立基礎認知，特別是 **@workspace 與一般對話的重要差異**。
 
-## 🛠️ 初始專案結構
+## 初始專案結構
 ```
 01-first-experience/
 ├── README.md (本檔案)
@@ -20,7 +20,7 @@
 └── script.js (空白檔案，待完成)
 ```
 
-## 🔧 事前準備：選擇正確的模型
+## 事前準備：選擇正確的模型
 
 在開始之前，請確認使用 **GPT-4.1** 模型：
 1. 開啟 Copilot Chat (`Ctrl+Alt+I`)

CLAUDE.md

@@ -1,19 +1,19 @@
 # GitHub Copilot 教學專案 - 專案指令
 
-## 👤 專案作者
+## 專案作者
 - **作者**: Yulin Wang (yulin0629)
 - **GitHub**: https://github.com/yulin0629
 
-## 📋 專案概述
+## 專案概述
 建立一個完整的 GitHub Copilot 教學課程，時長 2 小時，專注於 **Agent 模式**的實際應用。
 
-## 🎯 目標聽眾
+## 目標聽眾
 - **PM (產品經理)**：了解 AI 輔助開發如何提升產品開發效率
 - **SA (系統分析師)**：學習如何利用 AI 進行系統分析和架構設計
 - **PG (程式設計師)**：掌握 AI 輔助編程的實際技能
 - **VD (視覺設計師)**：了解如何與 AI 工具協作提升設計效率
 
-## 🚀 核心功能重點
+## 核心功能重點
 
 ### **Agent 模式 (50% 內容重點)**
 - Agent 自主開發能力
@@ -32,7 +32,7 @@
 - **Inline Chat** (`Ctrl+I`)：即時編輯輔助
 - **Ghost Text**：智能程式碼建議
 
-### **⚠️ GitHub Copilot 操作模式說明**
+### **GitHub Copilot 操作模式說明**
 #### **Chat 模式** (Ctrl+Alt+I)
 - **Ask**：純對話，獲取建議和指導，不會修改程式碼
 - **Agent**：自主執行任務，多步驟操作，會直接修改檔案
@@ -43,33 +43,33 @@
 - **場景 3+**：逐步引入 **Agent 模式**，展示自主能力
 - **Edit 模式**：當需要對單一檔案進行明確修改時使用（本教學較少使用）
 
-#### **⚠️ Prompt 撰寫規範**
+#### **Prompt 撰寫規範**
 - **每個 Prompt 後必須加上模式指示**：
-  - `💡 **使用模式：Ask**`
-  - `💡 **使用模式：Agent**`
-  - `💡 **使用模式：Edit**`（較少使用）
-- **新對話指示**：需要時加上 `🔄 **開啟新對話**`
+  - `**使用模式：Ask**`
+  - `**使用模式：Agent**`
+  - `**使用模式：Edit**`（較少使用）
+- **新對話指示**：需要時加上 `**開啟新對話**`
 - **目的**：明確告訴學員在 VS Code 中應該選擇哪個模式和何時重新開始
 
-## 📁 8 個漸進式學習場景
+## 8 個漸進式學習場景
 
-### **🌱 基礎階段** (建立認知) ⚠️ **0% Agent 嚴格執行**
+### **基礎階段** (建立認知) **0% Agent 嚴格執行**
 1. **初次對話體驗** (0% Agent) - 傳統 Chat 功能，@workspace 認知建立
 2. **程式碼解釋實作** (0% Agent) - @workspace 核心應用，程式碼理解
 
-### **🚀 進階階段** (引入 Agent)
+### **進階階段** (引入 Agent)
 3. **函數生成** (20% Agent) - 體驗 Agent 協助編程
 4. **偵錯輔助** (30% Agent) - Agent 智能診斷
 
-### **🔥 專業階段** (Agent 主角)
+### **專業階段** (Agent 主角)
 5. **單元測試** (50% Agent) - Agent 測試策略
 6. **程式碼重構** (60% Agent) - Agent 重構規劃
 
-### **🎯 專家階段** (Agent 主導)
+### **專家階段** (Agent 主導)
 7. **文件生成** (80% Agent) - Agent 文件自動化
 8. **GitHub 自動化 Agent** (100% Agent) - 完全自動化的 GitHub 工作流程
 
-### **⚠️ 場景 8 特殊架構設計**
+### **場景 8 特殊架構設計**
 場景 8 使用**獨立的 GitHub Repository** (`copilot-agent-demo-todo`)：
 
 #### **為什麼需要獨立 Repo？**
@@ -98,7 +98,7 @@ copilot-agent-demo-todo/
 
 這種設計讓學員體驗**真正的 AI 驅動開發工作流程**，而不只是本地檔案修改。
 
-## 🏗️ 技術架構
+## 技術架構
 
 ### **指令系統架構**
 ```
@@ -128,22 +128,22 @@ copilot-agent-demo-todo/
 }
 ```
 
-## 📚 課程設計原則
+## 課程設計原則
 
-### **由淺入深的學習路徑** ⚠️ **嚴格遵守**
+### **由淺入深的學習路徑** **嚴格遵守**
 - **前期**：建立基礎認知，**絕對不使用 Agent**
   - 場景 1：純對話體驗，重點是 @workspace 認知
   - 場景 2：程式碼解釋，@workspace 應用但無 Agent
 - **中期**：逐步引入 Agent，展示價值差異  
 - **後期**：深度應用 Agent，展示完整潛力
 
-### **⚠️ 課程設計鐵律**
+### **課程設計鐵律**
 1. **嚴格按照 Agent 比例**：場景 1-2 必須是 0% Agent（只用 Ask）
 2. **不可超前實作**：前期場景只能是對話和學習，不能進行複雜開發
 3. **漸進式體驗**：每個階段都有明確的學習重點，不可混淆
 4. **建立認知為主**：前期重點是讓學員理解工具價值，而非完成專案
-5. **模式標示強制**：每個 Prompt 範例後必須標明 `💡 **使用模式：Ask**` 或 `💡 **使用模式：Agent**`
-6. **新對話管理**：必要時指示學員 `🔄 **開啟新對話**`，避免上下文混淆
+5. **模式標示強制**：每個 Prompt 範例後必須標明 `**使用模式：Ask**` 或 `**使用模式：Agent**`
+6. **新對話管理**：必要時指示學員 `**開啟新對話**`，避免上下文混淆
 7. **輸入內容格式**：所有需要學員輸入的提示詞、程式碼片段都必須使用 code block 格式，方便複製
 8. **Context 管理**：在修改教學內容時，必須考慮是否需要加入 @workspace 或其他 context 參與者
 9. **Context 準備說明**：每個 Demo 步驟前都必須清楚說明 Context 準備（例如：需要開啟哪些檔案、是否需要加入 context 等）
@@ -198,7 +198,7 @@ copilot-agent-demo-todo/
 - 程式碼風格和開發規範的統一
 - Prompt Files 的分享和重複使用
 
-## ⚠️ 重要限制和注意事項
+## 重要限制和注意事項
 
 ### **Visual Studio 支援**
 - 本課程專注於 VS Code
@@ -217,7 +217,7 @@ copilot-agent-demo-todo/
 - 重點展示而非詳細教學每個功能
 - 提供實用的 takeaway 工具和模板
 
-## 📌 Git 分支管理策略
+## Git 分支管理策略
 
 ### **教學專案分支設計**
 - **main 分支**：保持原始教學檔案，供學員下載使用
@@ -243,7 +243,7 @@ copilot-agent-demo-todo/
 - GitHub Pages 即時展示修改效果
 - 保留教學過程的完整記錄
 
-### **⚠️ Git Commit 作者規範**
+### **Git Commit 作者規範**
 
 #### **重要：所有 commit 的作者必須是專案擁有者**
 - **Author**: Yulin Wang <yulin@example.com>
@@ -261,7 +261,7 @@ git commit -m "feat: 功能描述
 - **保持簡潔**：commit 訊息專注於變更內容本身
 - **專業呈現**：乾淨的 git 歷史記錄
 
-## 🎯 預期成果
+## 預期成果
 
 學員完成課程後將能夠：
 - 熟練使用 GitHub Copilot Agent 模式