網頁設計達人：別再讓 Figma 稿被工程師做走樣

這行的痛點

傳統流程裡，設計師交出靜態 Figma 稿，工程師得花大量時間來回確認你的意圖，邊界情境（錯誤狀態、空狀態、極端內容長度）往往要等到開發階段才被發現——這時候改設計已經來不及，只能將就。Claude Code 能直接讀懂 Figma 的元件、變數與 auto layout 結構，把稿子變成工程師可以直接理解、接手迭代的可運作原型，邊界情境也能在設計階段就先跑一輪找出來。

網頁設計師多半不是工程師，但這行的產出終究要變成程式碼跑在瀏覽器裡。CLI 型 AI 工具的關鍵差異在於——你不需要學會寫程式語言，可以直接用「改成 38 像素」「再大一點點」這種設計師會講的話下指令，Claude Code 甚至會記住你前面定調的風格，後面新增的區塊自動套用，不用每次重講一次。

另外兩個更隱性的痛點：一是 Claude Code 寫完程式碼會直接宣稱「做完了」，但它從沒看過渲染出來的畫面長什麼樣子，錯位、間距跑掉都要人肉一個個抓；二是沒有明確方向時，AI 產出的網頁長得都一樣——Inter 字型、白底紫漸層、置中的 bento 卡片，社群戲稱「AI slop」，這對把視覺當專業的網頁設計師來說是最傷自尊的痛點。

動手前的準備

• 沒裝過 Claude Code：先看 Claude Code 教學第 2 章「安裝 Claude Code」。
• 還不熟怎麼跟它對話：先看第 4 章「用說人話叫它寫程式」，本章場景二會再往前推一步，教你用「設計師語言」而非工程語言下指令。
• 外掛、MCP 與社群套件不是必要安裝項。先確認來源、版本、會讀取的資料與要求的權限，並在測試專案驗證；API key 不進版控、不貼進對話。若必須放寬網路或寫入範圍，只限目前專案的必要目錄與必要時間，不要擴到整個使用者資料夾或正式環境。
• 想串 Figma：裝官方 Figma remote MCP（claude mcp add --transport http figma https://mcp.figma.com/mcp），需要 Figma 帳號完成 OAuth 授權；完整功能（讀變數、auto layout）需要 Figma Dev 或 Full seat 的付費方案。
• 想要 Claude Code 自己看畫面驗證：裝 Playwright MCP（claude mcp add playwright -- npx @playwright/mcp@latest）。
• 想甩開 AI 制式審美：裝官方 frontend-design skill（/plugin install frontend-design@anthropics/claude-code）。
• 想對照 Codex CLI：先裝 npm install -g @openai/codex，用 ChatGPT 帳號登入；沒摸過的話先看 Codex CLI 教學第 2 章「安裝 Codex CLI」。

場景一：設計稿一鍵變成網站

手上有畫好的 Figma 稿，想直接轉成能上線的網頁，不想再走傳統切版交接那套流程，來回確認老半天。Felix Lee、Sergei Chyrkov、Jason Zhou 三位分別發文交叉驗證過同一套流程：Figma MCP 讀的不是截圖，是元件、變數（variables）、樣式與 auto layout 結構本身。Sergei Chyrkov 形容回饋週期從「數小時縮到約 30 秒」，Felix Lee 則示範 15 分鐘內把 Figma 設計轉成可運作網站。

Claude Code 怎麼做

1. 裝官方 Figma remote MCP。
2. 在終端機輸入 /mcp，選 Figma，瀏覽器完成 OAuth 授權。
3. 在 Figma 對想轉換的 frame／layer 右鍵 →「Copy link to selection」。
4. 把連結貼進 Claude Code，一句話下指令：「Build this design」。
5. 進階：接 Code Connect，讓 Claude 產碼時重用你 codebase 既有元件，不重造輪子。

claude mcp add --transport http figma https://mcp.figma.com/mcp
# 終端機輸入 /mcp，選 Figma，瀏覽器完成 OAuth 授權

