# New Wireframe frame: design app and web screens right on your board > Sketch app and web screens on the board with a full widget library and AI, switch the look in a click, and export to Figma, an AI coding prompt or WireframePro. Source: https://mockflow.com/changelog/wireframe-frame-design-app-and-web-screens-on-your-board ![Wireframe frame workflow: add a Wireframe frame, describe the screen, Mida draws it, switch the look, export a build prompt](https://assets.mockflow.com/docs/media/7c10cf48de534ee886a6f8109d6618fe.webp) 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: ```text 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](https://www.figma.com/community/plugin/873171992268856243). - **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: ```bash 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](https://mockflow.com/pricing/) for details, and [Frames](https://mockflow.com/docs/frames) to learn how frames work on the board.