手動切圖這件事我在項目里干了五六年。過去一個設計稿落地成頁面流程大概是先在 Figma 里量尺寸、取色、導切圖再把圖片一張張拖進編輯器然后對著設計稿寫 div、寫 CSS、調間距一個小頁面磨一下午也是常有的事。直到我最近把 Claude Code 和 Figma MCP 接在一起這個流程被徹底壓縮成了“一句話”。在終端里輸入一條提示詞Claude 就能直接讀取 Figma 設計稿的圖層數據自己分析布局、提取顏色、生成 HTML 結構我只需要在后面做檢查和小修。這篇文章就把我這段時間從 0 到 1 的完整配置過程、核心提示詞寫法和踩過的坑全部整理出來給同樣在做前端落地、想解放雙手的人一份能直接照做的方案。1. 方案原理解析Claude Code 和 Figma MCP 是怎么串起來的1.1 Claude Code 到底是什么Claude Code 是 Anthropic 推出的命令行 AI 編程工具跑在終端里可以直接讀寫你本地項目文件、執行命令、調用外部工具。它和網頁版 ChatGPT、Claude 聊天窗口最大的區別在于“能動”你可以讓它打開某個文件、搜索某個函數、運行測試、修復報錯它會在你授權的范圍內真正操作這臺電腦。這一點很關鍵。之前大家用 AI 生成 HTML大多是復制設計稿截圖丟進網頁聊天框AI 只能通過“看圖”來猜布局猜出來的結果基本是四不像。Claude Code 不一樣它可以通過 MCPModel Context Protocol模型上下文協議直接訪問 Figma 的文件結構拿到的是設計稿的矢量信息、坐標、尺寸、顏色值、圖層名稱這些精確數據而不是一張模糊截圖。簡單做個類比網頁聊天框里的 AI 像一個隔著窗戶看房間的人能看見大概擺設但不知道尺寸接了 Figma MCP 的 Claude Code則是拿到了房間的施工圖紙每一面墻多高、每一件家具多寬全是實打實的數據。這一層數據差異決定了最終生成代碼的質量上限。1.2 Figma MCP讓 AI 看到設計稿的橋梁MCP 是 Anthropic 推出的一套開放協議目的是讓 AI 模型和各種數據源、工具標準化對接。Figma MCP 就是這個生態里的一個服務端插件它封裝了 Figma REST API 的常用能力通過標準化的工具接口暴露給 Claude Code 調用。當你在 Claude Code 里配置好 Figma MCP 后Claude 可以直接調用這樣一些能力讀取 Figma 文件的關鍵節點信息包括畫板、圖層、組、文本、矩形、矢量等所有對象的結構獲取每個圖層的絕對位置、寬高、背景色、圓角、邊框、陰影等樣式參數獲取文本內容、字體、字號、字重、行高、字間距把指定節點導出為圖片方便 AI 在不確定時進行視覺對照查詢文件內的樣式庫、組件庫信息。換句話說Figma MCP 就像給 Claude Code 裝了一只“眼睛加一把尺子”。它看到的不只是設計稿的像素而是結構化的、可以精確計算的對象樹。這也是標題里“一鍵生成 HTML”能成立的根本原因不是 AI 變聰明了而是它終于有了準確的數據源。1.3 這套組合替代了什么工作流傳統的人工切圖工作流通常是這樣走完的設計師在 Figma 里交付設計稿和標注或者前端自己打開設計稿量尺寸前端手動導出需要的圖標、圖片資源前端按照設計稿的坐標、間距、顏色逐模塊編寫 HTML 和 CSS反復調整響應式斷點、間距、字體和設計稿做像素級對比多個頁面重復以上過程越到后期越機械。用 Claude Code Figma MCP 之后步驟 1 到 3 的大部分工作被壓縮成了“寫提示詞”和“審查結果”。傳統上花 2 到 3 小時完成的一個活動頁落地現在可能 20 分鐘就能出一個結構完整、樣式合理的版本剩下的是精細化打磨。不過我必須先說句實話它并不是萬能魔法復雜交互、精細動效、業務邏輯還是要靠人來處理。但這套組合解決的是前端工作里占比最高的“靜態頁面還原”問題這一塊的效率提升是肉眼可見的。2. 環境準備從零搭建 Claude Code Figma MCP2.1 安裝 Claude Code 并完成基礎登錄Claude Code 需要 Node.js 環境建議使用 Node.js 20 及以上版本。如果你電腦上還沒裝 Node可以直接去 Node 官網下載 LTS 版本安裝完成后在終端里驗證一下node -v npm -v確認 Node 環境沒問題后全局安裝 Claude Codenpm install -g anthropic-ai/claude-code安裝完成后運行下面的命令啟動并登錄claude首次運行會讓你完成賬號認證可以選擇登錄 Claude 賬號或使用 Anthropic Console 生成的 API Key。登錄成功后會進入一個交互式的終端界面你可以在里面直接輸入自然語言指令。注意Claude Code 所在的終端環境最好保持網絡通暢因為它和 Anthropic 服務端之間是實時通信的。如果你在公司內網記得先確認網絡策略允許訪問相關域名。2.2 配置 Figma MCP 服務配置 Figma MCP 需要兩個東西一個是 MCP 服務本身另一個是 Figma 的訪問令牌。先去 Figma 官網的賬戶設置里創建一個 Personal Access Token。路徑是Figma 首頁頭像菜單 - Settings - Security - Personal access tokens - Generate new token。生成時建議把權限勾選為只讀Read因為我們只需要讀取設計稿不需要修改Token 創建后只會顯示一次務必立刻復制保存。拿到 Token 后在終端里通過 Claude Code 的 MCP 添加命令來注冊 Figma 服務claude mcp add figma -e FIGMA_API_KEY你的token npx figma-developer-mcp --stdio這條命令做了三件事給 MCP 服務起名叫figma把FIGMA_API_KEY作為環境變量注入到服務進程里然后通過 npx 啟動figma-developer-mcp這個官方 MCP 服務端。如果你不想把 Token 直接寫在命令里也可以先設置環境變量再添加服務。不同系統導出環境變量的方式略有差異但核心思路是一樣的保證 MCP 子進程能讀到FIGMA_API_KEY即可。配置完成后可以用下面的命令確認 MCP 服務狀態claude mcp list看到figma出現在列表里并且狀態為 connected就說明服務已經就緒。2.3 驗證連接讓 Claude 讀一次文件試試光配置成功還不夠一定要做一次真實讀取測試。這種跨工具的鏈路最常見的坑是配置看著正常、實際一調用就報錯。啟動 Claude Code 之后我建議先用最簡單的指令測試鏈路是否通暢請調用 Figma MCP 的工具獲取文件 https://www.figma.com/design/文件ID/文件名 的頁面畫板列表簡單描述一下有哪些頁面。這里的“文件ID”可以從 Figma 設計稿分享鏈接里找到通常是一串字母數字混排的字符串。如果 Claude 能返回畫板名稱和結構信息就說明 Token、MCP、網絡鏈路全部正常。如果這一步報錯優先檢查三處Token 是否復制完整有沒有多空格或少字符MCP 添加時使用的 npx 包名是否拼寫正確Claude Code 是否在項目目錄內啟動以及claude mcp list是否顯示 connected。3. 完整實操把設計稿變成 HTML 的 6 個關鍵步驟3.1 前置準備整理 Figma 圖層很多人第一步就栽在這里。直接從設計師手里拿到的 Figma 文件圖層組織往往非常隨性命名可能是“Frame 12345”“Group 2”“Rectangle 7”這種結構直接丟給 AI生成出來的 HTML 也很難讀。所以我在實際操作前會花幾分鐘做一次輕量整理不需要動設計本身只調整圖層名稱和嵌套關系每個頁面或功能模塊最外層統一叫Page-首頁Page-詳情之類的名字導航欄、輪播圖、商品卡片、頁腳這些大模塊直接命名成有含義的業務名讓兄弟節點層級清晰不要有太多無意義的嵌套組合。這不只是為了給 AI 提供好數據也是為了讓生成的 HTML 類名更貼近業務語義。Claude 讀到的圖層名是什么它傾向于直接在代碼里用對應的單詞做 class 名比如圖層叫product-card生成的 CSS 很可能就是.product-card這對后續維護非常友好。3.2 寫一條高質量的總控提示詞圖層整理完打開 Claude Code我通常會在項目目錄下創建或打開一個工作目錄然后輸入類似這樣的一段總控提示詞請使用 Figma MCP 讀取設計稿 https://www.figma.com/design/文件ID/文件名 中的「首頁」畫板。 要求 1. 將畫板還原為 HTML/CSS輸出結構語義化、CSS 使用 class 命名 2. 布局使用 Flexbox 和 Grid 實現不要用 Table 布局 3. 顏色、字體、間距、圓角盡量使用 Figma 中讀取到的原始參數 4. 字體優先使用系統字體棧不引入外部字體文件 5. 圖片資源用灰色占位塊代替并標注尺寸 6. 忽略裝飾性陰影和漸變保留主要的邊框和背景色 7. 生成一個 index.html 和 styles.css并分別說明關鍵模塊的實現方式。這段提示詞看起來很普通但每一行都是經驗的濃縮。第 1 條決定了輸出的代碼類型第 2 條避免 AI 生成過時的表格布局第 3 條是讓 AI 充分使用 MCP 拿到的精確數值第 4、5、6 條都是在控制變量減少不能直接落地的外部依賴第 7 條則是讓文件結構適合直接預覽。3.3 觀察 Claude 的“讀圖”過程當 Claude Code 開始執行時互動界面里會實時顯示它的工具調用記錄。你會看到類似這樣的動作流調用 Figma MCP 的get_file獲取文件結構定位到「首頁」畫板調用get_node獲取畫板下所有子節點的坐標、尺寸、樣式對關鍵文本節點調用查詢字體信息最后基于這些數據寫 HTML 和 CSS。我第一次跑這個過程的時候最直觀的感受是它真的知道設計稿里“標題在左邊、圖片在右邊、間距是 24px”而不是靠猜。當然Claude 在讀取超復雜文件時也可能漏掉一些子圖層這時候我會追加一條指令剛才生成的代碼里右側的產品卡片區域還是有誤差請重新讀取該區域對應的節點修正布局后再生成一次 styles.css。這種“局部重做”比全量重跑省太多時間。3.4 檢查生成的代碼并本地預覽Claude Code 生成完代碼后會在當前工作目錄下創建文件。這時候我在終端里啟動一個本地靜態服務器來預覽效果python3 -m http.server 8080然后在瀏覽器打開http://localhost:8080查看頁面。這一步目的是先看整體結構再看細節。如果發現布局錯位、字體大小不合理這些問題不要急著全量重寫直接把問題描述給 Claude讓它基于當前文件做修改。比如“index.html 里的 hero 區域圖片高度寫成了 100%右邊比設計稿高出一截請根據 Figma 的原始尺寸修正。”它通常能準確定位到對應代碼塊。3.5 微調整合并人工該管哪些事AI 生成完初步代碼后我會特別留意幾個 AI 容易翻車的地方文本截斷和換行Figma 里的文本是自適應的HTML 里可能因為容器寬度變化產生換行差異圖標和小切圖Figma 里用矢量繪制的圖標AI 可能把它導成圖片也可能生成一段 SVG 代碼需要人工看效果決定保留哪種交互狀態比如按鈕的 hover、點擊態AI 不會主動生成需要自己補語義化標簽AI 為了省事可能滿屏都是 div我會要求它重點區域替換成 header、nav、main、footer。說白了AI 負責把 80% 的靜態工作做完剩下 20% 的“審美判斷”和“交互增強”才是人工投入的地方。3.6 把生成結果轉成多頁面項目單個頁面做通以后自然要擴展到整站。我的做法是讓 Claude Code 逐個處理每個畫板每次生成一個頁面文件同時復用公共的 CSS 變量和組件樣式。繼續處理「商品列表頁」畫板復刻首頁已經使用的顏色變量和按鈕樣式生成 products.html并保持 styles.css 的原有變量命名方式。這樣積少成多幾天之內就能把一個 10 來個頁面的響應式官網骨架全部搭完。相比以前從 psd 或 figma 手搓十幾個頁面效率完全是兩個量級。4. 提示詞工程與樣式質量控制從“能出碼”到“能用”4.1 關鍵參數優先別讓 AI 自由發揮Claude 拿到的數據很多但它未必知道哪些參數對你更重要。如果你的設計稿里有特殊要求一定要在提示詞里明確優先級。舉例來說電商活動頁里最重要的是商品卡片的間距和促銷標簽的位置企業官網里最重要的是品牌色和標題字重。我看過不少人給的提示詞只有“生成這個頁面的 HTML”結果 AI 把次要的花哨效果做得特別足反而把關鍵參數丟了。建議每次在提示詞里加一句“以上參數中[顏色/間距/字號]最重要請優先保證精確還原”。還有一個技巧是給 AI 提供“正負樣本”。如果你發現某次生成的按鈕圓角太圓直接在提示詞里說“按鈕圓角不要超過 8px設計稿里的圓角是 6px請檢查 MCP 返回的數據。”這樣 Claude 會回去重新核對數據源而不是憑感覺改。4.2 用 CSS 變量鎖定設計規范一套頁面由 AI 分多次生成最容易出現的問題就是規范不統一第一頁的標題字號是 24px第二頁變成 26px主色在首頁是#2563EB在詳情頁變成#1D4ED8。我的解決方案是先用一個基礎畫板生成 CSS 變量后續所有頁面都基于這套變量來做:root { --color-primary: #2563EB; --color-bg: #F8FAFC; --font-title: 28px; --space-md: 16px; }并在每次處理新頁面時提示 Claude “所有顏色和間距必須引用 styles.css 里已有的變量不要新增無意義的硬編碼值”。這樣即使不同頁面由不同批次的對話生成最終視覺效果也是統一的。4.3 響應式設計要怎么交代Figma 設計稿通常只給一個寬度的設計稿比如桌面端 1440px但落地到 HTML 必須考慮平板和手機。這一塊 AI 不會自動變聰明你需要給它明確的斷點策略。我習慣在提示詞里這樣寫布局采用移動優先策略移動端 375px平板 768px桌面 1280px。在移動端所有多列布局改為單列導航欄變為漢堡菜單結構僅保留基礎樣式。這樣做的好處是 AI 不會自己發明奇怪的斷點值而是按你定的規則生成媒體查詢。等基礎頁面出來以后再讓 Claude 根據實際情況調整具體斷點比一開始就讓它“隨意響應式”要可控得多。4.4 圖片資源怎么處理最省心Figma MCP 有一個導出圖片的能力Claude 可以直接調用它把某個節點導出為 PNG 或 SVG。但是我不建議在大批量場景里這么做原因有三個導出的圖片不帶壓縮體積可能很大大批量導出會消耗 API 調用次數速度和成本都不劃算你未必需要位圖有些圖標用 CSS 或 SVG 手寫反而更輕。所以我在第一階段提示詞里統一要求“圖片資源用灰色占位塊代替并標注尺寸”。等 HTML 結構和樣式都確定后再單獨讓 Claude 調用導出工具把真正需要的幾個圖片節點導出到本地 images 目錄。這樣既保證了開發效率也避免了無效資源堆積。5. 常見問題與排查實錄5.1 Figma MCP 連接失敗或讀取超時這是最頻繁出現的問題。表現是 Claude 說“無法連接到 Figma MCP 服務”或者讀取文件時報錯超時。排查步驟按順序來運行claude mcp list確認 figma 服務狀態不是 failed檢查FIGMA_API_KEY是否還有效。Figma Token 偶爾會被撤銷或過期重新生成一個再添加一次即可檢查文件鏈接里的權限。MCP 讀取文件需要你的 Figma 賬號對該文件有訪問權限如果文件是別人分享的且只讀也要確認當前 Token 對應的賬號能訪問到如果單次文件過大、圖層數上萬讀取可能超時。這種時候不要一上來就讀取整個文件而是先讓 Claude 只讀指定畫板或指定節點。5.2 生成的 HTML 層級混亂AI 在處理復雜設計稿時有一定概率把嵌套關系搞亂常見表現是 Grid 和 Flex 混用導致元素錯位或者 CSS 類名全變成classframe-123這類沒有語義的名稱。遇到這種情況我一般不會讓它“再生成一次”而是讓它先輸出一份“結構說明”把讀到的圖層層級用文字列出來我再按業務模塊給你拆成清晰的 HTML 結構。比如請先列出「首頁」畫板的圖層樹按照視覺模塊分組然后基于這個分組結果重新生成 HTML 骨架保持模塊化。這樣等于把設計稿到代碼中間加了一層“業務翻譯”效果比盲目重試穩定得多。5.3 生成的樣式和設計稿偏差大多數偏差來源于 Claude 沒有真正讀取到樣式參數或者是讀到了但沒有被充分利用。這里可以強硬一點在提示詞里要求它對照數據逐項核對請逐項列出畫板里主要模塊的寬度、間距、字體、顏色然后對比當前 CSS 逐一說明哪些是一致的、哪些有偏差最后修正。這種“對照表”式的處理方式相當于讓 AI 做一次自查通常能修正掉絕大部分肉眼可見的偏差。如果某些設計語言特別微妙比如漸變、投影、磨砂玻璃效果老實說 AI 的還原度有限這部分我會選擇手動補充不跟它死磕。5.4 Token 消耗和速度控制技巧Figma 文件越大、圖層越多MCP 調用次數和上下文消耗就越多。長時間跑下來不僅速度變慢費用也會上升。我的習慣是先做小范圍驗證。先用一個只有幾個圖層的頁面測試整條鏈路確認可行后再處理復雜頁面同時分模塊處理而不是一次性把十幾個畫板全部喂給 Claude。生成過程中及時使用會話管理或 /compact 命令壓縮上下文避免對話太長影響后續輸出的準確性。5.5 交互和邏輯部分 AI 幫不了你必須認清楚邊界。Claude Code 善長的是把設計稿還原成靜態 HTML/CSS但它不會自動幫你實現表單校驗、數據請求、路由跳轉、狀態管理這些業務邏輯。它可以在你給出規則后幫你補充代碼但深層業務設計仍然需要你來主導。我的做法是讓 Claude 生成完成后把各個按鈕和表單提前留好> Claude Code + Figma MCP：一句話將設計稿自動轉成HTML
手動切圖這件事我在項目里干了五六年。過去一個設計稿落地成頁面流程大概是先在 Figma 里量尺寸、取色、導切圖再把圖片一張張拖進編輯器然后對著設計稿寫 div、寫 CSS、調間距一個小頁面磨一下午也是常有的事。直到我最近把 Claude Code 和 Figma MCP 接在一起這個流程被徹底壓縮成了“一句話”。在終端里輸入一條提示詞Claude 就能直接讀取 Figma 設計稿的圖層數據自己分析布局、提取顏色、生成 HTML 結構我只需要在后面做檢查和小修。這篇文章就把我這段時間從 0 到 1 的完整配置過程、核心提示詞寫法和踩過的坑全部整理出來給同樣在做前端落地、想解放雙手的人一份能直接照做的方案。1. 方案原理解析Claude Code 和 Figma MCP 是怎么串起來的1.1 Claude Code 到底是什么Claude Code 是 Anthropic 推出的命令行 AI 編程工具跑在終端里可以直接讀寫你本地項目文件、執行命令、調用外部工具。它和網頁版 ChatGPT、Claude 聊天窗口最大的區別在于“能動”你可以讓它打開某個文件、搜索某個函數、運行測試、修復報錯它會在你授權的范圍內真正操作這臺電腦。這一點很關鍵。之前大家用 AI 生成 HTML大多是復制設計稿截圖丟進網頁聊天框AI 只能通過“看圖”來猜布局猜出來的結果基本是四不像。Claude Code 不一樣它可以通過 MCPModel Context Protocol模型上下文協議直接訪問 Figma 的文件結構拿到的是設計稿的矢量信息、坐標、尺寸、顏色值、圖層名稱這些精確數據而不是一張模糊截圖。簡單做個類比網頁聊天框里的 AI 像一個隔著窗戶看房間的人能看見大概擺設但不知道尺寸接了 Figma MCP 的 Claude Code則是拿到了房間的施工圖紙每一面墻多高、每一件家具多寬全是實打實的數據。這一層數據差異決定了最終生成代碼的質量上限。1.2 Figma MCP讓 AI 看到設計稿的橋梁MCP 是 Anthropic 推出的一套開放協議目的是讓 AI 模型和各種數據源、工具標準化對接。Figma MCP 就是這個生態里的一個服務端插件它封裝了 Figma REST API 的常用能力通過標準化的工具接口暴露給 Claude Code 調用。當你在 Claude Code 里配置好 Figma MCP 后Claude 可以直接調用這樣一些能力讀取 Figma 文件的關鍵節點信息包括畫板、圖層、組、文本、矩形、矢量等所有對象的結構獲取每個圖層的絕對位置、寬高、背景色、圓角、邊框、陰影等樣式參數獲取文本內容、字體、字號、字重、行高、字間距把指定節點導出為圖片方便 AI 在不確定時進行視覺對照查詢文件內的樣式庫、組件庫信息。換句話說Figma MCP 就像給 Claude Code 裝了一只“眼睛加一把尺子”。它看到的不只是設計稿的像素而是結構化的、可以精確計算的對象樹。這也是標題里“一鍵生成 HTML”能成立的根本原因不是 AI 變聰明了而是它終于有了準確的數據源。1.3 這套組合替代了什么工作流傳統的人工切圖工作流通常是這樣走完的設計師在 Figma 里交付設計稿和標注或者前端自己打開設計稿量尺寸前端手動導出需要的圖標、圖片資源前端按照設計稿的坐標、間距、顏色逐模塊編寫 HTML 和 CSS反復調整響應式斷點、間距、字體和設計稿做像素級對比多個頁面重復以上過程越到后期越機械。用 Claude Code Figma MCP 之后步驟 1 到 3 的大部分工作被壓縮成了“寫提示詞”和“審查結果”。傳統上花 2 到 3 小時完成的一個活動頁落地現在可能 20 分鐘就能出一個結構完整、樣式合理的版本剩下的是精細化打磨。不過我必須先說句實話它并不是萬能魔法復雜交互、精細動效、業務邏輯還是要靠人來處理。但這套組合解決的是前端工作里占比最高的“靜態頁面還原”問題這一塊的效率提升是肉眼可見的。2. 環境準備從零搭建 Claude Code Figma MCP2.1 安裝 Claude Code 并完成基礎登錄Claude Code 需要 Node.js 環境建議使用 Node.js 20 及以上版本。如果你電腦上還沒裝 Node可以直接去 Node 官網下載 LTS 版本安裝完成后在終端里驗證一下node -v npm -v確認 Node 環境沒問題后全局安裝 Claude Codenpm install -g anthropic-ai/claude-code安裝完成后運行下面的命令啟動并登錄claude首次運行會讓你完成賬號認證可以選擇登錄 Claude 賬號或使用 Anthropic Console 生成的 API Key。登錄成功后會進入一個交互式的終端界面你可以在里面直接輸入自然語言指令。注意Claude Code 所在的終端環境最好保持網絡通暢因為它和 Anthropic 服務端之間是實時通信的。如果你在公司內網記得先確認網絡策略允許訪問相關域名。2.2 配置 Figma MCP 服務配置 Figma MCP 需要兩個東西一個是 MCP 服務本身另一個是 Figma 的訪問令牌。先去 Figma 官網的賬戶設置里創建一個 Personal Access Token。路徑是Figma 首頁頭像菜單 - Settings - Security - Personal access tokens - Generate new token。生成時建議把權限勾選為只讀Read因為我們只需要讀取設計稿不需要修改Token 創建后只會顯示一次務必立刻復制保存。拿到 Token 后在終端里通過 Claude Code 的 MCP 添加命令來注冊 Figma 服務claude mcp add figma -e FIGMA_API_KEY你的token npx figma-developer-mcp --stdio這條命令做了三件事給 MCP 服務起名叫figma把FIGMA_API_KEY作為環境變量注入到服務進程里然后通過 npx 啟動figma-developer-mcp這個官方 MCP 服務端。如果你不想把 Token 直接寫在命令里也可以先設置環境變量再添加服務。不同系統導出環境變量的方式略有差異但核心思路是一樣的保證 MCP 子進程能讀到FIGMA_API_KEY即可。配置完成后可以用下面的命令確認 MCP 服務狀態claude mcp list看到figma出現在列表里并且狀態為 connected就說明服務已經就緒。2.3 驗證連接讓 Claude 讀一次文件試試光配置成功還不夠一定要做一次真實讀取測試。這種跨工具的鏈路最常見的坑是配置看著正常、實際一調用就報錯。啟動 Claude Code 之后我建議先用最簡單的指令測試鏈路是否通暢請調用 Figma MCP 的工具獲取文件 https://www.figma.com/design/文件ID/文件名 的頁面畫板列表簡單描述一下有哪些頁面。這里的“文件ID”可以從 Figma 設計稿分享鏈接里找到通常是一串字母數字混排的字符串。如果 Claude 能返回畫板名稱和結構信息就說明 Token、MCP、網絡鏈路全部正常。如果這一步報錯優先檢查三處Token 是否復制完整有沒有多空格或少字符MCP 添加時使用的 npx 包名是否拼寫正確Claude Code 是否在項目目錄內啟動以及claude mcp list是否顯示 connected。3. 完整實操把設計稿變成 HTML 的 6 個關鍵步驟3.1 前置準備整理 Figma 圖層很多人第一步就栽在這里。直接從設計師手里拿到的 Figma 文件圖層組織往往非常隨性命名可能是“Frame 12345”“Group 2”“Rectangle 7”這種結構直接丟給 AI生成出來的 HTML 也很難讀。所以我在實際操作前會花幾分鐘做一次輕量整理不需要動設計本身只調整圖層名稱和嵌套關系每個頁面或功能模塊最外層統一叫Page-首頁Page-詳情之類的名字導航欄、輪播圖、商品卡片、頁腳這些大模塊直接命名成有含義的業務名讓兄弟節點層級清晰不要有太多無意義的嵌套組合。這不只是為了給 AI 提供好數據也是為了讓生成的 HTML 類名更貼近業務語義。Claude 讀到的圖層名是什么它傾向于直接在代碼里用對應的單詞做 class 名比如圖層叫product-card生成的 CSS 很可能就是.product-card這對后續維護非常友好。3.2 寫一條高質量的總控提示詞圖層整理完打開 Claude Code我通常會在項目目錄下創建或打開一個工作目錄然后輸入類似這樣的一段總控提示詞請使用 Figma MCP 讀取設計稿 https://www.figma.com/design/文件ID/文件名 中的「首頁」畫板。 要求 1. 將畫板還原為 HTML/CSS輸出結構語義化、CSS 使用 class 命名 2. 布局使用 Flexbox 和 Grid 實現不要用 Table 布局 3. 顏色、字體、間距、圓角盡量使用 Figma 中讀取到的原始參數 4. 字體優先使用系統字體棧不引入外部字體文件 5. 圖片資源用灰色占位塊代替并標注尺寸 6. 忽略裝飾性陰影和漸變保留主要的邊框和背景色 7. 生成一個 index.html 和 styles.css并分別說明關鍵模塊的實現方式。這段提示詞看起來很普通但每一行都是經驗的濃縮。第 1 條決定了輸出的代碼類型第 2 條避免 AI 生成過時的表格布局第 3 條是讓 AI 充分使用 MCP 拿到的精確數值第 4、5、6 條都是在控制變量減少不能直接落地的外部依賴第 7 條則是讓文件結構適合直接預覽。3.3 觀察 Claude 的“讀圖”過程當 Claude Code 開始執行時互動界面里會實時顯示它的工具調用記錄。你會看到類似這樣的動作流調用 Figma MCP 的get_file獲取文件結構定位到「首頁」畫板調用get_node獲取畫板下所有子節點的坐標、尺寸、樣式對關鍵文本節點調用查詢字體信息最后基于這些數據寫 HTML 和 CSS。我第一次跑這個過程的時候最直觀的感受是它真的知道設計稿里“標題在左邊、圖片在右邊、間距是 24px”而不是靠猜。當然Claude 在讀取超復雜文件時也可能漏掉一些子圖層這時候我會追加一條指令剛才生成的代碼里右側的產品卡片區域還是有誤差請重新讀取該區域對應的節點修正布局后再生成一次 styles.css。這種“局部重做”比全量重跑省太多時間。3.4 檢查生成的代碼并本地預覽Claude Code 生成完代碼后會在當前工作目錄下創建文件。這時候我在終端里啟動一個本地靜態服務器來預覽效果python3 -m http.server 8080然后在瀏覽器打開http://localhost:8080查看頁面。這一步目的是先看整體結構再看細節。如果發現布局錯位、字體大小不合理這些問題不要急著全量重寫直接把問題描述給 Claude讓它基于當前文件做修改。比如“index.html 里的 hero 區域圖片高度寫成了 100%右邊比設計稿高出一截請根據 Figma 的原始尺寸修正。”它通常能準確定位到對應代碼塊。3.5 微調整合并人工該管哪些事AI 生成完初步代碼后我會特別留意幾個 AI 容易翻車的地方文本截斷和換行Figma 里的文本是自適應的HTML 里可能因為容器寬度變化產生換行差異圖標和小切圖Figma 里用矢量繪制的圖標AI 可能把它導成圖片也可能生成一段 SVG 代碼需要人工看效果決定保留哪種交互狀態比如按鈕的 hover、點擊態AI 不會主動生成需要自己補語義化標簽AI 為了省事可能滿屏都是 div我會要求它重點區域替換成 header、nav、main、footer。說白了AI 負責把 80% 的靜態工作做完剩下 20% 的“審美判斷”和“交互增強”才是人工投入的地方。3.6 把生成結果轉成多頁面項目單個頁面做通以后自然要擴展到整站。我的做法是讓 Claude Code 逐個處理每個畫板每次生成一個頁面文件同時復用公共的 CSS 變量和組件樣式。繼續處理「商品列表頁」畫板復刻首頁已經使用的顏色變量和按鈕樣式生成 products.html并保持 styles.css 的原有變量命名方式。這樣積少成多幾天之內就能把一個 10 來個頁面的響應式官網骨架全部搭完。相比以前從 psd 或 figma 手搓十幾個頁面效率完全是兩個量級。4. 提示詞工程與樣式質量控制從“能出碼”到“能用”4.1 關鍵參數優先別讓 AI 自由發揮Claude 拿到的數據很多但它未必知道哪些參數對你更重要。如果你的設計稿里有特殊要求一定要在提示詞里明確優先級。舉例來說電商活動頁里最重要的是商品卡片的間距和促銷標簽的位置企業官網里最重要的是品牌色和標題字重。我看過不少人給的提示詞只有“生成這個頁面的 HTML”結果 AI 把次要的花哨效果做得特別足反而把關鍵參數丟了。建議每次在提示詞里加一句“以上參數中[顏色/間距/字號]最重要請優先保證精確還原”。還有一個技巧是給 AI 提供“正負樣本”。如果你發現某次生成的按鈕圓角太圓直接在提示詞里說“按鈕圓角不要超過 8px設計稿里的圓角是 6px請檢查 MCP 返回的數據。”這樣 Claude 會回去重新核對數據源而不是憑感覺改。4.2 用 CSS 變量鎖定設計規范一套頁面由 AI 分多次生成最容易出現的問題就是規范不統一第一頁的標題字號是 24px第二頁變成 26px主色在首頁是#2563EB在詳情頁變成#1D4ED8。我的解決方案是先用一個基礎畫板生成 CSS 變量后續所有頁面都基于這套變量來做:root { --color-primary: #2563EB; --color-bg: #F8FAFC; --font-title: 28px; --space-md: 16px; }并在每次處理新頁面時提示 Claude “所有顏色和間距必須引用 styles.css 里已有的變量不要新增無意義的硬編碼值”。這樣即使不同頁面由不同批次的對話生成最終視覺效果也是統一的。4.3 響應式設計要怎么交代Figma 設計稿通常只給一個寬度的設計稿比如桌面端 1440px但落地到 HTML 必須考慮平板和手機。這一塊 AI 不會自動變聰明你需要給它明確的斷點策略。我習慣在提示詞里這樣寫布局采用移動優先策略移動端 375px平板 768px桌面 1280px。在移動端所有多列布局改為單列導航欄變為漢堡菜單結構僅保留基礎樣式。這樣做的好處是 AI 不會自己發明奇怪的斷點值而是按你定的規則生成媒體查詢。等基礎頁面出來以后再讓 Claude 根據實際情況調整具體斷點比一開始就讓它“隨意響應式”要可控得多。4.4 圖片資源怎么處理最省心Figma MCP 有一個導出圖片的能力Claude 可以直接調用它把某個節點導出為 PNG 或 SVG。但是我不建議在大批量場景里這么做原因有三個導出的圖片不帶壓縮體積可能很大大批量導出會消耗 API 調用次數速度和成本都不劃算你未必需要位圖有些圖標用 CSS 或 SVG 手寫反而更輕。所以我在第一階段提示詞里統一要求“圖片資源用灰色占位塊代替并標注尺寸”。等 HTML 結構和樣式都確定后再單獨讓 Claude 調用導出工具把真正需要的幾個圖片節點導出到本地 images 目錄。這樣既保證了開發效率也避免了無效資源堆積。5. 常見問題與排查實錄5.1 Figma MCP 連接失敗或讀取超時這是最頻繁出現的問題。表現是 Claude 說“無法連接到 Figma MCP 服務”或者讀取文件時報錯超時。排查步驟按順序來運行claude mcp list確認 figma 服務狀態不是 failed檢查FIGMA_API_KEY是否還有效。Figma Token 偶爾會被撤銷或過期重新生成一個再添加一次即可檢查文件鏈接里的權限。MCP 讀取文件需要你的 Figma 賬號對該文件有訪問權限如果文件是別人分享的且只讀也要確認當前 Token 對應的賬號能訪問到如果單次文件過大、圖層數上萬讀取可能超時。這種時候不要一上來就讀取整個文件而是先讓 Claude 只讀指定畫板或指定節點。5.2 生成的 HTML 層級混亂AI 在處理復雜設計稿時有一定概率把嵌套關系搞亂常見表現是 Grid 和 Flex 混用導致元素錯位或者 CSS 類名全變成classframe-123這類沒有語義的名稱。遇到這種情況我一般不會讓它“再生成一次”而是讓它先輸出一份“結構說明”把讀到的圖層層級用文字列出來我再按業務模塊給你拆成清晰的 HTML 結構。比如請先列出「首頁」畫板的圖層樹按照視覺模塊分組然后基于這個分組結果重新生成 HTML 骨架保持模塊化。這樣等于把設計稿到代碼中間加了一層“業務翻譯”效果比盲目重試穩定得多。5.3 生成的樣式和設計稿偏差大多數偏差來源于 Claude 沒有真正讀取到樣式參數或者是讀到了但沒有被充分利用。這里可以強硬一點在提示詞里要求它對照數據逐項核對請逐項列出畫板里主要模塊的寬度、間距、字體、顏色然后對比當前 CSS 逐一說明哪些是一致的、哪些有偏差最后修正。這種“對照表”式的處理方式相當于讓 AI 做一次自查通常能修正掉絕大部分肉眼可見的偏差。如果某些設計語言特別微妙比如漸變、投影、磨砂玻璃效果老實說 AI 的還原度有限這部分我會選擇手動補充不跟它死磕。5.4 Token 消耗和速度控制技巧Figma 文件越大、圖層越多MCP 調用次數和上下文消耗就越多。長時間跑下來不僅速度變慢費用也會上升。我的習慣是先做小范圍驗證。先用一個只有幾個圖層的頁面測試整條鏈路確認可行后再處理復雜頁面同時分模塊處理而不是一次性把十幾個畫板全部喂給 Claude。生成過程中及時使用會話管理或 /compact 命令壓縮上下文避免對話太長影響后續輸出的準確性。5.5 交互和邏輯部分 AI 幫不了你必須認清楚邊界。Claude Code 善長的是把設計稿還原成靜態 HTML/CSS但它不會自動幫你實現表單校驗、數據請求、路由跳轉、狀態管理這些業務邏輯。它可以在你給出規則后幫你補充代碼但深層業務設計仍然需要你來主導。我的做法是讓 Claude 生成完成后把各個按鈕和表單提前留好>