傳統切版：設計師交稿 → 工程師看圖 → 手刻 HTML → 部署 → 來回對 Figma → 改 → 再對。 一個 landing page 通常 2 到 5 個工作天。
用 Claude Code + MCP：5 個 section 一個下午跑完，包含 Carousel、滾動動畫、漸層、響應式。
省掉雙手切版時間，把精力放在設計判斷。
Claude 直接讀 Figma node 樹，不靠眼睛抓位置。
這個 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"], "env": { "WP_URL": "https://dbc.zeabur.app", "WP_APP_USER": "trainee01", "WP_APP_PASSWORD": "xxxx xxxx xxxx ..." } } } }
儲存後 完全關掉 Claude Code 再重開（reload 沒用）。
兩階段確認：先看 MCP 有沒有掛上，再實測能不能讀寫。
claude mcp list
列表裡應看到 elementor-mcp
✓ Connected
請用 elementor mcp 抓
page 9 的內容
Claude 應回頁面標題 / slug / status
✗ 失敗：多半是 application password 空格被吃掉 或 設定檔沒重新載入（Claude Code 要完全關閉重開）。
直接複製貼給 Claude：
用 elementor mcp 把 page 9 的內容改成：
<div style="padding:80px;background:#1a1816;color:#f4ead5;
text-align:center;font-family:'Noto Serif TC';">
<h1 style="font-size:48px;letter-spacing:8px;">Hello Workshop</h1>
<p style="margin-top:20px;">我的第一個 MCP 部署</p>
</div>
部署完開 https://dbc.zeabur.app/trainee-XX/ 看結果。
✦ 完全沒碰 WP 後台。Claude 直接寫進去了。
給 Claude 一個 Figma frame URL：
抓這個 Figma frame 的結構：
https://figma.com/design/XXXXX/YYY?node-id=1-14
把每個元素的位置、尺寸、文字、字型都列給我看
Claude 會回你一棵 node 樹，內含：
叫 Claude 把這個 frame 切成 HTML，部署到 page 9
複製 starter-builder.py，改 HTML 後跑指令產 JSON
推薦：第一次用 A 上手，做超過 2 個 section 後切到 B。
# 純對話路線 把這段 HTML 部署到 page 9 # Builder 路線 把 /tmp/my-page.json 部署到 page 9
Claude 會呼叫 update_page_from_file，幾秒內頁面就更新。
📌 重點：WP 可能 cache 舊版，加 ?fresh=t 強制重載。
這是工作坊最常用的咒語：
截圖 https://dbc.zeabur.app/trainee-01/ 對照 Figma 原稿，列出三個最明顯的差異
Claude 會：
✦ 改 → 部署 → 截圖 → 比對。每輪 30 秒，2-3 輪就吻合。
部署成功但頁面沒變 ／ Elementor cache 沒清
解：URL 加 ?fresh=<timestamp>，或部署成 draft 再切 publish。
Application Password 401 Unauthorized ／ 空格被吃掉
解：重開 WP Profile → 重建一組 → 整組複製含空格。
widget 的 css_classes 沒 render ／ Elementor 不輸出 widget 級 class
解：CSS 改用 .elementor-element-{widget_id} selector。
CSS content:"\\"; 壞掉 ／ WP stripslashes 咬掉一個反斜線
解：改用 unicode escape content:"\005C" 或乾脆畫 SVG。
絕對定位跑版 ／ 子元素跳到下個 section
解：父容器要 position:relative，跟 Elementor 對抗超過 3 個 !important 就改用 HTML widget。
✦ 卡住就翻 CHEATSHEET.md，13 條全紀錄。
在專案資料夾根目錄建一個 CLAUDE.md，Claude Code 自動讀：
# 我的工作坊專案 ## WP 連線 - 站: https://dbc.zeabur.app - 我的 page ID: 9 ## Figma - FileKey: dces5AhI9SgdCgIlo7Ffa4 - 要切的 frame: 1:14 Hero、1:321 VIP ## 規則 - 部署後一定截圖驗證 - 用 1920 寬度對比
✦ 不用每次 prompt 都重講背景，省一半互動時間。
# 複製範本 + 編輯 PAGE_ID + 寫 HTML cp starter-builder.py my-build.py vim my-build.py # 產 JSON python3 my-build.py # > OUT /tmp/my-page.json (12345 bytes) # 叫 Claude 部署 請部署 /tmp/my-page.json 到 page 9
優勢：
MCP 串接 90% 一樣。差在「部署前後的配套」：
| 面向 | 今天的測試站 | 線上客戶站 |
|---|---|---|
| 改錯回滾 | 隨便改 | 先備份原 JSON |
| 部署 status | 直接 publish | draft 預覽 → publish |
| 清快取 | ?fresh=t |
WP CLI / Elementor 後台 |
| REST API | 完全開放 | Wordfence 可能擋 |
✦ 4 條配套規則記起來，今天學的全部能套用。
打開 Claude Code，把 onboarding 表打開放手邊。
你的第一個指令會是：
請用 elementor mcp 抓 page 9 的內容
開始切版