New Wireframe frame: design app and web screens right on your board

The new Wireframe frame brings wireframing onto the MockFlow board. You can design app and web screens right beside the ideas, notes and diagrams they come from, using a full widget library or AI. Then restyle them, render them, link them into a prototype and export them, all in the same place.

Each Wireframe frame holds one screen. A board can hold as many as you need, so a whole app flow, a landing page and its mobile version can sit side by side with the research that shaped them.

What you can do with the Wireframe frame

• Turn an app idea into screens. Brainstorm the idea with sticky notes or a mind map, then ask Mida for the screens next to it. A login, onboarding or settings screen is on the board in seconds, ready to edit.

• Plan a landing page. Describe the page, such as a navbar, a hero with two buttons and a pricing section, and get a desktop wireframe with fixed width that grows down as a scrolling page.

• Redesign an existing page. Capture any web page with MockFlow Clippy, our Chrome extension, and it arrives on the board as an editable wireframe, ready to redesign.

• Review with a client. Switch the screen from Sketchy for early ideas to Hi-fi when it is time to show a polished version, and collect comments on the same board.

• Hand off to AI coding tools. Export a build prompt that describes the screen and paste it into Claude Code, Codex or Cursor as the first message.

• Present a finished look. Convert a screen into a hi-fi image, where AI keeps your layout and text and fills every placeholder with real pictures and content.

How to create a wireframe on your board

1. Open the Frames menu in the board's top menu and choose Wireframe. An empty screen is added to the board.

2. Click the AI button on the frame's toolbar and choose Generate new.

3. Describe the screen, pick the device (phone, tablet or desktop) and generate. You can also attach a screenshot or sketch to recreate.

4. Edit the result with the widget library: drag in buttons, forms, cards, navigation, charts and more, and change any text in place.

For example, a prompt like this gives a complete mobile login screen:

Mobile login screen with email and password fields, a remember-me toggle,
a sign-in button and a link to create an account

The frame's AI menu also offers Modify with AI to change a screen you already have, Create new screen to add another screen of the same app in the same style, and Fill images with AI to replace image placeholders with real pictures. You can also ask Mida for a whole app, and it plans one frame per screen.

Switch the look in a click

Every screen can be shown in Outline, Sketchy, Hi-fi, Blueprint, Liquid glass, Fluent or Android style, in light or dark mode, with your own brand colour and font. Your layout and content stay the same, so you can move from a rough sketch to a polished screen without redrawing anything.

Choose Fixed size for one screen with no scrolling, Fixed width for a page that grows down as it scrolls, or Free size to fit the content. Switch between Real text and Placeholder blocks when you want reviewers to focus on layout rather than copy.

Prototype and convert your screens

One click on Prototype links the screens into a clickable prototype, which you can play full screen or preview on your phone. Convert to turns a screen into a flowchart, customer journey, mind map, spec, code block or kanban of tasks, placed right beside it.

Export options for wireframes

Open Export on the frame's toolbar to choose a format:

• Image: a picture of the screen as PNG.

• SVG: a vector drawing in the current style, device frame included.

• Hi-fi image: a finished design of the screen with placeholders filled with real content.

• JSON: the widget data, which you can import again later.

• Copy to Figma: editable layers with auto layout, pasted into Figma through the MockFlow Figma plugin.

• AI prompt: a build prompt for Claude Code, Codex, Cursor and similar tools.

• WireframePro: paste the screen into a WireframePro project as editable components, when you want the full UI design editor with UI packs, symbols and pages.

To build the screen with an AI coding tool, choose AI prompt, then paste it into the tool as the first message and refine with follow-ups. For example, in a terminal:

claude
# paste the copied build prompt as your first message

Availability on each plan

The Wireframe frame is included on every plan, including Basic. AI generation uses your monthly AI credits. Copy to Figma, AI prompt and Hi-fi image are part of the paid plans, Plus and Max. See pricing for details, and Frames to learn how frames work on the board.