← 返回大綱
第二章 / 3

AI CLI
Claude Code 入門

在終端機裡直接跟 AI 說話,讓它幫你寫程式、查 Bug、解釋程式碼。

概念

什麼是 Claude Code?

Anthropic 開發的 AI 開發助手,直接在你的終端機裡運作。

  • 讀取整個專案的程式碼,理解架構
  • 直接幫你修改、新增、刪除檔案
  • 執行指令、跑測試、幫你 debug
  • 解釋你看不懂的程式碼
  • 記住你的規則,自動遵守(第三章重點)
跟網頁版 Claude 的差別

網頁版不知道你電腦上有什麼檔案。CLI 版本可以直接讀取、操作你的專案,完全整合進開發環境。

安裝

步驟一:安裝 Node.js

Claude Code 需要 Node.js(版本 18 以上)。先確認有沒有安裝:

node --version
# 看到 v22.0.0 這樣的版本號 → 已安裝,可跳過

如果沒有安裝:

# 安裝 Homebrew(如果還沒有)
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

# 安裝 Node.js
brew install node

或是到 nodejs.org 下載 LTS 版本。

nodejs.org 下載 LTS 版本,雙擊 .msi 安裝,一路 Next。

安裝完重新開啟 PowerShell,再輸入 node --version 確認。

安裝

步驟二:安裝 Claude Code

Node.js 裝好後,用 npm 安裝 Claude Code:

npm install -g @anthropic-ai/claude-code

安裝完後確認是否成功:

claude --version

看到版本號就代表安裝成功。

Windows 可能遇到的問題

如果說「無法執行指令碼」,以系統管理員開啟 PowerShell 後執行:

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser
設定

步驟三:登入

第一次使用需要登入 Anthropic 帳號:

claude
  1. 直接輸入 claude 按 Enter
  2. 瀏覽器會自動開啟登入頁面
  3. 登入(或建立)你的 Anthropic 帳號
  4. 授權後回到終端機,完成!
帳號說明

需要 Anthropic 帳號(免費建立)。付費方案才能無限使用,免費方案有用量限制。

使用

啟動 Claude Code

在任何專案資料夾裡,輸入 claude

cd my-project
claude

進入後用中文直接溝通:

> 幫我解釋這個資料夾裡有什麼

我看到這個專案包含:
- index.html:主頁面
- style.css:樣式設定
目前是一個靜態網站的起始結構。
快速提問(不進入互動模式)

claude "什麼是 Git?"

範例

實際對話範例

> 幫我在 index.html 加一個藍色標題「Hello World」

好的,我來修改 index.html...
已新增:<h1 style="color:#2563eb">Hello World</h1>

> 字體改大一點,3rem

已更新:<h1 style="color:#2563eb;font-size:3rem">Hello World</h1>

> 幫我看 style.css 第 15 行

第 15 行的 color: #fff 在深色背景上會看不到,
建議改為 color: #1e293b。要我幫你改嗎?
指令

Claude Code 常用指令

指令說明
claude在目前資料夾啟動互動模式
claude "問題"直接問問題,不進入互動模式
/help查看所有可用指令
/init自動分析專案,建立 CLAUDE.md
/clear清除對話紀錄,重新開始
/compact壓縮對話記錄,節省記憶容量
/context查看目前 context 使用量
/rewind撤銷上一次 AI 操作
/btw補充資訊,不觸發動作
/simplify要求 AI 簡化、優化剛才的程式碼
/exit離開 Claude Code
Ctrl + C中斷目前操作
指令詳解

/init/clear

/init — 自動建立工作手冊

Claude 會掃描你的專案,自動生成一份 CLAUDE.md

> /init

分析中... 我看到這是一個 HTML/CSS 靜態網站專案。
已建立 CLAUDE.md,包含:
- 專案說明
- 建議的程式碼規範
- 建議的 Commit 格式

/clear — 清除對話記憶

對話太長、跑偏方向時使用。清除記憶但不影響任何檔案。

> /clear
對話紀錄已清除。請告訴我你想做什麼?
使用時機

換到不同任務前用 /clear,讓 AI 專注在新問題,避免舊對話造成干擾。

指令詳解

/compact/context

/context — 查看記憶使用量

AI 的「工作記憶」有上限(context window),可以用此指令確認剩多少。

> /context
Context 使用量:42,300 / 200,000 tokens(21%)
目前對話有 18 輪,已讀取 5 個檔案。

/compact — 壓縮對話省空間

把過去的對話自動摘要,釋放記憶空間,繼續長時間工作。

> /compact
已將對話壓縮為摘要。
節省了 18,000 tokens,可以繼續工作。
何時需要

/context 顯示使用超過 70%,就可以執行 /compact 整理。

指令詳解

/rewind/btw

/rewind — 撤銷上一次操作

AI 做錯了?用 /rewind 回到上一個狀態,像 Ctrl+Z 一樣。

> 幫我刪掉 style.css 裡的所有 color 設定

(AI 刪除了所有顏色...)

> /rewind
已撤銷。style.css 已恢復到修改前的狀態。

/btw — 補充資訊(by the way)

補充背景知識給 AI,不觸發任何動作,只是讓它「知道」。

> /btw 這個專案要相容 Safari 舊版本,不能用太新的 CSS
已記錄。之後的修改會考慮 Safari 相容性。

> 幫我加一個 CSS 動畫
(AI 自動避開 Safari 不支援的語法)
指令詳解

/simplify

請 AI 回頭審視剛才寫的程式碼,找出可以簡化、優化的地方並修正。

> 幫我寫一個函式,計算購物車總價

function calculateTotal(items) {
  let total = 0;
  for (let i = 0; i < items.length; i++) {
    if (items[i].price) {
      if (items[i].quantity) {
        total = total + items[i].price * items[i].quantity;
      }
    }
  }
  return total;
}

> /simplify

簡化後:
function calculateTotal(items) {
  return items.reduce((sum, item) =>
    sum + (item.price ?? 0) * (item.quantity ?? 0), 0);
}
最佳實踐

先讓 AI 把功能做出來,再用 /simplify 一鍵清理。不要一開始就要求「最簡潔的寫法」,容易出錯。

技巧

跟 AI 對話的技巧

越具體越好:

不夠清楚更好的說法
幫我改一下 把 index.html 裡的標題顏色改成藍色 #2563eb
這段有問題 這段程式出現 TypeError,幫我找原因
新增一個功能 在 index.html 加一個按鈕,點擊後用 alert() 顯示 Hello
不確定 AI 要做什麼?

說:「先告訴我你打算怎麼做,等我確認後再執行」

實作練習

動手試試看

  1. 進入 my-projectcd my-project
  2. 啟動 Claude Code:claude
  3. 輸入:「幫我在 index.html 建立一個網頁,包含標題、介紹文字和一個按鈕」
  4. Claude 修改完後,用瀏覽器開啟 index.html 確認結果
  5. 再輸入:「幫我把背景顏色改成淡藍色」
  6. 再次查看效果

第二章完成!

你已經學會用 AI 幫你寫程式。
接下來,讓 AI 記住你的規則、自動化工作流程。