主題
Claude Code 入門
Claude Code 是 Anthropic 推出的 AI 程式碼助手，它能理解你的 codebase，執行例行任務，解釋複雜程式碼，並透過自然語言指令處理 git 工作流程。
什麼是 Claude Code
Claude Code 是一個 Agent，不只是聊天機器人。它能：
- 讀寫檔案
- 執行 shell commands
- 搜尋 codebase
- 呼叫 MCP tools
- 自主決定下一步
接收指令
↓
分析任務
↓
呼叫工具（讀檔、寫檔、執行指令）
↓
檢查結果
↓
決定下一步
↓
重複直到完成基本操作
啟動 Claude Code
bash
# 在專案目錄中啟動
cd your-project
claude
# 或直接指定專案路徑
claude /path/to/project常用指令
| 指令 | 功能 |
|---|---|
/help | 顯示幫助資訊 |
/clear | 清除對話紀錄 |
/exit | 退出 Claude Code |
/mcp | 查看 MCP servers 狀態 |
/plan | 進入規劃模式 |
/review | 程式碼審查 |
/refactor | 重構程式碼 |
/cleanup | 清理程式碼 |
/simplify | 簡化複雜度 |
/debug | 除錯模式 |
CLAUDE.md 檔案
CLAUDE.md 是專案的「憲法」，讓 Claude 了解你的專案規範和偏好。
建立 CLAUDE.md
在專案根目錄建立 CLAUDE.md：
markdown
# CLAUDE.md
## 專案資訊
這是一個旅遊規劃網站，使用 Next.js 16 開發。
## 技術棧
- Next.js 16 + App Router
- shadcn/ui + Tailwind CSS
- TypeScript (strict mode)
- Supabase (PostgreSQL)
## 開發規範
- 使用 TypeScript strict mode
- 元件放在 `components/` 目錄
- 頁面放在 `app/` 目錄
- 不要使用 `any` 類型
- 優先使用 Server Components
## 常見錯誤提醒
- 不要直接 import from @radix-ui，使用 shadcn/ui
- 有用到 hooks 或事件的元件要加 "use client"
- API routes 使用 Route Handlers
## 測試流程
每次完成一個 feature 要執行：
- `npm run build` - 確認編譯通過
- `npm run lint` - 確認沒有 lint 錯誤
- `npm run test` - 執行測試根據結果調整
當 AI 犯錯時，更新 CLAUDE.md：
AI 犯錯 → 更新 CLAUDE.md → AI 學會Commands（自訂指令）
Commands 是可重複使用的 workflow，放在 .claude/commands/ 目錄。
建立 Command
bash
mkdir -p .claude/commands範例：.claude/commands/new-feature.md
markdown
# 新功能開發
請幫我開發新功能：$ARGUMENTS
## 步驟
1. 先分析需求，確認功能範圍
2. 設計資料結構（如果需要）
3. 建立 UI 元件
4. 實作業務邏輯
5. 測試功能
## 規範
- 遵循 CLAUDE.md 的開發規範
- 使用 shadcn/ui 元件
- 確保 TypeScript 類型正確使用方式：
bash
/project:new-feature 使用者登入功能常用 Commands 範例
.claude/commands/review.md
markdown
請檢查最近修改的檔案：
1. 程式碼品質 - 是否遵循最佳實踐
2. 潛在 bug - 邊界條件、錯誤處理
3. 效能問題 - 不必要的重渲染、N+1 查詢
4. 安全漏洞 - XSS、SQL injection 等
請列出問題並提供修正建議。.claude/commands/test.md
markdown
請為以下功能撰寫測試：$ARGUMENTS
測試類型：
- Unit tests（使用 Vitest）
- 測試邊界條件
- 測試錯誤處理
確保測試：
- 可獨立執行
- 不依賴外部服務
- 有清楚的 test case 描述Plan Mode（規劃模式）
對於大型任務，先規劃再執行。
使用方式
bash
/plan 實作使用者認證系統Claude 會：
- 分析需求
- 列出步驟
- 等你確認
- 再開始執行
適合使用 Plan Mode 的情況
- 多檔案修改
- 架構調整
- 新功能開發
- 不確定最佳做法時
Subagents（專業 Agent）
Claude Code 內建多個專業 Agent：
| Agent | 功能 | 使用時機 |
|---|---|---|
/review | 程式碼審查 | 每完成一個 feature |
/refactor | 重構程式碼 | 結構需要調整 |
/cleanup | 清理死碼 | 移除不用的程式碼 |
/simplify | 簡化複雜度 | 程式碼太複雜時 |
/debug | 除錯 | 遇到 bug 時 |
Subagents 的原則
遵循 KISS、SOLID、CLEAN 原則：
- Keep It Simple, Stupid
- 絕對不要 Over-engineering
- 目標：長期可維護性
實用技巧
1. 給予足夠的 Context
❌ 不好的 prompt
幫我修這個 bug
✅ 好的 prompt
我在執行 npm run dev 時遇到這個錯誤：
[貼完整錯誤訊息]
相關程式碼在 src/app/page.tsx
我剛剛改了使用者登入的邏輯
預期行為是登入後跳轉到首頁2. 分步驟執行
❌ 不好的做法
一次做完所有功能
✅ 好的做法
Feature 1 → Review → Commit
Feature 2 → Review → Commit
↓
Refactor / Cleanup
↓
Feature 3 → Review → Commit3. 多開平行任務
bash
# 終端機 1：開發 Feature A
cd project
claude
> 開發登入功能
# 終端機 2：開發 Feature B
cd project
claude
> 開發首頁 UI你是調度員，不是工人。讓 AI 持續在工作。