還在手動從設計稿提取樣式、編寫基礎代碼？試試 Cursor IDE 的模型上下文協(xié)議（MCP）功能吧。通過使用 MCP Server - Figma-Context-MCP，自動將你的 Figma 設計稿轉換為整潔的前端代碼，并生成相應的網頁。簡單高效，無需復雜配置，跟隨文中的步驟操作，即可體驗智能化的設計交付。讓我們開始吧！

1. 演示環(huán)境

本教程中使用的系統(tǒng)環(huán)境如下：

• Cursor版本：0.50.6 老版本可能不支持mcp功能（也可以選擇使用cursorTrae IDE 工具）
• macOS 版本：14.7 （windows也可以）
• Node.js 版本：20.19.1
• npx 版本：10.9.2
• Python 版本：3.13.3
• uvx 版本：0.6.16

2. 操作步驟

使用IDE工具創(chuàng)建項目然后添加 MCP Server - Figma-Context-MCP，配置.cursorrules，復制figma中設計稿的url地址，然后跟模型對話自動生成前端頁面。

第一步：安裝 Cursor IDE

Cursor IDE 與 AI 深度集成，提供智能問答、代碼自動補全以及基于 Agent 的 AI 自動編程能力。使用 Cursor 開發(fā)項目時，你可以與 AI 靈活協(xié)作，提升開發(fā)效率。前往 Cursor官網，下載 Cursor IDE 的安裝包，然后將其安裝至你的計算機。

第二步：配置 MCP Sever 的運行環(huán)境

這里如果使用sse模式的mcp server則可以不安裝運行環(huán)境，魔塔社區(qū)的ModelScope MCP 廣場有大量的mcp server可以選擇使用，https://modelscope.cn/mcp，本文使用stdio模式，為了正常啟動本地的 MCP Server，你需要安裝以下依賴：

• npx：依賴于 Node.js，版本需大于等于 18。
• uvx：命令行工具，用于快速運行 Python 腳本。

首先，為便于后續(xù)通過命令行安裝依賴，讓我們在 Cursor IDE 中打開終端。步驟如下：

1. 啟動 Cursor IDE。
2. 在頂部菜單欄中，點擊 終端 > 新建終端。

img

界面底部顯示 終端 面板。

img

打開終端后，使用以下步驟安裝 uvx：

（1）前往 Python 官網，下載并安裝 Python 3.8 或更高版本。

（2）安裝完成后，在終端中執(zhí)行以下命令確認是否安裝成功。

python3 --version

若安裝成功，終端中會輸出已安裝的 Python 的版本號。

（3）執(zhí)行以下命令，安裝 uv（包含 uvx）。

• macOS / Linux 安裝命令：

curl -LsSf https://astral.sh/uv/install.sh | sh

• Windows 安裝命令（PowerShell）：

powershell -ExecutionPolicy ByPass -c "irm https://astral.sh/uv/install.ps1 | iex"

1. 執(zhí)行 source $HOME/.local/bin/env 命令，加載 uvx 所需的運行時環(huán)境變量和初始化配置。
2. 執(zhí)行以下命令，驗證是否安裝成功。

img

若安裝成功，終端中會輸出已安裝的 uvx 的版本號。

uvx 安裝完成后，使用以下步驟安裝 Node.js：

（1）請前往 Node.js 官網，下載并安裝 Node.js 18 或更高版本。

（2）安裝完成后，在終端中運行以下命令確認是否安裝成功。

node -v
npx -v

若安裝成功，終端中會輸出已安裝的 Node.js 的版本號，例如：

（3）重啟 Trae IDE 以使 Node.js 生效。

第三步：獲取 Figma 的 Access Token

配置 Figma AI Bridge 時，需要填入你的 Figma Personal Acccess Token。你可以在 Figma 安全設置中心獲取它。步驟如下：

（1）登錄 Figma。

（2）點擊頁面左上角的用戶頭像，然后在菜單中選擇 Settings。

img

界面上顯示設置窗口。

（1）在窗口的頂部菜單中，選擇 Security。

img

你已進入安全設置面板。

（1）移動至 Personal access tokens 部分，然后點擊 Generate new token 按鈕。

界面上顯示 Generate new token 彈窗。

img

配置你的 Figma Personal Access Token：

輸入 Token 的名稱。

設置 Token 的有效期。

配置 Token 的權限。直接復用下表中的配置：

1. 點擊窗口底部的 Generate token 按鈕。

Figma Personal Access Token 已生成，你會在后續(xù)配置 MCP Server - Figma AI Bridge 時用到它。

img

第四步：添加 MCP Server - Figma AI Bridge

（1）打開 Cursor IDE，Preference中打開Cursor Settings。

img

（2）打開Cursor Settings，然后在菜單中選擇 MCP。

（3）在 MCP 頁簽中，點擊 + Add new global MCP server按鈕。

img

• MacOS / Linux

