Demo Ai MCP

🚀 Figma上下文模型協調協議（MCP）服務器

Figma MCP服務器是一款強大的工具，它搭建起了Figma設計與人工智能編碼助手之間的溝通橋樑。藉助實現結構化的通信協議，該服務器能助力設計師和開發者實現任務自動化，減少重複性工作，並且在將設計轉化為代碼時實現高精度。對於期望提升API開發和設計工作流程效率的用戶而言，集成Figma MCP服務器是個不錯的選擇。

🚀 快速開始

安裝步驟

1. 克隆倉庫：

   git clone https://github.com/GLips/Figma-Context-MCP.git
   cd Figma-Context-MCP
   

2. 安裝依賴項：

   pnpm install
   

3. 配置環境變量：
   • 複製config/.env.example到config/.env
   • 替換其中的佔位符值為實際的Figma API令牌
4. 啟動服務器：

   pnpm run dev
   

配置說明

• 環境變量：在.env文件中設置FIGMA_API_TOKEN和可選的PORT（默認端口為3333）。
• 命令行參數：可以直接使用命令行選項，如--figma-api-key和--port，這些參數優先於環境變量。

集成指南

1. 啟動服務器並確保其運行：
   • 在終端中運行安裝命令以確認服務器狀態。
2. 添加MCP服務器到AI工具中：
   • 對於Cursor IDE，請按照以下步驟操作：
     1. 打開應用，導航至“設置 > MCP”部分。
     2. 點擊“添加新MCP服務器”，輸入一個名稱（例如“Figma MCP”）。
     3. 選擇“SSE（Server - Sent Events）”選項，並輸入服務器URL（通常為http://localhost:3333）。
3. 驗證連接狀態：
   • 狀態指示燈顯示綠色表示連接成功，紅色則提示需要進行故障排除。
4. 操作Figma設計文件：
   • 在Figma中選擇所需設計，並按需分組組件。
   • 使用“複製選定項鍊接”功能獲取設計鏈接。在Cursor Composer（開啟Agent模式）中粘貼該鏈接以觸發AI任務，如生成React代碼、創建複用UI組件或優化佈局。

✨ 主要特性

• 符合MCP標準：確保與多種LLM應用程序兼容。
• 類型安全實現：使用TypeScript構建，代碼結構牢固且易於維護。
• 自定義URI方案：支持自定義URI以方便管理設計資產。
• 錯誤處理和驗證：提供強大的錯誤處理機制以保障穩定運行。
• 批處理操作：能夠高效處理多個設計元素。

📚 詳細文檔

什麼是Figma MCP？

Figma MCP（模型上下文協議）服務器的作用是連接Figma設計文件與支持MCP的人工智能編碼工具，例如Cursor IDE。該服務器通過訂閱Figma設計事件來實現這一功能，並將這些信息即時傳輸給AI工具，以促進高效的任務執行。

工作原理

1. 獲取Figma設計數據：當Figma中有新的設計或更改時，MCP服務器會訂閱這些變化，並捕獲相關的JSON數據。
2. 分析和處理數據：服務器會對捕獲的設計數據進行解析，並根據需求生成相應的上下文信息。
3. 傳輸給AI工具：經過處理後的數據會被髮送到連接的AI工具（如Cursor），以便執行代碼生成、組件創建等任務。

🔧 技術細節

額外提示與特性

• MCP檢查工具：

  pnpm inspect
  

  在新終端中運行此命令即可啟動MCP Inspector網絡界面，用於查看可用工具、觸發調用並檢驗響應。

• 可使用工具：

  • get_file：獲取Figma文件的詳細信息。
  • get_node：獲取Figma文件中特定節點的數據。

📄 許可證

文檔未提及相關信息，故跳過該章節。