Claude Code 是甚麼？
Claude Code 是 Anthropic 的終端機式 AI 編程代理。你安裝佢做一個命令列工具，輸入一個描述你想建立咩嘅提示，它就會接手：規劃專案結構、建立檔案框架、安裝合適嘅套件，並直接喺你部機上寫出可用嘅程式碼。
呢度冇瀏覽器介面、冇拖放畫布、亦冇託管預覽連結。輸出係一個喺你機上嘅 codebase，可以部署到任何你選擇嘅基礎設施。
Claude Code 適合邊類人？
- 想減少處理 boilerplate 嘅開發者。 如果你識睇同改 TypeScript，Claude Code 可以移除由有個點子到有一個具備工作結構、已安裝依賴並且檔案組織妥當嘅專案之間大部分摩擦。
- 會寫 code 嘅 freelancer 同 agency 老闆。 Claude Code 可以將一個複雜原型由幾日壓縮到幾個鐘，只要你有技術能力去評估同調整佢產出嘅內容。
- 已經使用 Claude Pro、Max 或 Team 計劃嘅團隊。 Claude Code 已經包含喺呢啲計劃入面，毋須額外收費。如果你本身已經俾緊其中一個 tier，就唔需要再開第二個訂閱。
- 正評估一個唔熟悉技術棧嘅獨立開發者。 你唔使讀幾個鐘文件，而係可以睇住 Claude Code 喺一個新框架入面建立一個可用範例，再讀返輸出嚟了解各部分點樣連接。
Claude Code 優點同缺點
- 可由一個提示建立完整全端應用
- 每一個終端機命令執行前都會先要求批准
- 產出真正可編輯、可投入生產嘅程式碼檔案
- 毋須額外要求都會揀適合嘅 library
- 喺你現有嘅開發環境內運作
- 系統化處理複雜多檔案專案
- 已包含喺 Claude Pro、Max、Team 計劃
- 需要終端機經驗，唔適合非程式員
- 完整 build 要十五分鐘或以上
- 建構期間冇視覺預覽
評分拆解
Claude Code 唔可以直接同 no-code 或 low-code GUI 應用程式建構工具比較。以下分數反映佢作為一個面向開發者嘅終端機式 AI 編程代理嘅表現，即係佢所屬嘅類別。
如果用同拖放式工具一樣嘅標準去評估，對於正考慮要唔要加入工作流程嘅人嚟講，唔會得到有用嘅結果。
| 功能 | 分數（滿分 10） | 點解會有呢個分數 |
|---|---|---|
| 易用性 | 7.0 | 對開發者嚟講相當直接；安裝同介面都好乾淨 |
| 功能與特性 | 9.5 | 由認證到付款都可以喺無需指引下涵蓋整個全端流程 |
| 設計與自訂 | 8.0 | 會產生真正嘅 CSS 同 component 檔案；冇視覺編輯器 |
| 性價比 | 10.0 | 已包含喺付費計劃入面，完全無需額外收費 |
| 效能與可靠性 | 9.5 | 針對複雜 brief 產出一致而高質量嘅結果 |
| 整體 | 9.4 | 對開發者嚟講，Claude Code 喺同類工具入面幾乎係最好嘅工具之一。輸出質素、library 選擇同價值都屬頂級。呢個分數亦計及非技術用戶會即刻碰壁呢個真正限制，雖然呢點本身係設計使然。 |
Claude Code 功能
- 終端機式代理，喺你本機環境運作
- 可編寫同整理多檔案專案結構
- 安裝同管理套件同依賴
- 每個命令執行前都會要求批准
- 原生支援 Next.js、Supabase 同 Stripe
- 內建 TypeScript 同 Tailwind CSS 支援
- 可用 slash 命令喺 session 中途切換 model
我對 Claude Code 嘅真實評測：測試之後我發現咩
好多人係搵 AI app builder 時發現 Claude Code，或者係睇咗呢個頁面之後先嚟，之前可能有睇過 Lovable、Bolt、Rork AI，或者 Retool。喺任何事情之前，都要先講清楚個分別：嗰啲係 AI 應用程式建構工具，會俾你圖形介面、託管預覽同點擊式體驗，而唔需要你打開終端機。
Claude Code 係一個 AI 編程代理。輸出係你機上嘅 codebase。如果你想要 no-code 或 low-code GUI 工具，Claude Code 唔係嗰種產品，而你亦會喺見到結果之前已經感到挫敗。
講完呢點，以下就係我用一個複雜全端 brief 測試時實際發生嘅事。
Claude Code 係編程代理，不係應用程式建構工具
術語好重要，因為佢會改變成功嘅定義。對 GUI 應用程式建構工具嚟講，成功係喺瀏覽器見到實時預覽。對 Claude Code 而言，成功係你機上有一個可用嘅 codebase，然後你自己去執行、測試同部署。
Claude Code 屬於同 Aider、Devin 同 Cursor 嘅 agent mode 一樣嘅類別。佢同呢啲工具嘅分別係，Claude Code 係一個由構建底層 model 同一間公司做嘅獨立終端機應用程式。你同 AI 之間冇第三方整合層。
如果你係評估 AI 編程工具嘅開發者，呢個定位好重要：你可以直接使用 Anthropic 嘅 models，每一個命令都有批准控制，輸出會落到你嘅檔案系統，而唔係某個專有平台。
設定只需少過五分鐘，但你需要付費計劃
要令 Claude Code 運行有四種方法。每種都適合唔同起步情況。
| 方法 | 要求 | 如何開始 |
|---|---|---|
| 原生安裝程式 | 無需任何條件（唔需要 Node） | curl -fsSL https://claude.ai/install.sh | bash |
| npm 套件 | Node 18+ | npm install -g @anthropic-ai/claude-code |
| VS Code extension | 已安裝 VS Code | 喺 VS Code marketplace 安裝 |
| JetBrains plugin | IntelliJ、WebStorm 等 | 喺 JetBrains marketplace 安裝 |
安裝之後，執行 claude –version 去確認成功。如果 command 唔存在，先關閉再重新打開終端機，或者先執行 source ~/.bashrc 。
驗證登入 會開啟瀏覽器進行 OAuth 登入。用你喺 Claude.ai 上面嘅同一個帳戶。
喺你嘅專案資料夾內開始 session 會好似咁：
mkdir my-project
cd my-project
git init
claude
呢個會令你進入喺該資料夾內嘅互動式 session。
計劃要求 係不可妥協嘅部分。免費 Claude.ai tier 唔包 Claude Code。你需要付費嘅 Claude Pro、Max 或 Team 計劃，或者一個有效嘅 Anthropic API Console 帳戶。呢點冇得繞過。任何想測試 Claude Code 嘅人都應該喺繼續之前先檢查自己個計劃狀態。
由提示到建構計劃少過十秒
我用同我喺多個 AI app builder 測試入面用過嘅同一個提示測試 Claude Code：一個供 freelancer 同小型 agency 使用嘅完整 Client Portal 同 Invoicing App。brief 包括：
- 專業 landing page，包含 hero section、features section、三層價格同一個 call-to-action
- 用戶角色（Owners、Members、Clients）同唔同權限及 onboarding 流程
- 一個多租戶 dashboard，顯示 KPI：收入、活躍客戶、未清發票、已記錄工時
- 客戶同專案管理
- 同專案綁定嘅時間追蹤
- 具備 PDF preview 同 export，仲可以將發票發送俾客戶嘅發票系統
- Stripe 整合，用於訂閱同一次性發票付款
- 一個 client portal，讓客戶登入後查看發票、付款記錄同專案狀態
- 以專業藍色作為主色、卡片式版面、細緻動畫
- Supabase backend，配備 email/password 同 Google OAuth、多租戶、檔案儲存同交易式電郵
Claude Code 喺十秒內回應：「我會有系統地建立呢個全端應用。等我先檢查目前目錄狀態，然後規劃同實作整個應用程式。」
呢個係佢開始執行命令之前唯一嘅回應。冇問框架。冇問 schema。冇確認要用 server-side 定 client-side Supabase。佢讀完 brief 就開始執行。
session 標頭確認咗設定：Claude Pro 上嘅 Sonnet 4.6。頂部橫幅顯示，Fable 5——Anthropic 用於複雜同長時間工作嘅最新 model——已可用，並可隨時用 /model slash 命令切換。相同橫幅亦顯示：「Included in your plan limits until Jun 22, then switch to usage credits to continue.」Claude Code 嘅使用會計入你每月 plan 配額。
更新（2026 年 6 月）： Anthropic 嘅新 Claude Fable 5 model 曾因美國一項基於國家安全疑慮嘅出口管制指令而暫時喺全球停用。Anthropic 其後表示呢次停用係暫時，Fable 5 亦已開始喺部分 Claude 用戶嘅 model selector 中重新出現，存取權正逐步恢復。
每個命令都要你批准先可以執行
Claude Code 喺執行你部機上嘅任何嘢之前，都會暫停並顯示一個批准提示，當中有精確嘅命令、佢會做咩嘅白話描述，仲有三個選項：
- Yes （批准一次；下一次又會再問）
- Yes, and don’t ask again for [this command pattern] （之後自動批准相似命令）
- No （阻止命令；Claude Code 會嘗試其他方法）
我嘅 session 入面出現過以下次序嘅提示：
- 目錄檢查：ls -la /home/nova/invoicepro-claude-code/ && node –version && npm –version
- Next.js 初始化：npx create-next-app@latest . –typescript –tailwind –eslint –app –src-dir=false –import-alias=”@/*” –yes 2>&1 | tail -20
- 核心依賴安裝：npm install @supabase/supabase-js @supabase/ssr stripe… （18 個套件）
- library 版本檢查：分開執行 node 命令去驗證 lucide-react 同 framer-motion
- 檔案寫入：「Do you want to overwrite globals.css?」並可用 Shift+Tab 允許今後整個 session 嘅所有檔案編輯而唔使逐個檔案提示
bash 命令批准同檔案覆寫批准之間嘅分別係刻意設計。執行一個 command 同覆寫一個你可能已經編輯過嘅檔案，風險層級唔同，所以工具會用唔同方式處理。
session 入面有用嘅快捷鍵：
| 命令 | 作用 |
|---|---|
| /model | 切換目前使用嘅 model（例如轉去 Fable 5） |
| /btw [question] | 喺唔打斷目前建構嘅情況下問一條旁支問題 |
| /status | 檢查目前 session 狀態同 plan 使用量 |
| Shift+Tab | 允許整個 session 嘅所有檔案編輯，唔使逐個檔案提示 |
| Ctrl+B | 喺背景執行目前命令 |
| Ctrl+O | 展開被截斷嘅輸出，睇完整檔案或 log |
建構時間線：依賴、檔案，同持續上升嘅 token 計數
設定批准清空之後，建構就進入咗幾個明確階段。以下係終端機喺每個階段顯示嘅內容：
| 時間點 | 狀態訊息 | 當時發生緊咩 |
|---|---|---|
| 0:00 | “Booping… (8s · 421 tokens thinking)” | 處理提示同規劃 |
| 0:30 | 目錄檢查完成 | 確認乾淨 repo；開始 Next.js 初始化 |
| 1:30 | “Running… (13s · timeout 2m)” | Next.js 14 專案框架建立中 |
| 2:30 | “Beaming… (32s · 1.3k tokens)” | 等待 npm install 完成 |
| 4:00 | library 版本檢查 | 驗證 lucide-react 同 framer-motion 版本 |
| 5:33 | “Enchanting… (5m 33s · 11.4k tokens)” | 已寫入 supabase/server.ts 同 middleware.ts |
| 15:31 | “Enchanting… (15m 31s · 62.8k tokens)” | time-tracking 頁面達到 432 行；發票部分開始 |
依賴安裝用咗一個命令就處理咗 18 個套件，分類如下，按功能分組：
| 類別 | 套件 |
|---|---|
| 資料庫同認證 | @supabase/supabase-js, @supabase/ssr |
| 付款 | stripe, @stripe/stripe-js, @stripe/react-stripe-js |
| PDF 生成 | @react-pdf/renderer |
| 圖表 | recharts |
| 動畫 | framer-motion |
| 圖示 | lucide-react |
| 日期處理 | date-fns |
| 表單同驗證 | react-hook-form, zod, @hookform/resolvers |
| 樣式工具 | clsx, tailwind-merge |
| 通知 | sonner |
| 主題 | next-themes |
| 電郵 | resend |
所有套件都確認安裝完成之後，Claude Code 宣佈：「所有依賴已安裝。依家我會有系統地建立整個應用程式。由設定開始，然後逐個主要部分處理。」之後佢讀咗五個檔案、列出一個目錄，然後開始寫入。
去到 15 分鐘標記時，session 仲喺度跑緊。單係 time-tracking 頁面已經有 432 行 TypeScript。終端機顯示下一個任務：「而家建立 invoices 部分，包括 invoice form 同 PDF preview。」對一個咁複雜嘅專案，完整 build 會超過三十分鐘，甚至可能更耐。
library 選擇反映生產環境經驗，而唔係教學預設
任何 AI 編程工具最重要嘅訊號，唔係佢會唔會產生 code，而係產生出嚟嘅 code 係咪真係懂得嗰個 stack。睇返生成出嚟嘅檔案之後，有兩樣嘢即刻好明顯。
Supabase 嘅選擇： Claude Code 安裝咗 @supabase/ssr 而唔係標準嘅 client-side Supabase SDK。對於 Next.js 14 App Router 專案嚟講，呢個係正確決定。client-side SDK 喺 server components 入面運作唔好，仲會引入一啲唔容易即刻察覺嘅 session 管理 bug。Claude Code 喺冇人要求之下就做對咗。
表單驗證 stack： 佢用咗 zod 配合 @hookform/resolvers。呢個係 production Next.js 工作入面嘅標準做法，而唔係教學範例會揀嘅組合。
已寫入嘅檔案喺 code 層面證實咗呢點：
lib/supabase/server.ts （27 行）：
import { createServerClient } from “@supabase/ssr”;
import { cookies } from “next/headers”;
export async function createClient() {
const cookieStore = await cookies();
return createServerClient(
process.env.NEXT_PUBLIC_SUPABASE_URL!,
process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
{ … }
);
}
middleware.ts （57 行）使用 createServerClient 去做 session refresh 同 protected route 邏輯，並配合 NextResponse 同 Next.js server 嘅 NextRequest。呢個就係 production Supabase authentication 喺 Next.js deployment 入面應有嘅接法。
app/(dashboard)/time-tracking/page.tsx （432 行）頂部以 “use client” 開頭，並且係由專案自己嘅 UI component library 載入，而唔係直接從一個 UI package 載入。呢樣證明 Claude Code 喺嗰刻之前已經建立好 component library。
CSS 選擇同樣合格。 globals.css 嘅加入內容包括自訂 keyframe animations（spin-slow、animate-fade-in、animate-slide-in-right），而時間設定同原本 brief 入面嘅「細緻動畫」要求吻合。
建構完成之後，你仍然要處理啲咩
Claude Code 會產出 codebase。要令應用程式上線，仲需要你自己做幾個步驟。對開發者嚟講，呢啲都唔難，但讀者應該喺開始之前知道。
你要配置嘅環境變數：
| 變數 | 攞法 |
|---|---|
| NEXT_PUBLIC_SUPABASE_URL | 你嘅 Supabase 專案設定 |
| NEXT_PUBLIC_SUPABASE_ANON_KEY | 你嘅 Supabase 專案設定 |
| SUPABASE_SERVICE_ROLE_KEY | Supabase 專案設定（只限伺服器端） |
| STRIPE_SECRET_KEY | Stripe 儀表板 |
| NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY | Stripe 儀表板 |
| RESEND_API_KEY | Resend 儀表板 |
應用程式可以運行之前嘅步驟：
- 建立一個 Supabase 專案並執行生成出嚟嘅 SQL migrations
- 喺 Supabase Auth 設定入面配置 Google OAuth 憑證
- 建立 Stripe 帳戶並設定你嘅產品同定價
- 建立一個 Resend 帳戶用於交易式電郵
- 建立一個 .env.local 檔案並加入以上所有變數
- 執行 npm run dev 去啟動 development server
Claude Code 幫你處理嘅嘢：
- 完整檔案結構同 routing
- 所有 component code
- 所有 API 路由同 server actions
- 認證流程 code
- 多租戶資料隔離邏輯
- PDF 生成設定
- Stripe 付款流程 code
- 電郵通知 code
分工好清楚：Claude Code 寫 code；外部服務憑證由你提供。
Claude Code 整體結論
Claude Code 之所以攞到 9.4，係因為佢做到開發者真正需要嘅嘢：寫出唔需要丟棄或重做、可以直接延伸到可投入生產嘅程式碼。
今次測試專案涵蓋咗一個頗高要求嘅 brief，而喺 15 分鐘嗰刻，生成出嚟嘅已經係真實可用嘅 code，帶住正確架構決定同合適 library 選擇。單係呢點已經將 Claude Code 同大部分同類工具區分開。
佢真正值回票價嘅地方：
- 由詳細 brief 開始做完整專案框架（今次測試嘅用途）
- 向現有 codebase 加新功能（將佢指向現有 repo，再描述要加咩）
- 除錯特定錯誤（貼出 error，描述檔案結構，等佢調查）
- 寫同修正測試（佢可以執行你嘅 test suite，讀 failure，然後循環修正）
- 重構指定 module 或檔案，而唔會郁到其他部分
- 解釋你啱啱接手、又唔熟悉嘅 codebase
- 用 Ctrl+B 背景執行，當你忙緊其他嘢時佢照做，完成後再返嚟睇
今次測試冇展示但你應該知道嘅嘢：
- MCP server 支援。 Claude Code 可以連接 Model Context Protocol servers，代表你可以俾佢存取外部資料庫、API、文件系統同內部工具。對團隊嚟講，呢點比任何單一功能都更重要。一個 Claude Code session 可以查你生產環境 schema、讀你嘅內部文件，並寫出已經符合你真實資料模型嘅 code。
- Git 感知。 你將 Claude Code 指向一個 repository，佢會先讀現有 codebase，然後先開始寫。開始 session 前先 git init 唔只係整理。Claude Code 會用 git status 同 file diff 去理解已經存在啲咩，咁佢就唔會覆寫唔應該郁嘅嘢。
- Token 消耗係真實存在。 喺測試 session 進行到 15 分鐘時，累計已經去到 62.8k tokens。複雜 build 會好快消耗 tokens。對於每月有標準限制嘅 Claude Pro 嚟講，幾個大型 build 就可以佔去你配額嘅一大部分。對於每週跑幾次 build 嘅人，Claude Max 或 Console 帳戶會更合理。
- /compact 命令。 喺長 session 入面，Claude Code 會累積會話歷史，消耗 tokens 同可能令 session 變慢。執行 /compact 可以壓縮歷史，同時保留重要部分。任何會跑超過 20 分鐘嘅 build 都值得喺開始前知道呢點。
- Headless 模式。 Claude Code 可以用 –print flag 非互動式運行，令佢可以用喺 CI/CD pipelines 同自動化腳本。大部分個人用戶一開始未必需要，但佢代表 Claude Code 可以嵌入團隊工作流程，而唔只係一個獨立開發工具。
- 每次 session 前先建立 git branch。 Claude Code 決定得好快，亦會快速定案。如果你冇先開 branch 就開始，而架構走向唔係你想要嘅方向，回復返嚟會比一開始就 branch 更麻煩。
適合使用嘅人：
- 想跳過自己覺得麻煩部分嘅開發者，特別係框架搭建、依賴串接同 boilerplate
- 能夠寫出完整 brief 並按之評估輸出嘅團隊
- 任何已經訂閱 Claude Pro、Max 或 Team 而又未開始用嘅人（成本理由已經成立）
應該揀其他產品嘅人：
- 唔識讀輸出程式碼嘅非開發者
- 需要可分享、託管預覽而唔想開終端機嘅人
- 期望複雜 brief 喺五分鐘內完成嘅人
- 想喺任何 code 寫出嚟之前先決定晒每個架構選擇嘅開發者（Claude Code 會好快作出決定，而要返轉頭改會需要額外提示）
Claude Code 價格同計劃
Claude Code 唔係獨立出售嘅訂閱。佢包含喺 Claude Pro、Max 同 Team 計劃入面。
每個計劃對 Claude Code 用戶代表咩：
- Free： Claude Code 唔可用。冇任何繞過方法。
- Claude Pro： 包含 Claude Code。足夠一般開發者每星期跑幾個 build。計劃限制會生效；重度 session 可能喺月底前就用到 usage credits。
- Claude Max： 包含 Claude Code，而且每月可用量多好多（相當於 Pro 配額嘅 5 倍或 20 倍）。最適合每月跑好多大型 build 嘅人。
- Claude Team： 所有席位都包含 Claude Code。適合希望團隊內每個工程師都可以用 agent 嘅工程團隊。
- Anthropic Console（API 帳戶）： 按 token 計費，而唔係固定月費。最適合偶爾但高強度開發嘅開發者，因為你係按用量付費，而唔係固定每月費用。
關於使用限制嘅備註： Claude Code session 會計入你計劃嘅每月配額，而唔係另一個獨立配額。正如我 session 入面見到（橫幅寫住「Included in your plan limits until Jun 22, then switch to usage credits to continue」），一個複雜 build 會消耗相當一部分每月限額。如果你已經接近上限，而你又開始一個大型專案，session 可能喺完成之前就轉入 usage credits。
退款政策： 根據 Anthropic 嘅服務條款，標準計劃付款預設唔可退款。例外係 EEA 同英國，佢哋有 14 日取消權。退款申請要經你帳戶設定入面「Get help」下嘅支援訊息工具提出。
付款方式： 個人計劃用信用卡。Team 同 Enterprise 計劃就加咗 ACH 同發票選項，並提供每月或每年計費週期。
Claude Code 替代方案
最接近嘅直接替代品係 Cursor。Cursor 係一個 AI 驅動程式編輯器，具備 agent mode，可以讀你嘅 codebase、寫檔案同執行終端機命令，功能上大致涵蓋 Claude Code 做到嘅範圍。主要分別係 Cursor 係以 IDE 為先：你會同時有一個圖形化編輯器同 agent，可以喺實時檢視同調整輸出，而唔使等完整 build 完成先評估。
如果你想喺可視化編輯器入面做 AI 輔助編程、偏好邊做邊睇變化，或者你已經喺 VS Code 工作並想留喺同一環境而唔需要開另一個終端機視窗，就會揀 Cursor 多過 Claude Code。
| 功能 | Claude Code | Cursor |
|---|---|---|
| 易用性 | 只限終端機，面向開發者 | 以 IDE 為基礎，更易上手 |
| 最適合 | 由一個提示開始做完整專案 | 逐步編程同即時 AI 編輯 |
| 後端同資料 | 可以配合你指定嘅任何 stack | 可以配合任何 stack |
| 設計彈性 | 生成 CSS 同 component；冇視覺編輯器 | 有帶 AI 層嘅視覺編輯器 |
| 定價模式 | 包含喺 Claude Pro、Max、Team 計劃 | 需要另外訂閱 |
最終結論：Claude Code 值唔值得？
Claude Code 之所以喺開發者工具箱入面有位置，有兩個原因。第一，輸出質素真係好。我喺測試中見到嘅 library 選擇反映出對 stack 嘅真正理解，而喺 15 分鐘時生成出嚟嘅 code 唔係框架草稿，而係一套開發者可以繼續建立上去嘅工作檔案。第二，價值主張好簡單：如果你本身已經喺 Claude Pro、Max 或 Team，Claude Code 根本唔使你額外畀錢。
呢個工具唔係適合每一個嚟到呢頁面嘅讀者。如果你唔寫 code，你就冇辦法用。終端機唔係可選項，能夠讀得明輸出亦都唔係可選項。任何期望有 browser-based app builder 嗰種五分鐘完成體驗嘅人，都會喺見到結果之前已經覺得挫敗。
如果你係付費 Claude 計劃上嘅開發者，而你又未試過 Claude Code，今個星期就試下。揀一個你熟悉到足以評估輸出嘅專案開始。只要你本身已經熟悉終端機，學習曲線就唔高，而一個寫得好嘅提示所產生嘅輸出，比大部分同類工具都要好。