# Figma 裡右鍵想轉換的 frame → Copy link to selection
# 把連結貼進 Claude Code，接著只打一句：
Build this design

換成 Codex CLI

這條線 Codex CLI 有貨真價實的對等能力，不是延伸猜測：OpenAI 與 Figma 在 2026 年 2 月官方合作推出對應整合，指令是 codex mcp add figma --url https://mcp.figma.com/mcp，用 get_design_context 讀取 Figma frame 的設計脈絡，用 generate_figma_design 把跑起來的 UI 推回 Figma（來源：open-design.ai、learn.chatgpt.com）。沒有找到 Codex 這邊像 Felix Lee 那種帶明確分鐘數的個人實測長文，但官方整合本身是真實存在的。

場景二：用設計師語言口述首頁

Tailwind Labs 設計師、《Refactoring UI》作者 Steve Schoger 想驗證一件事：設計師能不能完全跳過 Figma，直接在 Claude Code 裡用自然語言把一個金融 App 行銷首頁「講」出來。技術堆疊是 Vite + Tailwind CSS + React，全程沒有用任何 skill 或 CLAUDE.md，從空白畫面開始，約 50 次迭代對話全部用設計師語言而非程式語言下指令。台灣部落格 anduril.tw 已把過程拆解成 18 條具體好上手的設計技巧。

Claude Code 怎麼做

用四種 prompt 模式跟 Claude 對話，不用寫任何程式術語：

1. 具體值：「改成 38 像素」「改成 gray-950」。
2. 模糊方向：「再大一點點」「再緊一點」。
3. 檢查詢問：「這個是怎麼做的？」——反向理解 Claude 剛剛的實作邏輯。
4. 批量套用：「把這個樣式套到下面所有區塊」。

值得記住的觀察：Claude 會學習已經建立的設計模式，後續新增的區塊會自動套用前面定調的樣式，不用重複指示。18 條技巧裡幾個具體例子：用 outer ring（gray-950、10% 透明度）取代實色邊框；Inter variable font 開中間字重（如 550）；文字寬度用 ch 單位（如 max-w-[40ch]）控制易讀性。

改成 38 像素
改成 gray-950
再大一點點
再緊一點
這個是怎麼做的？
把這個樣式套到下面所有區塊

換成 Codex CLI

Codex CLI 目前找不到這職業的第一手案例，找不到像 Schoger 這樣完整記錄「全程用設計師語言、不寫一行程式術語」的實測長文。但用它的通用能力應該也能做到類似效果：Codex 同樣是對話式介面，靠 AGENTS.md（相當於 CLAUDE.md 的角色檔）記住專案調性，理論上你一樣可以打「再大一點」這種模糊指令讓它猜；只是目前沒有實測資料能告訴你 Codex 會不會像 Claude 一樣「記住前面定調的樣式，後面自動套用」，這點只能自己試了才知道。

場景三：叫它自己看畫面改版面

Claude Code 改完版面常常直接宣稱「做完了」，但它從沒看過渲染出來的畫面，設計師被迫當人肉驗證迴圈——每個錯位、間距跑掉都要自己截圖、貼回去指出來。R.A. Parks 在個人部落格記錄了設定 Playwright MCP 的實戰過程，搭配 Claude Code 官方文件「Give Claude a way to verify its work」一節交叉驗證。

Claude Code 怎麼做

1. 裝 Playwright MCP，跑 /mcp 會看到約 30 個工具（導航、截圖、表單、console）。
2. 約定工作流（可寫進 CLAUDE.md）：每次改動後 → 導航到受影響頁面 → 以 1920x1080 截圖 → 對照文件化的設計原則比對 → 檢查 console 錯誤 → 自主迭代修正。
3. Prompt 要給可驗證訊號，不要給模糊句子。官方對照範例——
   • 好：「[貼上設計截圖] implement this design. take a screenshot of the result and compare it to the original. list differences and fix them」
   • 壞：「make the dashboard look better」（沒有可驗證訊號，Claude 只能憑感覺停）
