# Make a clickable prototype

> Turn wireframe screens on a MockFlow board into an interactive prototype that AI links together, then refine it with AI.

Source: https://mockflow.com/docs/make-a-clickable-prototype

A prototype shows how an app or website flows: tapping a button or a tab opens the next screen. In MockFlow you build one straight from the wireframes on your board. Select the screens, click **Prototype**, and AI links them into one interactive prototype, placed on the board beside them.

![Three phone wireframes of a plant care app on a board, with the clickable prototype made from them on the right](https://assets.mockflow.com/docs/media/5cbbaa20edfa4c26b489e836fc6cb45b.webp)

## Turn wireframes into a prototype

![Selecting three wireframes, clicking Prototype, describing the flow, and the prototype appearing beside the screens](https://assets.mockflow.com/docs/media/dba0580a2cb84092a0c260b0feda0893.webp)

1. Select the wireframes for the flow. Click one screen, or Shift+click to add more. To make a prototype of one screen, select only that screen.
2. Click **Prototype** (1) in the toolbar.
3. Optionally describe how the prototype should behave or look, for example "Tapping a plant opens its detail screen".
4. Click the send button. AI builds the prototype and places it on the board as a **Prototype** item.

![Three wireframes selected, with Prototype numbered in the toolbar](https://assets.mockflow.com/docs/media/b007201c48bc47b58d2dcb4bd9b46df0.webp)

You can also start from the widget library: when you open **Library** on a wireframe, tick the screens to include and click **Prototype** in the sidebar.

> **Note** AI decides which buttons, links and tabs lead to which screen, based on the screens and your description. To change a link, ask for it in a prompt, as described below.

## Refine the prototype with AI

Select the prototype and open the AI menu on the left of its toolbar.

![The prototype AI menu with Select and edit with AI and Embed Figma prototype numbered](https://assets.mockflow.com/docs/media/8aa373f1bd1d440894236f4ae70d991d.webp)

- **Modify with AI:** describe a change to the whole prototype, such as a new color scheme or an extra step.
- **Select & edit with AI** (1): click any element in the prototype, then choose **Modify element** to change only that element, **Modify screen** to change the whole screen shown, or **Add screen** to generate a new screen and link to it from the element.
- **Convert wireframes:** pick wireframes from the board in a list and turn them into this prototype.
- **Generate prototype:** describe an app and let AI create the screens from scratch, without wireframes.

## Embed a Figma prototype

If a prototype already exists in Figma, show it on the board instead. Choose **Embed Figma prototype** (2) in the AI menu, paste the Figma prototype or file URL and click **Embed**.

## Plans

Prototyping is available on every plan. The Basic plan includes lite prototyping, and the Plus and Max plans include wireframing and prototyping with no page limits. AI actions use AI credits.

## Next steps

- [Play and share a prototype](/docs/play-and-share-a-prototype)
- [Generate and edit screens with AI](/docs/generate-wireframes-with-ai)
- [Export a wireframe](/docs/export-a-wireframe)