Internal
Classic WireframePro
Wireframes, prototypes and UI kits in Classic WireframePro.
What is Classic WireframeProWireframePro is MockFlow's dedicated UI design editor for multi-page wireframes, mockups and prototypes of apps and websites, included on every plan.Wireframe on a board vs Classic WireframeProCompare the Wireframe frame on a MockFlow board with a Classic WireframePro project, and choose the right one for your screens.Create a Classic WireframePro projectStart a new Classic WireframePro project from a new board's starting panel, or import a .wire file into a space.A tour of the WireframePro editorFind your way around the Classic WireframePro editor: the Design, View, Docs and Build tabs, the left rail, the Project and Edit menus and the tool pill.Design screens with UI kits and componentsBuild WireframePro pages from UI kits such as iOS, Android, Material, Bootstrap and Shadcn, search components, and add icons, images, shapes and templates.Create and share your own UI packsTurn your own components into a custom UI pack in WireframePro, merge packs, and share them with your team.Pages, folders and master pagesOrganize a WireframePro project into pages and folders, share layouts with master pages, set page size and background, and restore deleted pages.Reuse designs with symbolsSave a header, footer or card as a symbol in WireframePro, place instances on any page and update them all at once.Make a clickable prototype with interactionsAdd interactions to WireframePro components to go to pages, open links, and show, hide or replace components, then click through the design in View mode.Generate wireframes with AIUse AI in WireframePro to draft UI layouts from a prompt, turn screenshots into editable wireframes, generate images and diagrams, and review a design.Document a design with UX docs and specsWrite PRDs, UX checklists and design notes in the WireframePro Docs tab, link text to components, and export specs for developers.Review and collaborate on a WireframePro projectShare a WireframePro project with reviewers and editors, collect comments and suggested designs, present live and track project activity.Revision history and check-insGo back to earlier versions of a WireframePro page with automatic revisions and named check-ins, compare revisions and restore one.Export a WireframePro projectExport WireframePro pages as images, PDF, Interactive PDF, Word or PowerPoint, send them to Figma, export a selection or save a .wire file.Turn wireframes into code with Build modeUse Build mode in WireframePro to convert a page or a selected part into front-end code for HTML, React, Vue or native platforms, or into a prompt for AI coding tools.Use WireframePro from AI assistants (WireframePro MCP)Connect Claude Code, Cursor, VS Code or Codex to WireframePro with the WireframePro MCP server, and create wireframes, flowcharts and cloud diagrams from a prompt.
Was this page helpful?