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。