Skip to main content

Claude Code 簡介

Claude Code 是 Anthropic 的代理式終端機編碼工具——一個命令列介面，將 Claude 的智慧直接帶入您的開發工作流程。與在瀏覽器視窗中運作的聊天式 AI 助手不同，Claude Code 存在於您的終端機中，讀取您的程式碼庫、執行命令、編輯檔案，並自主管理複雜的多步驟開發任務。

對 Shopify 開發人員而言，Claude Code 具有變革性意義。它理解 Shopify 生態系統——Liquid 模板、GraphQL Admin API 結構、Polaris 元件、App Bridge、Shopify Functions 和佈景主題架構——並能在您的實際專案脈絡中同時處理所有這些。

為什麼選擇 Claude Code 進行 Shopify 開發？​

傳統的 AI 編碼助手需要您來回複製貼上程式碼片段。Claude Code 完全消除了這種摩擦：

  • 直接檔案存取：Claude Code 就地讀取和編輯您的專案檔案
  • 命令執行：它可以執行 shopify app dev、npm test、GraphQL 內省查詢和任何其他終端機命令
  • 多檔案感知：它理解您的 Liquid 區段如何與 JavaScript 關聯、應用程式擴充如何連接到後端，以及 GraphQL 查詢如何映射到資料模型
  • 迭代開發：它可以建構、測試、除錯和改進——全部在一個工作階段中完成
什麼讓 Claude Code 成為「代理式」？

「代理式」一詞意味著 Claude Code 不僅僅是回答問題——它採取行動。當您要求它「在商品頁面添加一個中繼欄位」時，它會讀取您的佈景主題檔案、識別正確的區段、撰寫 Liquid 程式碼、更新結構，並驗證變更能正確編譯。它會規劃、執行和驗證。

安裝​

Claude Code 需要 Node.js 18 或更新版本。透過 npm 全域安裝：

安裝 Claude Code
npm install -g @anthropic-ai/claude-code

或者，如果您不想全域安裝：

無需全域安裝即可執行
npx @anthropic-ai/claude-code
系統需求
  • Node.js：18.0.0 或更新版本
  • 作業系統：macOS、Linux 或透過 WSL2 的 Windows
  • 終端機：任何終端機模擬器（iTerm2、Terminal.app、Warp、Windows Terminal）
  • Git：建議用於版本控制整合

驗證​

安裝後，在任何目錄中啟動 Claude Code：

啟動 Claude Code
claude

首次啟動時，Claude Code 會提示您進行驗證。您有兩個選項：

選項 1：Anthropic API 金鑰（直接）​

使用 API 金鑰驗證
export ANTHROPIC_API_KEY=sk-ant-api03-your-key-here
claude

您也可以將此添加到 shell 設定檔（~/.zshrc 或 ~/.bashrc）以持久化：

添加到 shell 設定檔
echo 'export ANTHROPIC_API_KEY=sk-ant-api03-your-key-here' >> ~/.zshrc
source ~/.zshrc

選項 2：Claude Pro/Max 訂閱（OAuth）​

如果您有 Claude Pro 或 Max 訂閱，Claude Code 可以透過您的 Anthropic 帳戶使用 OAuth 進行驗證。只需執行 claude 並按照瀏覽器中的登入流程操作。如果您已經付費訂閱 Claude，這是最簡單的選項。

啟動並透過瀏覽器驗證
claude
# 按照瀏覽器中的 OAuth 提示操作
推薦用於 Shopify 開發

Claude Max 方案（$100/月或 $200/月）為大量 Shopify 開發提供最佳體驗。更高階的 Max 方案給您顯著更多的使用量，這在處理消耗大量上下文的大型 Shopify 程式碼庫時很重要。Max 方案的使用量通常足以支撐一整天的密集開發。

理解 CLAUDE.md 專案檔案​

CLAUDE.md 檔案是使用 Claude Code 進行有效 Shopify 開發的最重要設定。它位於專案根目錄，提供 Claude Code 在每個工作階段開始時讀取的持久性上下文。

將 CLAUDE.md 視為一份簡報文件，就像給加入團隊的專家開發人員看的。它告訴 Claude Code：

  • 專案是什麼以及如何結構化
  • 要遵循哪些編碼標準和慣例
  • 使用中的 Shopify API 和版本
  • 如何執行、測試和部署專案
  • 常見陷阱和專案特定規則
Shopify 應用程式的 CLAUDE.md 範例
# Project: My Shopify App

## Overview
Remix-based Shopify app for inventory management.
Uses Shopify API version 2025-01.

## Tech Stack
- Framework: Remix (Shopify app template)
- Database: Prisma with SQLite (dev) / PostgreSQL (prod)
- UI: Shopify Polaris React components
- Auth: Shopify App Bridge + session tokens

