Frame0 MCP Server

🚀 Frame0 MCP 服務器

Frame0 MCP 服務器是一個與 Frame0 緊密結合的工具。Frame0 是一款現代應用線框圖工具，可作為 Balsamiq 的替代品。而 Frame0 MCP 服務器則讓用戶能通過提示在 Frame0 中輕鬆創建和修改線框圖，極大提升了線框圖製作的效率和便捷性。

🚀 快速開始

🔧 設置

在使用 Frame0 MCP 服務器之前，需要滿足以下先決條件：

• Frame0 v1.0.0-beta.17 或更高版本。
• Node.js v22 或更高版本。

之後，在 Claude Desktop 的 claude_desktop_config.json 中進行如下配置：

{
  "mcpServers": {
    "frame0-mcp-server": {
      "command": "npx",
      "args": ["-y", "frame0-mcp-server"]
    }
  }
}

您還可以使用 --api-port=<端口> 可選參數來指定 Frame0 API 服務器的其他端口號。

💡 示例提示

以下是一些可以使用的示例提示，幫助您快速上手：

• “創建一個用於手機的登錄界面”
• “創建一個 Instagram 主頁屏幕用於手機”
• “創建一個 Netflix 主頁屏幕用於電視”
• “更改登錄按鈕的顏色”
• “移除 Twitter 社交登錄”
• “將表情符號替換為圖標”
• “設置從 Google 登錄按鈕到 Google 網站的鏈接”

📦 工具列表

Frame0 MCP 服務器提供了豐富的工具，涵蓋了線框圖創建、修改、管理等多個方面：

• create_frame
• create_rectangle
• create_ellipse
• create_text
• create_line
• create_connector
• create_icon
• create_image
• update_shape
• duplicate_shape
• delete_shape
• get_available_icons
• move_shape
• align_shapes
• group
• ungroup
• set_link
• export_shape_as_image
• add_page
• update_page
• duplicate_page
• delete_page
• get_current_page_id
• set_current_page_by_id
• get_page
• get_all_pages
• export_page_as_image

🔧 開發步驟

如果您想對 Frame0 MCP 服務器進行開發，可以按照以下步驟操作：

1. 克隆此倉庫。
2. 使用 npm run build 進行構建。
3. 更新 Claude Desktop 的 claude_desktop_config.json 文件如下：

{
  "mcpServers": {
    "frame0-mcp-server": {
      "command": "node",
      "args": ["<完整路徑>/frame0-mcp-server/build/index.js"]
    }
  }
}

4. 重啟 Claude Desktop。