frame0-mcp-server

🚀 Frame0 MCP 服务器

Frame0 MCP 服务器允许您通过提示在 Frame0 中创建和修改线框图。Frame0 是一个类似于 Balsamiq 的现代应用线框图工具的替代品，为线框图设计提供了新的选择。

🚀 快速开始

🔧 环境准备

在使用 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

🛠️ 开发指南

👨‍💻 开发步骤

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。