- 了解 GitHub Copilot 的基本 Chat 功能
- 學習如何使用 ask 功能進行對話
- 理解 @workspace 的重要性和實際差異
- 掌握程式碼自動完成的基礎操作
- 熟悉 Copilot Chat 介面和快捷鍵
- 建立使用 Copilot 的基礎認知（為後續 Agent 學習打基礎）
您是一位剛開始使用 GitHub Copilot 的開發者，想要了解這個工具的基本功能。這個階段專注於傳統 Chat 功能（0% Agent），通過簡單的對話體驗建立基礎認知，特別是 @workspace 與一般對話的重要差異。
01-first-experience/
├── README.md (本檔案)
├── index.html
├── style.css
└── script.js (空白檔案，待完成)
在開始之前，請確認使用 GPT-4.1 模型：
- 開啟 Copilot Chat (
Ctrl+Alt+I) - 點擊 Chat 面板右上角的 設定圖示
- 在 Model 選項中選擇 GPT-4.1
- 確認顯示 "Using GPT-4.1"
為什麼選擇 GPT-4.1？
- 更準確的程式碼生成
- 更好的專案理解能力
- Edit 模式效果最佳
- 在 VS Code 中開啟本資料夾 (
01-first-experience/) - 按下
Ctrl+Alt+I(或Cmd+Option+I) 開啟 Copilot Chat - 一般提問：
你好！我想建立一個簡單的待辦事項網頁，請告訴我基本的檔案結構和需要的功能？
使用模式：Ask
開啟新對話
- 點擊 Chat 面板右上角的「+」或「New Chat」按鈕
- 或使用快捷鍵：
Ctrl+L
@workspace 我想了解這個專案的結構，請告訴我現在有哪些檔案？
使用模式：Ask
觀察差異：
- 一般對話：給通用建議
- @workspace：能看到實際檔案，給出針對性回答
@workspace 這個專案有哪些檔案？每個檔案的用途是什麼？
使用模式：Ask
@workspace 我是初學者，想了解待辦事項應用通常有哪些功能？學習 JavaScript 時應該注意什麼？
使用模式：Ask
- 開啟
script.js檔案 - 在檔案最下方（註解後面）開始輸入：
- 輸入：
// 學習 GitHub Copilot，按 Enter 換行 - 在下一行輸入：
console.log( - 暫停 1-2 秒，觀察灰色的 Ghost Text 建議
- 輸入：
- 看到建議後，按
Tab鍵接受 - 繼續輸入
// 待辦事項，觀察新的建議
重點觀察：
- Ghost Text 會以灰色文字顯示建議
- 按
Tab接受，按Esc拒絕 - 建議會根據你的註解和程式碼上下文改變
開啟新對話
- 在 Chat 視窗中，點擊輸入框左側的 **** 圖示
- 選擇「Add Files」
- 勾選以下檔案：
index.html(重要！讓 Copilot 了解 DOM 結構)script.js(要編輯的檔案)
- 確認檔案已加入（會顯示在輸入框上方）
為什麼要加入 index.html？ 讓 Copilot 看到按鈕和列表的 ID，才能生成正確的程式碼
- 在 Chat 上方選擇 Edit 模式（預設是 Ask）
- 輸入簡單的指令：
實作待辦事項的新增功能，點擊按鈕要能新增項目到列表
使用模式：Edit
- Copilot 會顯示修改預覽
- 檢視程式碼，確認使用了正確的 ID (
todoInput,addButton,todoList) - 點擊 Accept 接受修改
- 開啟
index.html：- 方法 1：在檔案總管找到檔案，直接拖曳到瀏覽器
- 方法 2：如果有安裝 Live Server 擴充功能，右鍵選擇「Open with Live Server」
- 方法 3：在檔案總管雙擊
index.html，用預設瀏覽器開啟
- 測試新增待辦事項功能：
- 輸入文字
- 點擊「新增」按鈕
- 確認項目出現在列表中
Edit 模式關鍵學習：
- 必須加入相關檔案作為 context
- Copilot 會根據 context 生成符合專案的程式碼
- 簡單的 prompt 就能完成功能
開啟新對話
- 使用 @workspace 了解現有設計：
@workspace 請分析 style.css 的設計風格，包括配色、排版和整體視覺風格
使用模式：Ask
@workspace 我想讓這個待辦事項應用看起來更現代化和專業，可以建議一些具體的 CSS 改進嗎？比如：
- 添加漸變背景
- 改進按鈕的互動效果
- 添加動畫和過渡效果
- 提升整體視覺層次
使用模式：Ask
- 點擊 圖示，選擇
style.css檔案 - 切換到 Edit 模式
- 輸入具體的修改需求：
請幫我修改 style.css，實作以下改進：
1. 給 body 添加現代化的漸變背景
2. 為 .container 添加柔和的陰影和模糊效果
3. 改進按鈕樣式，添加懸停和點擊的動畫效果
4. 給待辦事項添加滑入動畫，讓新增項目更有動感
5. 優化整體配色，使用更專業的色彩搭配
使用模式：Edit
- 檢視 Copilot 的修改預覽
- 點擊 Accept 接受修改
- 重新整理瀏覽器查看效果
- 測試各種互動：
- 按鈕懸停效果
- 新增項目的動畫
- 整體視覺層次的改善
樣式修改關鍵學習：
- Copilot 能理解設計意圖並轉化為 CSS
- 可以一次性處理多個樣式需求
- 生成的程式碼包含現代 CSS 特性（動畫、漸變、陰影等）
- 一般對話：籠統建議，不了解專案脈絡
- @workspace：針對性強，程式碼可直接使用
- 效率差異：@workspace 節省 50-70% 的溝通成本
- 回應速度：了解等待時間，學會耐心
- 需要明確指導：問題越具體，答案越有用
- 逐步建構：傳統模式需要分步驟完成專案
- 視覺即時反饋：修改立即可見，增強學習成就感
- 現代化設計：Copilot 了解當前設計趨勢
- 完整性思考：不只改單一元素，而是整體提升
- 永遠使用 @workspace：這是最重要的聊天參與者
- 讓 AI 先了解專案：讓它分析現有結構
- 要求針對性建議：避免通用範例程式碼
- 明確具體：問題越具體，答案越精準
- 提供上下文：說明您的需求和限制
- 迭代改進：根據回答繼續深入詢問
@workspace 請分析這個專案的結構@workspace 如何優化這個函數的效能？@workspace 這個錯誤在我的專案中如何解決？@workspace 根據現有架構提供最佳實踐建議
- 何時開啟新對話：切換不同主題或想要清晰對比時
- 如何開啟新對話：點擊 Chat 面板上方的「新對話」按鈕
- 對話歷史：Copilot 會記住同一對話中的上下文
- @workspace 對比展示：先不用 → 再使用，展現明顯差異
- 快速開啟 Chat：
Ctrl+Alt+I熟練操作 - 專案感知能力：展示 AI 如何理解專案結構
- Ghost Text 體驗：灰色建議 → Tab 接受
- Edit 模式實作：展示如何快速完成功能
- UI 美化能力：展示 Copilot 的設計理解力
- 建立基礎認知：為後續 Agent 學習做準備
完成本場景後，您應該：
- 深刻理解 @workspace 的重要性
- 能夠開啟並使用 Copilot Chat
- 了解如何提出有效的問題
- 體驗基本的程式碼自動完成功能
- 建立對 GitHub Copilot 的基礎認知（為後續學習做準備）
- 對比測試：同樣問題分別用一般對話和 @workspace 詢問
- 請 @workspace 解釋它對專案結構的理解
- 要求 @workspace 提供符合專案風格的不同實作方式
- 第一階段建立了 @workspace 的基礎認知
- 第二階段將深入探索 @workspace 的程式碼解釋能力
- 第三階段開始引入 Agent 模式，展現更強大的功能