Frame0 MCP Server

基本能力

产品定位

Frame0 MCP Server 是一个用于 Frame0 线框图工具的辅助服务器，旨在通过自然语言提示来创建和修改线框图。

核心功能

• 创建各种形状（矩形、椭圆、线条等）
• 创建文本、图标、图像
• 更新、复制、删除形状
• 移动和对齐形状
• 分组和取消分组
• 设置链接
• 导出形状或页面为图像
• 管理页面（添加、更新、复制、删除页面）

适用场景

• 快速创建应用界面的线框图
• 修改现有线框图设计
• 为不同设备（手机、电视等）创建适配的界面
• 调整界面元素的视觉样式

工具列表

• 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: 获取当前页面ID
• set_current_page_by_id: 通过ID设置当前页面
• get_page: 获取页面
• get_all_pages: 获取所有页面
• export_page_as_image: 导出页面为图像

使用教程

使用依赖

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

安装教程

1. 确保已安装 Node.js v22 或更高版本
2. 在 Claude Desktop 的 claude_desktop_config.json 文件中配置如下内容：

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

1. 可选：使用 --api-port=<port> 参数指定 Frame0 API 服务器的端口号

调试方式

1. 克隆仓库
2. 使用 npm run build 构建项目
3. 更新 Claude Desktop 中的 claude_desktop_config.json 文件：

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

1. 重启 Claude Desktop

许可证

该项目遵循 MIT 开源许可条款，请参阅 MIT 了解完整条款。