第六章

Claude Code 是什麼，跟其他 LLM 差在哪

一般 LLM 是只能出嘴巴的顧問，Claude Code 是有手有腳能實際動工的工人。這一章讓你搞懂它到底多了什麼。

Claude Code vs 一般 LLM（ChatGPT / Gemini 網頁版）

你在 ChatGPT 或 Gemini 的網頁上問問題，它會給你很好的答案、甚至幫你寫一段程式碼。但有個致命的問題：它只能用嘴巴。

它可以告訴你「你應該在 index.html 的第 37 行加一段程式碼」，但它不能幫你開檔案、不能幫你存檔、不能幫你跑指令。你還是得自己動手。

白話比喻：

一般 LLM（ChatGPT / Gemini 網頁版）= 只能用嘴巴的顧問
他坐在旁邊給你建議，但不能碰你的電腦。你問他「這個 bug 怎麼修？」他會說「你去那個檔案改第 37 行」，但他自己不能改。

Claude Code = 有手有腳的工人
他可以直接打開你的檔案、改程式碼、存檔、跑測試、甚至幫你把東西上傳到網路上。你只需要下指令，他就去做。
一般 LLM（只能出嘴巴）
你：「幫我把首頁標題改成紅色」

AI：「請在 styles.css 裡找到 .title，
加上 color: red;」

然後你要自己：
1. 打開 styles.css
2. 找到 .title
3. 加上那行程式碼
4. 存檔
5. 重新整理瀏覽器確認

你還是得自己動手
Claude Code（直接動手做）
你：「幫我把首頁標題改成紅色」

Claude Code：
1. 自己打開 styles.css
2. 找到 .title
3. 加上 color: red;
4. 存檔
5. 告訴你「改好了」

你只負責下指令，它負責執行

簡單來說，一般 LLM 是你的「軍師」，Claude Code 是你的「施工隊」。軍師能出好主意，但施工隊能直接把房子蓋起來。

Claude Code 的核心差異：控制面向

Claude Code 最厲害的地方，不只是「能動手」，更是「你可以精準控制它能做什麼」。就像你雇了一個工人，你可以規定他能進哪些房間、能碰哪些東西。

面向 說明 白話
電腦權限 可以讀寫檔案、執行 Terminal 指令、操作瀏覽器、管理 Git 版控 有手有腳的工人，能搬磚、釘釘子、刷油漆
控制程度 透過 CLAUDE.md 設定邊界、Hook 做自動防護、Permission 系統管理權限 你可以設定這個工人「能做什麼、不能做什麼」，就像給員工一本規範手冊
重點
Claude Code 不是「失控的 AI 自己亂做事」。它更像是一個聽話的員工——你給規範，它就照規範做；你說不能碰的東西，它就不碰。

三種使用 Claude Code 的方式

Claude Code 不是只有一種打開方式。根據你的習慣和需求，有三條路可以走：

1. Terminal 原生方式

在終端機（Terminal）裡直接打 claude 指令，就可以開始對話。

$ claude
> 幫我看一下這個專案的結構

Claude Code 會直接讀取你的檔案，然後回答你
白話：像直接跟工人面對面說話。沒有花俏的介面，但最直接、最快。

2. VS Code 編輯器

如果你用 VS Code 寫程式（或看程式碼），有兩種方式使用 Claude Code：

  • 在 VS Code 的 Terminal 裡用——跟原生方式一模一樣，只是 Terminal 嵌在編輯器裡面
  • 用 Claude Code 插件（Extension）——會出現一個側邊欄的聊天視窗，像在 VS Code 裡面開了一個 LINE 聊天室
小知識
用插件的好處是，你可以一邊看程式碼、一邊跟 Claude Code 聊天，它改了什麼你馬上在編輯器裡就看得到。

VS Code 的殺手級功能：Diff

Diff 就是「比較兩個版本的差異」。你可以把它想成 Word 的「追蹤修訂」功能——紅色是刪除的部分、綠色是新增的部分。

VS Code 會在左邊欄顯示哪些檔案被改了，點進去就能看到每一行的差異。這是用 Claude Code 最大的好處之一：它改了什麼，你在 VS Code 裡一目瞭然。不用擔心 Claude 偷偷改了什麼你不知道的東西。

白話：Diff 就像老師用紅筆批改作業——哪裡被劃掉、哪裡是新寫的，全部清清楚楚。你不用逐行去比對「到底改了什麼」，VS Code 幫你標好了。

3. Claude Desktop（桌面應用程式）

