00 · 上課前要準備

Claude Code 訂閱

本課程需要具有 Claude Code 至少 Pro 方案、Team 或 Max 方案；或者你有別人的分享碼可以免費使用 7 天，但必須現場綁定信用卡。

免費的 claude.ai 帳號不能用 Claude Code。用分享碼的話，上課記得帶信用卡。

00 · 上課前要準備

要先準備好的帳號

1. Claude：能登入、有訂閱的帳號（見上一張）。
2. GitHub：先到 github.com/signup 註冊好。
3. Lovable：記得帳號密碼，上課要打開你的網站專案。
4. 信箱：註冊和登入時會寄驗證碼。上面三個帳號用的信箱，手機要能打開。

00 · 上課前要準備

電腦準備

1. Windows 10（1809 以上）或 Windows 11，記憶體 4GB 以上。
2. 帶充電器。整堂課都在下載與安裝。
3. 知道這台電腦的管理員密碼。安裝 Git、Node.js 時可能跳出權限確認。
4. 公司電腦可能不能自己裝軟體，請先問公司的 IT。

00 · 上課前要準備

還沒有訂閱怎麼辦

還沒訂閱時，可以先做這些不需要 Claude Code 的內容：

1. VS Code 安裝與介紹。
2. 網站前端與後端。
3. Git 第一章的安裝、設定、登入 GitHub 那幾張。
4. 第 11 章「附錄：小抄、自學與練習場」的 Git 沙盒練習。

拿到訂閱後，再做 Claude Code 章、Git 第一章的練習、第二章：分支簡介、第三章：實戰。

00 · 上課前要準備

本章重點：上課前準備

• 先確認 Claude Code 可用的訂閱。
• Claude、GitHub、Lovable 都要能登入。
• 帶好電腦、充電器與管理員密碼。

先備好帳號與電腦，上課就能把時間留給動手做。

00 · 上課前要準備

課後練習：出發前檢查清單

1. 帳號可用：在家登入 Claude、GitHub、Lovable，確認手機能收到驗證信。
2. 訂閱確認：確認 Claude Code 的可用方案或分享碼，備好需要的付款方式。
3. 電腦就緒：開機連網，確認充電器與管理員密碼都備好；公司電腦先確認可安裝。

01 · 課程介紹

三堂課的安排

標「自學」的投影片課堂上跳過，回家有興趣再看。時間不夠時，SEO、狀態列設定與附錄練習也留到課後。

01 · 課程介紹

怎麼使用這份投影片

1. 左右方向鍵切章節；上下方向鍵切投影片。
2. Space / PageDown 往下看；PageUp 往回看。Home / End 到第一張 / 最後一張。
3. Esc 開啟或關閉總覽。手機可以滑動；內容太長就往下捲。
4. 每個指令框右上角都有複製按鈕。直接點它，不用自己選取文字。
5. 先看清楚要貼在 PowerShell（VS Code 的終端機），還是 Claude Code 裡，再按 Enter。

02 · VS Code 安裝與介紹

VS Code 是什麼

VS Code（Visual Studio Code）是免費的程式編輯器。看檔案、改檔案、下指令，都在同一個視窗。

02 · VS Code 安裝與介紹

下載 VS Code

1. 打開瀏覽器，到 code.visualstudio.com。
2. 按藍色的下載按鈕。網站會自動選好你的系統。
3. 到「下載」資料夾，雙擊剛下載的安裝檔。

只從官網下載。搜尋結果裡的其他下載站可能夾帶廣告軟體。

02 · VS Code 安裝與介紹

安裝時要勾的選項

一路按「下一步」。到「選取其他工作」這頁，確認下面都有勾：

1. 將「以 Code 開啟」動作加入 Windows 檔案總管檔案的操作功能表。
2. 將「以 Code 開啟」動作加入 Windows 檔案總管目錄的操作功能表。
3. 加入 PATH（重新啟動後生效）。這個最重要，預設已經勾好。

前兩個讓你在資料夾上按右鍵，就能用 VS Code 打開。最後勾「啟動 Visual Studio Code」，按完成。

02 · VS Code 安裝與介紹

第一次打開：換成中文

右下角通常會跳出「安裝語言套件」的提示，直接按安裝並重新啟動。沒看到的話：

1. 按 Ctrl+Shift+X 打開延伸模組（Extensions）。
2. 搜尋 Chinese (Traditional)，安裝 Microsoft 出的那一個。
3. 按右下角的 Change Language and Restart。

裝好了畫面還是英文，就手動指定顯示語言：

1. 按 Ctrl+Shift+P 打開命令選擇區，輸入 display。
2. 選 Configure Display Language（設定顯示語言）。
3. 選「中文(繁體) zh-tw」，再按 Restart 重新啟動。

歡迎頁可以直接關掉。想換深色或淺色外觀：Ctrl+K 放開，再按 Ctrl+T。

02 · VS Code 安裝與介紹

打開一個資料夾

VS Code 一次打開「一整個資料夾」。一個網站就是一個資料夾。

1. 上方選單選「檔案 → 開啟資料夾」。
2. 先選「文件」資料夾試試看，按「選擇資料夾」。
3. 問「是否信任此資料夾中檔案的作者」：自己的資料夾就按「是，我信任作者」。

從別人那裡下載、不確定的資料夾，先選「否，我不信任」，只看不執行。

02 · VS Code 安裝與介紹

VS Code 畫面的五個區塊

1 2 3 4 5

02 · VS Code 安裝與介紹

VS Code 五個區塊：功能與快捷鍵

1. 活動列：最左邊一排圖示。檔案總管、搜尋、原始檔控制（Git）、延伸模組都從這裡切換。
2. 側邊欄：點活動列的圖示就換內容。最常用檔案總管，看資料夾裡有哪些檔案。Ctrl+B 收起或打開。
3. 編輯區：點檔名就在這裡打開，上方是分頁。分頁上有白點代表還沒存，按 Ctrl+S 存檔。
4. 面板：終端機住在這裡。Ctrl+` 打開或收起。
5. 狀態列：最底下一條。左邊顯示目前的 Git 分支，右邊顯示游標在第幾行。

最上面一條是選單列（File、Edit、View…），設定和開新視窗從這裡找。

忘記功能在哪：Ctrl+Shift+P 打開命令選擇區，直接打字搜尋。Ctrl+P 用檔名找檔案。

02 · VS Code 安裝與介紹

在 VS Code 打開終端機

終端機（terminal）是用打字下指令的視窗。VS Code 下方的面板就有一個，Windows 預設是 PowerShell。

1. 按 Ctrl+`（Esc 下面那顆鍵），或從上方選單選「終端機 → 新增終端」。
2. 畫面下方會出現終端機面板。
3. 看到下面這行，就可以輸入指令。

PS C:\Users\你的名字>

這行提示像地址牌：告訴你現在在哪個資料夾。PS 表示這裡是 PowerShell。

之後投影片寫「在 PowerShell 輸入」，就是貼在這個終端機裡。

02 · VS Code 安裝與介紹

本章重點：VS Code

• 用資料夾打開整個專案。
• 檔案在編輯區改，指令在終端機輸入。
• 看清楚目前路徑，再下指令；Tab 補完名稱，Ctrl+C 中斷。

pwd

ls

cd Documents

cd ..

