AI創造工作坊

文科視角的AI應用開發入門

第 2 週：讓 AI 幫你動腦

Haowen Jiang

工具重點：GitHub Copilot
應用焦點：AI 輔助程式開發

利用 Copilot 幫你生成個人網頁、小遊戲、文件格式轉換

課程地圖

第 2 週主題

讓 AI 幫你動腦

• GitHub Copilot：透過 AI 輔助編寫程式
• 應用焦點：
  • 個人網頁
  • 小遊戲
  • 文件格式轉換

Copilot 就像你的程式寫作小助手，隨時補充你的靈感與技術細節

學習目標

• 理解 AI 輔助程式開發的流程
  → 學會如何將需求轉化為提示，讓 Copilot 產生程式碼
• 體驗 Copilot 生成前端元件與資料處理程式
  → 從需求描述到程式雛型
• 建立 AI 與人的協作習慣
  → 學習如何檢查、修改 AI 產生的結果

什麼是 GitHub Copilot？

• GitHub Copilot 是一個由 OpenAI 技術驅動的程式碼生成工具
• 根據你的提示（Prompt）與程式上下文，自動補全、產生程式碼片段
• 支援多種語言（如 JavaScript, Python, Markdown…）

GitHub Copilot 的使用流程

1. 提出需求：用自然語言或程式註釋描述想要的功能
2. Copilot 生成程式碼：自動補全或建議完整程式
3. 檢查與修改：人工審核、測試與調整
4. 反覆提示：優化提示、獲得更合適的結果

為什麼要學 GitHub Copilot？

• 節省時間：省去重複性與基礎碼的撰寫
• 降低門檻：讓非科班背景也能快速嘗試程式開發
• 提升創意：專注於設計思路，將雜事交給 AI
• 協作加速：團隊可共享提示與產生的元件，快速迭代

Copilot 是程式設計的「智能助理」與「創意激發器」

如何開始使用GitHub Copilot？

• VS Code編輯器：安裝VS Code以及 GitHub Copilot 擴充套件，直接在本地電腦的編輯器中使用
• GitHub Copilot網頁：透過瀏覽器，登入GitHub後，直接在網頁上使用
• GitHub Codespaces：GitHub提供的雲端開發環境，內建Copilot功能

什麼是 GitHub Codespaces？

• GitHub 提供的雲端開發環境，讓你可以直接在瀏覽器中編寫、執行程式碼
• 內建支援 GitHub Copilot，無需本地安裝任何軟體
• 免費使用額度，GitHub Free帳號每月 120 小時計算時間、15 GB 儲存空間

本週活動

1. 註冊GitHub帳號
2. Fork 課程資料repository
3. 進入GitHub Codespaces頁面
4. 創建一個新的 Codespace
   • 選擇剛剛 Fork 的 repository
   • 選擇 main 分支
   • 選擇 2-core 機器類型
   • 點擊 Create codespace

GitHub Copilot 實作範例

1. 根據下面的內容，產生個人網頁的HTML檔案: {個人背景}
   • 進一步修改格式、顏色、字體、排版等
2. 產生井字遊戲
   • 用HTML, CSS, JavaScript產生井字遊戲
3. 寫一個腳本把當前目錄中所有名稱為 _marp.md的檔案，使用Marp CLI 轉換為html
   • 也可轉換為PPTX、PDF格式

課程連結

• GitHub網站
• GitHub Codespaces
• 課程資料repository
• 提詞範例庫

AI平台

• GitHub Copilot
• Microsoft Copilot
• Google Gemini

推薦VS Code擴充套件 (本課程)

推薦VS Code擴充套件 (一般寫作)