mcpField
F
Frame0 MCP Server

Frame0 MCP Server

本地服务
github.com/niklauslee媒体与设计952 天前更新
代码仓库

关于 Frame0 MCP Server

Frame0 MCP Server 是 Frame0 线框图工具的 MCP 服务，可通过自然语言提示创建和修改线框图。适合需要快速搭建界面原型的产品与设计人员。

主要功能

  1. 01通过 MCP 工具创建和编辑图形元素
  2. 02支持创建页面、分组、对齐和导出
  3. 03可搜索图标并插入图片
  4. 04可为元素设置链接

适用场景

  1. 01根据文字描述生成手机或电视界面线框图
  2. 02批量修改按钮颜色、删除或替换界面元素
  3. 03为线框图中的按钮设置跳转链接

MCP 相关

该项目是 MCP 服务，向 MCP 客户端（如 Claude Desktop）暴露 create_frame、update_shape、export_page_as_image 等工具，用于操作 Frame0 中的画布。

#frame0#mcp-server#wireframe-tool

配置

本地服务的配置在各客户端中通用，复制后粘贴到客户端的 MCP 配置文件即可。

mcp.json · 通用配置
{
  "mcpServers": {
    "frame0": {
      "command": "npx",
      "args": [
        "-y",
        "frame0-mcp-server"
      ]
    }
  }
}
启动命令npx -y frame0-mcp-server

本地服务需要在你的电脑上安装运行环境（如 Node.js 18+）。各客户端的配置文件位置不同，请参考客户端文档。

安装包
npmframe0-mcp-server

工具

28

收录的工具列表 · 更新于 3 周前

参数类型必填说明
frameTypeenum是要创建的框架形状类型。phone | tablet | desktop | browser | watch | tv
namestring是框架形状的名称。
fillColorstring否框架形状的十六进制背景颜色代码。

详细介绍

Frame0 MCP 视频示例

Frame0 MCP 服务

Frame0 是一款面向现代应用的线框图工具，可作为 Balsamiq 的替代品。Frame0 MCP 服务允许你通过提示词在 Frame0 中创建和修改线框图。

设置

前置条件：

  • Frame0 v1.7.0 或更高版本。（确保在 Settings > API Server 中启用了 Run on start 选项。）
  • 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 中为 Phone 创建一个登录屏幕”
  • “在 Frame0 中为 Phone 创建一个 Instagram 主页”
  • “在 Frame0 中为 TV 创建一个 Netflix 主页”
  • “更改 Login 按钮的颜色”
  • “移除 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"]
    }
  }
}

评论

支持 Markdown

第一次接触 MCP？

从协议是什么，到在客户端里装上第一个服务，这几条回答覆盖了大多数入门问题。

一个开放协议，规定了 AI 应用如何以统一方式连接外部工具与数据源。客户端负责与模型对话，MCP 服务负责提供工具、资源和提示模板，两者通过标准消息通信，同一个服务可以被不同客户端复用。