{
  "mcpServers": {
    "Framelink Figma MCP": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}

• Windows

img

• 然后等待安裝完成之后變綠就代表可以使用了

img

• 點擊Features，勾選Enable auto-run mode，則可以在ai對話的時候讓agent使用mcp中的tools

img

第五步：打開或者創(chuàng)建項目添加rule

為了該項目按照規(guī)定的開發(fā)場景的編程助手。你可以創(chuàng)建自定義.cursorrules，通過靈活配置提示詞和工具集，使其更高效地幫你完成復雜任務。

• 在項目目錄創(chuàng)建.cursorrules。

# Role
你是一名精通網頁開發(fā)的高級工程師,擁有20年的前端開發(fā)經驗。你的任務是幫助一位不太懂技術的初中生用戶完成網頁的開發(fā)。你的工作對用戶來說非常重要,完成后將獲得10000美元獎勵。
# Goal
你的目標是以用戶容易理解的方式幫助他們完成網頁的設計和開發(fā)工作。你應該主動完成所有工作,而不是等待用戶多次推動你。
在理解用戶需求、編寫代碼和解決問題時,你應始終遵循以下原則:
##第一步:項目初始化
-當用戶提出任何需求時,首先瀏覽項目根目錄下的README,md文件和所有代碼文檔,理解項目目標、架構和實現(xiàn)方式。
-如果還沒有README 文件,創(chuàng)建一個。這個文件將作為項目功能的說明書和你對項目內容的規(guī)劃。
-在README.md中清晰描述所有頁面的用途、布局結構、樣式說明等,確保用戶或以輕松理解網頁的結構和樣式。
##第二步:需求分析和開發(fā)
###理解用戶需求時:
-充分理解用戶需求,站在用戶角度思考。
-作為產品經理,分析需求是否存在缺漏,與用戶討論并完善需求。
-選擇最簡單的解決方案來滿足用戶需求。
###編寫代碼時:
-總是優(yōu)先使用HTML5和CSS 進行開發(fā),不使用復雜的框架和語言。
-使用語義化的HTML 標簽,確保代碼結構清晰。
-采用響應式設計,確保在不同設備上都能良好顯示。
-使用CSS Flexbox和 Grid布局實現(xiàn)頁面結構。
-每個 HTML 結構和CSS樣式都要添加詳細的中文注釋。
-確保代碼符合W3C 標準規(guī)范。
-優(yōu)化圖片和媒體資源的加載。
### 解決問題時:
-全面閱讀相關 HTML和CSS文件,理解頁面結構和樣式。
-分析顯示異常的原因,提出解決問題的思路。
-與用戶進行多次交互,根據反饋調整頁面設計。
##第三步:項目總結和優(yōu)化
-完成任務后,反思完成步驟,思考項目可能存在的問題和改進方式。
-更新README.md文件,包括頁面結構說明和優(yōu)化建議。
-考慮使用 HTML5 的高級特性,如Canvas、SVG等。
-優(yōu)化頁面加載性能□包括CSS壓縮和圖片優(yōu)化。
-確保網頁在主流瀏覽器中都能正常顯示。
在整個過程中,確保使用最新的HTML5 和CSS開發(fā)最佳實踐。

img

第六步：開啟對話，完成設計需求

在上一環(huán)節(jié)中，配置完成之后，Cursor IDE 會將你引導至 AI 對話框，并默認選用你可以與該智能體對話，輸入 Figma 設計稿的地址，然后描述你的需求，讓智能體創(chuàng)建相應的前端頁面。

本教程使用的是Cursor自帶的gpt-4.1模型（免費的有一定額度）

• 前往 Figma 設計稿頁面，選中設計稿并右擊，然后在菜單中選擇 Copy/Paste as > Copy link to selection。

已復制該設計稿的鏈接。

img

• 在 AI 對話輸入框中，粘貼所復制的設計稿的鏈接。
• 在設計稿鏈接的標簽后輸入你的需求并發(fā)送。例如：“請嚴格按照我提供的 Figma 鏈接內容生成 HTML 前端頁面。UI 要嚴格還原設計稿，需要實現(xiàn)響應式設計”。

img

agent開始調用Figma MCP中的工具和服務，讀取設計稿的內容，自動生成文件，填入前端代碼，并生成一個 index.html 文件供你預覽效果。以下輸出過程供參考：

img

• 智能體完成輸出后，雙擊文件夾中的 index.html 文件，在瀏覽器中預覽效果。

img

• 持續(xù)與智能體對話，優(yōu)化前端頁面，直至達到讓你滿意的效果。

3. 參考信息

Figma-Context-MCP這個mcp server是github上開源的，主要的tools能力如下：

4. 了解更多

個人覺得由于當前mcp server+ai 大模型還是會存在一些幻覺問題，不太適合完全不懂前端代碼的設計直接生成，因為生成的代碼還是需要微調，才能達到設計稿的的效果，這里推薦一個更好的工具藍湖來進行代碼生成，效果會更好一點

若想了解更多模型上下文協(xié)議（MCP）和智能體的相關信息，參閱以下文檔：

• 模型上下文協(xié)議：  https://modelcontextprotocol.io/introduction
• gi thub上figma-mcp-server倉庫：https://github.com/GLips/Figma-Context-MCP
• Trae IDE也可以達到一樣的效果，參考文檔：https://docs.trae.com.cn/ide/tutorial-mcp-figma