02 · VS Code 安裝與介紹

課後練習：VS Code

1. 留一張開工便條：自建「回家練習」資料夾，用 VS Code 新增 note.txt，寫三行學習目標；重開仍看得到。
2. 核對路徑：在該資料夾開終端機，執行 pwd 和 ls；路徑正確，清單有 note.txt。

03 · Claude Code 安裝與試用

Claude Code 是什麼

Claude Code 是住在終端機（terminal）裡的 AI 助手（agent）。它能讀檔、改檔，也能執行指令。 你是檢查成果的人（reviewer）。

03 · Claude Code 安裝與試用

安裝 Claude Code：帳號與系統需求

需要 Claude Pro / Max 訂閱或 Console 帳號（API 預付費）；Team / Enterprise 也可。 免費 claude.ai 帳號不含 Claude Code。

Windows 10 1809 以上或 Windows 11、至少 4GB 記憶體與網路。 不用管理員權限，也不用先裝 Git，等一下的 Git 第一章才裝。原生安裝會自動更新。

03 · Claude Code 安裝與試用

安裝 Claude Code：下載與安裝

在 VS Code 的終端機（PowerShell）先執行第 1 步。一次貼一行，按 Enter 執行。Windows 接著到下一張設定 PATH。

curl -fsSL https://claude.ai/install.cmd -o install.cmd && install.cmd && del install.cmd

curl -fsSL https://claude.ai/install.sh | bash

03 · Claude Code 安裝與試用

安裝 Claude Code：第 2、3 步

Windows 安裝完成後，在 PowerShell 依序執行。macOS 安裝後可直接到「確認安裝成功」。

2. 第 2 步：把 Claude 的資料夾記進 PATH。

   下次打開終端機也找得到。重複執行也只會加一次。

   $p = [Environment]::GetEnvironmentVariable('Path', 'User'); if ($p -notlike "*\.local\bin*") { [Environment]::SetEnvironmentVariable('Path', "$p;$HOME\.local\bin", 'User') }

3. 第 3 步：讓現在這個終端機也馬上找得到。

   $env:Path += ";$HOME\.local\bin"

第 2、3 步執行後沒有任何訊息是正常的；貼錯或重複貼也沒關係。

看到「The token '&&' is not a valid statement separator」：把 CMD 指令貼進 PowerShell 了。 看到「'irm' is not recognized」：把 PowerShell 指令貼進 CMD 了。

03 · Claude Code 安裝與試用

安裝指令說明：下載與執行

第 1 步：下載安裝程式，然後直接執行它。

irm … | iex 會直接執行網路上的程式碼。只用在信任的官方網址；來路不明的網站叫你貼這種指令，不要照做。

03 · Claude Code 安裝與試用

安裝指令說明：PATH 通訊錄

第 2、3 步：PATH 是電腦找程式的通訊錄

你打 claude，終端機就照 PATH 這本通訊錄，一個一個資料夾找 claude.exe。安裝程式把它放在 %USERPROFILE%\.local\bin，但有時沒把這個資料夾寫進通訊錄，所以我們自己寫。

03 · Claude Code 安裝與試用

確認安裝成功

claude --version

看版本，例如 2.1.x（Claude Code）。

claude doctor

做唯讀檢查，不會修改你的專案。

03 · Claude Code 安裝與試用

找不到 claude：排除安裝問題

還是找不到 claude？依序檢查

1. 確認是在 PowerShell，不是 CMD：提示字元開頭是 PS。
2. 確認檔案在：

   Test-Path "$HOME\.local\bin\claude.exe"

   False＝第 1 步沒跑完。重跑第 1 步，等它跑完。

3. 把 VS Code 所有視窗整個關掉重開；還不行就重開電腦。
4. 都不行就把錯誤畫面截圖給老師。

03 · Claude Code 安裝與試用

第一次登入：授權流程

claude

1. 選喜歡的外觀主題，用上下方向鍵選，Enter 確認。
2. 選登入方式：選 Claude 帳號（Claude account with subscription），不是 Console。
3. 瀏覽器會自動打開 Claude 的授權頁。還沒登入就先登入有訂閱的帳號。
4. 頁面列出 Claude Code 會用到的權限，例如存取 Claude Code 工作階段、代表你上傳檔案。拉到最下面，按「授權」。
5. 回到 VS Code 的終端機，看到登入成功，按 Enter 繼續。
6. 問是否信任這個資料夾（trust this folder）：自己的資料夾選 Yes。

瀏覽器沒有自動打開：按住 Ctrl 點終端機裡的網址。授權頁給你一串代碼的話，複製後貼回終端機，按 Enter。 登入一次就會記住，之後不用再登入。

看到「API Error: 400 We've updated our Consumer Terms and Privacy Policy」：條款更新了。 在剛剛按「授權」的那個瀏覽器打開 claude.ai（同一個帳號）， 在跳出的視窗按同意，再回終端機重新問一次。沒有跳出視窗：在 Claude Code 輸入 /logout， 再打 claude 重新登入。

03 · Claude Code 安裝與試用

開兩個終端機：一個聊天、一個下指令

Claude Code 開著的時候，那個終端機就只能跟 Claude 聊天。要打 PowerShell 指令，用另一個終端機。

1. 按終端機面板右上角的「+」，開第二個終端機。
2. 面板右邊的清單可以切換：一個跑 Claude，一個打指令。
3. 看到 PS C:\…> 開頭：這是 PowerShell。看到 Claude 的輸入框：這是 Claude Code。

要離開 Claude Code：輸入 /exit，或連按兩次 Ctrl+C。

03 · Claude Code 安裝與試用

設定 1：外觀與偏好

下面有斜線的指令，要輸入在 Claude Code 裡。不是 PowerShell。

/config

/model

/login

/usage

03 · Claude Code 安裝與試用

設定 2：底下的狀態列

狀態列（status line）像儀表板。在底下顯示模型、專案、Git 分支、對話記憶與用量額度。

在 Claude Code 裡貼上，讓它幫你設定：

/statusline 用繁體中文分兩行顯示。第一行：模型名稱 · 專案 資料夾名稱 ↘ Git 分支 · 已跑 本次對話時間（例如 12分）。第二行：記憶剩 對話記憶剩餘百分比 · 5小時額度剩 百分比（幾時幾分後重置） · 7天額度剩 百分比（幾天幾時幾分後重置）。沒有的資料就整段不顯示。

做出來會像這樣：

Opus 5.5 (1M context) · 專案 web-coding-teaching ↘ main · 已跑 0分
記憶剩 95% · 5小時額度剩 99%（4時38分後重置） · 7天額度剩 77%（4天22時58分後重置）

它會把腳本放在 %USERPROFILE%\.claude\，並更新 %USERPROFILE%\.claude\settings.json。不用自己寫。

設定檔是 JSON：不能加註解或最後多一個逗號。自訂狀態列可能藏起部分底部快捷鍵提示。

03 · Claude Code 安裝與試用

設定 3：權限模式與安全

Shift+Tab 切模式。先看底下的名稱，練習時切到 manual mode。

/permissions

在 Claude Code 裡查看允許、詢問與拒絕的規則。

看清楚授權提示再按一般的 Yes。先不要選「Yes, and don’t ask again」。 不懂就問它「這個指令會做什麼？」平常電腦不要用略過權限（bypassPermissions）。

