LESSON 02 · 午餐揪團頁主線

把工作現場搬到你的電腦

第 1 堂你在瀏覽器上傳檔案；今天把 repo 搬到你自己的電腦，裝好兩個工具——一個負責「說」（Claude Code，用白話請它改東西）、一個負責「看」（GitHub Desktop，看它改了哪、確認 OK 才送上線）。做完你就能在自己電腦上：用講的改功能 → 看它改了哪 → 一鍵送上線。

把環境搬到本機 GitHub Desktop × Claude Code 說 × 看雙工具產出：本機改一版並上線

✓

完成定義 · Definition of Done

學員的電腦上有課程 repo 的本機副本，把第 1 堂已裝好的 Claude Code 對準這個資料夾，且完成第一次「用對話改一個東西 → 在 GitHub Desktop 看 diff → commit → push 上線」，最後用 issue + PR 交出來。

給講師：這堂是「環境畢業典禮」——第一次把 repo 搬到自己電腦、真的用 git 送出（不再手動上傳），摩擦點最多。兩個前置務必課前確認：①第 1 堂裝的 Claude Code 還能登入可用（需付費方案）②每人都已受邀進課程 repo。自己務必先完整跑一遍。

0:00–0:06	回顧：第 1 堂用網頁上傳，為什麼還要搬到本機
0:06–0:20	裝 GitHub Desktop、登入、Clone repo 到本機
0:20–0:30	把已裝好的 Claude Code 對準剛 clone 的資料夾
0:30–0:38	存檔點心智模型（commit / branch）對應 GitHub Desktop 按鈕
0:38–0:52	動手：說（Claude Code 改）→ 看（GitHub Desktop diff）→ commit → push
0:52–0:58	交付：開 issue、用 GitHub Desktop 開 PR 連結它
0:58–1:00	收尾：宣告「從今天起作業都在本機這樣做、issue + PR 交」

01為什麼要搬到本機

第 1 堂用 GitHub 網頁上傳檔案，夠簡單——但有天花板：你沒辦法讓 AI 在你電腦上連續、對話式地改一整包檔案，也很難看清楚每次到底改了哪幾行。今天把 repo 拉到本機，就打開了這個能力。

🗣️兩個工具、兩個角色（延續上一堂的「說 vs 看」）

Claude Code＝你「說」的工具：用白話請它改東西，它動手。GitHub Desktop＝你「看」的工具：看它改了哪一行、確認沒問題，再一鍵送上線。你不用會寫程式，但要會看懂與把關——這就是危險雷達。

02裝 GitHub Desktop（把 repo 綁到本機）

GitHub Desktop 是一個圖形介面 App：把雲端的 repo 下載一份到你電腦，並幫你處理登入、上傳、下載——全程用按的，不用背指令。

到 desktop.github.com 下載，安裝（把 App 拖進「應用程式」）
打開 → Sign in to GitHub.com → 瀏覽器授權登入（不用產金鑰、不用密碼貼來貼去）
File → Clone repository → 選課程 repo → 選一個本機資料夾 → 按 Clone（這一步就是「把 repo 綁到本機」）
完成後按 Show in Finder，看得到那個資料夾——這就是你電腦上的工作現場

給講師：GitHub Desktop 會順便裝好 git 與認證，所以等一下 Claude Code 要 push 時直接就能推、不用再設金鑰。這是選它（而非 gh 指令）的關鍵好處之一。

一人專注操作筆電、螢幕上是版本歷史畫面的氛圍照 — 圖 2.1把 repo clone 到本機——你的檔案、每一次改動的紀錄，從今天起都**活在你自己的電腦裡**。

03把 Claude Code 接上你的本機 repo

Claude Code 你第 1 堂已經裝好了——它是能讀你整個資料夾、照你講的話改檔案的 AI 助手。今天唯一的新動作，是讓它對準你剛剛 clone 下來的那個資料夾工作。

打開 Claude Code 桌面版 App → 用「開啟資料夾」指到剛剛 clone 的專案資料夾
確認還登得進去（需付費方案；第一次可能要再用瀏覽器登入一下）
隨口問它「這個資料夾裡有什麼？」——它答得出你的檔案，就代表接上了

給講師：不用再教安裝（第 1 堂已裝）。這段唯一目的是讓每個人的 Claude Code 對準本機 repo 資料夾、且確認還登得進去。最常見的兩個坑：登入過期、以及 Claude Code 開錯資料夾（看不到專案檔案）。

