Windows 11 Vibe Coding and AI Agent Environment Setup

本模組聚焦在 Windows 11 筆電上的 Vibe Coding 與 AI Agent 工作環境建置。課堂中會先用一鍵安裝腳本完成主要工具，再透過幾個小型驗證任務確認 VS Code、Python、Node.js、Codex CLI 與 GitHub CLI 都能正常運作。

Learning Objectives

完成本模組後，教師應能：

• 在自己的 Windows 11 筆電上獨立啟動可運作的 Vibe Coding 與 AI Agent 工作環境。
• 使用 VS Code 作為主要開發介面，搭配 Codex CLI 與 Codex 擴充套件進行程式生成、修改與check。
• 使用 uv 與 npm 管理 Python 與 Node.js 的套件及專案環境。
• 透過 GitHub CLI (gh) 以瀏覽器登入 GitHub，完成專案 clone、推送與 GitHub Pages 部署。
• 依據 checklist 自行驗證環境，並排除常見安裝問題。

Prerequisites

Minimum Computer Requirements

本工作坊會同時開啟 VS Code、Node.js、Python、終端機與瀏覽器登入頁面，建議筆電至少符合下列規格。標示「建議」者為較順暢的體驗門檻。

8 GB 記憶體可完成所有任務，但同時開啟 VS Code、瀏覽器與多個終端機時，16 GB 會明顯較順暢。磁碟空間需求包含工具鏈、專案的 node_modules 與 Python 套件。

Toolchain

Windows 11 一鍵安裝腳本與課後指南會在筆電上安裝下列工具：

Hands-on Activities

1. 使用 setup-windows.bat 一鍵安裝

優先使用本模組提供的 setup-windows.bat。這個批次檔會檢查 winget，再依序安裝 VS Code、Git、Node.js LTS、uv、GitHub CLI、Codex CLI 與常用 VS Code 擴充套件。腳本可重複執行；已安裝的項目會自動略過。

建議操作：

• 下載 setup-windows.bat，或將檔案放到容易找到的位置，例如 Downloads。
• 以滑鼠雙擊執行，或在 PowerShell 執行：

& "$HOME\Downloads\setup-windows.bat"

• 若使用 Command Prompt，執行：

"%USERPROFILE%\Downloads\setup-windows.bat"

• 腳本結束後，關閉並重新開啟 PowerShell 或 Command Prompt，讓 PATH settings生效。
• 重新執行下列check指令，確認主要工具都能被系統找到：

code --version
git --version
node --version
npm --version
uv --version
gh --version
codex --version

若腳本顯示 winget not found，請先安裝或更新 Windows 的 App Installer，完成後再重新執行批次檔。

2. 手動下載與安裝必要工具

若一鍵安裝失敗，或教師的筆電受學校 IT 權限限制，可改用手動安裝。建議仍優先使用 winget 指令；若 winget 不可用，再從官方下載頁面安裝。

VS Code 擴充套件可在 VS Code 左側 Extensions 視窗搜尋安裝，也可在終端機逐行執行：

code --install-extension ms-python.python
code --install-extension ms-toolsai.jupyter
code --install-extension eamodio.gitlens
code --install-extension dbaeumer.vscode-eslint
code --install-extension openai.chatgpt

手動安裝後，同樣需要關閉並重新開啟終端機，再執行版本檢查：

code --version
git --version
node --version
npm --version
uv --version
gh --version
codex --version

3. settings AI Agent

• 在終端機執行 codex 並以瀏覽器登入免費或 ChatGPT Plus 帳號；同一帳號可同時用於 VS Code 的 Codex 擴充套件。
• 若後續任務需要操作瀏覽器，讓 AI Agent 依任務需求自行安裝與settings對應工具即可；本模組不把瀏覽器自動化外掛列為預先安裝項目。
• 執行 guided「Hello, AI Agent」任務 (請 Agent 建立一個 hello.txt)，確認 AI Agent 能接收指令、產生檔案並回報結果。

4. 連結 GitHub 與部署 GitHub Pages

• 執行 gh auth login，全程以瀏覽器與一次性代碼登入，不需產生 SSH 金鑰或於終端機輸入密碼，並一次settings好 git 認證與提交身分 (user.name / user.email)。
• practice gh repo clone 下載專案，以及用 gh repo create … --push 與 GitHub Pages 把靜態網站發佈成公開網址。

5. 四項驗證任務 (Verification Tasks)