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 服务器使用另一个端口号。

Related MCP server: figma-pilot

示例提示

• “在 Frame0 中为手机创建登录屏幕”

• “在 Frame0 中为手机创建 Instagram 主屏幕”

• “在 Frame0 中为电视创建 Netflix 主屏幕”

• “更改登录按钮的颜色”

• “删除 Twitter 社交登录”

• “用图标代替表情符号”

• “设置从 Google 登录按钮到 Google 网站的链接”

工具

• 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

开发

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"]
    }
  }
}