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