Figma → WordPress
用 Claude Code 一句話切版用 MCP 串接設計稿與後台
10 分鐘完成一個 section

這場為什麼重要

傳統切版：設計師交稿 → 工程師看圖 → 手刻 HTML → 部署 → 來回對 Figma → 改 → 再對。 一個 landing page 通常 2 到 5 個工作天。

老師上週用這套打「理仁牙醫」整頁 9 個 section，從骨架到上線 v21 改 21 輪、共兩個下午。 含滾動動畫、弧形轉場、響應式三斷點、33 張圖資全自動上傳。

90 分鐘後，你能獨立做這件事

設計稿不能只給人看

鶴步牙醫是這套流程踢到鐵板的真實案。問題不在 MCP、不在 Claude，在 Figma 設計稿本身。

✦ 結論：Figma 不只是給設計師看，它是 AI 切版的原料。原料有問題，後面 pipeline 再強都救不回來。

時間怎麼用

✦ 目標：90 分鐘內每人產出一個能分享連結給人看的真實頁面。

資料怎麼流動

理解這張圖你就懂全部了。

驗證迴圈：部署 → 截圖 → 對比 Figma → 改 HTML → 再部署。
整個過程 你不用碰 WP 後台。

把這段貼給 Claude Code

前提：已裝好 Claude Code 並登入。

把下面這段貼到對話框（右上角點複製）。⚠ 裡面的 Zeabur token 是老師個人的測試 token，工作坊結束後會作廢，不要貼到別的地方。

請幫我把這台電腦設定成 Figma → WordPress 工作坊環境。按順序執行，每步驟回報結果：

【1. 偵測 OS 並準備套件管理員】
Mac 用 Homebrew、Windows 用 winget。沒裝就先裝（Mac 第一次可能要先裝 Xcode CLT）。

【2. 確認 / 補裝三個工具】
- Node.js 18 以上（用 node -v 驗證；版本不夠就升級）
- Python 3.10 以上（用 python3 --version 驗證）
- Google Chrome

【3. 寫入 Claude Code 設定檔】
路徑：~/.claude/settings.json（Windows 是 %USERPROFILE%\.claude\settings.json）

- 檔案不存在 → 建立新檔
- 檔案已存在 → 先複製一份備份成 settings.json.bak，再把下面這段「合併」進 mcpServers 區塊
  （絕對不要覆蓋掉其他既有的 MCP 設定）
- TRAINEE_USERNAME 跟 APP_PASSWORD 先留 placeholder，當天老師會給：

{
  "mcpServers": {
    "elementor-mcp": {
      "command": "npx",
      "args": ["-y", "elementor-mcp"],
      "env": {
        "WP_URL": "https://dbc.zeabur.app",
        "WP_APP_USER": "TRAINEE_USERNAME",
        "WP_APP_PASSWORD": "APP_PASSWORD"
      }
    },
    "zeabur": {
      "command": "npx",
      "args": ["-y", "@zeabur/mcp-server"],
      "env": {
        "ZEABUR_TOKEN": "sk-ahigcc54nfpzzft3hquq6yvvctbpa"
      }
    }
  }
}

寫完後分別跑一次 npx -y elementor-mcp --help 跟 npx -y @zeabur/mcp-server --help 把兩個套件 cache 下來。

【4. 完全關掉 Claude Code 再重開】
不是 reload，是 Cmd+Q（Mac）/ 右上角 X（Windows）整個 quit 再開。

【5. 驗證並回報】
跑 claude mcp list，把結果整理成下面 checklist 給我看：
- [ ] Node 版本：?
- [ ] Python 版本：?
- [ ] Chrome：已裝 / 已補裝
- [ ] settings.json 寫入路徑：?
- [ ] settings.json.bak 備份：有 / 無原檔
- [ ] claude mcp list：elementor-mcp 跟 zeabur 是否都在列表

