W05 AI 輔助開發（二）

• 上週裝好了 Claude Code 或 Codex，今天真的拿它來做事
• 先讓它把 jsfxr 跑起來，再用它想清楚你們的遊戲
• 這門課允許並鼓勵用 AI，但有規則

本週目標

• 讓 AI 在本機把一個專案跑起來
• 聽得懂 prompt、context、harness、memory、skill、MCP 在說什麼
• 知道規則：AI 做的，你要驗證
• 用 grill-me 想清楚你們的遊戲，寫成 docs/plan.md

先用 Fork 把你們組的 repo clone 下來

1. 打開 Gitea → 你們組的 repo → 複製網址
2. Fork → File → Clone，貼上網址
3. 選一個放專案的資料夾，按 Clone

安裝前：打開 repo 和終端機

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

連線安裝 · 一般安裝

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

離線安裝：用 class-llm 的 install-offline

電腦教室沒有網路、裝不了 Claude Code 時：

1. 跟老師拿 class-llm 壓縮檔，解壓縮放在 C:\class-llm
2. 雙擊 install-offline.cmd（這個可以雙擊）
3. 看到 checksum matches、Done，就裝好了
4. 開一個新的終端機，打 claude --version 確認
5. 之後在 repo 的終端機打 class-llm，就連上老師電腦的 LLM

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

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

連上老師電腦上架設的 LLM

1. 先裝好 Claude Code（第 6 張投影片）
2. 把老師給的 class-llm 資料夾放在 C:\class-llm
3. 在你們組 repo 的終端機打 C:\class-llm\class-llm.cmd
4. 看到三個 ok，它就會在終端機現在所在的資料夾（你們的 repo）打開 Claude Code
5. 回答幾個問題後，看到橘色的小機器人，就表示可以開始使用

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

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

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

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

Prompt：把話說清楚

AI 時代，詞彙和言語就是力量。比較兩種 prompt：

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

幫我把 jsfxr 跑起來

你說了算：

讀 README.md 和 package.json，告訴我怎麼在本機把 jsfxr 跑起來。 限制：先說計畫，我同意才執行；不要改 jsfxr 的任何檔案。 完成條件：瀏覽器打開後，按「Jump」會發出跳躍的音效。

三要素：脈絡、限制、驗收條件。

讓 AI 把 jsfxr 跑起來

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

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

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

再難一點：請 AI 把 PhotoCraft build 起來

PhotoCraft＝用 Rust 重寫的開源 Photoshop。缺的東西全部讓 AI 裝：

把 github.com/storytold/photocraft clone 下來，build 起來並打開它。 先讀 README 和 AGENTS.md，列出這台電腦還缺什麼，我同意了再裝。 不要改專案裡的檔案。看到 PhotoCraft 的視窗打開，才算完成。

1. 它會發現缺 Rust 和 C++ 編譯工具，先問你
2. 你同意了才裝、才編譯，第一次很久
3. 出錯時，看它怎麼讀錯誤訊息、自己修

還有一個：Pixelorama

Pixelorama＝開源的像素繪圖工具，畫角色、圖塊、動畫，匯出 PNG／GIF／spritesheet。它自己就是用 Godot 寫的——跟你們下週開始學的引擎同一個。

• GitHub：https://github.com/orama-interactive/pixelorama（MIT，約 10.5k 星）
• 要 Godot 4.7.2 才打得開，舊版不行
• 不想裝，先玩網頁版：https://orama-interactive.github.io/Pixelorama/

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 之間切換

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

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

Skill：打包好的做法

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

例子：老師的 gitea-course skill——你們的 Gitea 帳號、分組、repo 都是 AI 照它的步驟開的，還能查誰登入過、誰 commit 過。

重複做的事，寫成 skill，下次一句話就好。

值得認識的 skill

最推薦先裝 grill-me

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

怎麼裝 skill

# grill-me（Matt Pocock）
npx skills add mattpocock/skills --skill grill-me
# Superpowers（Claude Code）
/plugin install superpowers@claude-plugins-official
# Anthropic 官方 skill
/plugin marketplace add anthropics/skills

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

怎麼用 grill-me

用法：講完你的想法，打 /grill-me，然後認真回答它的每一題。

Codex：npx skills add 一樣能用，用的時候打 $grill-me（或打 /skills 從清單挑）

自訂規則：讓 grill-me 照你的方式問

Skill 可以再加上你自己的規則：存成 docs/grill-me-rules.md，再打

/grill-me 照 docs/grill-me-rules.md 的規則問我。我們想做……

• 一次只問一題，等我回答再問下一題
• 我說「不知道」時，給選項，不要一直追問
• 還沒決定的，記成「待決問題」
• 全程用繁體中文

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 可以直接操作：GitHub、瀏覽器、Discord、資料庫……
• 像 USB：同一個接頭，插什麼都能用

例子：老師的 AI 接了 Discord MCP，一句話就開好一個頻道。

CLI 還是 MCP？ 有指令就用 CLI，好除錯；沒指令的（網站、App）才用 MCP。

⚠️ 接上什麼，AI 就能動什麼——只接你信任的。

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

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

# Claude Code
claude mcp add playwright npx @playwright/mcp@latest

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

Playwright 能幫你做什麼

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

練習：請 Playwright 整理競賽資訊

開一個新的空資料夾，在裡面開 Claude Code 或 Codex（先裝好第 33 張的 Playwright MCP），貼上：

用 Playwright 打開世新數媒系官網 dma.wp.shu.edu.tw，找到「競賽資訊」的第 2 頁。 點進每一則，整理成 competitions.md：名稱、主辦單位、截止日期、獎金、連結。 頁面上沒寫的寫「未提供」，不要自己猜。

整理好，挑兩則點回原網頁對對看。

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

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

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

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

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

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

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

問完了，請它寫成計畫

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

看過，再提交

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

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

改好了，commit、push。

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

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

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

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

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

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

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 做完一項打一個勾

規格長這樣

### Requirement: Unattributed commits are reported
對不到學生的 commit，要列出來，不能丟掉。

#### Scenario: 分得出「沒做事」和「沒設定」
- WHEN 某個學生的數字全是 0，而且有對不到人的 commit
- THEN 兩件事一起顯示

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

簽到

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

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

本週交付

• 用 AI 在自己電腦上把 jsfxr 跑起來
• 每組一份 docs/plan.md，全組看過，已推上 main

下週預告

W06 · 10/19 · Godot 基礎（一）

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