Wireframe

Convert HTML to an editable UI wireframe inside a MockFlow IdeaBoard wireframe frame.

Updated 16 Sep 20261 min read

Send "type": "wireframe".

Convert HTML to an editable UI wireframe inside a MockFlow IdeaBoard wireframe frame.

Also available as the MCP tool render_wireframelite. The same payload works through either surface.

Fields

data

htmlstringrequired

Complete HTML document with inline CSS to convert to an editable wireframe. Can be a full page/screen OR a single section/widget (login card, navbar, pricing table, etc.) sized to its natural width.

fidelityenum<string>

Wireframe fidelity. "low" = lo-fi outline (default), "hi" = polished high-fidelity mockup. One of low or hi.

titlestring

Short screen title shown on the wireframe frame's header (e.g. "Dashboard", "Login"). Name the SCREEN, not the request. Falls back to the HTML <title> tag when omitted.

viewportWidthnumber

Viewport width in px the frame pins to (mobile ~390, tablet ~820, desktop ~1280). For a multi-screen app pass the SAME value on every screen call so all frames align at one width; omit for a single widget so the frame hugs its content.

Example

{
  "type": "wireframe",
  "data": {
    "html": "string",
    "fidelity": "low",
    "title": "Q4 Launch Planning",
    "viewportWidth": 0
  }
}

Was this page helpful?