> For the complete documentation index, see [llms.txt](https://docs.manyfast.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.manyfast.io/en/plan/wireframe.md). # Wireframe A Wireframe is a document that visualizes which UI elements make up each page defined in the User Flow. It implements just the placement of major elements like buttons, text, and inputs, and the navigation between screens — so you can review the layout and flow in the fastest possible way before final design. ### 1. Generating a Wireframe To generate a Wireframe, you need **at least one completed User Flow version**. User Flows that are still generating or that failed to generate cannot be selected. #### Start generating Set the following items in the generation modal. * **Select a User Flow**: Choose the User Flow version the Wireframe will reference. The Wireframe is generated based on the page nodes and the connections between pages defined in the User Flow, and only one Wireframe can be made per User Flow. * **Select a device**: Choose either desktop or mobile as the screen type. * Desktop: A landscape screen using top and side menus. * Mobile: A portrait screen using a bottom menu bar. * **Select pages**: Choose which pages from the User Flow you want to turn into Wireframes. You can select by section all at once, or use 'Select all' / 'Clear selection'. * **Additional requests (optional)**: Freely enter additional instructions to pass to the AI. The AI references the Functional Specification and User Flow together when generating, so you don't need to re-enter your planning context — just add any additional requests if needed. #### Watching the generation Pages don't appear all at once — they're added to the list one by one as they finish. While generation is in progress, you can already open and view the pages that are completed. #### Credit guide Wireframes are **free for the first 25 pages for every group**, and **after that they can only be generated on the PRO plan**. You can see the **remaining free pages** in the bottom right of the generation dialog. * The first 25 pages per group can be generated for free. * Once you've used all 25 free pages, generation is only available on the PRO plan. * The PRO plan provides 10 free pages per day. * Beyond the free quota, each page consumes 5 credits. ### 2. Viewing the Wireframe You can view generated Wireframes in a viewer made up of a left canvas and a right panel. #### Left canvas * **Page info**: Click the 'Page info' button at the top right of the canvas to see the name and description of the currently selected page, as well as this page's previous and next routes. You can regenerate the page using the ['Edit page'](/plan/wireframe.md#id-4) button. * **Move between pages**: Use the < > buttons at the bottom center of the canvas to move to the previous or next page. * **Zoom in / out**: Use the − + buttons at the bottom left of the canvas to enlarge or shrink the view, and the fit button to size the screen to the viewer. #### Right panel * **Linked User Flow info**: The top of the panel shows the name of the User Flow this Wireframe is based on, and you can click the 'View User Flow' button to jump straight to that User Flow. * **Wireframe list**: Click the list icon at the top right of the panel to see the list of Wireframes generated for this Project, and create a new Wireframe. * **Regenerate the Wireframe**: Below the User Flow info, you'll find the ['Regenerate the entire Wireframe'](/plan/wireframe.md#id-4) button. If there are still pages that haven't been generated yet, a 'Continue generating' button is shown as well. * **All-pages list**: The bottom of the panel shows the full page list. This matches the User Flow's page node list, and section grouping follows the User Flow's sections too. Click any page to view that screen immediately. #### Wireframe list This page lets you see the list of Wireframes generated for this Project and create new ones. * Click the **'Generate Wireframe'** button at the top to create a new Wireframe. * Wireframes don't have separate names — they inherit the name of the User Flow they're based on. * Click the menu button next to an item to **delete that Wireframe** or **jump to the linked User Flow**. ### 3. Try the Prototype A Wireframe is not just an image — it's a clickable prototype. The point is to experience how your planned service actually flows on real screens, in the fastest way possible before final design. * **Move between screens**: Click an interactive element drawn on the canvas (button, link, etc.) and the prototype moves to the next screen along the path defined in the User Flow. * **Find clickable elements**: Click anywhere on the screen to highlight clickable / navigable elements in blue, so you can see at a glance where you can click. * **Scroll the screen**: The screen is shown as a fixed-size frame matching the device you chose at generation time, and if the content is long, you can scroll within that frame to see the rest. {% hint style="info" %} Wireframe quality: Wireframes are drawn as simple shapes with minimal details such as color and fonts. The focus is on checking whether the layout of the elements and the flow between screens work the way you intended. {% endhint %} ### 4. Regenerating a Wireframe You edit Wireframes by passing additional requests to the AI to regenerate them. Direct editing of individual elements is not yet supported. Depending on the situation, you can choose the regeneration scope from the options below. * **Edit page** (single-page regeneration): Regenerates only one specific page. Use this when only some pages need changes. Click the 'Page info' button at the top right of the canvas to regenerate. * **Continue generating**: Adds pages to an existing version that haven't been generated yet. The device type follows the existing version as is. * **Regenerate the entire Wireframe**: Regenerates the selected pages as a new version. Use this when you need a large structural change or want to change the additional requests. The page composition of a Wireframe is generated based on the User Flow's page nodes. To add or remove pages, first edit the page nodes in the User Flow, then reflect those changes with 'Regenerate the entire Wireframe' or 'Continue generating'. {% hint style="info" %} Editing a Wireframe directly through chat is not currently supported. Chat is only used for reading the generated Wireframe content as reference. {% endhint %} --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.manyfast.io/en/plan/wireframe.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.