1. 為什么設(shè)計稿還原總是差那么幾像素做前端的朋友大概率都遇到過這種場景Figma 里設(shè)計師把間距調(diào)成 24px字體行高 1.5圓角 12px陰影帶一點藍調(diào)。你打開編輯器一邊看設(shè)計稿一邊量量完寫 CSS寫完發(fā)現(xiàn)按鈕位置偏了 3px卡片陰影顏色不對移動端一縮放整個布局又塌了。改完一輪設(shè)計師說“還是差一點”于是再來一輪。問題不在于你不細心而在于手動搬運設(shè)計信息這件事本身就容易丟精度。設(shè)計稿里的顏色、間距、字號、圓角、陰影、圖層層級這些數(shù)據(jù)在 Figma 里是結(jié)構(gòu)化的但到了你手里就變成了“目測 取色器 標尺”。中間任何一次目測都會引入誤差。Cursor Figma MCP 想解決的就是這個鏈路問題。它讓 Cursor 通過 MCP 協(xié)議直接讀取 Figma 設(shè)計稿的結(jié)構(gòu)化數(shù)據(jù)而不是靠截圖猜。你選中一個 Frame把鏈接丟給 Cursor它拿到的是這個 Frame 里每個圖層的真實屬性fills、strokes、cornerRadius、itemSpacing、fontSize、fontWeight、lineHeight、effects。然后它按這些數(shù)值生成 HTML CSS理論上可以做到 1:1。這套流程適合誰適合已經(jīng)在用 Cursor 寫代碼、手頭有 Figma 設(shè)計稿、并且希望把“還原”這件事從手工活變成半自動化的前端開發(fā)者。你不需要會寫 MCP 服務(wù)也不需要懂 Figma 插件開發(fā)只要會配 JSON、會復制鏈接、會看瀏覽器 DevTools 就夠了。我試過用這套鏈路還原一個 SaaS 落地頁的 Hero 區(qū)塊從選中 Frame 到瀏覽器里看到成品大概 10 分鐘出頭。中間踩過的坑主要集中在 MCP 配置和 Token 權(quán)限上下面會把每一步拆開講清楚。2. TaoToken 統(tǒng)一 Key 與 Figma MCP 前置準備在講 Cursor 怎么連 Figma MCP 之前先解決一個容易被忽略的問題Cursor 里的 AI 請求走哪條通道。Cursor 自帶的模型調(diào)用有時候會因為網(wǎng)絡(luò)或額度問題不穩(wěn)定尤其是你在國內(nèi)做開發(fā)、又需要頻繁讓 AI 讀設(shè)計稿生成代碼的時候請求一斷整個還原流程就卡住了。我的做法是把 Cursor 的模型請求統(tǒng)一走 TaoToken 的 API。TaoToken 提供的是一個兼容 OpenAI 風格的接口你拿到一個統(tǒng)一 Key就可以在 Cursor 里配置自定義模型端點。這樣做的直接好處是不管你在 Cursor 里用哪個模型做代碼生成請求都走同一個入口不會因為某個默認通道抽風而中斷。2.1 先拿 TaoToken 的 Key打開 TaoToken 官網(wǎng)注冊登錄后進控制臺在 API Keys 頁面創(chuàng)建一個新 Key。這個 Key 就是后面要填到 Cursor 里的憑證。創(chuàng)建的時候注意兩點一是權(quán)限選默認的對話和代碼生成權(quán)限即可不需要開額外的高危權(quán)限二是創(chuàng)建后立刻復制保存頁面刷新后就不再完整顯示了。拿到 Key 之后你還需要確認一下要用的模型 ID。TaoToken 的模型列表里做代碼生成比較穩(wěn)的是 Claude 系列和 GPT 系列具體用哪個看你項目習慣。我一般用 Claude 做前端代碼生成因為它對 HTML/CSS 結(jié)構(gòu)的理解比較細生成的語義化標簽更規(guī)范。2.2 在 Cursor 里配置自定義模型端點打開 Cursor進 Settings找到 Models 這一欄。在 OpenAI API Key 區(qū)域把 TaoToken 的 Key 填進去。然后在 Override OpenAI Base URL 里填 TaoToken 的 API 地址{ openai_api_key: sk-你的TaoTokenKey, openai_base_url: https://taotoken.net/api, model: claude-3-5-sonnet-20241022 }注意 Base URL 后面不要加/v1TaoToken 的接口路徑已經(jīng)處理好了。填完之后點 Verify如果顯示連接成功說明 Cursor 的模型請求已經(jīng)走 TaoToken 了。這一步做完你在 Cursor 里讓 AI 生成代碼時請求就不會再走默認通道穩(wěn)定性會好很多。尤其是后面要讓 AI 反復讀 Figma 數(shù)據(jù)、生成大段 HTML 的時候這個前置配置能省掉不少“請求超時”的糟心事。2.3 Figma 側(cè)的權(quán)限準備Figma 這邊你需要一個 Personal Access Token。進 Figma 賬號設(shè)置找到 Security 標簽頁往下拉到 Personal Access Tokens點 Generate new token。權(quán)限只需要勾File content的讀取權(quán)限其他都不用開。生成后復制這個 Token后面配 MCP 服務(wù)的時候要用。另外確認一下你的 Figma 設(shè)計稿是“可訪問”狀態(tài)。如果是團隊文件確保你的賬號有至少 view 權(quán)限如果是社區(qū)文件先 Duplicate 到自己的 drafts 里再操作否則 MCP 服務(wù)讀不到數(shù)據(jù)。Node.js 環(huán)境也要確認一下終端里跑node --version npm --version版本要求 Node ≥ 18npm ≥ 9。如果版本太低MCP 服務(wù)啟動會報錯。3. 可復制的 Figma MCP 配置片段與 Cursor 接入這一節(jié)是整篇的核心操作部分。Figma MCP 的服務(wù)端目前社區(qū)里比較常用的是figma-context-mcp這個包它做的事情就是接收 Cursor 發(fā)來的 Figma 鏈接調(diào)用 Figma API 拉取該節(jié)點的結(jié)構(gòu)化數(shù)據(jù)再返回給 Cursor 的 AI 模型。3.1 安裝 MCP 服務(wù)在終端里全局安裝或者用 npx 直接跑都可以。我習慣用 npx省得管全局包版本npx -y figma-context-mcplatest第一次跑的時候它會提示你缺FIGMA_API_KEY環(huán)境變量。你可以直接在命令前面帶上FIGMA_API_KEY你的FigmaToken npx -y figma-context-mcplatest但更推薦的做法是寫到 Cursor 的 MCP 配置文件里這樣每次啟動 Cursor 會自動拉起服務(wù)不用手動跑命令。3.2 Cursor MCP 配置文件Cursor 的 MCP 配置放在用戶目錄下的.cursor/mcp.json。如果你之前沒配過 MCP這個文件可能不存在手動創(chuàng)建即可。路徑是macOS / Linux~/.cursor/mcp.jsonWindowsC:\Users\你的用戶名\.cursor\mcp.json文件內(nèi)容如下直接復制改 Token 就能用{ mcpServers: { figma: { command: npx, args: [ -y, figma-context-mcplatest ], env: { FIGMA_API_KEY: figd_你的FigmaPersonalAccessToken } } } }保存后重啟 Cursor。重啟之后打開 Cursor 的 MCP 面板一般在側(cè)邊欄或者命令面板里搜 “MCP”你應(yīng)該能看到figma這個服務(wù)狀態(tài)是綠色的 running。如果顯示紅色或者一直轉(zhuǎn)圈說明服務(wù)沒起來去第 5 節(jié)看排錯。3.3 如果你用 Claude Code 或 Codex 的配置對照有些朋友可能同時在用 Claude Code 或者 Codex CLI。這兩者的 MCP 配置邏輯類似但文件位置不同。Claude Code 的 MCP 配置在~/.claude/claude_desktop_config.jsonCodex 的在~/.codex/auth.json同級的配置里。不管用哪個核心三件套是一樣的配置項值Base URLhttps://taotoken.net/apiAPI KeyTaoToken 控制臺創(chuàng)建的 KeyModel ID例如claude-3-5-sonnet-20241022如果你在 Cursor 里同時配了 TaoToken 和 Figma MCP那么 AI 生成代碼的請求走 TaoToken讀取設(shè)計稿的請求走 Figma MCP兩條鏈路互不干擾。3.4 驗證 MCP 是否連通配置完重啟 Cursor 后新建一個空項目在 AI 聊天面板里輸入figma 列出當前可用的工具如果 MCP 正常Cursor 會返回 Figma MCP 提供的工具列表一般包括get_figma_data和download_figma_images這兩個。看到這個列表就說明鏈路通了。如果提示找不到figma說明 MCP 服務(wù)沒注冊成功回到 3.2 檢查 JSON 格式和 Token。4. 從 Figma 鏈接到 1:1 頁面的完整驗證請求配置通了之后真正的還原流程其實很直接選 Frame、復制鏈接、丟給 Cursor、生成代碼、瀏覽器比對。但中間有幾個細節(jié)決定了你能不能做到“1:1”而不是“差不多”。4.1 在 Figma 里選中正確的節(jié)點打開你的設(shè)計稿找到要還原的區(qū)塊。注意不要只選里面的某個按鈕或某段文字要選整個 Frame。判斷方法點擊區(qū)塊的空白背景處如果左側(cè)圖層面板高亮的是那個 Frame 名稱就對了。然后右鍵選Copy link to selection。這個鏈接里帶了一個node-id參數(shù)MCP 服務(wù)就是靠這個參數(shù)定位到具體節(jié)點的。鏈接格式大概長這樣https://www.figma.com/file/xxxxx/DesignName?node-id12%3A345node-id后面的12:345就是節(jié)點 IDMCP 會用它去調(diào) Figma API。4.2 在 Cursor 里發(fā)起生成請求新建一個index.html然后在 Cursor 的 Composer 面板CmdI / CtrlI里粘貼鏈接和提示詞。提示詞我一般這么寫figma 請根據(jù)這個 Figma 鏈接1:1 像素級還原該 Frame生成響應(yīng)式 HTML Tailwind CSS 代碼。 要求 1. 顏色、間距、字體、圓角、陰影嚴格按設(shè)計稿數(shù)值不要近似 2. 使用語義化標簽結(jié)構(gòu)清晰 3. 支持移動端、平板、PC 三檔響應(yīng)式 4. 圖片資源用 download_figma_images 工具下載到本地 images 目錄路徑用相對路徑 5. 生成后可直接在瀏覽器打開預(yù)覽。 Figma 鏈接https://www.figma.com/file/xxxxx/DesignName?node-id12%3A345發(fā)送后Cursor 會先調(diào)get_figma_data拉取節(jié)點數(shù)據(jù)然后根據(jù)返回的 JSON 生成代碼。這個過程大概 1 到 3 分鐘取決于區(qū)塊復雜度。你可以在 Cursor 的輸出面板里看到 MCP 調(diào)用的日志確認它確實讀到了 Figma 數(shù)據(jù)而不是在瞎編。4.3 驗證生成結(jié)果是否 1:1代碼生成后保存index.html雙擊在瀏覽器打開。然后打開 DevTools用元素檢查器逐個比對選中一個按鈕看padding是不是和 Figma 里itemSpacing一致看border-radius是不是等于cornerRadius看box-shadow的模糊半徑和顏色是不是和effects里的dropShadow一致看字體font-size、line-height、font-weight是不是和文本圖層的屬性一致。如果發(fā)現(xiàn)某個值差了 1px 或顏色偏了一點大概率是 Figma 里那個圖層沒有用 Style 定義而是手動填的數(shù)值。手動數(shù)值 MCP 也能讀到但有時候會因為浮點數(shù)精度問題出現(xiàn)23.999這種值生成代碼時被四舍五入成 24看起來一樣但如果你要求絕對精確可以在提示詞里加一句“保留原始數(shù)值不要四舍五入”。4.4 響應(yīng)式斷點驗證生成代碼后在瀏覽器里按 F12 打開設(shè)備模擬器依次切到 iPhone、iPad、桌面三檔寬度。重點看導航欄在移動端有沒有折疊成漢堡菜單卡片網(wǎng)格有沒有從三列變兩列再變一列文字有沒有溢出容器圖片有沒有被拉伸變形。如果移動端布局亂了大概率是 Figma 里沒有開 Auto Layout或者開了但約束沒設(shè)對?；氐?Figma 里給 Frame 加上 Auto Layout設(shè)置好Fill container和Hug contents再重新生成一次。5. 常見報錯排查401、local proxy failed 與 reading choices這一節(jié)列幾個我實際踩過的報錯以及對應(yīng)的解決動作。你遇到的大概率也跑不出這幾個。5.1 401 Unauthorized這是最常見的。MCP 服務(wù)啟動后Cursor 調(diào) Figma API 返回 401說明 Figma Token 無效或者權(quán)限不夠。排查順序檢查mcp.json里的FIGMA_API_KEY是不是完整復制了有沒有多空格或少字符進 Figma 賬號設(shè)置確認這個 Token 還在沒有被 revoke確認 Token 的權(quán)限勾了File content的 read如果設(shè)計稿是團隊文件確認你的 Figma 賬號有訪問權(quán)限。改完 Token 后一定要完全退出 Cursor 再重啟不是關(guān)窗口是退出進程。因為 MCP 服務(wù)是在 Cursor 啟動時拉起的不重啟不會重新讀配置。5.2 local proxy failed這個報錯一般出現(xiàn)在 Cursor 的模型請求上不是 Figma MCP 的問題。意思是 Cursor 嘗試走本地代理連模型端點但代理沒起來或者端口被占。如果你已經(jīng)把 Cursor 的 Base URL 改成了 TaoToken 的地址這個報錯應(yīng)該會消失。如果還在檢查 Settings 里的 Override OpenAI Base URL 是不是填成了https://taotoken.net/api而不是帶/v1的地址。另外確認你的網(wǎng)絡(luò)環(huán)境能正常訪問 TaoToken 的 API可以在終端里 curl 一下curl -I https://taotoken.net/api返回 200 或 401 都說明網(wǎng)絡(luò)通401 只是沒帶 Key 而已。5.3 reading choices 報錯這個報錯通常長這樣Cannot read properties of undefined (reading choices)。原因是 Cursor 期望模型返回 OpenAI 格式的choices數(shù)組但實際返回的結(jié)構(gòu)不對。排查確認 TaoToken 的 Base URL 填對了沒有多余路徑確認模型 ID 是 TaoToken 支持的不要填一個不存在的模型名如果用的是 Claude 模型確認 TaoToken 那邊已經(jīng)開通了對應(yīng)權(quán)限。改完配置后重啟 Cursor再發(fā)一次請求。5.4 OAuth 相關(guān)報錯如果你在 Figma 那邊用的是 OAuth 而不是 Personal Access Token可能會遇到OAuth token expired或invalid_grant。Figma 的 OAuth token 有有效期過期后需要重新授權(quán)。最省事的做法是直接用 Personal Access Token它不會過期除非你手動 revoke。5.5 MCP 服務(wù)啟動失敗如果 Cursor 的 MCP 面板里 figma 服務(wù)一直是紅色先看 Cursor 的日志。日志里一般會寫npx找不到或者figma-context-mcp安裝失敗。解決npm cache clean --force npx -y figma-context-mcplatest --help如果--help能跑通說明包沒問題是 Cursor 的環(huán)境變量沒傳進去。檢查mcp.json的env字段確認 Key 名是FIGMA_API_KEY大小寫不能錯。6. 把還原流程固化下來的幾個實用動作配置跑通之后真正提升效率的不是“能生成代碼”而是“每次生成都穩(wěn)定、可復用”。我一般會做這幾件事。第一把常用的提示詞存成 Cursor 的 snippet。比如“1:1 還原 Tailwind 響應(yīng)式 圖片本地化”這一套每次不用重新打直接調(diào) snippet。第二在項目里建一個design-tokens.json讓 AI 在生成代碼前先從 Figma 里提取顏色和字體寫到這個文件里。后續(xù)所有組件都從這個文件讀變量改設(shè)計規(guī)范的時候只改一處。第三圖片下載這一步不要省。MCP 的download_figma_images工具會把 Figma 里的圖片資源拉到本地images目錄生成代碼時用相對路徑引用。這樣你部署的時候不會因為 Figma 的臨時鏈接失效而掛圖。第四生成完代碼后用瀏覽器 DevTools 的“覆蓋層”功能做一次像素比對。Chrome 有個 Figma 插件可以把設(shè)計稿疊在頁面上透明度調(diào)到 50%一眼就能看出哪里偏了。偏了的地方把具體數(shù)值反饋給 Cursor讓它局部重生成不用整個區(qū)塊重來。這套流程跑順之后一個 Hero 區(qū)塊從選中到瀏覽器驗證10 分鐘左右能搞定。復雜一點的落地頁分區(qū)塊生成再拼接兩三個小時也能完成。關(guān)鍵是每次生成的代碼結(jié)構(gòu)一致后續(xù)維護不會因為“這次是 AI 生成的”而變得不可讀。