04存檔點心智模型

搬到本機後，你會真的開始存檔。玩過遊戲都知道：不會每走一步就存，而是做完一個段落存一次——存檔的意義是「這裡是一個我想得回的點」。

COMMIT

存檔點

做完一個有意義的小段落存一次。在 GitHub Desktop 左下角寫一句話、按 Commit。

PUSH

上傳雲端

按 Push，把本機的存檔送回 GitHub（也才會更新線上網址）。

BRANCH

平行時空

想試危險打法？開個副本去試，成功再帶回正式線（main）。

圖 1.1Git 三個核心概念：commit 存檔點、history 時光機、branch 平行時空。

05第一次本機協作：說 → 看 → 送出

現在把兩個工具串起來，完整走一次。這個三步循環，就是你之後每天的工作方式：

①🗣️說

打開對著你資料夾的 Claude Code，用白話請它改一個小東西。例如：「把我的午餐揪團頁標題顏色換成品牌的琥珀黃」或「再加一張揪團卡」。

②👀看

切到 GitHub Desktop：左邊列出哪些檔案被改了，右邊逐行 highlight改了哪幾行——這就是 diff。看懂它動了什麼、是不是你要的（看不懂就回去問 Claude Code）。

③🚀送出

在 GitHub Desktop 左下角寫一句 commit 訊息（例：換標題顏色）→ 按 Commit → 按 Push。重新整理你的線上網址，改動就上去了。

AI 負責動手、你負責看懂與把關、GitHub Desktop 負責存檔與上線。「說 → 看 → 送出」記住這三個字就夠了。

06交付：issue + PR（本課規則）

從今天起，每份作業都用這套交：issue＝提出你想做的事、PR＝提出你改好的成果。這就是你以後跟真正工程團隊合作的樣子。

📋一張好 issue 的四要素

① 標題一句話講清楚是什麼事。② 現況 vs 期待：現在長怎樣、你希望它變怎樣。③ 重現步驟（如果是問題回報）。④ 截圖（跟畫面有關就附上）。好的 issue 讓對方不用來回問就能開始。

圖 4.1完整的協作迴圈：issue 提出 → 分支實作 → PR 交付 → review 合併。

在 GitHub Desktop 開分支（Current branch → New branch，建議命名 你的帳號/lesson-02）→ 用 Claude Code 改 → commit → push；push 後 GitHub Desktop 會冒出 Create Pull Request 按鈕，開 PR 並在描述裡連結你的 issue（例如 Closes #12）。作業檔案放進 submissions/你的帳號/。

課後互評：前往至少一位同學的 PR，留一句鼓勵 + 一句具體回饋（例如「這裡的顏色我很喜歡」「這個按鈕文字可以更清楚」）。

·AI Prompt speed dial對著 Claude Code 用自己的話講

A請 Claude Code 改一個功能

這是我的午餐揪團頁專案。請幫我做這件事：
「[用白話描述你要的改動，例如：把標題顏色換成琥珀黃 #F5B947、再加一張揪團卡]」

只改需要改的部分，改完用一兩句話告訴我你動了哪些檔案、哪幾個地方。

B請它解釋這次改了什麼（配合看 diff）

你剛剛的修改，請用<b>白話</b>條列告訴我：
1. 動了哪些檔案
2. 每個檔案大概改了什麼、為什麼
我要拿去對照 GitHub Desktop 上的 diff，確認是我要的。

C請它幫你寫 PR 描述

我剛剛做了這些修改：[簡述你做的事]
對應的 issue 是：「[issue 標題]」

幫我寫一段簡短的 PR 描述：改了什麼、為什麼改、怎麼驗證。語氣自然、不要太官腔。

·作業與檢核

作業：在自己電腦上完整走一次「說 → 看 → 送出」，並用 1 張 issue + 1 個 PR 交出一個小改動（檔案放 submissions/你的帳號/）。課後到至少一位同學的 PR 留言 review。

講師 / 助教檢核重點

本機 clone 成功、看得到專案資料夾
Claude Code 能在該資料夾啟動並已登入
完成至少一次 commit + push，線上網址看得到改動
1 張 issue（標題 + 現況 / 期待）＋ 1 個連結該 issue 的 PR
課後每個 PR 收到至少一則同學留言