什麼是 Claude Code？

Claude Code 是 Anthropic 推出的命令列工具，專為 agentic coding（代理式編程） 設計。它讓你可以直接在終端機中與 Claude 互動，委派編程任務給 AI 處理。

核心特點：

Webflow → Shopify Theme 轉換流程

第一階段：準備工作

1. 安裝 Claude Code

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

2. 設定 API 金鑰

export ANTHROPIC_API_KEY="your-api-key"

3. 準備專案結構

project/
├── webflow-export/      # Webflow 匯出的靜態檔案
│   ├── index.html
│   ├── css/
│   ├── js/
│   └── images/
└── shopify-theme/       # 輸出的 Shopify Theme

第二階段：理解 Shopify Theme 架構

Shopify Theme 使用 Liquid 模板語言，結構如下：

shopify-theme/
├── assets/           # CSS、JS、圖片
├── config/           # 設定檔 (settings_schema.json)
├── layout/           # 主版面 (theme.liquid)
├── locales/          # 多語言檔案
├── sections/         # 可重複使用的區塊
├── snippets/         # 小型可重用組件
├── templates/        # 頁面模板
│   ├── index.json
│   ├── product.json
│   ├── collection.json
│   └── page.json
└── templates/customers/  # 帳戶相關頁面

第三階段：使用 Claude Code 的實際指令

啟動 Claude Code 並進入專案

cd your-project-folder
claude

範例提示詞（給 Claude Code）：

請幫我將 webflow-export/ 資料夾中的靜態 HTML 轉換為 Shopify Theme 2.0 格式。

需求：
1. 分析 Webflow HTML 結構，識別 header、footer、hero、product grid 等區塊
2. 建立正確的 Shopify Theme 目錄結構
3. 將 CSS 轉換為適合 Shopify 的格式，放入 assets/
4. 建立 layout/theme.liquid 作為主版面
5. 將重複元件抽取為 sections/ 和 snippets/
6. 使用 Liquid 變數替換硬編碼內容：
   - 商品名稱 → {{ product.title }}
   - 商品價格 → {{ product.price | money }}
   - 圖片 → {{ product.featured_image | image_url: 'large' }}
7. 建立 settings_schema.json 讓商家可自訂顏色、字型等
8. 確保符合 Shopify Theme 2.0 的 JSON templates 格式

請一步步進行，每完成一個部分向我確認。

第四階段：關鍵轉換對照表

Webflow 元素 Shopify Liquid 對應
靜態文字 {{ section.settings.heading }}
圖片 src {{ 'image.png' | asset_url }}
連結 href {{ routes.cart_url }}
商品列表 {% for product in collection.products %}
條件顯示 {% if customer %}...{% endif %}
表單 {% form 'product' %}...{% endform %}

第五階段：進階功能整合

讓 Claude Code 幫你處理：

請幫我：
1. 建立購物車 AJAX 功能（不重新整理頁面）
2. 整合 Shopify 的 Section Rendering API
3. 加入商品變體選擇器
4. 建立響應式圖片載入（使用 srcset）
5. 設定 SEO meta tags（使用 Liquid 變數）

實用技巧與注意事項

✅ 最佳實踐：

  • 讓 Claude Code 先分析整個 Webflow 匯出結構再開始轉換
  • 分批處理：先做 layout → 再做 sections → 最後做 templates
  • 保留 Webflow 的 class 命名，減少 CSS 修改量
  • 使用 Shopify CLI 本地預覽：shopify theme dev

⚠️ 常見陷阱：

  • Webflow 的互動動畫需要手動重寫或使用 Shopify 相容的 JS 庫
  • 表單必須使用 Shopify 的 {% form %} 標籤
  • 圖片路徑需要全部改為 Liquid asset_url
  • Webflow 的 CMS 內容無法直接移轉，需要對應到 Shopify 的 metafields

🔧 除錯指令：

# 驗證 Theme 語法
shopify theme check

# 本地開發預覽
shopify theme dev --store your-store.myshopify.com

完整工作流程摘要

1. 匯出 Webflow 靜態檔案
       ↓
2. 啟動 Claude Code
       ↓
3. 讓 Claude 分析 HTML 結構
       ↓
4. 逐步轉換為 Shopify Liquid
       ↓
5. 使用 Shopify CLI 測試
       ↓
6. 迭代修正問題
       ↓
7. 部署到 Shopify 商店