傳統切版：設計師交稿 → 工程師看圖 → 手刻 HTML → 部署 → 來回對 Figma → 改 → 再對。 一個 landing page 通常 2 到 5 個工作天。
老師上週用這套打「理仁牙醫」整頁 9 個 section，從骨架到上線 v21 改 21 輪、共兩個下午。 含滾動動畫、弧形轉場、響應式三斷點、33 張圖資全自動上傳。
省掉雙手切版時間，把精力放在設計判斷。
Claude 直接讀 Figma node 樹，不靠眼睛抓位置。
這套 pipeline 老師正在客戶案實戰跑，今天教你完整套到自己案上。
一個你親手切完、跑得動、可以分享連結給人看的真實頁面。
鶴步牙醫是這套流程踢到鐵板的真實案。問題不在 MCP、不在 Claude，在 Figma 設計稿本身。
素材用 Photoshop 風格的疊加模式（multiply / screen 之類）讓白底變透明， 在 Figma 看視覺很完整。
但 AI 把該圖層 export 成一般 PNG／JPG 給 WP 使用後， 疊加效果消失、白底回來了，整個視覺崩掉，跟原稿差很多。
✦ 結論：Figma 不只是給設計師看，它是 AI 切版的原料。原料有問題，後面 pipeline 再強都救不回來。
老師現場做一個 hero 給你看，10 分鐘從零到部署。
裝 Claude Code MCP、設好 application password、第一次連線。
抓 Figma → 翻譯 → 部署 → 驗證 → 迭代，跑完整個流程一次。
⏭ 下一頁：下半段 — 自由發揮、分享、線上實戰差異。
挑你想做的 section 練習，老師現場 1:1 解雷。
每人秀一下成果，老師補充改進方向。
客戶站跟今天測試站差在哪，回去怎麼套用。
✦ 主軸：3 小時內每人都產出一個能上線、能分享連結給人看的頁面。
理解這張圖你就懂全部了。
驗證迴圈：部署 → 截圖 → 對比 Figma → 改 HTML → 再部署。
整個過程 你不用碰 WP 後台。
⚠ 提醒：整組密碼含空格別漏複製。
編輯 ~/.claude/settings.json，加（或合併）這段：
{
"mcpServers": {
"elementor-mcp": {
"command": "npx",
"args": ["-y", "@elementor/mcp-server"],
"env": {
"WP_URL": "https://dbc.zeabur.app",
"WP_USERNAME": "trainee01",
"WP_APPLICATION_PASSWORD": "xxxx xxxx xxxx xxxx xxxx xxxx"
}
}
}
}
把 trainee01 改成你的 onboarding.csv 上的帳號，WP_APPLICATION_PASSWORD 整組含空格貼上。儲存後 完全關掉 Claude Code 再重開（reload 沒用）。
兩階段確認：先看 MCP 有沒有掛上，再實測能不能讀寫。
claude mcp list
列表裡應看到 elementor-mcp
✓ Connected
請用 elementor mcp 幫我抓
page 9 的內容，列出
標題、slug、status 給我看
Claude 會回頁面 metadata 就代表通了
✗ 失敗：多半是 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 直接寫進去了。
在 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 樹，內含：
真實踩過：fills 陣列第一個是最上層（反直覺），照片有 transform/filter 要走 /v1/images?ids=NODE export，不能直接抓 imageRef raw 圖。
叫 Claude 把這個 frame 切成 HTML，部署到 page 9
複製 starter-builder.py，改 HTML 後跑指令產 JSON
推薦：第一次用 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 強制清快取。
這是工作坊最常用的咒語（記得改成你的 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 輪就吻合。
Application Password 401 Unauthorized ／ 複製時空格被吃掉
解：到 WP Profile 重新產一組 → 整組含空格貼到 settings.json，存檔後完全關掉 Claude Code 再重開。
部署成功但前台頁面沒變 ／ Elementor 快取沒重建
解 3 選 1：URL 加 ?fresh=<時間戳>、WP Admin → Elementor Tools → Regenerate CSS、或部署成 draft 再切 publish。
widget 上設的 css_classes 沒 render 出來 ／ 只有 container 才會輸出
解：CSS selector 改用 .elementor-element-{widget_id}，widget 的 ID 一定會變成 class。
e-con 容器內建 padding + max-width 1140 ／ 全寬背景永遠縮成 1140 寬
解：section 加 reset：--padding-*:0、--content-width:100%、max-width:100% !important，再用 inner 1440 包置中內容。
絕對定位跑版／圖片跳到下段 ／ 父容器沒 position:relative
解：用 HTML widget 自己寫 wrapper 強制 relative。對抗 Elementor 超過 3 個 !important 就停手改 HTML widget，最乾淨。
✦ 老師理仁案打了 6 個切版雷（含 Figma fills 反向、image transform/filter、弧形轉場、GSAP 置中衝突），全列在 CHEATSHEET.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 都重講背景＋規則，省一半互動時間，踩過的雷不會再踩。
在工作坊資料夾跑這四步（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。
優勢：
MCP 串接 90% 一樣。差在「部署前後的配套」：
| 面向 | 本機 Local（老師理仁案） | 線上客戶站 |
|---|---|---|
| 清 Elementor cache | MySQL DELETE _elementor_* meta |
?fresh=t 或 Elementor Tools 重建 |
| 刪 post-{id}.css | rm 檔案 |
Zeabur Console / WP File Manager |
| 改錯回滾 | 隨便改，本機而已 | 先 download_page_to_file 備份 |
| 部署 status | 直接 publish | draft 預覽 → 確認 → publish |
| 上傳圖資 | 丟 wp-content/uploads/ |
REST /wp/v2/media POST |
| REST API 限制 | 完全開放 | Wordfence / 安全 plugin 可能擋 |
✦ 6 條配套規則記起來，今天學的全部能直接套到客戶案。
打開 Claude Code，把 onboarding 表打開放手邊。
你的第一個指令會是：
請用 elementor mcp 幫我抓 page 9 的內容（page ID 換成你的）， 列出標題、slug、status，以及目前 elementor JSON 的結構摘要。
開始切版