W04 AI 輔助開發

• AI 是什麼、有哪些工具、怎麼用在寫程式上
• 今天裝好一個 AI 開發工具，讓它把 jsfxr 跑起來，再用它想清楚你們的遊戲
• 這門課允許並鼓勵用 AI，但有規則

本週目標

• 知道 LLM 在做什麼
• 認識各家模型和它們的介面
• 裝好 Claude Code 或 Codex
• 在 VS Code 的終端機裡使用 Claude Code 或 Codex
• 聽得懂 prompt、context、harness、memory、skill、MCP 在說什麼
• 知道規則：AI 做的，你要驗證

從 AI 到 LLM

一層包一層，LLM 是最裡面那一層：

人工智慧(AI)：讓電腦做「看起來聰明」的事
└─ 機器學習(ML)：不寫規則，讓電腦從資料自己學
   └─ 深度學習(DL)：用很多層的類神經網路來學
      └─ 生成式 AI(GenAI)：學完之後能「生出」新東西
         └─ 大型語言模型(LLM)：專門生文字（和程式碼）的生成式 AI

從 AI 到 LLM：每一層的例子

LLM 是什麼

• LLM＝大型語言模型（Large Language Model）
• 讀過大量文字和程式碼，學會「下一個字最可能是什麼」
• 一次吐一小塊，叫 token（模型處理文字的最小單位），一塊一塊接成回答
  • 英文的例子（大致上，不同模型的切法不一樣）：
    • cat、hello 這種常見的字 → 1 個 token
    • unbelievable 這種長字 → 切成幾塊，例如 un + believ + able

LLM 的兩個限制

• 一次能看的東西有上限，叫 context window（上下文視窗）
• 它的知識停在某一天（知識截止日），之後的事它不知道

寫程式對它來說，也是在「接下一個字」。

LLM 會錯在哪

• 一本正經地編：不存在的函式、不存在的套件
• 知識過時：Godot 4 改了很多，它可能給你 Godot 3 的寫法
• 看不到的它不知道：你沒給它看的檔案，它只能猜
• 越長越容易忘：對話拖太長，前面講的規則會被忽略

所以後面每一張都在講同一件事：給它對的資訊，然後檢查它做的。

各家公司有出什麼模型：美國

各家公司有出什麼模型：中國、歐洲、台灣

閉源和開放權重

• 閉源：只能透過它的網站、App、API 用
• 開放權重：模型可以下載到自己電腦跑——不用網路、不用付月費，但要夠強的顯卡

目前寫程式常用的模型

怎麼挑模型

• 大模型：聰明、慢、貴；小模型：快、便宜，簡單的事夠用
• 名字每幾個月就換一輪，不用背，知道怎麼挑就好

各家提供的使用者介面

• 聊天：你把程式一段一段貼給它，它只看得到你貼的那幾行
• CLI（終端機）：以專案資料夾為核心——在你的專案資料夾裡啟動，它自己讀整個資料夾、改檔案、跑指令。今天要學的是這種

Claude Code、Codex 是什麼

Coding agent（寫程式的代理）：

• 聊天機器人：你問、它答，你自己去改
• Coding agent：你交代，它自己讀檔、改檔、跑指令、看結果、再改

讀你的專案 → 想怎麼做 → 改檔案／跑指令 → 看結果 → 不對就再改

Claude Code 和 Codex

• Claude Code：Anthropic 的 coding agent
• Codex：OpenAI 的 coding agent
• 兩個做的事一樣，差在背後的模型和帳號

我們的用法：VS Code ＋ 終端機

VS Code 只當編輯器，AI 在 VS Code 的終端機裡跑。不裝 VS Code 的 AI 擴充。

VS Code
├── 左邊：檔案總管  ← 你的專案資料夾
├── 中間：編輯器    ← 你看檔案、改檔案
└── 下面：終端機    ← 打 claude 或 codex，在這裡跟 AI 對話

在終端機裡用 AI

• AI 改了什麼，同一個畫面就看得到：左邊檔案變了、中間內容變了
• Claude Code、Codex 在終端機裡用法幾乎一樣，換工具不用重學
• 終端機是我們跟 AI 溝通的介面：你在這裡打字交代，它在這裡回報

以專案資料夾為核心

檔案、決策、程式、資產，全部集中在同一個專案資料夾——AI 讀得到、改得動。

我們的遊戲/            ← 專案資料夾（也是 git repo）
├── README.md         ← 這是什麼遊戲
├── AGENTS.md         ← 給 AI 看的專案說明
├── docs/             ← 決策：企劃、規格、討論的結論
├── scenes/ scripts/  ← 程式
└── assets/           ← 資產：圖、音效、字型