Esc 中斷；空白輸入列連按兩次 Esc 可回到之前（rewind）。 這能復原 Claude 的檔案編輯，但不能復原指令搬動、刪除的檔案，也不能代替 Git。

03 · Claude Code 安裝與試用

常用指令小卡

這些斜線指令在 Claude Code 裡輸入：

/help

/clear

/resume

/init

下面這個則在 PowerShell 輸入：

claude -c

繼續這個資料夾上次的對話。要換行可按 Ctrl+J，或先打反斜線 \ 再按 Enter； 在 Claude Code 裡執行一次 /terminal-setup，VS Code 也能用 Shift+Enter 換行。

03 · Claude Code 安裝與試用

試用 1：先聊聊

先在 Claude Code 裡問兩個小問題：

你好！用很簡單的話告訴我，你可以幫我做哪些事？

我目前在哪個資料夾？裡面有什麼？

03 · Claude Code 安裝與試用

試用 2：做一個練習資料夾

先用假檔案練習，搬錯也不怕。在 PowerShell 那個終端機依序執行：

cd $HOME\Documents

mkdir 整理練習

cd 整理練習

claude

請在目前資料夾建立 20 個練習用的假檔案：作品照片 .jpg（檔名帶 2026 年 8 到 10 月的日期，例如 2026-09-12-霧眉.jpg）、文件 .pdf 和 .docx、安裝檔 .exe。每個檔案放一行文字就好。做完列出清單。

Claude 要建立檔案前會先問你。看清楚再按 Yes。

03 · Claude Code 安裝與試用

試用 3：整理練習資料夾

在同一個 Claude Code 裡接著說：

把這個資料夾裡的作品照片集中到『作品集照片』資料夾，依月份分類；其他檔案依類型分資料夾。不要刪除檔案。先給我看計畫，等我說好再動手，完成後告訴我搬了哪些。

先計畫、再確認、不刪除。熟練以後，再用同樣的說法整理真正的桌面。

03 · Claude Code 安裝與試用

自學：有沒有 Claude in Chrome 差在哪

額外項目，有時間再做。

這份講義的 GitHub 截圖，就是 Claude 用 Chrome 打開設定頁截下來的。

03 · Claude Code 安裝與試用

自學：安裝 Claude in Chrome

1. 用 Chrome 或 Edge 打開 Chrome 線上應用程式商店的 Claude 擴充功能，按 加到 Chrome。
2. 點瀏覽器右上角的拼圖圖示，把 Claude 釘選在工具列。
3. 點 Claude 圖示，用跟 Claude Code 同一個 claude.ai 帳號登入。
4. 回到 VS Code 的終端機，加上 --chrome 啟動。第一次會跳出說明，按 Enter。

   claude --chrome

5. 在 Claude Code 裡輸入：

   /chrome

   看到 Status: Enabled 和 Extension: Installed 就成功了。

需要 Pro、Max、Team 或 Enterprise 方案，Claude Code 要用 /login 登入。想每次都自動連上：/chrome → Enabled by default；但每次對話會多佔一點空間，不常用就不用開。

Claude 需要瀏覽器卻找不到擴充功能時，會跳出 Claude wants to use your browser，選 Install extension 也能照著裝。

03 · Claude Code 安裝與試用

自學：怎麼使用

用中文直接說要它在瀏覽器做什麼。

打開 http://localhost:5173，用手機寬度看首頁有沒有跑版，截圖給我看。

打開我 GitHub 上網站 repo 的 Settings → Pages，告訴我現在的設定。

打開我的網站，看 Console 有沒有錯誤，有的話幫我找原因。

會發生什麼

1. Claude 開一個新分頁，你看得到它在點什麼。
2. 第一次去某個網站會先問你允不允許，可以選「這次對話都允許」。
3. 遇到登入畫面或「我不是機器人」驗證，它會停下來，請你自己處理。

localhost 的數字以 npm run dev 顯示的為準。

03 · Claude Code 安裝與試用

自學：使用時要注意

03 · Claude Code 安裝與試用

本章重點：Claude Code

• 安裝後先確認版本，再登入授權。
• PowerShell 下指令，Claude Code 用來對話。
• 需求寫清楚目標、限制與完成條件。
• 看懂計畫與授權，再讓它動手。

claude

/help

claude -c

03 · Claude Code 安裝與試用

課後練習：Claude Code

1. 讀懂自己的便條：在「回家練習」啟動 Claude，請它摘要 note.txt；得到三點摘要且原檔未變。

   讀取 note.txt，用三點摘要我的目標。不要修改檔案。

2. 留下下次的入口：結束後用 claude -c 接回對話；能說出便條內容並接著討論下一步。

04 · 網站前端與後端

打開網站時發生什麼

像點餐：瀏覽器送出請求（request），伺服器把畫面或資料送回來。 互動圖示範有查資料的網站；照片牆不一定會用到資料庫。

04 · 網站前端與後端

前端與後端：想成一間餐廳

04 · 網站前端與後端

這個功能需要後端嗎？

想一想你的紋繡網站。先猜，再點功能看答案。

04 · 網站前端與後端

靜態網站與動態網站

你的網站現在：靜態網站就夠了。作品、服務、價目表，加一個 LINE 預約連結。

04 · 網站前端與後端

SEO 先打底：讓 Google 找得到你

搜尋引擎最佳化（SEO），先想成替店面掛好招牌。

1. 每頁寫清楚標題與描述：這是誰的店、提供什麼服務。
2. 作品照片加說明文字（alt），例如「台中霧眉：自然眉型前後對比」。
3. 文字自然放入地區關鍵字，例如「台中霧眉」。
4. 建立 Google 商家，填好地點、營業時間與聯絡方式。

靜態網站最容易做好 SEO 的基本功。之後可以請 Claude Code 幫忙檢查；搜尋排名仍需要時間。

04 · 網站前端與後端

以後需要後端時

04 · 網站前端與後端

本章重點：前端與後端

• 前端是外場：負責畫面與互動。
• 後端是廚房：處理資料、帳號與權限。
• 靜態網站也能互動，不一定需要後端。
• 先做好內容與 SEO，再按需求加服務。

先問資料要存在哪裡、誰能看，再決定要不要後端。

04 · 網站前端與後端

課後練習：前端與後端

1. 盤點網站功能：列出自己網站的三個功能，寫出資料是否要跨裝置保存；每項都有理由。
2. 選一個起步方案：挑一項需要保存資料的功能，寫出可先用哪個現成服務；留下一句選擇理由。

05 · Git 第一章：存檔

Git 是什麼

像遊戲存檔點（commit）：每完成一小步就存一次，之後可以回頭看。

05 · Git 第一章：存檔

安裝 Git 與 GitHub CLI

GitHub 命令列工具（GitHub CLI，簡稱 gh）幫我們登入、建保管箱。

winget install --id Git.Git -e --source winget

winget install --id GitHub.cli --source winget

brew install git gh

第一次用 winget 會問是否同意來源條款：輸入 Y 再按 Enter。跳出「是否允許此 App 變更你的裝置」：按「是」，要密碼就輸入電腦的管理員密碼。

裝完把 VS Code 整個關掉再打開。只開新的終端機不夠。

git --version

gh --version

05 · Git 第一章：存檔