## Commands
- `npm run dev` - Start development server
- `npm run build` - Production build
- `shopify app dev` - Start with Shopify CLI
- `npm test` - Run Vitest suite
- `npx prisma db push` - Sync database schema

## Coding Standards
- Use TypeScript strict mode
- All API calls must use the authenticated admin client
- Use Polaris components exclusively for UI (no custom CSS for standard patterns)
- GraphQL queries go in `app/graphql/` directory
- Validate all webhook payloads with HMAC verification

## API Version
Always use API version 2025-01. Do not use unstable.

CLAUDE.md 層級結構​

Claude Code 支援 CLAUDE.md 檔案的層級結構：

位置範圍使用案例
~/.claude/CLAUDE.md全域所有專案的個人偏好
./CLAUDE.md專案根目錄專案特定的上下文和規則
./src/CLAUDE.md子目錄模組特定的指引

檔案由上而下合併，更具體的檔案優先。

上下文視窗管理​

Claude Code 在上下文視窗中運作——它一次能在記憶體中保持的文字（程式碼、對話、檔案內容）的總量。有效的上下文管理對於高效的 Shopify 開發工作階段至關重要。

上下文如何被消耗​

每次互動都會增加上下文：

  • 您的提示和 Claude 的回應
  • Claude 讀取的檔案內容
  • 終端機執行的命令輸出
  • 錯誤訊息和日誌

一個大型 Shopify 佈景主題可能有 50 多個 Liquid 檔案。一次讀取所有檔案會消耗大量上下文。Claude Code 對此很智慧——它按需讀取檔案，而不是一開始就載入所有內容。

上下文管理命令​

基本上下文命令
# 檢查目前的成本和 token 使用量
/cost

# 壓縮對話（摘要歷史以釋放上下文）
/compact

# 清除整個對話並重新開始
/clear
何時使用 /compact 與 /clear

當您在任務進行中想釋放上下文同時保留之前討論要點時，使用 /compact。當您切換到完全不同的任務且不需要任何先前上下文時，使用 /clear。

Shopify 開發的良好節奏：在完成每個離散功能或錯誤修復後使用 /compact，在佈景主題工作和應用程式開發之間切換時使用 /clear。

大型 Shopify 專案的策略​

  1. 在專注的工作階段中工作：不要要求 Claude Code「重構整個佈景主題」，而是一次專注一個區段
  2. 大量使用 CLAUDE.md：將穩定的上下文（API 版本、慣例、檔案結構）放在 CLAUDE.md 中，就不需要重複
  3. 在里程碑後使用 /compact：完成一個功能後，在進入下一個之前壓縮
  4. 具體指定檔案路徑：說「編輯 sections/product-main.liquid」而不是「編輯商品頁面」，以避免不必要的檔案搜尋

費用和使用量層級​

Claude Code 使用量根據處理的 token（輸入和輸出）計費。了解定價有助於您有效管理預算。

訂閱方案​

方案月費最適合
Claude Pro$20/月輕度使用、偶爾的編碼協助
Claude Max（5 倍）$100/月日常開發、大多數 Shopify 開發人員
Claude Max（20 倍）$200/月大量日常使用、全職 Shopify 開發

API 金鑰定價​

如果直接使用 API 金鑰，按 token 計費：

模型輸入（每 100 萬 token）輸出（每 100 萬 token）
Claude Sonnet 4$3.00$15.00
Claude Opus 4$15.00$75.00
注意您的使用量

單次密集的 Shopify 開發工作階段（建構完整的應用程式功能）可能處理數十萬個 token。使用 API 金鑰定價時，這可能迅速累積。對於日常開發工作，Max 訂閱幾乎總是比 API 金鑰使用更具成本效益。

監控使用量​

在開發過程中經常使用 /cost 命令：

> /cost
Session cost: $2.34
Total tokens: 145,230 input / 23,456 output

快速開始：您的第一個 Shopify 工作階段​

以下是驗證一切正常運作的完整工作流程：

第一個 Shopify + Claude Code 工作階段
# 1. 導航到您的 Shopify 專案
cd ~/my-shopify-app

# 2. 建立 CLAUDE.md 檔案
echo "# My Shopify App\nRemix-based app using API version 2025-01" > CLAUDE.md

# 3. 啟動 Claude Code
claude

# 4. 要求 Claude Code 探索您的專案
> Explore this project structure and summarize what you find

# 5. 開始建構
> Create a new page in the app that displays a list of products using GraphQL and Polaris components

Claude Code 會讀取您的專案檔案、理解結構、撰寫程式碼，甚至可以執行開發伺服器來驗證結果。歡迎來到代理式 Shopify 開發。

下一步​

現在 Claude Code 已安裝並設定完成，請前往 Shopify 開發工作流程 了解使用 Claude Code 進行佈景主題開發、應用程式建構和除錯的具體模式。