Vibe Coding 實戰課 — Stage 2 · 串 AI
用更強的工具開發 — AI 幫你操作，你負責判斷
按 → 或空白鍵開始
核心升級：從「你複製貼上」到「AI 直接操作專案」
設計原則
CLI 在 IDE 終端機操作，你不需要記指令
AI 幫你執行，你負責判斷該不該讓它做
ROUND 1 · 0:00–0:20
從網頁聊天升級到 AI 直接操作你的專案
專案所有檔案的目錄結構
index.html / .gitignore / .env
程式碼的顯示和修改
AI 修改的內容會即時出現在這裡
指令執行的地方
AI 會在這裡幫你跑 Git 指令
這三個區域就是你整個開發的工作空間
不需要切到其他軟體
本堂使用的是 VS Code 內的 IDE Extension
不是 Claude.ai 網頁聊天，也不是 M3 的 Claude Code CLI
File → Open Folder → 選擇 M2-2 搬家後的專案資料夾
左邊檔案樹應該看到 index.html + .gitignore + .env
左邊 Extensions → 搜尋「Claude」→ Install
「幫我把這個網頁加一個深色模式切換按鈕」
AI 給你一段程式碼
你手動複製
貼到正確的位置
貼錯了整個壞掉
AI 直接修改 index.html
你看中間編輯區即時變化
瀏覽器重新整理看結果
不對就 Ctrl+Z 還原
確認你開的是正確的資料夾
AI 看不到不在工作目錄裡的檔案
沒開正確資料夾 → AI 看不到你的專案檔案
AI 的回應會變成通用答案，而不是針對你的程式碼
File → Open Folder → 選到包含 index.html 的那個資料夾
左邊檔案樹有看到你的檔案才是對的
從「你複製貼上」升級到「AI 直接操作專案」
你的角色從搬運工變成監督者
ROUND 2 · 0:20–0:45
你不需要記指令，但要會判斷 AI 在做什麼
「幫我把這個專案的修改 commit 並 push 到 GitHub」
AI 自動執行 git add → git commit → git push
AI 執行指令前會問你，點同意才執行
打開 repo 頁面，確認修改已經上去
git add . # 把所有修改加入暫存區 git commit -m "新增深色模式切換按鈕" # 記錄這次修改 git push # 推到 GitHub
指令跑在終端機裡，但你不需要自己打
你需要的能力是：看懂 AI 做了什麼 + 判斷該不該讓它做
步驟多，容易出錯
一句話搞定
git push --force
force push 會覆蓋遠端的所有記錄
如果其他人也在改，他們的修改會消失
看到 --force 就按「拒絕」
問 AI：「不要用 force，改用一般的 push」
git add / commit / push
AI 幫你打就好
AI 要做什麼操作
你看得懂才能決定同不同意
--force / delete / rm -rf
看到這些字要先暫停
不需要會打指令，但要會判斷
每次 AI 要執行操作時，你就是最後一道防線
ROUND 3 · 0:45–1:10
解決 push 失敗的根本問題
AI 幫你 push → 終端機顯示 Permission denied
GitHub 不認識你的電腦，拒絕存取
「幫我設定 GitHub 的 SSH Key」
在終端機執行 ssh-keygen → 產生一對公鑰和私鑰
到 GitHub → Settings → SSH Keys → 貼上公鑰 → 儲存
ssh -T [email protected] → 出現歡迎訊息 = 成功
門鈴 — 誰都能按
鑰匙 — 只有你有
~/.ssh/id_ed25519 ← 私鑰（沒有副檔名） ~/.ssh/id_ed25519.pub ← 公鑰（.pub 結尾）
AI 通常會自動複製正確的那個
但你要確認結尾是 .pub
pub = public = 可以公開的那一把
沒有 .pub 的那個絕對不能外流
用 SSH Key，push 永遠不會因為「憑證過期」而失敗
終端機顯示 push 成功，沒有 Permission denied
GitHub 上看到最新的 commit
公鑰 = 門鈴（誰都能按）
私鑰 = 鑰匙（只有你有）
一次設定，永久使用
ROUND 4 · 1:10–1:30
信任但要驗證 — 控制 AI 能做什麼
AI 不小心執行 rm -rf（刪除全部檔案）
沒有權限設定 → 直接刪光 → 專案消失
有權限設定 → 跳出確認 → 你可以攔住
VS Code Settings → 搜尋「Claude permissions」
執行終端機指令 → 需要確認
修改檔案 → 可以自動
請 AI 刪一個檔案 → 跳出確認視窗 → 選擇同意或拒絕
讀取檔案
搜尋程式碼
查看目錄結構
只看不改，放心讓它做
修改檔案內容
新增檔案
改名/搬移檔案
可設自動，但改壞可 Ctrl+Z
刪除檔案
執行終端機指令
安裝/移除套件
不可逆操作，一定要你點同意
在終端機看到這些字，先暫停再判斷
rm -rf # 刪除整個資料夾（不可逆） --force # 強制覆蓋（可能覆蓋別人的修改） drop # 刪除資料庫資料 sudo # 系統管理員權限 chmod 777 # 開放所有權限（安全風險）
不確定的時候，問 AI：「這個指令會做什麼？有什麼風險？」
AI 會解釋，你再決定要不要執行
自動
AI 需要讀懂你的專案才能幫你
自動
改壞了可以 Ctrl+Z 還原
需確認
指令一旦跑了就不能 Ctrl+Z
「幫我在終端機列出這個資料夾的所有檔案」→ 跳出確認
「幫我刪掉 test.txt」→ 跳出確認
觀察哪些操作需要確認，哪些直接執行
讓 AI 什麼都能做
等於沒有安全帶
每個操作都要確認
效率跟手動沒差別
低風險自動 + 高風險確認
效率和安全的平衡點
信任但要驗證
綠燈自動 / 黃燈可自動 / 紅燈必須確認
ROUND 5 · 1:30–1:50
把前四輪學到的串起來，做一輪完整流程
在 IDE 裡請 AI 加功能或改樣式
「幫我 commit 並 push」→ 確認終端機指令 → 同意
打開 repo，修改已經上去
確認 .env 沒有被 push 上去（應該被 .gitignore 排除）
打開對方的 repo，確認最新 commit
搜尋對方的 repo，不應該看到 .env 檔案
不是亂碼或空白，描述了修改內容
GitHub Pages 上的頁面有更新且功能正常
工具在升級，你的角色也在升級
從操作者 → 監督者 → 決策者
IDE 修改 → AI 幫你 push → GitHub 確認 → 安全檢查
這就是日常開發的基本節奏
ROUND 6 · 1:50–2:00
把今天學到的固化成可重複的工作流
確認左邊檔案樹看到你的檔案
確保密碼檔不會被上傳
API Key 和密碼只存在 .env，不寫在程式碼裡
AI 直接修改檔案，你監督品質
確認指令內容後點同意
最後一步安全檢查
專案根目錄
存 API Key（不上傳）
專案根目錄
排除敏感檔案
IDE 設定
AI 權限分級
repo Settings
雲端密碼（M3-4 用）
四道防線，確保密碼不會出現在公開的程式碼裡
引出概念：工作目錄 = AI 的視野範圍
引出概念：判斷 AI 操作的能力比指令能力重要
引出概念：.pub 才能公開，沒有 .pub 的永遠不給
引出概念：紅燈/黃燈/綠燈權限分級
引出概念：IDE 的價值在於讓 AI 直接操作
不只學了什麼，是想法怎麼變了
從「跟 AI 對話」→ 跟 AI 共用工作現場
用 IDE 標準流程完成一次完整的修改 + push
確認 GitHub 上的修改正確，.env 沒有被上傳
M2-4 會用到你今天設好的 SSH Key 和 IDE 環境
確保 push 流程正常運作
下一堂課 — M2-4
三大免費平台 + 用量限制 + 做出你的 AI 工具
M2-3 完成