告訴 Git 你是誰

每次存檔都會簽上名字。把下面的名字與信箱換成自己的。

git config --global user.name "你的名字"

git config --global user.email "你的 GitHub 信箱"

git config --global init.defaultBranch main

最後一行把新專案的正式分支預設叫 main。檢查設定：

git config --global --list

GitHub 的 Settings → Emails 有勾「Keep my email addresses private」的話，信箱要改填那頁顯示的 …@users.noreply.github.com，不然 push 會被擋下（GH007）。

05 · Git 第一章：存檔

讓電腦連上 GitHub

還沒有帳號，先到 GitHub 註冊。

gh auth login

用上下方向鍵選，Enter 確認：

1. 選 GitHub.com。
2. 連線協定選 HTTPS。
3. 問 Authenticate Git with your GitHub credentials? 選 Yes。
4. 選 Login with a web browser。

接著畫面會出現一組一次性代碼，下一頁教你怎麼用它授權。

05 · Git 第一章：存檔

在瀏覽器授權這台電腦

PowerShell 會顯示類似這樣的畫面（代碼每次都不一樣）：

! First copy your one-time code: ABCD-1234
Press Enter to open https://github.com/login/device in your browser...

1. 先記下那 8 碼代碼（例如 ABCD-1234），再按 Enter，瀏覽器會自動打開 GitHub。沒打開就自己到 github.com/login/device。
2. 還沒登入 GitHub 會先要你登入。登入後如果出現帳號選擇，確認是自己的帳號，按 Continue。
3. 在 Device Activation 頁面輸入代碼，按 Continue。
4. 出現 Authorize GitHub CLI 頁面，按綠色的 Authorize github。要密碼或兩步驟驗證碼就照著輸入。
5. 看到 Congratulations, you're all set! 就完成了，可以關掉這個分頁回到 PowerShell。

05 · Git 第一章：存檔

GitHub 授權完成：確認登入狀態

PowerShell 出現 ✓ Logged in as 你的帳號名稱 就代表成功。再確認一次：

gh auth status

代碼大約 15 分鐘後失效。輸入錯誤或過期就回 PowerShell 按 Ctrl+C，重新執行 gh auth login 拿新代碼。

05 · Git 第一章：存檔

五個名詞就夠了

你可能會看到 add，它是「挑哪些檔案要放進這次存檔」，交給 Claude 就好。

05 · Git 第一章：存檔

四個區域一張圖

檔案從你正在改的地方，一路送到 GitHub，中間經過四個區域。

這些搬運都是 Claude Code 幫你做的；你只要說「存檔」（add＋commit）、「上傳」（push）、「拿最新版」（pull）。

05 · Git 第一章：存檔

誰在打指令？

你說中文 → Claude Code 翻成 git 指令 → 跳出授權提示，你看懂再按 Yes。

gh 只用來登入、建 repo、抓網站；日常存檔、上傳是 Claude Code 在背後跑 git。

你不用背指令，但要看得懂它要做什麼。

05 · Git 第一章：存檔

四句話取代指令

存檔：commit，建立存檔點。

這個改好了，幫我存一個檔，存檔訊息用一句中文寫這次改了什麼。

上傳：push，送到雲端保管箱。

幫我把存檔上傳到 GitHub。

看狀況：status，查看還沒存檔的改動。

現在有哪些改動還沒存檔？用中文跟我說。

救回來：先看 log 存檔紀錄，再決定怎麼恢復。

網站壞了，幫我列出最近幾次存檔，回到最後一個正常的版本。先告訴我你要怎麼做，我說好再動。

05 · Git 第一章：存檔

看懂授權提示

先確認是這次請它做的事。push 會上傳，pull 會更新本機；有加上其他選項，也要一起看懂。

不確定就按 No，問它「這個指令會做什麼？會不會刪掉東西？」

05 · Git 第一章：存檔

兩個安全網

習慣：每做好一個功能就說「存檔並上傳」；要大改之前先存一次。

05 · Git 第一章：存檔

練習：建一個存檔

在 PowerShell 依序執行，先建一個練習資料夾：

cd $HOME\Documents

mkdir my-site

cd my-site

啟動 Claude Code，再貼上下面兩句話：

claude

幫我把這個資料夾變成 Git 專案，做一個簡單的自我介紹網頁 index.html，做好後幫我存第一個檔。

幫我看存檔紀錄，用中文列出來。

隱藏的 .git 資料夾就是存檔簿，不要刪。

05 · Git 第一章：存檔

練習：故意改壞，再救回來

在剛剛的練習資料夾，請 Claude Code 故意改壞：

把 index.html 的內容全部刪掉。

1. 授權時按 Yes。
2. 打開 index.html，確認網頁壞了。

網站壞了，幫我回到最後一個存檔的版本。先告訴我你要怎麼做。

看懂做法後，說好再讓它動手。重新打開網頁，確認恢復。

這就是學 Git 最重要的理由。

05 · Git 第一章：存檔

好的存檔訊息，讓以後的你看得懂

幫我看一下目前改了什麼，用一句中文寫 commit 訊息，然後幫我存檔（commit）。先讓我確認訊息。

05 · Git 第一章：存檔

本章重點：Git 存檔

• commit 是本機存檔點，push 才會送到 GitHub。
• 先看改動，再寫清楚存檔訊息。
• 救回前先確認版本與影響範圍。

列出還沒存檔的改動，先不要修改。

先列出改動與中文 commit 訊息，等我確認再存檔。

列出最近五次存檔，說明各次改了什麼。

05 · Git 第一章：存檔

課後練習：Git 存檔

1. 讀懂歷史：在自己的專案整理最近三次存檔；每筆都有日期、中文用途與影響檔案。

   列出最近三次 commit 的日期、中文用途與影響檔案。不要修改或恢復版本。

2. 檢查備份位置：核對本機與 GitHub 的狀態；能說出是否有未存檔或未上傳的內容。

   檢查目前分支、未存檔改動與遠端同步狀態，只讀檢查並說明結果。

06 · Git 第二章：分支簡介

分支是什麼：另開一本草稿

分支（branch）像草稿本。main 是正式版；另開分支試新設計，滿意再合回來（merge）。

一個人做網站，大多時候直接在 main 上存檔就好。想大改版、不確定要不要時才開分支。

06 · Git 第二章：分支簡介

分支一張圖

每個圓點是一次存檔（commit）。main 是客人看到的正式版，草稿分支在旁邊另外試。

不管哪一種，main 上的網站都不受影響。開分支、合回來、丟掉，都交給 Claude Code 說一句話就好（下一頁）。

06 · Git 第二章：分支簡介

本章重點：Git 分支

• 分支是另一份草稿，適合試新想法。
• 切換前先確認目前分支與未存檔改動。
• 預覽滿意後，再合回 main。

先確認改動已存檔，再開一個新分支試改版。

告訴我目前在哪個分支，有哪些未存檔改動。

先說明合回 main 與上傳的影響，等我確認再執行。

這份草稿不採用，先說明回到 main 的做法，等我確認再動手。

06 · Git 第二章：分支簡介

課後練習：Git 分支

1. 做一份文字草稿：在練習專案開 about-copy 分支，新增自我介紹草稿並存檔；分支上看得到檔案。

   先確認沒有未存檔改動，再開 about-copy 分支，新增 about-draft.txt 寫三行自我介紹；讓我確認後 commit，先不合併或上傳。