Anthropic 官方出的桌面 App。這個版本除了基本對話功能外，還有幾個獨家能力：

  • Computer Use（電腦操控）——可以操控你的電腦 GUI（圖形介面），像是幫你開 Chrome、點按鈕、填表單。就像你的手被 AI 附身了
  • Pitch 功能——用對話的方式快速產出簡報或文件草稿
  • Schedule 功能（排程任務）——可以設定排程，讓 Claude 在特定時間自動執行任務。例如「每天早上 9 點幫我整理 Email 摘要」
使用方式 介面 適合誰 獨有功能
Terminal 原生 純文字命令列 習慣 Terminal 的人 最快、最輕量
VS Code Terminal 或側邊欄聊天 有在寫程式/看程式碼的人 邊看程式碼邊對話
Claude Desktop 圖形化桌面 App 不想碰 Terminal 的人 Computer Use、Pitch、Schedule

核心功能介紹

Claude Code 不只是「能幫你改檔案的 ChatGPT」。它有一整套工具和機制，讓你能像管理一個團隊一樣管理 AI。以下是你一定會碰到的核心功能：

CLAUDE.md——員工的 SOP 手冊

這是一個放在專案根目錄的純文字檔案。Claude Code 每次啟動時都會先讀它，就像員工每天上班前先看一次規範手冊。

你可以在裡面寫：

  • 這個專案用什麼語言、什麼框架
  • 程式碼風格（例如：用 2 個空格縮排，不要用 Tab）
  • 哪些檔案不能動
  • 特殊的工作流程（例如：改完程式碼要先跑測試）
# CLAUDE.md 範例

## 專案規範
- 語言：TypeScript
- 框架：Next.js
- 程式碼風格：用 ESLint 標準
- 每次修改前先跑 npm run test

## 禁止事項
- 不要動 database/ 資料夾
- 不要在程式碼裡寫入任何密碼或 API Key

CLAUDE.md 的兩個層級

CLAUDE.md 其實不只一個。Claude Code 的設定檔分成兩層，就像公司的規範有分「全公司通用」和「各部門專用」：

層級 位置 作用 比喻
全域（Global） ~/.claude/CLAUDE.md 所有專案都會讀到 公司的「員工守則」，不管你調到哪個部門都要遵守
專案（Project） 專案根目錄/CLAUDE.md 只有這個專案會讀到 部門的「SOP」，只有這個部門的人要看

全域設定放你的通用偏好（語言、風格、常用工具），專案設定放該專案特有的規則（技術棧、命名慣例、部署目標）。Claude 每次開工會先讀全域，再讀專案，專案的設定會覆蓋全域。

MCP（Model Context Protocol）——Claude 的「手臂」

MCP 是一種通訊協議，讓 Claude Code 可以去操作外部服務。你可以想像成：Claude Code 本身是一個人，MCP 就是它伸出去的手臂，每一隻手臂可以握住一個工具。

常見的 MCP 工具包括：

MCP 工具 能做什麼 白話
Supabase MCP 操作資料庫、讀寫資料表 幫你開抽屜、找資料
GitHub MCP 管理原始碼、發 PR、查 Issue 幫你管理程式碼倉庫
Cloudflare MCP 部署網站、管理 DNS 幫你把網站放到網路上
Brave Search MCP 搜尋網路資訊 幫你上網查資料
Google Calendar MCP 讀寫行事曆 幫你安排約會和會議
白話：沒有 MCP 的 Claude Code，只能在你的電腦裡面做事。有了 MCP，它就像長了好幾隻手，可以同時伸到 GitHub、Supabase、Cloudflare 等外部服務去操作。

Subagent——帶一個團隊做事

Claude Code 不只是一個人。它可以「派出」子代理人（Subagent），讓多個任務同時進行。就像工頭把工作分給不同工人平行處理：

  • Subagent A：去查這個 API 的文件
  • Subagent B：同時幫我改首頁的 CSS
  • Subagent C：同時去跑測試

三個任務同時進行，比一個一個排隊做快很多。

Memory——跨 Session 記憶系統

一般的 LLM 對話，關掉視窗就全忘了。Claude Code 有記憶系統，可以把重要的事情記住，下次開新的 Session 還是知道。

Memory 的運作方式
Claude Code 會把重要資訊寫進 CLAUDE.md 或專門的記憶檔案。下次你再開對話，它會先讀這些檔案，就像員工翻看自己上次的工作筆記。

Hook——自動化觸發器

Hook 是一種「自動觸發的規則」。你可以設定：

  • 每次 Claude Code 要修改檔案之前，先做 XXX
  • 每次 Git commit 之前，先跑測試
  • 每次部署之前，先做安全檢查
