mcpField
F
Frame0 MCP Server

Frame0 MCP Server

Local
github.com/niklausleeMedia & Design95Updated 2d ago
Repository

About Frame0 MCP Server

Frame0 MCP Server is an MCP server for the Frame0 wireframe tool, allowing wireframes to be created and modified through prompts. It suits designers and product teams who want to prototype app screens quickly.

Key features

  1. 01Creates and edits shapes through MCP tools
  2. 02Manages pages, grouping, alignment and export
  3. 03Searches icons and inserts images
  4. 04Sets links on shapes

Use cases

  1. 01Generating phone or TV screen wireframes from text descriptions
  2. 02Changing colors or removing elements in existing wireframes in bulk
  3. 03Linking wireframe buttons to target URLs

MCP support

This is an MCP server that exposes tools such as create_frame, update_shape and export_page_as_image to MCP clients like Claude Desktop, which then operate the Frame0 canvas.

#frame0#mcp-server#wireframe-tool

Configuration

Local server config is the same for every client. Copy it into your client’s MCP config file.

mcp.json · Universal config
{
  "mcpServers": {
    "frame0": {
      "command": "npx",
      "args": [
        "-y",
        "frame0-mcp-server"
      ]
    }
  }
}
Run commandnpx -y frame0-mcp-server

Local servers need a runtime on your machine (e.g. Node.js 18+). Config file locations differ by client; see your client’s docs.

Packages
npmframe0-mcp-server

Tools

28

Saved tool list · updated 3w ago

ParameterTypeRequiredDescription
frameTypeenumYesType of the frame shape to create.phone | tablet | desktop | browser | watch | tv
namestringYesName of the frame shape.
fillColorstringNoBackground color in hex code of the frame shape.

Details

From the project README

Frame0 MCP Video Example

Frame0 MCP Server

Frame0 is a Balsamiq-alternative wireframe tool for modern apps. Frame0 MCP Server allows you for creating and modifying wireframes in Frame0 by prompting.

Setup

Prerequisite:

  • Frame0 v1.7.0 or higher. (Ensure that Run on start option is enabled in Settings > API Server).
  • Node.js v22 or higher.

Setup for Claude Desktop in claude_desktop_config.json as below:

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

You can use --api-port=<port> optional parameter to use another port number for Frame0's API server.

Example Prompts

  • “Create a login screen for Phone in Frame0”
  • “Create a Instagram home screen for Phone in Frame0”
  • “Create a Netflix home screen for TV in Frame0”
  • “Change the color of the Login button”
  • “Remove the Twitter social login”
  • “Replace the emojis by icons”
  • “Set a link from the google login button to the Google website”

Tools

  • 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

Dev

  1. Clone this repository.
  2. Build with npm run build.
  3. Update claude_desktop_config.json in Claude Desktop as below.
  4. Restart Claude Desktop.
{
  "mcpServers": {
    "frame0-mcp-server": {
      "command": "node",
      "args": ["<full-path-to>/frame0-mcp-server/build/index.js"]
    }
  }
}

Comments

Markdown supported

New to MCP?

From what the protocol is to installing your first server, these answers cover most first questions.

An open protocol that defines how AI applications connect to external tools and data in a uniform way. Clients talk to the model; MCP servers provide tools, resources and prompt templates. They exchange standard messages, so one server can be reused by many clients.