2. 比較兩本草稿：比較 about-copy 與 main；能列出差異，並回到 main，草稿分支仍保留。

   比較 about-copy 與 main 的差異。確認改動已存檔後切回 main，保留草稿分支。

07 · Git 第三章：實戰

整個流程一張圖

複製到本機叫 clone；把存檔送上雲端叫 push。今天把你的網站接起來。

07 · Git 第三章：實戰

方法 A（推薦）：Lovable 連上 GitHub

1. 打開 Lovable 專案設定（Project settings）→ Git → GitHub。
2. 按 Add account，安裝 Lovable 的 GitHub App。
3. 按 Connect。Lovable 會建立新的私人儲存庫（repository，簡稱 repo）。
4. 開始雙向同步，預設同步 main 分支。推上這個分支，Lovable 也會收到。

推薦用於持續修改網站，讓本機與 Lovable 保持雙向同步。

不要刪掉 GitHub 上的 repo，會斷開同步。一次只會同步一個分支，預設 main。

07 · Git 第三章：實戰

方法 B：下載程式碼再上傳

1. Lovable 專案設定 → Git → Download codebase。你的付費方案可以直接下載。
2. 解壓縮。打開 PowerShell，走到解壓縮後的資料夾。

cd "C:\Users\你的名字\Downloads\你的網站資料夾"

輸入 claude 啟動 Claude Code，再貼上：

幫我把這個資料夾變成 Git 專案、存第一個檔（訊息：從 Lovable 匯入），再用 gh 建一個叫 my-site 的私人 repo 並上傳。

這樣建立的 repo 不會跟 Lovable 同步，適合備份或一次性使用；持續修改請用方法 A。 後面有「自動同步」的步驟只適用方法 A。

想看它實際跑了哪些指令，附錄有。

07 · Git 第三章：實戰

把網站抓到電腦（clone）

PowerShell 依序執行；帳號與 repo 換成自己的。

cd $HOME\Documents

gh repo clone 你的帳號/你的repo

cd 你的repo

code . -r

用目前的 VS Code 視窗打開這個網站資料夾（點代表「這裡」）。側邊欄就會列出網站所有檔案。

repo 名稱在 Lovable 的 GitHub 設定頁，或 github.com 你的帳號底下可以找到。

07 · Git 第三章：實戰

在本機預覽 Lovable 網站

Lovable 專案使用 React + Vite。要先安裝 Node.js，才有執行網站的工具 npm。

winget install OpenJS.NodeJS.LTS

裝完把 VS Code 整個關掉重開。Windows 預設不讓 PowerShell 執行 npm，先開放一次（只影響你自己的帳號）：

Set-ExecutionPolicy -Scope CurrentUser RemoteSigned

問要不要變更時輸入 Y。再回到剛剛的網站資料夾，依序執行：

npm install

npm run dev

打開它顯示的 http://localhost:… 網址。這是自己電腦上的預覽。Ctrl+C 停止。

也可以直接請 Claude Code 幫你跑起來。

07 · Git 第三章：實戰

每天的工作循環

1. 先說「先幫我拿最新版」：你可能也在 Lovable 改過。
2. 請 Claude Code 修改並預覽。
3. 確認後說「存檔並上傳」。方法 A 會自動同步回 Lovable。

先幫我從 GitHub 拿最新版。然後把首頁的價目表更新成：霧眉 8800、飄眉 9800。改完讓我預覽，確認後幫我 commit 並 push。

07 · Git 第三章：實戰

自學：用 GitHub Pages 免費上線

不用自己的網域，也能有一個公開網址：你的帳號.github.io/repo名稱。在專案資料夾打開 Claude Code，貼上：

用 gh 幫我把這個 repo 發布到 GitHub Pages，先不用自己的網域，網址用 帳號.github.io/repo名稱。設定成每次 push 到 main 就自動 build 並更新網站，子頁面直接打開也不會 404。改完讓我看，確認後 commit 並 push，部署完成後告訴我網址。

免費方案只能用公開 repo 開 Pages。Lovable 建的 repo 是私人的，要先改成公開（原始碼大家都看得到，不能放密碼或金鑰），或升級 GitHub Pro。

第一次部署約 1～3 分鐘。之後每次 push，網站會自動更新。之後想換成自己的網域，看最後一章。

07 · Git 第三章：實戰

自學：SSH key 是什麼

額外項目，有時間再做。gh 登入後已經能 clone 和 push，不做也沒關係。

SSH 是安全連線的方式。SSH 金鑰（key）像鑰匙與門鎖：

懶人做法：下面指令會引導你自動產生、上傳金鑰。我們接著練手動步驟，知道鑰匙放哪裡。

gh auth login -p ssh

07 · Git 第三章：實戰

自學：產生 SSH key

Windows 10 1809 以上與 Windows 11 已內建 OpenSSH 用戶端。把信箱換成自己的：

ssh-keygen -t ed25519 -C "你的 GitHub 信箱"

1. 存放位置用預設，按 Enter。若已有同名金鑰，不要覆蓋，先請老師協助。
2. 密碼可留空，按 Enter 兩次；想多一層保護也可設密碼。
3. 檔案會放在 C:\Users\你的名字\.ssh\。

ls $HOME\.ssh

07 · Git 第三章：實戰

自學：把公鑰交給 GitHub

第一次要多給 gh 一個權限，允許它上傳公鑰。

gh auth refresh -h github.com -s admin:public_key

gh ssh-key add $HOME\.ssh\id_ed25519.pub --title "我的筆電"

也可以改用網頁：先複製公鑰。

Get-Content $HOME\.ssh\id_ed25519.pub | Set-Clipboard

GitHub Settings → SSH and GPG keys → New SSH key → 貼上。兩種做法擇一即可。

07 · Git 第三章：實戰

自學：測試 SSH 連線

ssh -T git@github.com

第一次看到 Are you sure you want to continue connecting (yes/no)?，輸入：

yes

Hi 你的帳號! You've successfully authenticated, but GitHub does not provide shell access.

看到這行就成功。它說不提供 shell 是正常的。讓 gh 之後使用 SSH：

gh config set git_protocol ssh

已經抓下來的網站，在那個專案資料夾改用 SSH 連線地址：

git remote set-url origin git@github.com:你的帳號/你的repo.git

git remote -v

07 · Git 第三章：實戰

本章重點：Git 實戰

• clone 把 GitHub 專案抓到電腦。
• 本機預覽確認後，再 commit 與 push。
• 每天先拿最新版，減少不同地方改到舊檔。

先檢查未存檔改動，再從 GitHub 拿最新版。

幫我啟動本機預覽，告訴我網址。

列出改動與驗證結果，等我確認再存檔並上傳。

07 · Git 第三章：實戰

課後練習：Git 實戰

1. 修好一個連結：挑自己網站的一個外部連結，在新分支檢查並修正；本機點擊能到正確頁面。

   先檢查改動並開新分支，找出一個需修正的外部連結。提出修改，等我確認後改並啟動預覽。

2. 核對雲端版本：確認預覽後存檔、合併並上傳；GitHub 看得到這次修改的 commit。

   先確認目前分支與改動，列出合併、存檔及上傳計畫，等我確認再執行；完成後給我 GitHub commit 連結。