最後提醒我：「等老師發帳號 → 換掉 settings.json 裡的 placeholder → 再重開一次 Claude Code」。

中間遇到 sudo / 系統權限請求請停下來問我，不要 skip 不要硬猜密碼。

✦ 跑一次就好，當天直接接著用。Claude Code 還沒裝就先去 claude.com/claude-code 裝完再回來。

把 Elementor MCP 加進設定檔

編輯 ~/.claude/settings.json，加（或合併）這段：

{
  "mcpServers": {
    "elementor-mcp": {
      "command": "npx",
      "args": ["-y", "elementor-mcp"],
      "env": {
        "WP_URL": "https://dbc.zeabur.app",
        "WP_APP_USER": "trainee01",
        "WP_APP_PASSWORD": "xxxx xxxx xxxx xxxx xxxx xxxx"
      }
    }
  }
}

把 trainee01 改成你的 onboarding.csv 上的帳號，WP_APP_PASSWORD 整組含空格貼上。儲存後 完全關掉 Claude Code 再重開（reload 沒用）。

驗證 MCP 通了

兩階段確認：先看 MCP 有沒有掛上，再實測能不能讀寫。

claude mcp list

請用 elementor mcp 幫我抓
page 9 的內容，列出
標題、slug、status 給我看

✗ 失敗：多半是 application password 空格被吃掉 或 設定檔沒重新載入（Claude Code 要完全關閉重開）。

第一次部署

複製右上角，貼到 Claude 對話框（記得把 page 9 改成你自己的 ID）：

請用 elementor mcp 把 page 9 的內容整個換成下面這段 HTML，並 publish：

<div style="padding:80px;background:#1a1816;color:#f4ead5;text-align:center;font-family:'Noto Serif TC',serif;">
  <h1 style="font-size:48px;letter-spacing:8px;margin:0;">Hello Workshop</h1>
  <p style="margin-top:20px;font-size:24px;">我的第一個 MCP 部署</p>
</div>

部署完請告訴我頁面 URL，我自己去開來看。

部署完開 https://dbc.zeabur.app/trainee-XX/?fresh=now（XX 換成你的編號）。

✦ 完全沒碰 WP 後台。Claude 直接寫進去了。

讓 Claude 看懂設計

在 Figma 點 frame → 右鍵 Copy Link，把連結代到下面 prompt：

請用 figma mcp 抓這個 frame 的完整結構：
https://figma.com/design/86JHZin3GoY4LsVq6otoDR/Ritzen?node-id=1-14

依序列給我看：
1. 整個 frame 的尺寸與背景
2. 每個元素的相對位置（x,y）、寬高、文字內容
3. 字型、字級、letter-spacing、行高、顏色（含 alpha）
4. 圖片資產的 imageRef，是否有 transform 或 filter
5. 任何疊加模式 / mask / shadow

如果遇到 figma mcp 429（rate limit），改用 Figma REST API。

Claude 會回你一棵 node 樹，內含：

• 所有圖片資產（image fills + imageRef，含 transform/filter）
• 文字內容、字型、字級、letter-spacing、行高
• 顏色（含 alpha）、漸層、shadow、絕對定位

真實踩過：fills 陣列第一個是最上層（反直覺），照片有 transform/filter 要走 /v1/images?ids=NODE export，不能直接抓 imageRef raw 圖。

兩條路：對話 vs Builder

推薦：第一次用 A 上手，做超過 2 個 section 後切到 B。

一行指令上線

A. 純對話路線（一段 HTML 直接丟）

請用 elementor mcp 把下面這段 HTML 部署到 page 9，status 設為 publish，
完成後告訴我頁面 URL：

<section style="padding:120px 80px;background:#faf5e8;text-align:center;">
  <h1 style="font-size:64px;color:#1a1612;">這是新 Hero</h1>
</section>

B. Builder 路線（用 JSON 檔）

請用 elementor mcp 把 /tmp/my-page.json 部署到 page 9，
status 設為 publish，完成後告訴我頁面 URL。
如果同名 widget 已存在，整段覆蓋掉沒關係。

