【技术文档摘要】：

Frame0 MCP 服务器

Frame0 是一个现代应用的线框图工具，类似于 Balsamiq。Frame0 MCP 服务器允许您通过提示来创建和修改 Frame0 中的线框图。

配置

前提条件：

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

在 claude_desktop_config.json 中配置 Claude Desktop 如下：

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

您可以使用可选参数 --api-port=<port> 来指定 Frame0 API 服务器使用的其他端口号。

示例提示

• “在 Frame0 中创建手机登录界面”
• “在 Frame0 中创建手机 Instagram 主页”
• “在 Frame0 中创建电视 Netflix 主页”
• “更改登录按钮的颜色”
• “移除 Twitter 社交登录”
• “用图标替换表情符号”
• “设置从 Google 登录按钮到 Google 网站的链接”

工具

• create_frame
• create_rectangle
• create_ellipse
• create_text
• create_line
• create_polygon
• create_connector
• create_icon
• create_image
• update_shape
• duplicate_shape
• delete_shape
• search_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

开发

1. 克隆此仓库。
2. 使用 npm run build 构建。
3. 更新 Claude Desktop 中的 claude_desktop_config.json 如下。
4. 重启 Claude Desktop。

{
  "mcpServers": {
    "frame0-mcp-server": {
      "command": "node",
      "args": ["<full-path-to>/frame0-mcp-server/build/index.js"]
    }
  }
}