08 · 用自己的網域上線

先看整體：四個步驟

網域商的 DNS 負責把「你的網域」指到 GitHub；GitHub Pages 負責放網站，每次 push 都會自動更新。

1. 驗證網域。
2. 請 Claude Code 開好 Pages。
3. 到網域商設定 DNS。
4. 請 Claude Code 檢查並開 HTTPS。

08 · 用自己的網域上線

開始前：確認 GitHub Pages 的條件

先決條件：Lovable 建立的 repo 是私人的；GitHub 免費方案只能用「公開」repo 開 Pages。二選一：把 repo 改成公開（Settings → General 最下面 Danger Zone → Change visibility；原始碼大家都看得到，不能放密碼或金鑰），或升級 GitHub Pro。

Lovable 付費方案也能直接在 Lovable 綁網域；這章講 GitHub Pages 的做法，同一個網域只選一邊指過去。

08 · 用自己的網域上線

還沒有網域：在 Namecheap 買一個

網域要在「網域商」買，一年付一次。平台很多，原理都一樣，只是畫面不同；這份講義用 Namecheap 示範，因為便宜、介面好操作。

1. 到 Namecheap 註冊帳號。
2. 在首頁搜尋框輸入想要的網域，例如 你的名字.com，有空的才買得到。
3. 加入購物車結帳。看清楚「第二年續約價」，有些網域第一年很便宜、之後變貴。
4. 買完到右上角帳號 → Domain List，看得到這個網域就成功了。

不清楚購買流程，可以看這支教學影片：Namecheap 註冊網域教學。

08 · 用自己的網域上線

步驟 1：先驗證網域（找到按鈕）

這裡是「個人設定」，不是 repo 設定。驗證可以防止別人把你的網域拿去用在他的 GitHub Pages。

先點右上角你的頭像 → Settings。

1

2

1. 左邊選單往下捲到 Code, planning, and automation，點 Pages。
2. 在 Verified domains 按綠色的 Add a domain。

08 · 用自己的網域上線

步驟 1：先驗證網域（加 TXT 紀錄）

3. 輸入 你的網域.com（不要加 www、不要加 https://）→ Add domain。
4. 畫面會出現一筆 TXT 紀錄，先不要關。名稱是 _github-pages-challenge-你的帳號，值照畫面複製。
5. 到網域商的 DNS 設定新增這筆 TXT，等生效後回來按 Verify。

有的網域商會自動接上網域，有的要打完整的 _github-pages-challenge-你的帳號.你的網域.com。

這筆 TXT 驗證完也不要刪，刪了會失去驗證。生效最久可能要 24 小時；離開頁面後，可在網域旁的 ⋯ 選 Continue verifying。

08 · 用自己的網域上線

Namecheap：加 TXT 驗證紀錄

網域在 Namecheap 買的，照這樣加。GitHub 那頁先不要關。

1. 登入 Namecheap → 右上角帳號 → Domain List，在你的網域右邊按 Manage。
2. 上方分頁切到 Advanced DNS。
3. 在 Host Records 按 ADD NEW RECORD，類型選 TXT Record。
4. Host 填 _github-pages-challenge-你的帳號，Value 貼上 GitHub 畫面上的值，TTL 用 Automatic。
5. 按這一列右邊的綠色勾勾儲存。

Host 只填前半段，不要加 .你的網域.com，Namecheap 會自動接上。

在 Domain 分頁的 NAMESERVERS 要是 Namecheap BasicDNS，Advanced DNS 的紀錄才會生效。買網域時沒改過就是這個。

08 · 用自己的網域上線

步驟 2：請 Claude Code 開好 GitHub Pages

不用自己進 GitHub 設定頁。在網站的專案資料夾打開 Claude Code，貼上這段（把網域換成你的）：

用 gh 幫我把這個 repo 發布到 GitHub Pages，網域是 www.你的網域.com。設定成每次 push 到 main 就自動 build 並更新網站，子頁面直接打開也不會 404。改完讓我看，確認後 commit 並 push，告訴我部署有沒有成功。

Claude Code 會幫你做這三件事

• 把 Pages 打開，改成「push 就自動發布」。
• 在專案裡加一個自動發布的設定檔，你不用看懂。
• 把你的網域填進 Pages 設定。

之後只要照每天的工作循環 push 到 main，網站幾分鐘後就會自動更新。

這時還沒設 DNS，GitHub 顯示網域檢查失敗是正常的，做完下一步就會好。

08 · 用自己的網域上線

步驟 3：到網域商設定 DNS

登入買網域的網站，找 DNS 設定（可能叫 DNS 管理、DNS Records、Zone）。

CNAME 只寫 你的帳號.github.io，不要加 repo 名稱。

先刪掉網域商預設的紀錄（例如停車頁的 A 紀錄）。名稱欄有的網域商寫 @，有的留空代表網域本身。不要新增 * 開頭的萬用紀錄。

08 · 用自己的網域上線

看懂 DNS 紀錄的每一欄

DNS 就像網路上的通訊錄：把「網域」對到「伺服器的位置」。每一筆紀錄都有這幾欄：

所以 @ 和 www 要各設一次，兩種網址才都打得開。

08 · 用自己的網域上線

Namecheap：加 A 和 CNAME 紀錄

一樣在你的網域 → Manage → Advanced DNS → Host Records。

1. 先刪掉 Namecheap 預設的停車頁紀錄：CNAME Record www → parkingpage.namecheap.com，和 URL Redirect Record @。按每一列右邊的垃圾桶。
2. 按 ADD NEW RECORD → A Record，Host 填 @，Value 填 185.199.108.153。再加三筆，Value 分別是 185.199.109.153、185.199.110.153、185.199.111.153。
3. 再加一筆 CNAME Record，Host 填 www，Value 填 你的帳號.github.io。
4. 每一列都按右邊的綠色勾勾，或最後按 SAVE ALL CHANGES。

TTL 都用 Automatic。剛才的 TXT 驗證紀錄留著不要刪。

08 · 用自己的網域上線

步驟 4：請 Claude Code 檢查並開 HTTPS

DNS 設好後，回到 Claude Code 貼上：

用 gh 檢查我的 GitHub Pages：網域 DNS 有沒有生效、最近一次部署有沒有成功。都正常的話幫我開啟 Enforce HTTPS；還不行就告訴我卡在哪裡、要等多久。

看到網址前面有鎖頭，就完成了。

DNS 生效最久可能要 24 小時，HTTPS 憑證也要等它生效後才能開。還沒好就隔幾小時再貼一次。

08 · 用自己的網域上線

卡關怎麼辦

如果之後不用 GitHub Pages 了，記得到網域商刪掉這些 A / CNAME 紀錄，免得網域被別人接走。

08 · 用自己的網域上線

本章重點：自己的網域

• 先驗證網域，再請 Claude Code 用 gh 開好 Pages。
• DNS 把網域指向 GitHub，HTTPS 保護連線。
• 之後每次 push 到 main，網站就自動更新。
• 設定後要等生效，卡住就請 Claude Code 檢查。

檢查最近一次 Pages 部署，告訴我是否成功。

核對 Pages 網域、DNS 與 HTTPS，列出需要我確認的地方。

08 · 用自己的網域上線

