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:
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_framecreate_rectanglecreate_ellipsecreate_textcreate_linecreate_polygoncreate_connectorcreate_iconcreate_imageupdate_shapeduplicate_shapedelete_shapesearch_iconsmove_shapealign_shapesgroupungroupset_linkexport_shape_as_imageadd_pageupdate_pageduplicate_pagedelete_pageget_current_page_idset_current_page_by_idget_pageget_all_pagesexport_page_as_image
Dev
- Clone this repository.
- Build with
npm run build. - Update
claude_desktop_config.jsonin Claude Desktop as below. - Restart Claude Desktop.
{
"mcpServers": {
"frame0-mcp-server": {
"command": "node",
"args": ["<full-path-to>/frame0-mcp-server/build/index.js"]
}
}
}