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

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)建項(xiàng)目然后添加 MCP Server - Figma-Context-MCP，配置.cursorrules，復(fù)制figma中設(shè)計(jì)稿的url地址，然后跟模型對(duì)話自動(dòng)生成前端頁面。

第一步：安裝 Cursor IDE

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

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

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

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

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

1. 啟動(dòng) Cursor IDE。
2. 在頂部菜單欄中，點(diǎn)擊 終端 > 新建終端。

img

界面底部顯示 終端 面板。

img

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

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

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

python3 --version

若安裝成功，終端中會(huì)輸出已安裝的 Python 的版本號(hào)。

（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 所需的運(yùn)行時(shí)環(huán)境變量和初始化配置。
2. 執(zhí)行以下命令，驗(yàn)證是否安裝成功。

img

若安裝成功，終端中會(huì)輸出已安裝的 uvx 的版本號(hào)。

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

（1）請(qǐng)前往 Node.js 官網(wǎng)，下載并安裝 Node.js 18 或更高版本。

（2）安裝完成后，在終端中運(yùn)行以下命令確認(rèn)是否安裝成功。

node -v
npx -v

若安裝成功，終端中會(huì)輸出已安裝的 Node.js 的版本號(hào)，例如：

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

第三步：獲取 Figma 的 Access Token

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

（1）登錄 Figma。

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

img

界面上顯示設(shè)置窗口。

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

img

你已進(jìn)入安全設(shè)置面板。

（1）移動(dòng)至 Personal access tokens 部分，然后點(diǎn)擊 Generate new token 按鈕。

界面上顯示 Generate new token 彈窗。

img

配置你的 Figma Personal Access Token：

輸入 Token 的名稱。

設(shè)置 Token 的有效期。

配置 Token 的權(quán)限。直接復(fù)用下表中的配置：

1. 點(diǎn)擊窗口底部的 Generate token 按鈕。

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

img

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

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

img

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

（3）在 MCP 頁簽中，點(diǎn)擊 + 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

• 點(diǎn)擊Features，勾選Enable auto-run mode，則可以在ai對(duì)話的時(shí)候讓agent使用mcp中的tools

img

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

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

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

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

img

第六步：開啟對(duì)話，完成設(shè)計(jì)需求

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

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

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

已復(fù)制該設(shè)計(jì)稿的鏈接。

img

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

img

agent開始調(diào)用Figma MCP中的工具和服務(wù)，讀取設(shè)計(jì)稿的內(nèi)容，自動(dòng)生成文件，填入前端代碼，并生成一個(gè) index.html 文件供你預(yù)覽效果。以下輸出過程供參考：

img

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

img

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

3. 參考信息

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

4. 了解更多

個(gè)人覺得由于當(dāng)前mcp server+ai 大模型還是會(huì)存在一些幻覺問題，不太適合完全不懂前端代碼的設(shè)計(jì)直接生成，因?yàn)樯傻拇a還是需要微調(diào)，才能達(dá)到設(shè)計(jì)稿的的效果，這里推薦一個(gè)更好的工具藍(lán)湖來進(jìn)行代碼生成，效果會(huì)更好一點(diǎn)

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

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