[AI 實踐] 完整 10 步，開始使用 Cursor 文生 Figma UI (完整提示詞指南)

[AI in Action] 12 Steps to Design and Shine: Cursor-to-Figma UI Creation Guide (A Complete Prompt Outline)

原始 Github 專案位址

建議安裝步驟（作者已驗證，僅使用 Cursor Agent 介面功能＋Figma）

使用 Mac Cursor 的用戶請參考安裝流程，”若使用 Windows Cursor 用戶請直接跳到最後”。

1.下載並安裝 Cursor Talk To Figma MCP Plugin 外掛插件 Figma Plugin

2.使用 @ 功能，在 Cursor Agent 對話介面，使用以下提示詞：

閱讀並摘要@https://github.com/sonnylazuardi/cursor-talk-to-figma-mcp

3.安裝 bun ，繼續輸入以下提示詞(在 Cursor Agent 對話介面)，明：Bun 是一款專為提高速度而設計的一體化 JavaScript 運行時和工具包，配有捆綁器、測試運行器和與 Node.js 兼容的包管理器, Windows 不可用：

curl -fsSL https://bun.sh/install | bash

4.繼續輸入以下提示詞(在 Cursor Agent 對話介面)：

bun setup

5.啟動 Websocket server：

bun socket

6.建立MCP 伺服器，繼續輸入以下提示詞(在 Cursor Agent 對話介面)：

bunx cursor-talk-to-figma-mcp

7.，繼續輸入以下提示詞(在 Cursor Agent 對話介面)：

確保 MCP 伺服器在 Cursor 中執行 使用連接埠號碼連接到伺服器（預設：3055）

8.在 Figma 打開 Cursor Talk To Figma MCP Plugin 外掛插件，完成以下步驟：

8.1. 打開 Local Use localhost 選項
8.2. 點選 Cursor Talk To Figma MCP Plugin 外掛插件 connect 按鈕
8.3 複製以下內容，打開 Cursor 設定/ MCP/ Add new global MCP server，貼入以下內容：
點選下圖 Add new global MCP server 按鈕

{
    "mcpServers": {
        "TalkToFigma": {
            "command": "bunx",
            "args": [
                "cursor-talk-to-figma-mcp@latest"
            ]
        }
    }
}

在mcp.json 中貼入以上內容，記得按下儲存，完成後如下圖。

9.繼續輸入以下提示詞(在 Cursor Agent 對話介面)：

bunx cursor-talk-to-figma-socket

10.重新開啟 Cursor 並檢查以下畫面，在 Cursor 設定> MCP

設定已更新。為了使新的設定生效，您需要： 確保 WebSocket 伺服器仍在執行（檢查已在連接埠 3055 上執行） 重新啟動 Cursor 以載入新的 MCP 設定 現在 MCP 伺服器將使用預設設定執行，不再指定特定的伺服器位址和連接埠。這應該能更好地與目前執行的 WebSocket 伺服器配合工作。

透過以上步驟，您可以成功在Cursor中接入MCP，擴充其功能，使其能夠與外部資料來源和工具進行互動。這種整合不僅提高了Cursor的靈活性，還增強了其在處理複雜任務時的能力。

12.連接頻道：在發送任何指令之前，一定要先呼叫 join_channel 來連接到 Figma。 輸入以下提示詞(在 Cursor Agent 對話介面)：
Connected to server in channel: *****

**** 為 （您在Talk To Figma MCP Plugin 外掛插件看到的以下畫面）

”若使用 Windows Cursor 用戶請先執行，再接到步驟 7 ”

---

開始使用自然語言對話來執行 Figma 生成之前，建議參考以下經驗：