白話：Hook 就像你在工地門口貼的告示牌：「進門前先戴安全帽」。不管誰進來，都會先做那件事。

Plugin / Skill——可安裝的擴充包

你可以幫 Claude Code 安裝各種「技能包」，讓它會做更多事情。例如：

  • Skill：一套預先寫好的指令和規範。例如「程式碼審查 Skill」會讓 Claude Code 用特定的標準幫你檢查程式碼品質
  • Plugin：外掛模組，可以擴充 Claude Code 的能力。例如 Discord Plugin 讓它可以讀寫 Discord 訊息

就像手機裝 App 一樣——手機出廠只有基本功能，裝了 App 才能做更多事。

MD 檔的重要性

Markdown 是什麼？

Markdown（簡稱 MD）是一種用純文字寫格式的方法。你可以把它想成「簡化版的 Word」。

在 Word 裡面，你要粗體就用滑鼠選取文字然後點 B。在 Markdown 裡面，你只要打：

**這段文字會變粗體**

# 這是大標題
## 這是次標題

- 這是項目符號
- 第二點

`這是程式碼`

就這麼簡單。不需要任何特殊軟體，用記事本就能寫。

為什麼 Claude Code 生態都用 MD？

有三個關鍵原因：

  1. 最省 Token——純文字檔案不含格式代碼，一個 MD 檔比同內容的 Word 檔小好幾倍。檔案越小，AI 讀得越快、花的 Token 越少
  2. 最好讀——不管是人還是 AI，讀純文字都最直接。不像 Word 或 PDF，裡面一堆格式代碼會干擾 AI 的理解
  3. Git 友好——Git 版控系統是用「逐行比較」來追蹤變更。純文字的 MD 檔可以精準看出哪一行被改了；Word 檔是二進位格式，Git 根本無法比較

常見的 MD 檔案

檔名 功能 白話
CLAUDE.md Claude Code 的設定檔，定義它的行為規範 員工的 SOP 手冊，每天上班先讀一次
README.md 專案的說明書。打開 GitHub 倉庫時，首頁顯示的就是這個檔案 產品外包裝上的使用說明
CHANGELOG.md 紀錄每次更新改了什麼。方便追溯歷史 產品的「更新日誌」，像手機系統更新說明
常見誤解
很多人以為用 Word 寫文件比較「正式」。但在程式開發的世界裡，MD 才是標準格式。用 Word 寫 CLAUDE.md？那就像穿西裝去工地——不是不行，但真的沒必要，而且會礙手礙腳。

實戰組合：Chrome DevTools + Claude Code

Chrome DevTools 可以解析 DOM（網頁結構）和 JS（JavaScript）程式邏輯，直接把這些資料提供給 Claude。這比你手動複製開發者模式的訊息給 AI 快很多。

什麼是 JS？
JS（JavaScript）是讓網頁「會動」的程式語言。按鈕點了會跑出東西、表單可以送出、動畫會播放——這些都是 JS 在背後做的事。

Claude 搭配 DevTools MCP 可以直接讀取：

  • Console 錯誤訊息——不用你複製貼上，Claude 自己去看
  • Network 請求——API 有沒有回應、回了什麼資料
  • DOM 結構——元素的 class、id、屬性，全部一覽無遺
手動方式（慢又容易漏）
1. 你打開 F12 開發者工具
2. 看到紅色錯誤訊息
3. 截圖或複製錯誤訊息
4. 貼給 Claude
5. Claude 問你更多問題
6. 你再去 F12 查更多資料
7. 來回好幾次才找到問題

你變成 AI 和瀏覽器之間的「傳話人」
DevTools MCP（快又完整）
1. Claude 直接讀 Console 錯誤
2. Claude 直接看 Network 請求
3. Claude 直接分析 DOM 結構
4. 一次找到問題根源
5. 直接修改程式碼

Claude 自己去看、自己去查、自己修

補充一點：有時候 Headless Browser（無頭瀏覽器，就是沒有畫面的自動化瀏覽器，像 Playwright）會遇到問題，通常是因為取得的資訊不夠完整，或是 DOM 沒有全部渲染完。在做 E2E 測試（End-to-End，從頭到尾的完整流程測試）的問題排除時，DevTools + Claude 是最快的組合。

補充術語
  • TDD（Test-Driven Development，測試驅動開發）：先寫測試，再寫功能。確保每個功能都有測試保護。
  • E2E（End-to-End Testing，端對端測試）：模擬真實使用者操作整個流程（打開網頁 → 點按鈕 → 填表單 → 送出），確認一切正常。
  • 這些概念在你的專案變大的時候會越來越重要。現在先知道名字就好。