設計師的秘密武器：AI工具整合的驚人威力
你有沒有想過，如果能將文字直接轉化為 UI，會節省多少寶貴時間？現在，通過整合Cursor IDE、Claude Desktop和Figma，這一切已成為可能。這種組合不僅僅是工具的簡單堆疊，而是一場徹底改變設計思維方式的革命。
AI 技術已經成為提升工作效率的關鍵工具。透過整合 Cursor IDE、Claude Desktop 以及 Figma，我們可以實現從文字提示直接生成 UI 設計的智能工作流程。這篇文章將帶你了解如何利用 cursor-talk-to-figma-mcp 這個開源專案來建立這套高效的工作流程。
開始前的準備工作
在開始設置之前，請確保你的系統符合以下要求：
| 項目 | 要求 |
|---|---|
| 操作系統 | MacOS (主要支援) |
| 必要軟體 | Figma (網頁版或桌面應用) Cursor 0.47.x 或更高版本 Claude Desktop (選配，用於高級功能) |
| 開發工具 | Bun (JavaScript 運行時，會自動安裝) |
| 網路連接 | 穩定的網絡連接 |
設置步驟：Cursor + Figma MCP
1. 配置 MCP 服務器
首先，我們需要克隆並設置 MCP 服務器環境：
# 克隆專案倉庫
git clone [email protected]:sonnylazuardi/cursor-talk-to-figma-mcp.git
# 進入專案目錄
cd cursor-talk-to-figma-mcp
# 使用 Cursor 打開專案
cursor .
# 安裝 Bun 運行環境
curl -fsSL https://bun.sh/install | bash
# 配置專案環境
bun setup
# 啟動 WebSocket 服務
bun socket
當你成功啟動服務後，終端會顯示確認信息，表示 WebSocket 伺服器已在運行中。
2. Figma 插件配置
接下來，我們需要在 Figma 中安裝並設置插件：
- 在 Figma 中新建一個
Drafts文件 - 打開
Plugins & widgets菜單 - 選擇
Import from manifest選項 - 選擇克隆專案中的
src/cursor_mcp_plugin/manifest.json文件 - 導入後運行插件，記錄生成的 Channel 編碼（例如："f4hjygha"）
3. Cursor 配置
在 Cursor 中，我們需要啟用 MCP 服務並連接到 Figma：
- 打開 Cursor 設置面板
- 找到 MCP 部分並啟用服務
- 在 MCP 配置中添加 TalkToFigma 服務：
{
"mcpServers": {
"TalkToFigma": {
"command": "bunx",
"args": ["cursor-talk-to-figma-mcp@latest"]
}
}
}
從文字到 Figma 設計的實用工作流
基本使用流程
- 啟動所有必要服務（WebSocket 服務器和 MCP）
- 在 Figma 中運行 MCP 插件並獲取 Channel ID
- 在 Cursor 中使用以下命令連接到 Figma：
Talk to Figma, channel [您的Channel ID]
- 連接成功後，在 Cursor 中輸入設計需求
設計提示詞範例
以下是一個有效的提示詞範例，可用於生成完整的應用程序界面設計：
你是一名資深UI/UX設計專家，擁有豐富的健身應用設計經驗，精通蘋果人機界面設計指南。你的任務是幫助我完成一個「健身普拉提」iOS App的原型設計。
請按照以下要求輸出一套完整的高質量APP原型圖：
1. 設計目標
- a0創建符合蘋果人機界面指南(Human Interface Guidelines)的iOS原生風格設計
- 面向普拉提健身初學者到中級用戶，設計簡潔直觀的界面
- 確保原型圖能直觀展示APP的功能流程和用戶體驗
2. 功能規劃
- 主頁：提供快速訪問訓練、進度和個人資料的入口
- 訓練庫：分級別展示普拉提動作，配有詳細影片指導
- 訓練計劃：提供個性化訓練計劃和每日推薦
- 進度追蹤：記錄訓練歷史和身體變化
3. 設計規範
- 使用最新的iOS設計元素和交互模式
- 遵循iPhone 15 Pro尺寸規格
- 採用明亮、活力的配色方案，符合健身應用氛圍
進階整合：Cursor 與 Claude Desktop 協同工作
如果你想進一步增強工作流程，可以將 Claude Desktop 與 MCP 整合：
Claude Desktop MCP 設置
Claude Desktop 也支援通過其內置的 MCP 協議與 Figma 交互。有一個基於 cursor-talk-to-figma-mcp 改編的版本，專門為 Claude Desktop 優化：
- 克隆 Claude 專用的 Figma MCP 倉庫：
git clone https://github.com/arinspunk/claude-talk-to-figma-mcp.git
cd claude-talk-to-figma-mcp
- 安裝依賴並構建項目：
bun install
bun run build
- 配置 Claude Desktop：
bun run configure-claude
- 重啟 Claude Desktop 並在 MCP 選擇器中確認 "ClaudeTalkToFigma" 出現
可用命令與功能
整合後，你可以使用多種命令來操控 Figma：
基本設計命令
| 命令 | 功能描述 |
|---|---|
| create_rectangle | 創建一個新的矩形 |
| create_ellipse | 創建一個新的橢圓或圓形 |
| create_text | 創建一個新的文本元素 |
| create_frame | 創建一個新的框架 |
| set_fill_color | 設置節點的填充顏色 |
| set_stroke_color | 設置節點的描邊顏色 |
| move_node | 移動節點到新位置 |
| resize_node | 調整節點大小 |
高級文本和字體命令
| 命令 | 功能描述 |
|---|---|
| set_font_name | 設置文本節點的字體名稱和樣式 |
| set_font_size | 設置文本節點的字體大小 |
| set_font_weight | 設置文本節點的字體粗細 |
| set_letter_spacing | 設置文本節點的字母間距 |
| set_line_height | 設置文本節點的行高 |
| set_paragraph_spacing | 設置文本節點的段落間距 |
實際應用案例與效果
使用這種整合方案可以實現多種設計場景：
- 快速原型設計：從文字描述直接生成完整的應用程序界面
- 設計迭代：通過修改提示詞快速生成不同版本的設計
- 組件創建：生成可重用的 UI 組件庫
- 多屏幕設計：一次性生成完整的用戶流程界面
根據實際使用經驗，設計生成過程約需 5-10 分鐘，生成後的設計可以直接在 Figma 中進行進一步編輯和優化。
Cursor 與 Claude Desktop 的比較
Cursor 與 Claude Desktop 都提供了強大的 AI 功能，但在與 Figma 整合方面有些差異：
- Cursor：作為 IDE，Cursor 更專注於代碼生成和編輯，與 Figma 的整合主要用於幫助開發人員實現設計。
- Claude Desktop：提供更廣泛的 AI 助手功能，可用於多種任務，但在代碼編輯方面可能不如 Cursor 直觀。
- 協同工作流：許多用戶發現最有效的工作流是將 Claude Desktop 搭配 MCP 配置使用，以便自動理解完整的應用程序上下文。
使用體驗與建議
基於實際體驗的一些建議：
- 提示詞質量至關重要：精心優化的提示詞能產生更專業的設計結果。
- 非設計專業人士：建議提供更詳細的設計需求和參考。
- 設計質量：目前生成的 UI 相對簡約，但優勢在於可直接在 Figma 中編輯和完善。
- 處理複雜設計：對於複雜設計，可能需要將任務分解為多個小步驟。
常見問題與解決方案
在使用過程中可能遇到的問題及解決方法：
- 連接錯誤：確保 WebSocket 服務器正在運行（使用
bun socket命令）。 - 插件未出現：驗證是否已正確在 Figma 開發設置中鏈接插件文件夾。
- 執行錯誤：查看 Figma 開發控制台獲取詳細錯誤信息。
- 字體加載問題：某些字體可能在 Figma 中不可用，使用
load_font_async命令驗證字體可用性。
結論
Cursor + Figma MCP 整合為 UI 設計和開發提供了一個革命性的工作流程，讓 AI 能夠直接從文字描述生成可編輯的 Figma 設計。雖然目前生成的設計可能相對簡單，但這種方法的主要優勢在於：
- 設計自動化程度高
- 大幅提升原型設計速度
- 降低設計與開發之間的溝通障礙
- 提供可直接在 Figma 中編輯的結果
隨著 MCP 協議的不斷發展，我們可以期待未來能生成更高質量、更複雜的設計稿。
延伸資源
如果你想深入了解相關技術或獲取更多支持，可以參考以下資源：
這些資源提供了更詳細的技術文檔、示例和社區支持，可以幫助你更好地使用和擴展這些工具。
想要提升你的設計與開發工作流程嗎？如果你正在尋找專業的數位轉型服務，Tenten.co 可以為你提供完整的 AI 驅動設計與開發解決方案。我們的專家團隊精通最新的 AI 工具與整合技術，能夠幫助你實現從設計到開發的無縫流程。現在就預約免費諮詢會議，讓我們一起探索如何利用 AI 技術為你的項目帶來革命性的變革！
