add_page
Add a new page in Frame0. The added page becomes the current page.
LABSCO SUMMARY
The wireframe exists before the meeting about the wireframe.
Shapes are placed at coordinates inside frames and then wired together with connectors and page links, so what you end up with is a Frame0 document a designer opens and keeps working in, not a picture of one. Every shape takes a parentId and a frame has to follow a page, so a generated screen arrives with the nesting someone would have built by hand.
What it is
A drawing interface to the Frame0 wireframing app. 28 tools create shapes inside frames on pages, then move, align, group, link and export them.
What you get
- Frames created by type, with shapes placed inside them by position and size
- Rectangles with corner settings, ellipses, lines, polygons and polylines, text with its own font size and colour, and images passed in as data
- Icons found by keyword search and placed at a size and stroke colour
- Connectors drawn between two shapes, with the arrowhead chosen at each end
- Layout operations over what has been drawn: move by an offset, duplicate, align a set of shapes, group and ungroup
- Links from a shape to a URL or to another page, which is what turns a stack of frames into a flow you can click through
- Pages added, renamed, duplicated, deleted and switched between, with the current page's ID readable at any point
- Export of a single shape or a whole page as an image
Requirements
The Frame0 app, which these tools draw into, and npx on your PATH. No account and no key.
Setup effort
One command — npx -y frame0-mcp-server
USE CASES
01
Turning a described screen into a wireframe
A page comes first, then the frame, then the shapes inside it at real positions — so what you get back is a document laid out the way a designer would have nested it, not a flat picture.
02
Wiring separate screens into a clickable flow
Links point a shape at another page or at a URL, and connectors draw the relationship between two shapes with the arrowheads you choose, which is what turns a stack of frames into something you can walk someone through.
03
Tidying a layout that came out roughly
Alignment, offsets and grouping are separate calls from the drawing, so a generated screen can be straightened without redrawing it.
04
Producing variants of a screen to compare
Duplicating the page carries the whole screen across so the variant starts from the approved version, and shapes are duplicated with an offset or deleted from there.
05
Getting the design out to people who do not have Frame0
A page or a single shape exports as an image in the format you ask for, which covers the review that happens in a chat window rather than in the design tool.
28 tools
Counted once with only startup setup. Other versions, modes or optional credentials may expose a different list.
align_shapes
Align shapes in Frame0.
create_connector
Create a connector shape in Frame0.
create_ellipse
Create an ellipse shape in Frame0.
create_frame
Create a frame shape in Frame0. Must add a new page before you create a new frame.
create_icon
Create an icon shape in Frame0.
create_image
Create an image shape in Frame0.
create_line
Create a line shape in Frame0.
create_polygon
Create a polygon or polyline shape in Frame0.
create_rectangle
Create a rectangle shape in Frame0.
create_text
Create a text shape in Frame0.
delete_page
Delete a page in Frame0.
delete_shape
Delete a shape in Frame0.
duplicate_page
Duplicate a page in Frame0.
duplicate_shape
Duplicate a shape in Frame0.
export_page_as_image
Export page as image in Frame0.
export_shape_as_image
Export shape as image in Frame0.
get_all_pages
Get all pages data in Frame0.
get_current_page_id
Get ID of the current page in Frame0.
get_page
Get page data in Frame0.
group
Group shapes in Frame0.
move_shape
Move a shape in Frame0.
search_icons
Search icon shapes available in Frame0.
set_current_page_by_id
Set current page by ID in Frame0.
set_link
Set a link from a shape to a URL or a page in Frame0.
ungroup
Ungroup a group in Frame0.
update_page
Update a page in Frame0.
update_shape
Update properties of a shape in Frame0.
BEFORE YOU INSTALL
What to know first
Tools you get
28 tools when we connected.
Requires
npx on PATH
CONTEXT COST
Moderate Standing cost
Rated by the size of the 28 tool definitions that ride along on every turn, not by how many there are
INSTALLATION
Connect your client
Add the block to your client, or run the command directly.
Server setup
Configuration file
JSON
{
"mcpServers": {
"frame0-mcp-server": {
"command": "npx",
"args": [
"-y",
"frame0-mcp-server"
]
}
}
}npx
TERMINAL
npx -y frame0-mcp-server
