在快速迭代的產品開發週期中，效率就是生命線。想像一下，只需提出需求，設計工具就能自動為您繪製出產品原型——這不再是科幻情節。透過整合 Cursor 這款 AI 驅動的開發工具與 Figma 的 MCP（Multi-Codemodel Plugin/Project），產品原型自動生成 已成為可能。本文將深入探討如何利用 Cursor 和特定的 Figma MCP，特別是 “Cursor Talk to Figma MCP”，來實現這一令人興奮的工作流程，徹底改變您構建原型的方式。
理解核心工具：Cursor 與 Figma MCP
在我們深入探討具體步驟之前，先來了解一下關鍵組件：
- Cursor: 一款整合了 AI 能力的代碼編輯器，旨在加速開發流程，現在更擴展其能力至設計領域。
- Figma MCP: 這是一類旨在連接 Cursor 與 Figma 的項目或插件，讓 AI 能夠理解並操作 Figma 畫布上的元素。
目前社群中有幾個活躍的 Figma MCP 項目，其中較受關注的有：
| MCP 項目 | 連接方式 | 主要側重 | 適用情境 |
|---|---|---|---|
| Figma Context MCP | Figma API Key | 精準控制 Figma 文件中的特定元素 | 需要對大型複雜文件進行細微操作 |
| Cursor Talk to Figma MCP | Figma 插件 (Channel) | 從零開始生成設計元素，實現產品原型自動生成 | 設計基礎較少，需要快速創建原型 |
本指南將聚焦於 “Cursor Talk to Figma MCP”，因其更側重於產品原型自動生成，尤其適合希望快速將想法視覺化的用戶。但需注意，目前此技術主要用於原型設計階段，距離生成最終可交付的設計稿尚有發展空間。
步驟一：環境配置 - 為自動化打下基礎
要啟用 Cursor 與 Figma 的魔法，首先需要配置好本地環境。
-
獲取 MCP 項目：
- 前往 “Cursor Talk to Figma MCP” 的 GitHub 倉庫。
- 您可以選擇
Download ZIP下載壓縮包並解壓縮，或使用 Gitgit clone命令拉取項目。 - 關鍵文件： 請記住解壓縮後文件夾內的
manifest.json文件路徑，稍後安裝 Figma 插件時會用到。
-
安裝運行環境 (Bun)：
- 該 MCP 推薦使用 Bun，一個新興的 JavaScript 運行時，以其啟動速度和執行效率著稱。
- 打開您的終端機（Terminal），運行 Bun 的安裝指令（具體指令請參考 Bun 官方文檔或項目 README）。對於初學者，無需深究 Bun 的細節，只需按指示安裝即可。
-
安裝 MCP 依賴：
- 在終端機中，導航到您剛才下載並解壓縮的 MCP 項目文件夾。
- 運行項目 README 文件中提供的
setup指令（通常類似bun install或特定腳本），這將安裝 MCP 所需的依賴包。
-
啟動 WebSocket 服務器：
- 繼續在終端機的項目目錄下，運行啟動 WebSocket 服務器的指令（同樣，參考項目 README）。
- 成功啟動後，您會看到類似以下的輸出：
WebSocket Server Running on port 3055 New Client Connected - 記住端口號： 這裡的
port 3055非常重要，後續連接 Figma 插件時需要核對。
步驟二：設置 Figma - 安裝桌面端與插件
與普遍使用的 Figma 網頁版不同，此 MCP 插件需要在 Figma 桌面應用程序中安裝。
-
安裝 Figma 桌面端：
- 如果您尚未安裝，請前往 Figma 官網下載並安裝適用於您操作系統的桌面應用程序。您可以直接在 Figma 網頁版的左側下拉菜單中找到
Get Desktop App的選項。
- 如果您尚未安裝，請前往 Figma 官網下載並安裝適用於您操作系統的桌面應用程序。您可以直接在 Figma 網頁版的左側下拉菜單中找到
-
導入 MCP 插件：
- 打開 Figma 桌面應用程序。
- 點擊左上角的 Figma 圖標菜單。
- 按照以下路徑操作：
Plugins→Development→Import plugin from manifest...。 - 選擇您在步驟一中記下的
manifest.json文件並導入。
-
運行並驗證插件：
- 打開或創建一個新的 Figma 文件。
- 點擊畫布底部工具欄中的插件圖標（通常像一個拼圖塊）。
- 您應該能看到
Cursor MCP Plugin。點擊運行它。 - 一個名為
Cursor MCP Plugin的小窗口會彈出，並顯示類似Connected to server on port 3055 and channel [一些數字]的信息。 - 核對端口號： 確保這裡顯示的端口號（例如
3055）與您在步驟一中啟動 WebSocket 服務器時看到的端口號一致。 - 記住 Channel 值： 這個 Channel 值是動態生成的，每次重新連接可能不同。它是 Cursor 識別目標 Figma 文件的關鍵，請複製或記下此值。
步驟三：連接 Cursor 與 Figma - 建立溝通橋樑
現在，環境和 Figma 端都準備就緒，是時候讓 Cursor 連接上來了。
-
檢查 Cursor MCP 狀態：
- 打開 Cursor。
- 進入
Settings→MCP。您應該能看到Cursor Talk to Figma MCP或類似名稱的條目，並且旁邊有綠色的成功連接提示。
-
啟用 Figma Agent：
- 在 Cursor 的聊天對話框中，輸入
@符號或點擊相關按鈕，選擇 Agent 模式。 - 選擇或輸入
Talk to Figma。這是在告知 Cursor，接下來的指令是與 Figma 相關的。
- 在 Cursor 的聊天對話框中，輸入
-
發送 Channel ID：
- 將您在步驟二中從 Figma 插件窗口獲取的
Channel值，直接發送給 Cursor。 - 一旦 Cursor 確認收到並處理了 Channel ID，Cursor 和特定 Figma 文件之間的連接就正式建立完成。
- 將您在步驟二中從 Figma 插件窗口獲取的
步驟四：實現產品原型自動生成 - 指令與創造
連接成功後，激動人心的時刻到來了——讓 AI 自動創建原型。
-
開啟自動代理模式（關鍵）：
- 要實現完全自動化的產品原型自動生成，您需要在 Cursor 的
Settings中找到並開啟Auto Agent（或類似名稱的自動執行）模式。
- 要實現完全自動化的產品原型自動生成，您需要在 Cursor 的
-
下達設計需求：
- 現在，您可以像與人對話一樣，向 Cursor 描述您想要的產品原型樣式、佈局、組件等。例如：
- “創建一個登錄頁面，包含用戶名輸入框、密碼輸入框和一個登錄按鈕。”
- “設計一個包含頂部導航欄和底部標籤欄的移動應用主界面框架。”
- “生成一個包含圖片、標題和描述文字的卡片列表。”
- 由於開啟了 Auto Agent 模式，Cursor 會嘗試直接在已連接的 Figma 文件中執行這些指令，自動繪製出相應的元素和佈局。
- 現在，您可以像與人對話一樣，向 Cursor 描述您想要的產品原型樣式、佈局、組件等。例如：
現階段的考量與提醒
儘管產品原型自動生成的前景誘人，但根據目前的實測體驗，這項技術仍處於發展階段：
- 原型為主： 生成的結果更接近線框圖或低保真原型，距離像素級精確、風格統一的高保真設計稿還有差距。
- AI 作為輔助： 目前，AI 更像是設計師的得力助手，而非完全替代。它能極大加速初始想法的落地和基礎框架的搭建。
- 人工把控不可或缺： AI 生成的結果往往需要人類設計師進行二次審核、調整和優化，以確保其符合實際需求、品牌規範和用戶體驗原則。
結語：擁抱 AI，加速原型設計
Cursor 與 Figma MCP 的整合，無疑為產品原型自動生成開闢了一條令人興奮的新路徑。通過遵循本文概述的步驟，您可以配置好環境，讓 AI 助手直接在 Figma 畫布上根據您的需求創建原型。雖然目前技術尚有局限，主要扮演輔助角色，但它顯著提升了從概念到視覺原型的轉化效率。對於追求敏捷開發和快速迭代的團隊與個人而言，掌握這項技能，意味著能更快地驗證想法，將更多精力投入到更高層次的設計思考與優化中。不妨動手嘗試，體驗 AI 為您的原型設計工作流程帶來的變革吧！