課後練習：自己的網域

1. 驗收公開網址：已有網域就用手機行動網路開首頁與子頁；記下網址、HTTPS 與結果；尚未生效就隔天重測。
2. 留下維護紀錄：把自己的設定整理成一頁筆記；沒有網域也可用 GitHub Pages 網址，缺項標「未設定」。

   請詢問我的網站網址，整理部署來源、網域商、DNS、HTTPS 與檢查日期；只記錄我提供或你查到的資料，不改設定。

09 · Claude 進階使用

六種東西一張表

09 · Claude 進階使用

CLAUDE.md：三個放的位置

09 · Claude 進階使用

CLAUDE.md：怎麼用、什麼時候用

讓 Claude 讀整個專案，自動寫一份專案 CLAUDE.md。

/init

打開 CLAUDE.md 和記憶檔來看或修改。

/memory

幫我在全域 CLAUDE.md 加一條規則：一律用繁體中文回答，回答要精簡。

# 全域規則
- 一律用繁體中文回答。
- 精簡，不要開場白。

使用時機：同一句話你講了第二次，就該寫進 CLAUDE.md。

09 · Claude 進階使用

MEMORY.md：Claude 自己的筆記本

Claude 會把學到的事記成一則一則的小檔，MEMORY.md 是目錄。放在 ~/.claude/projects/專案名稱/memory/，每個專案各一本，不會跟著 Git 上傳。

本講義專案真的有這則筆記：

- [Push after edits](push-after-edits.md) — commit + push to main after every change so GitHub Pages stays in sync

記住：這個專案每次改完都要 commit 並 push。

你記得哪些關於這個專案的事？

忘掉剛剛那條關於 push 的記憶。

CLAUDE.md 是你寫給它的規則，可以分享給別人；MEMORY.md 是它自己記的筆記，只在你這台電腦。重要、要分享的規則寫 CLAUDE.md。

09 · Claude 進階使用

Skill：一份做事 SOP

Skill 是一個資料夾，裡面一定有 SKILL.md。開頭寫名稱（name）和一句說明（description），下面是做法；也可以附上工具檔。

平常 Claude 只看那一句說明；遇到相關工作才打開全文，所以放很多 skill 也不會把全文都塞進對話記憶。

使用時機：會重複做、有固定規則或步驟的工作，例如做投影片、寫週報、整理發票。

09 · Claude 進階使用

Skill 範例：teaching-slides 的檔案

這份講義的做法：把投影片規則和量測工具放在一起。

.claude/skills/teaching-slides/
├── SKILL.md               ← 做投影片的重點
└── measure-overflow.html  ← 量哪幾張超出畫面的工具

SKILL.md 開頭：

---
name: teaching-slides
description: 製作給零基礎學員的網頁投影片講義時使用。涵蓋導覽操作、一頁一畫面的尺寸規則、投影片版型、文案與教學原則……
---
# 教學投影片製作重點
## 1. 導覽操作
- 章節左右排，同一章的投影片上下排……
## 2. 頁面尺寸：一張就是一個畫面
……

09 · Claude 進階使用

Skill 範例：整理成手冊，下次直接用

怎麼做出來的：

把我們今天做投影片的重點整理成一個 skill，放在這個專案的 .claude/skills，之後做投影片時可以參考。

之後怎麼用：

/teaching-slides 幫我做一份教長輩用 LINE 的投影片。

這個 skill 在本講義 repo 的 .claude/skills/teaching-slides/，可以打開來看全文。

09 · Claude 進階使用

Hook：不靠記憶的自動開關

CLAUDE.md 和 Skill 是「請 Claude 記得做」；Hook 是「時間到一定做」，由 Claude Code 程式執行，Claude 忘了也沒關係。

設定寫在 settings.json：全域 ~/.claude/settings.json、專案 .claude/settings.json。在 Claude Code 打 /hooks 可以查看。

09 · Claude 進階使用

Hook 範例：需要你時發出提示音

幫我在全域設定加一個 hook：你需要我回覆或授權時，用 PowerShell 發出提示音。

使用時機：「每次都一定要發生」的事，例如提示音、改完自動排版、擋掉刪除指令。

09 · Claude 進階使用

Hook 範例：設定內容與權限

它會寫進 ~/.claude/settings.json，大概長這樣：

{
  "hooks": {
    "Notification": [
      {
        "hooks": [
          { "type": "command", "command": "powershell -c \"[console]::beep(800, 300)\"" }
        ]
      }
    ]
  }
}

Hook 會用你的權限自動跑指令。只加看得懂的；別人給的 hook 先問 Claude「這會做什麼？」。

09 · Claude 進階使用

Workflow：把固定流程串起來

Workflow 不是某個設定檔，是「做某類工作的固定步驟」。把它寫進 CLAUDE.md 或 Skill，Claude 就會照著走；其中一定要發生的步驟，再用 Hook 自動化。

先規劃再動手：Shift+Tab 切到 plan mode，Claude 只看、只提計畫，你同意後才開始改。

本講義的實際流程：

1. 說要改什麼。
2. Claude 規劃、列出要改哪些投影片。
3. 動手改。
4. 跑測試、截圖檢查畫面。
5. 存檔並上傳（這一步寫在記憶裡，每次都會做）。

幫我在這個專案的 CLAUDE.md 寫下工作流程：每次改網站都先列計畫讓我確認，改完自己預覽檢查，再存檔並上傳。

09 · Claude 進階使用

Multi-agent：派分身助理

主 Claude 可以派出子代理（subagent）。子代理有自己的一份對話記憶，去讀一大堆檔案或資料，回來只交一份摘要，主對話就不會被塞滿。

總用量不一定比較少（每個分身都要花 token），省的是主對話的記憶，讓主對話撐比較久、比較不會變笨。

09 · Claude 進階使用

Multi-agent：怎麼用、範例

用 subagent 去讀 logs 資料夾裡所有紀錄，只回報最常出現的三個錯誤和原因。

開三個 subagent 分頭查：Vercel、Netlify、GitHub Pages 各自的免費方案限制，最後整理成一張比較表。

/agents

建立或管理自訂子代理，例如專門檢查錯字的「校對員」。設定會存在 .claude/agents/。

本講義的實例：這份講義是「Claude 規劃與檢查、另一個 AI（Codex）負責動手改」做出來的。這也是一種 multi-agent：讓貴的腦袋做決定，便宜的手做苦工，額度就用得久。

09 · Claude 進階使用

本章重點：Claude 進階使用

• CLAUDE.md 放全域或專案規則；MEMORY.md 記習慣。
• Skill 放重複步驟；Workflow 串起流程。
• Hook 處理一定要自動發生的事。
• Multi-agent 把大工作拆給分身。

這個需求適合用 CLAUDE.md、記憶、Skill、Hook 還是 Workflow？先問清楚需求，再建議。

這條規則該放全域還是專案？說明理由，先不要改檔。

09 · Claude 進階使用

課後練習：幫你的 Claude 升級

1. 加一條全域規則（用繁體中文），重開對話後確認回答仍是繁中。

   幫我在全域 CLAUDE.md 加一條規則：一律用繁體中文回答。

2. 請它記住一件專案的事，再問它記得什麼。

   記住：這個專案預覽用 npm run dev。你記得哪些關於這個專案的事？