放進資料夾，AI 才看得到

• 討論出來的決定，寫成檔案放進資料夾，AI 才知道
• 資料夾也在 git 裡：組員和 AI 看到的是同一份

安裝 Claude Code 或 Codex

1. VS Code → File → Open Folder → 選你們組的 repo 資料夾
2. 開終端機：Ctrl + `（或選單 Terminal → New Terminal）
3. 選一個裝（下一張）

• ⚠️ 裝完要關掉終端機、再開一個新的，不然會說找不到 claude／codex

安裝指令

沒有付費帳號？用老師電腦上的 LLM

老師的電腦（RTX 4090）跑著一個開放權重模型 qwen3.8:27b。 用的還是 Claude Code，只是背後的模型換成老師電腦上的這一個——免費、不用帳號。

連上老師電腦上架設的 LLM

1. 先裝好 Claude Code（第 12 張）
2. 拿到老師給的 class-llm 資料夾，放在固定的地方，例如 C:\class-llm
3. 在 VS Code 的終端機，確認路徑是你們組的 repo 資料夾，打 C:\class-llm\connect.cmd
4. 看到三個 ok，它就會在終端機現在所在的資料夾（你們的 repo）打開 Claude Code

class-llm 不用放進專案裡，放哪裡都可以；在哪裡執行，就在哪裡打開。

老師電腦上架設的 LLM： 注意事項

• 只在校園網路能用（校外要連學校 VPN）
• 第一次回答要等最多一分鐘，模型要先載入顯示卡
• 聊越久越慢，慢了就開新對話
• 模型比雲端的小：簡單的事可以，複雜的還是雲端的強

老師電腦上架設的 LLM： 注意事項2

• 關掉那個終端機，你原本的 Claude Code 就恢復原狀
• 離開後要再用，重新打 C:\class-llm\connect.cmd——直接打 claude 不會連到老師電腦
• 想接著剛剛的對話：C:\class-llm\connect.cmd --continue
• ⚠️ 不要雙擊 connect.cmd：它會在 class-llm 資料夾裡打開，看不到你們的專案。不小心雙擊了，直接關掉那個視窗，回 VS Code 終端機重打一次就好

現在裝，跟它說第一句話

1. 照第 12 張裝好、登入
2. 確認終端機的路徑是你們組的 repo 資料夾
3. 打 claude 或 codex
4. 問它：這個資料夾裡有什麼？
5. 看到它回答你們的 README 內容，就成功了

• 打 @檔名 可以指定要它看哪個檔案
• 請它改 README 的一行，回到 VS Code 看：檔案真的變了

今天的例子：jsfxr

jsfxr：做遊戲 8-bit 音效的網頁工具——跳躍、爆炸、撿金幣，按一下就生一個，可以存成 .wav。

• GitHub：https://github.com/chr15m/jsfxr（授權：Unlicense，隨便用）
• 做出來的音效，之後做遊戲用得到

先把 jsfxr clone 下來

先把它 clone 下來（W02 學過），它自己就是一個專案資料夾：

cd C:\projects    ← 放專案的地方，不要放進你們組的 repo
git clone https://github.com/chr15m/jsfxr

然後 VS Code → Open Folder → 選 jsfxr，開終端機，打 claude 或 codex（用老師電腦 LLM 的：打 C:\class-llm\connect.cmd）。

Prompt：把話說清楚

會動，但你交出所有決定：

幫我把 jsfxr 跑起來 你說了算： 讀這個專案的 README.md 和 package.json，告訴我怎麼在本機把 jsfxr 跑起來。 限制：先說計畫，我同意才執行；不要改 jsfxr 的任何檔案。 完成條件：瀏覽器打開後，按「Jump」會發出跳躍的音效。 三要素：脈絡（哪個檔案、什麼結構）、限制（不要動什麼）、驗收條件（怎樣算完成）。

讓 AI 把 jsfxr 跑起來

在 clone 下來的 jsfxr 資料夾裡開 Claude Code 或 Codex，貼上第 17 張那段 prompt：

1. 它先讀 README.md、package.json，說出計畫
2. 你同意之後，它才跑 npm install、把網頁開起來
3. 打開瀏覽器，按「Jump」——有聲音就成功

老師做完，換你們在自己的電腦上做一次。

Context：AI看得到什麼

Context＝這一次對話裡，AI 看得到的所有東西

• 你打的字、它讀過的檔案、指令跑出來的結果、之前的對話
• 看不到的，它就用猜的
• 不是越多越好：塞太多，重點會被淹掉，也更慢、更貴

Context：怎麼管

• 用 @檔名 指定相關的檔案
• 換一件事就開新對話，不要一個對話做到底

Harness：模型外面的那一層

• 模型是引擎，harness 是整台車
• Harness＝包在模型外面的程式：給它工具（讀檔、跑指令）、決定它能做什麼、讓它一輪一輪做下去
• Claude Code、Codex 就是 harness
• 同一個模型，放進不同的 harness，表現差很多

權限也在這一層：它要改檔、跑指令之前會問你——看清楚再按允許。

權限：它可以自己做到哪裡

Claude Code 按 Shift + Tab 換模式，畫面左下角會顯示現在是哪一種

權限規則存在哪裡

• 按「不要再問」，規則會記進 .claude/settings.local.json
• .claude/settings.json 整組共用、進 git；settings.local.json 只有你自己、不進 git
• 打 /permissions 看現在有哪些規則
• Codex 也是打 /permissions，在 Read Only、Auto 之間切換

工作流：讀 → 計畫 → 改 → 檢查 → 提交

1. 讀：讓它先看相關檔案，不要一開口就要它寫
2. 計畫：大一點的事先叫它「先說計畫，我同意再動手」（Claude Code 也可以按 Shift + Tab 切到計畫模式）
3. 改：明確說要改什麼、不要動什麼
4. 檢查：在Fork的Changes裡看改了什麼
5. 提交：確認沒問題再 commit

⚠️ 跳過第 4 步是災難的開始。

Spec-driven development：先寫規格，再寫程式

• AI 寫程式很快——方向錯了，也錯得很快
• 所以先把「要做什麼」寫清楚，大家（你、組員、AI）看過同意，再讓 AI 動手
• 寫下來的叫規格（spec）：這個功能要做到什麼、什麼情況下要怎樣
• 規格放在 git 裡，跟程式一起留下來：之後改功能，先改規格

第 22 張的「計畫」是一次性的；規格是留下來的。

OpenSpec 怎麼用

OpenSpec：一個幫你做 spec-driven development 的免費工具，Claude Code、Codex 都能用

npm install -g @fission-ai/openspec@latest
cd 你們的專案
openspec init

OpenSpec 的四個指令

一個真的例子：course-vault

course-vault＝老師管 Gitea 的工具：你們的帳號、組、repo 都是它開的。 其中「統計每個人的貢獻」這個功能，就是先寫規格再做的。一次改動是一個資料夾：

add-student-contribution-stats/
├── proposal.md   ← 為什麼要做、要改什麼、不做什麼
├── specs/        ← 規格：一條一條的「要求」＋「情境」
├── design.md     ← 技術上怎麼做
└── tasks.md      ← 任務清單，AI 做完一項打一個勾

規格長這樣

對不到學生的 commit，要列出來，不能丟掉。

- WHEN 某個學生的數字全是 0，而且有對不到人的 commit
- THEN 兩件事一起顯示

WHEN／THEN 寫得出來，就知道怎麼驗收。

記憶：AI怎麼記得你的專案

• 對話結束，它就忘了——下次開新對話，一切重來
• 要它記得，就寫在檔案裡：專案根目錄放一份說明檔
  • Claude Code 讀 CLAUDE.md
  • Codex 讀 AGENTS.md
• 寫什麼：專案在做什麼、資料夾結構、慣例（例如「用 Godot 4、GDScript、命名用 snake_case」）
• 不知道怎麼開頭？打 /init，它會讀整個專案、先幫你寫一份，你再改
• 工具也會自己記一些東西，但重要的事自己寫下來最可靠

Skill：打包好的做法

• Skill＝一個資料夾，裡面一份 SKILL.md：「遇到這種事，照這個步驟做」
• 平常不佔空間，需要時才載入
• 可以自己寫，也可以裝別人寫好的

例子：老師有一個 gitea-course skill，你們的 Gitea 帳號和 repo 就是用它開的——AI 照步驟批次建帳號、分組、開 repo，還會查誰登入過、誰 commit 過。 重複做的事，寫成 skill，下次一句話就好。

值得認識的 skill

最推薦先裝 grill-me

最推薦先裝 grill-me：AI 最常出錯的地方，是你沒講清楚、它就自己猜。grill-me 反過來讓它先問你。

怎麼裝 skill

npx skills add https://github.com/mattpocock/skills --skill grill-me

/plugin install superpowers@claude-plugins-official

/plugin marketplace add anthropics/skills

⚠️ Skill 是用你的權限在跑的——裝別人的 skill 之前，先打開 SKILL.md 看過在做什麼。

怎麼用 grill-me

用法：講完你的想法，打 /grill-me，然後認真回答它的每一題。 Codex：npx skills add 一樣能用，用的時候打 $grill-me（或打 /skills 從清單挑）

AI 的「手」

• 模型是腦：只會想、只會講
• 工具是手：讀檔、改檔、跑指令、上網、操作別的軟體
• 沒有手，它只能叫你去做；有了手，它自己做

AI 的手有兩種

AI 的手（一）：CLI

CLI＝命令列工具，在終端機打字執行的程式

• Coding agent 最常用的手：你在終端機能打的指令，它都能打
• 它讀過大量的說明文件，大部分常見指令都會用
• 想讓它會一件新事情？先看有沒有現成的 CLI 可以裝。

CLI 的例子

• git status、git commit：幫你看狀態、提交
• npm install、python main.py：裝套件、跑程式
• godot --headless：不開畫面跑 Godot，檢查專案有沒有錯
• ⚠️ 跑指令前它會問你——看清楚它要跑什麼再按允許，尤其是刪檔案的

AI 的手（二）：MCP

• MCP（Model Context Protocol）＝讓 AI 連接外部服務的標準接頭
• 接上之後，AI 可以直接操作：GitHub、瀏覽器、Discord、資料庫……
• 像 USB：同一個接頭，插什麼都能用

例子：老師的 AI 接了 Discord 的 MCP，說「開一個叫剪貼簿的頻道」，它就直接開好了。 CLI 還是 MCP？ 有現成的指令就先用 CLI，簡單、好除錯；要操作網站、App 這類沒有指令的東西，再用 MCP。 ⚠️ 接上什麼，AI 就能動什麼——只接你信任的。

MCP 例子：Playwright，讓 AI 開瀏覽器

Playwright MCP＝微軟做的 MCP，讓 AI 自己開一個瀏覽器：打開網址、點按鈕、填表單、截圖

claude mcp add playwright npx @playwright/mcp@latest

codex mcp add playwright npx "@playwright/mcp@latest"

Playwright 能幫你做什麼

• 它讀的是網頁的結構（哪裡有按鈕、按鈕叫什麼），不是看圖猜
• 用途：讓 AI 自己驗收網頁——例如打開 jsfxr、按「Jump」，確認有反應
• ⚠️ 它開的瀏覽器可以登入、可以按送出——密碼自己打，送出自己按

AI 產出的驗證責任在你身上

• 你交出去的每一行，你要能解釋
• 常見問題：用了不存在的 API、Godot 3 的舊寫法、看起來對但邏輯錯
• 不會就問，不要貼上去就算了

跟 AI 合作的四個能力（4D）

Anthropic 的 AI Fluency 課程把它整理成四個 D：

課堂練習：用 grill-me 想清楚你們的遊戲

每組一台電腦，全組一起回答：

1. VS Code 打開你們組的 repo，開終端機，打 claude 或 codex（用老師電腦 LLM 的：C:\class-llm\connect.cmd）
2. 裝好 grill-me（第 29 張的指令）
3. 用一兩句話講你們想做的遊戲，打 /grill-me（Codex 打 $grill-me）
4. 認真回答它的每一題，不確定的就說不確定

問完了，請它寫成計畫

把我們剛剛討論的結果，整理成一份完整的計畫，寫進 docs/plan.md。 包含：遊戲是什麼、核心玩法、要做的功能（照先後順序）、這學期不做的、還沒決定的問題。 只寫我們討論過的，不要自己加。

看過，再提交

docs/plan.md 是 AI 寫的，要你們看過才算數：

• 是不是你們的意思？寫錯的改掉
• AI 自己加的、你們沒討論過的，刪掉
• 「還沒決定的問題」留著——之後的課一題一題回答

改好了，commit、push。

簽到

今天沒有提交和 push 過的組：

• 在 docs/attendance/w04.md 簽名，commit、push

本週交付

• 在 VS Code 的終端機裡裝好 Claude Code 或 Codex，能在你們的 repo 裡對話
• 每組一份 docs/plan.md，全組看過，已推上 main

下週預告

W05 · 10/12 · Godot 基礎（一）

• 第一次打開 Godot：安裝、介面、節點與場景
• 今天寫的 docs/plan.md，開 Godot 之後照著做