4. 進階：建一個 design reviewer subagent，跨桌機／平板／手機三種 viewport 做完整視覺審查。
5. 閘門化：把檢查設成 /goal 條件或 Stop hook，讓 Claude 沒通過檢查就不能收工，要求它交出證據（測試輸出、跑過的指令、結果截圖）而非口頭宣稱成功。

R.A. Parks 回報：設定約 15 分鐘，之後 Claude Code 能自主發現並修正版面、間距、無障礙問題。

claude mcp add playwright -- npx @playwright/mcp@latest

[貼上設計截圖] implement this design. take a screenshot of the
result and compare it to the original. list differences and fix them

換成 Codex CLI

這條線官方文件證實有對應能力，但不是像 R.A. Parks 那種帶時間數字的個人實測：Codex 有對應的 Playwright skill，能在真瀏覽器跨斷點渲染並自我驗證「輸出是否符合參考圖」，官方 web development use-case collection 也把「瀏覽器控制即時驗證 UI 改動」列為核心能力（來源：open-design.ai、learn.chatgpt.com）。可信度比場景一的 Figma 整合低一階——那邊是雙方官方合作的具體指令，這邊是官方能力清單，沒查到對應的個人實測長文佐證「15 分鐘設定、自主修正」這類具體數字。

場景四：甩開 AI 制式審美

不給方向的時候，Claude Code 產出的網頁長得都一樣：Inter 字型、白底紫漸層、置中的 bento 卡片，社群戲稱「AI slop」。這對把視覺當專業的網頁設計師是最大痛點——你要的不是「能動」，是「不像 AI 做的」。Thomas Wiegold 用官方 frontend-design skill 實戰後的觀察：「被打回票與過關的設計，差距通常就在對的字型、對的字級跳躍、稍微不同的 padding 節奏」——字型排版是槓桿最大的一項。

Claude Code 怎麼做

1. 裝官方 skill（二擇一）：/plugin install frontend-design@anthropics/claude-code，或在專案建 .claude/skills/frontend-design/，把官方 SKILL.md（約 50 行、~400 token）納入版控。
2. skill 的機制：生成前先強迫你回答四個問題（目的、調性、限制、差異化），治理字型、色彩系統、動態、空間構成、背景五個維度，並把 Inter、紫漸層等 AI 預設列入黑名單。
3. Prompt 策略：用「原則式方向」取代死規格——不要寫「padding 80px、H1 64px」，改寫「editorial magazine 調性、serif display 配幾何 sans、單一暖土色 accent」。
4. 官方 Cookbook 的四維度方向：Typography（禁 Inter/Roboto/Arial，改用 Space Grotesk、Fraunces、JetBrains Mono 等，字重用 100/200 對 800/900 的極端對比）、Color（主導色＋銳利 accent，可借 IDE 主題）、Motion（集中在 page load 的 staggered reveal，不要四散的微互動）、Background（層疊漸層／幾何紋理取代純色）。

/plugin install frontend-design@anthropics/claude-code

editorial magazine 調性，serif display 標題配幾何 sans 內文，
單一暖土色 accent，禁用 Inter/Roboto/Arial

換成 Codex CLI

這條線 Codex CLI 也有官方對等物：OpenAI 在 openai/skills 目錄放了官方 frontend skill，主張「cardless layouts、full-bleed heroes、brand-first hierarchy、restrained motion、至多兩個字型家族與一個 accent 色」，並要求 Codex 動工前先寫一份 visual thesis（來源：open-design.ai）。兩家的痛點與解法高度平行，但沒有找到像 Wiegold 那樣附 before/after 截圖對照的第三方個人實測。

常踩的坑

延伸資源

• Felix Lee：15 分鐘用 Figma MCP 把設計轉成可運作網站
• anduril.tw：Steve Schoger 用 Claude Code 設計的 18 條技巧拆解（繁中）
• R.A. Parks：Giving Claude Code eyes with Playwright MCP
• Claude 官方部落格：Improving frontend design through skills