3. 請它設定提示音 hook，然後故意讓它問你問題，聽聽看。

   幫我設定需要我回覆或授權時的 PowerShell 提示音 hook。設好後，請問我下一步想做什麼，讓我測試提示音。

10 · 省 token：讓額度用更久

核心觀念：對話記憶（context）

對話記憶像一張白板。你說的話、它讀過的檔案、跑過的指令結果，全都寫在白板上；每次回答前，它都要把整張白板看一遍。

狀態列的「記憶剩 xx%」就是白板還剩多少空間；「5 小時額度剩 xx%」是你的用量。對應第 03 章設定的狀態列。

10 · 省 token：讓額度用更久

習慣 1：換工作就擦白板

/clear

開新對話，白板清空。做完一件事、要換不相干的事時用。

/compact

把目前對話濃縮成摘要再繼續。同一件事還沒做完、但記憶快滿時用。

/compact 只保留網站價目表修改的重點

可以告訴它要保留什麼。

/context

看白板現在被什麼佔掉。

清掉之前，先把重要的東西寫進檔案（下一張）。

10 · 省 token：讓額度用更久

習慣 2：把進度寫進檔案，當交接單

對話記憶換個對話（session）就不見了，換另一個 AI 也帶不走。把任務進度寫進一個實體檔案，例如 progress.md，下次開新對話、甚至換一個 AI，請它先讀這個檔案就能接著做。

像值班交接單。下一班的人不用聽上一班從頭講一遍，看交接單就知道做到哪。

10 · 省 token：讓額度用更久

習慣 2：交接單範例與開工、收工

# 網站改版進度
## 已完成
- 首頁價目表更新（霧眉 8800、飄眉 9800），已上傳
- 作品集換成 2026 新照片
## 下一步
- 預約表單加上 LINE 按鈕
## 注意
- 預覽用 npm run dev；改完要存檔並上傳

收工時：

把今天做到哪、下一步要做什麼、要注意的事，寫進 progress.md。

開工時：

先讀 progress.md，接著做下一步。

CLAUDE.md 放「永遠的規則」，記憶放「你的習慣」，progress.md 放「這個任務做到哪」。任務做完就可以刪掉或封存。

10 · 省 token：讓額度用更久

習慣 3：CLAUDE.md 要精簡

CLAUDE.md 每次對話都會整份讀進來，寫一頁就每句話都多付一頁的錢。

幫我檢查 CLAUDE.md，刪掉重複和用不到的內容，只有特定工作才用到的部分移到 skill。

10 · 省 token：讓額度用更久

習慣 4：說清楚，少繞路

可以用 @ 指定檔案，例如 @src/pages/Index.tsx，它就不用到處找。

10 · 省 token：讓額度用更久

習慣 5：用對模型、派對分身

/model

切換模型。簡單的事（改錯字、改文字）用輕量模型；需要想很多的設計和除錯才用最強的模型。最強的模型同樣的工作會用掉比較多額度。

派 subagent 讀大量資料，主對話只收摘要（見第 09 章 Multi-agent）。

/mcp

看裝了哪些外掛工具（MCP）。每個開著的工具說明都會佔白板，用不到的就關掉。

10 · 省 token：讓額度用更久

模型與操作：按需求調整

簡單任務選合適模型，用不到的工具先關掉。

/model

/mcp

Shift+Tab 切換模式，先規劃再動手；方向不對就按 Esc 停下來。

10 · 省 token：讓額度用更久

本章重點：省 token

• 對話像白板，內容越多越佔額度。
• 換工作清空；同一件事太長就濃縮。
• 進度寫進檔案，開工先讀交接單。
• 規則要精簡，需求要有完成條件。

/clear

/compact

/context

把進度、驗證結果與下一步寫進 progress.md。

10 · 省 token：讓額度用更久

課後練習：省 token

1. 做一張交接單：選一件小任務寫進 progress.md，再開新對話讀取；能正確說出已完成與下一步。

   先讀 progress.md（若有），詢問我目前進度，再整理已完成、驗證結果與下一步，寫入 progress.md。

2. 刪掉重複規則：檢查自己的 CLAUDE.md，確認後合併重複句；保留原意，並能說出刪了什麼。

   檢查 CLAUDE.md 的重複與過時內容，先列精簡建議和理由，等我確認再修改。

11 · 附錄：小抄、自學與練習場

Claude Code 小抄：啟動與對話

前兩個在 PowerShell；/help、/clear 在 Claude Code 裡。

claude

claude -c

/help

/clear

11 · 附錄：小抄、自學與練習場

Claude Code 小抄：設定與工具

以下斜線指令都在 Claude Code 裡輸入。

/config

/statusline

/init

/chrome

Esc 中斷；Shift+Tab 切權限模式，練習用 manual mode。

11 · 附錄：小抄、自學與練習場

Git 說法小抄：日常存檔與同步

這個改好了，幫我存一個檔，存檔訊息用一句中文寫這次改了什麼。

幫我把存檔上傳到 GitHub。

先幫我從 GitHub 拿最新版。

現在有哪些改動還沒存檔？用中文跟我說。

11 · 附錄：小抄、自學與練習場

Git 說法小抄：救援與分支

網站壞了，幫我列出最近幾次存檔，回到最後一個正常的版本。先告訴我你要怎麼做，我說好再動。

我想試一個新的首頁設計，請幫我開一個分支再改，改完讓我預覽，我說好再合回 main。

我很滿意，幫我合回 main 並上傳。

11 · 附錄：小抄、自學與練習場

GitHub / SSH 小抄

gh auth login

gh auth status

ssh-keygen -t ed25519 -C "你的 GitHub 信箱"

gh ssh-key add $HOME\.ssh\id_ed25519.pub --title "我的筆電"

ssh -T git@github.com

gh repo clone 帳號/repo

11 · 附錄：小抄、自學與練習場

進階附錄：查看與存檔指令

這些是 Claude Code 幫你做事時實際執行的指令。不用背，好奇或想更懂時再來玩。

git status

git add .

git commit -m "更新作品照片"

git log --oneline

11 · 附錄：小抄、自學與練習場

進階附錄：同步與分支指令

git diff

git pull

git push

git switch -c new-design

11 · 附錄：小抄、自學與練習場

三個區域：拍照存檔

第一章的四個區域裡，前三個都在你的電腦上。改好檔案 → 放上拍照台 → 拍成一張存檔照片。先按修改，再按 add 與 commit。

11 · 附錄：小抄、自學與練習場

四個每天用的指令

新專案先初始化一次：

git init

git status

git add .

git commit -m "新增作品集頁面"

git log --oneline

想看改了哪幾行，也可以用：

git diff

11 · 附錄：小抄、自學與練習場

只要認得這四個

git branch

git switch -c new-design

git switch main

git merge new-design

11 · 附錄：小抄、自學與練習場

下次見：收藏這些資源

課後試著更新一張作品照片，預覽後存檔。下次帶著你的網站和問題來。

• Pro Git 繁體中文版
• Learn Git Branching
• VS Code 文件
• Claude Code 文件
• GitHub CLI 手冊
• Lovable GitHub 文件
• GitHub Pages 自訂網域文件

重看 VS Code 畫面重看安裝重練 Git 玩 Git 練習場再看網站流程用自己的網域上線Claude 進階使用省 token