项目简介

Frame0 MCP Server 是一个基于 Model Context Protocol (MCP) 构建的应用后端，它作为 Frame0 线框图工具的扩展，允许用户通过自然语言指令，例如文本提示，直接在 Frame0 中创建和编辑线框图设计。该服务器充当 LLM 和 Frame0 工具之间的桥梁，将自然语言指令转换为 Frame0 可以理解和执行的操作，极大地提升了线框图设计的效率和便捷性。

主要功能点

线框图元素创建与编辑: 支持创建和编辑各种线框图元素，包括：
- 页面 (Page) 管理: 添加、更新、复制、删除页面，设置当前页面，获取页面和所有页面数据。
- 形状 (Shape) 绘制: 创建矩形、椭圆、文本、线条、连接线、图标、图片等多种基本形状。
- 形状属性修改: 更新形状的名称、尺寸、颜色（填充色、描边色、字体颜色）、文本内容、圆角、链接等属性。
- 形状操作: 复制、删除、移动、对齐、分组、取消分组形状。
- 图标和图片: 支持创建和使用图标，以及导入和创建图片形状。
- 形状导出: 将形状和页面导出为图片。
支持多种设备框架: 可以创建手机、平板、桌面、浏览器、手表、电视等多种设备框架的线框图。
颜色预设: 内置丰富的颜色预设，方便用户快速选择和应用颜色。
链接设置: 支持为形状设置链接，包括网页链接和页面内部链接。
图标库访问: 提供工具获取可用的图标列表。

安装步骤

安装 Frame0 桌面应用: 确保已安装 Frame0 桌面应用程序，版本要求 'v1.0.0-beta.17' 或更高。
安装 Node.js: 确保已安装 Node.js，版本要求 'v22' 或更高。
克隆仓库: 将 'frame0-mcp-server' 仓库克隆到本地。
构建项目: 在仓库根目录下，运行命令 'npm run build' 构建项目。

服务器配置

Frame0 MCP Server 需要配置在 MCP 客户端中，例如 Claude Desktop。以下是在 'claude_desktop_config.json' 文件中配置 Frame0 MCP Server 的示例：

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

配置参数说明:

'"frame0-mcp-server"': 服务器名称，可以自定义，用于在 MCP 客户端中标识该服务器。
'"command": "npx"': 启动服务器的命令，这里使用 'npx' 直接运行 'frame0-mcp-server' 包，前提是已经通过 'npm install -g frame0-mcp-server' 全局安装了该包，或者在项目目录下运行（如示例中的仓库）。如果选择本地运行，且没有全局安装，'command' 则应配置为 '"node"'，'args' 需要指向构建后的 'index.js' 文件路径。
'"args": ["-y", "frame0-mcp-server"]': 传递给启动命令的参数。 '-y' 参数用于 'npx' 自动确认安装包， '"frame0-mcp-server"' 是要执行的包名。如果需要指定 Frame0 API 服务器的端口，可以添加 '--api-port=<端口号>' 参数，例如 '["--api-port=58321"]'。

本地开发配置示例:

如果您克隆了仓库并进行了本地构建，可以使用以下配置，将 'command' 指向 'node'，'args' 指向构建后的 'index.js' 文件：

{
  "mcpServers": {
    "frame0-mcp-server": {
      "command": "node",
      "args": ["<你的frame0-mcp-server仓库的完整路径>/build/index.js"]
    }
  }
}

注意: 请将 '<你的frame0-mcp-server仓库的完整路径>' 替换为实际的 'frame0-mcp-server' 仓库在您本地文件系统中的完整路径。

配置完成后，重启 MCP 客户端 (如 Claude Desktop) 使配置生效。

基本使用方法

配置并启动 Frame0 MCP Server 后，在 MCP 客户端中，您可以使用自然语言提示来指示 Frame0 进行线框图设计操作。

示例提示:

“在Frame0中为手机创建一个登录屏幕”
“在Frame0中为平板创建一个Instagram主页”
“将登录按钮的颜色改为蓝色”
“删除社交登录按钮”
“添加一个页面名为 ‘主页’”
“导出当前页面为PNG图片”

您可以参考仓库 README.md 文件中 "Example Prompts" 和 "Tools" 部分，了解更多可用的提示和工具功能。通过组合不同的提示，您可以实现更复杂的线框图设计和编辑操作。

关键词

项目简介

主要功能点

安装步骤

服务器配置

基本使用方法

信息