[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 生成之前，建議參考以下經驗：

• 先取得文件概覽：在開始操作之前，最好先用 get_document_info 取得整個文件的結構，這樣心裡有數。

• 先檢查目前選中：在修改元素之前，最好先用 get_selection 確認目前選中的是什麼，避免改錯東西。

• 根據需求選擇合適的建立工具： • 如果需要建立容器，用 create_frame。

• 如果只需要建立簡單的形狀，用 create_rectangle。

• 如果需要建立文字，用 create_text。

• 用組件實例：如果需要建立多個相同的元素，最好用組件實例 (create_component_instance)，這樣可以保持一致性。

• 錯誤處理：每個指令都可能會出錯，所以一定要做好錯誤處理。

---

目前釋出的所有指令

• join_channel: 連接到特定頻道

• get_document_info: 取得文件結構資訊

• create_frame: 建立畫板/容器

• create_rectangle: 建立矩形

• create_text: 建立文字

• set_fill_color: 設定填充顏色

• set_stroke_color: 設定描邊顏色和粗細

• move_node: 移動元素位置

• clone_node: 複製元素

• resize_node: 調整元素大小

• set_corner_radius: 設定圓角

• set_text_content: 修改文字內容

• export_node_as_image: 匯出節點為圖片

• execute_figma_code: 直接在 Figma 中執行 js 程式碼

• get_styles： 用途：取得文件中定義的所有樣式 包括：顏色樣式、文字樣式、效果樣式和網格樣式 範例結果顯示目前文件沒有定義任何樣式

• get_local_components： 用途：取得文件中所有的本地元件 顯示元件數量和元件列表 範例結果顯示目前文件沒有定義任何元件

• create_component_instance： 用途：基於現有組件建立實例參數： componentKey：組件的唯一識別碼 x, y：實例的位置座標 注意：需要先有原組件才能建立實例

---

解決 UI 複製不完美問題的方法

在使用 Cursor Talk To Figma MCP Plugin 時，許多使用者發現 AI 在複製 UI 設計時的準確性不足，這可能導致需要進行大量的手動調整。以下是一些解決這一問題的建議和最佳實踐：

1. 確保設計元素的清晰性 在 Figma 中，確保所有設計元素（如按鈕、文字框和圖形）都清晰可見且無重疊。這樣可以幫助 AI 更準確地識別和複製這些元素。使用明確的命名和分層結構也有助於提高複製的準確性。
   

2. 使用正確的指令 在與 Cursor 互動時，使用具體且清晰的指令來指示所需的設計元素。例如，使用 create_rectangle 或 create_text 等具體函式，而不是模糊的描述。這樣可以幫助 AI 更好地理解使用者的意圖。
   

3. 逐步檢查和調整 在進行 UI 複製後，逐步檢查生成的設計，並根據需要進行調整。使用 get_node_info 等指令來檢查每個元素的屬性，確保它們符合預期的設計要求。這樣可以及時發現問題並進行修正。
   

4. 利用文件概覽 在開始複製之前，使用 get_document_info 指令來取得目前文件的概覽。這可以幫助使用者了解文件的結構，並確保所有必要的元素都已包含在內，從而減少後續的調整工作。
   

5. 測試不同的設計風格 如果發現某些設計元素複製不準確，可以嘗試簡化設計或改變設計風格。某些複雜的設計可能會使 AI 難以準確複製，因此簡化設計可能會提高複製的準確性。
   

6. 參考社群資源和教學 參考其他使用者的經驗和教學，了解他們如何成功使用 Cursor Talk To Figma MCP Plugin。社群論壇和 GitHub 頁面上經常會有使用者分享的最佳實踐和解決方案，這些資源可以提供有價值的見解和技巧。

---

---

copyright © PrivacyUX consulting ltd. All right reserved.


關於本刊作者

Gainshin Hsiao 是 Agentic UX（代理式使用者體驗）的先驅，在人工智能與使用者體驗設計領域擁有超過 15 年的開創性實踐。他率先提出將用戶隱私保護視為 AI 產品設計的核心理念，於 2022 年創立 Privacyux Consulting Ltd. 並擔任首席顧問，積極推動隱私導向的醫療 AI 產品革新。此前，他亦擔任社交 AI 首席策略官（2022-2024），專注於設計注重隱私的情感識別系統及用戶數據自主權管理機制。

• Agentic UX 理論建構與實踐

• AI 隱私保護設計準則

• 負責任 AI 體驗設計

在 Cyphant Group 設計研究院負責人任內（2021-2023），他探索了 AI 系統隱私保護準則，為行業標準做出貢獻。更早於 2015 至 2018 年，帶領阿里巴巴集團數位營銷平台體驗設計團隊（杭州、北京、上海、廣州）、淘寶用戶研究中心並創立設計大學，從零開始負責大學的運營與發展，不僅規劃了全面的課程體系，更確立了創新設計教育理念，旨在為阿里巴巴集團培育具備前瞻視野與實戰能力的設計人才。其課程體系涵蓋使用者中心設計、使用者體驗研究、數據驅動設計、生成設計等多個面向應用。

活躍於國際設計社群，在全球分享 Agentic UX 和 AI 隱私保護的創新理念。他的工作為建立更負責任的 AI 生態系統提供了重要的理論基礎和實踐指導。

學術背景

• Mcgill - Infomation study/HCI -Agentic UX, Canada

• Aalto Executive MBA-策略品牌與服務設計, Singapore

• 台灣科技大學：資訊設計碩士- HCI, Taiwan

• 中原大學：商業設計學士- Media and marketing design, Taiwan