Claude 會呼叫 update_page_from_file，幾秒內就更新。 📌 開頁時加 ?fresh=now 強制清快取。

交給 Claude 對版面

這是工作坊最常用的咒語（記得改成你的 trainee 編號）：

請幫我做視覺驗證：

1. 用 headless Chrome 截圖 https://dbc.zeabur.app/trainee-01/?fresh=now
   window-size 設 1440x6000，存到 /tmp/wp-current.png
2. 對照我給你的 Figma 原稿（同一個 frame，node-id=1-14）
3. 列出最明顯的 3 個差異，按重要性排序，每條註明：
   - 出問題的元素（標題 / 圖片 / 按鈕…）
   - 差在位置 / 顏色 / 尺寸 / 缺漏 哪一類
   - 建議怎麼改

Claude 會用 headless Chrome 拍圖、做 side-by-side 對比、列差異。

✦ 改 → 部署 → 截圖 → 比對。每輪 30 秒，2-3 輪就吻合。

前 30 分鐘最常踩的雷

理仁牙醫切版時踩出來的雷

✦ 老師理仁案打了 6 個切版雷（含 Figma fills 反向、image transform/filter、弧形轉場、GSAP 置中衝突），全列在 CHEATSHEET.md。

寫一份 CLAUDE.md

在專案資料夾根目錄建一個 CLAUDE.md，Claude Code 自動讀。下面整段可直接複製：

# Figma → WP 工作坊：我的 trainee 練習頁

## WP 連線
- 站台: https://dbc.zeabur.app
- 我的 page ID: 9
- 帳號 / application password 在 onboarding.csv，呼叫 elementor mcp 時自動帶

## Figma 來源
- FileKey: 86JHZin3GoY4LsVq6otoDR
- 主切 frame: node-id 1:14 (Hero)、1:321 (醫師團隊)

## 部署規則
- 一律用 elementor mcp，不要走 WP 後台
- 每次部署完用 headless Chrome 截 1440 寬截圖驗證，存到 /tmp/wp-current.png
- 開頁時 URL 一律加 ?fresh=now 強制清 Elementor 快取

## 切版規則（從理仁案踩過的雷學到的）
- Figma fills[0] 是最上層前景（反直覺），切版時要反過來看
- 圖片有 transform/filter 的，用 /v1/images?ids=NODE export，不抓 imageRef
- e-con 預設 padding + max-width 1140，做 full-bleed 要先全部 reset
- 對抗 Elementor 預設樣式超過 3 個 !important 就改 HTML widget
- 絕對定位的子元素，父容器一定要 position:relative

## 失敗時
- 先 download_page_to_file 備份目前 page 的 elementor JSON
- 再嘗試新部署，部署失敗回滾

✦ 不用每次 prompt 都重講背景＋規則，省一半互動時間，踩過的雷不會再踩。

大型頁面用 Builder

在工作坊資料夾跑這四步（terminal 直接執行）：

# 1. 複製範本
cp starter-builder.py my-build.py

# 2. 編輯 PAGE_ID 跟 HTML 內容（第一段 PAGE_ID = 9 換成你的）
open my-build.py   # 或用你習慣的編輯器

# 3. 產出 Elementor JSON
python3 my-build.py
# 預期看到：OUT /tmp/my-page.json (XXXXX bytes)

# 4. 切回 Claude Code，貼這段叫它部署
請用 elementor mcp 部署 /tmp/my-page.json 到 page 9，
status 設為 publish，完成後告訴我頁面 URL。

優勢：

• 結構放 git，跨 session 不會弄丟
• 大頁面改一行 Python 就重跑，不用重講需求

這個 pipeline 怎麼用在客戶案

MCP 串接 90% 一樣。差在「部署前後的配套」：

✦ 6 條配套規則記起來，今天學的全部能直接套到客戶案。