Miro Prototypes

Who can do it: All members with Miro Prototypes add-on
Which plans: Starter, Business, Enterprise
Which platforms: Browser, Desktop

Miro Prototypes enables you to create user interfaces directly on the Miro canvas.

This article explains how to use Miro Prototyping features. For general information Miro Prototypes, see Miro Prototypes overview. 

You can prompt Prototypes to generate single and multi-screen flows, refine your designs and apply styles, and preview an interactive simulation of your prototype.

Build your design in multiple, specific prompts that generate each element of your prototype. You can also refine your prompts to avoid starting over.

More information: See FAQ.

Create a prototype with Miro AI

Start from scratch

1. On a Miro canvas, above the Creation bar click Sidekicks.
   The Sidekick panel opens.
2. Click Sidekicks library.
   Access Protoype in The Sidekicks library 
3. Click Formats > Prototype.
4. Specify whether you want to begin with a text prompt or a screenshot.
5. Specify the device type.
6. Specify a single screen, or a multi-screen prototype.
7. Follow the on-screen instructions to write your prompt or upload a screenshot. In the response box, you can optionally use the suggestion tags to begin your prompt.
8. Finish your prompt then click the Send arrow, or press ENTER on your keyboard.
   Miro AI generates a draft prototype on the canvas.
9. (Optional) To stop generation, on your prototype click Stop.
10. (Optional) To iterate on your prototype, continue to prompt in the Prototype panel.
    Each iteration creates a version of your draft prototype.
11. On your draft prototype, choose one of the following:
    • Apply to canvas
      Your prototype is now editable on the canvas.
    • Discard all
      Your draft is removed from the canvas. You can refine your prompt and repeat steps 7–9.

💡 Start small and be specific. Fewer screens generated at once produces more accurate results in less time. Explicitly state key elements you want for each screen, like buttons, sections, or actions.

💡 Apply several prototype drafts to the canvas. You can compare and explore design decisions and continue to refine the best option.

💡 A prototype can take 1–3 minutes to generate, depending on prompt complexity and content size. If your prototype takes longer to generate, simplify your prompt or reduce the number of screens.

Use canvas as prompt

Select content on the canvas to use in your prompt. For example, you have a design brief in a Doc or on Sticky notes. Prototypes can use the content as context to create your prototype. 

Follow these steps:

1. Select canvas content. For example, a Doc or Sticky notes. You can optionally select multiple objects.
2. On a Miro canvas, above the Creation bar click Sidekicks.
   The Sidekick panel opens.
3. Click Sidekicks library
   Access Protoype in The Sidekicks library 
4. Click Formats > Prototype.
5. Select A text prompt.
6. Specify device type, then specify single or multi-screen.
   The response box shows the number of objects you selected in step 1.
7. Follow the on-screen instructions to generate your prototype.
   Miro generates your prototype from your specifications and selected canvas content.

💡 You can prompt Miro AI to use specific canvas objects by selecting them on the canvas. For example, in your prompt you can say "Use screenshots on the canvas as guides for building the prototype." If you have many similar objects on the canvas, describe explicitly which objects you want Miro AI to use.

Iterate your prototype

Your first draft may not be the perfect result. Before you apply your draft to the canvas, you can continue to iterate and create multiple versions of your prototype.

1. Create a prototype with Miro AI. Do not apply to canvas.
   The next step in the Prototype panel is What would you like to do next?
2. Choose Edit prototype. 
3. For a multi-screen flow, choose the screen you want to iterate.
4. In the response box, describe the changes you want.
5. Click the up arrow or press Enter on your keyboard.
   Miro generates a new version of your prototype.

✏️ Edits can only be made one screen at a time.

💡 Use canvas context. Select Docs, diagrams, Sticky notes, or other board content to prompt Miro AI.

Iterate with a screenshot as visual context

Before you apply your prototype to the canvas, you can use a screenshot, or another prototype already on the canvas, as context to iterate your draft.

1. Create a prototype with Miro AI. Do not apply to canvas.
   The next step in the Prototype panel is What would you like to do next?
2. Click Edit prototype.
3. For a multi-screen flow, choose the screen you want to iterate.
4. Select a screenshot on the board.
5. In the response box, describe the changes you want based on the selected screenshot.
6. Click the up arrow or press Enter on your keyboard.
   Miro generates a new version of your prototype. 

💡 You can use existing prototype screens already on the board as visual context. Create and apply a prototype to the board. Select a screen.

Apply prototype styles from a screenshot

If you want your prototype to match an existing website or product, you can extract styles from a screenshot and apply them to your screens.

1. Create a Prototype.
2. Select your prototype screen(s).
   The context menu appears.
3. Click on the Miro AI icon in the Context menu.
4. Select Import style from image.
   Import styles and apply them to your prototype
5. Choose the image file you’d like to import the style from.
6. The styles are applied to your prototype.

💡 Apply styles first or last. To ensure all elements in your prototype conform to a theme, apply your theme early in your prototype design, or as a final step.

Convert screenshots into prototypes you can edit

You can convert a screenshot of a design or competitor UI into an editable prototype.

1. Add the screenshot to your Miro board.
2. Click the image to open the context menu.
3. Select the Miro AI icon > Convert image to prototype.
4. Choose the device type (Mobile, Tablet, Desktop).
5. AI will rebuild it as an editable prototype—text, buttons, layout, and other elements.
6. You can now modify, add to, or edit this version as needed.

💡 Convert a screenshot into an editable mockup. Then prompt Miro AI to continue editing. You can also use a screenshot as context in your prompt, and generate a prototype. To use multiple screenshots, select all screenshots and copy as image. Then use the image as context in your prompt.

Select a prototype version

Each refinement creates a prototype version. As you refine your prototype, the version selector is above the prototype draft. 

Click the arrows to toggle between versions. When you have chosen a version, click Add to canvas. Your version is applied to the canvas.

Choose which refinement, or version, of your prototype to add to the canvas.

💡 Before you click Add to canvas, you can select a screen from any version and copy-paste to the canvas. This ensures that you can save a screen from a version you may discard. 

⚠️ When you click Add to canvas, all other versions cannot be retrieved.

Preview a prototype

1. Select a prototype screen.
   The context menu appears.
2. From the context menu, click Preview.
   The preview loads.

💡 To get a fully interactive Prototype preview, use connector lines between screens.

Add Connector lines to make a prototype interactive

To add or change connections between objects in your Miro Prototype:

1. Click an element (like a button) on your prototype.
2. Drag the Connector Line icon to the screen it should link to.
3. In Preview mode, clicking the element will take users to the linked screen.

Focus mode

Miro Prototypes includes Focus mode. Enter Focus mode to work on your prototype without any other board content in view, enabling you to work distraction-free.

To enter Focus mode, select your Miro Prototype. In the context menu, click Focus mode.

Focus mode enables a distraction-free Miro Prototypes experience.

Export your prototype

You can export your prototype as SVG. You can also use the Miro Model Context Protocol (MCP) Server to export to a codebase AI editor; teams can use the export to generate working code and accelerate development.

Export to SVG

1. On the board bar, click the vertical three-dots.
2. Click Board > Export > Export as image.
   A selection window, and the Export image as modal, opens.
3. Adjust the selection window so it covers your prototype.
4. In the Export image as modal, select Vector – SVG.
5. Click Export. 

💡 You can export a single screen as SVG from the context menu. Select a screen in your prototype. From the context menu, click the vertical three-dots, then click Export as image. The Export as image modal opens, then select Vector – SVG.

✏️ For prototype SVG exports with images, if you import the SVG to other software for editing, like Figma, images are replaced with placeholders.

Export with Miro MCP Server

To export your prototype to a codebase AI editor, for example Cursor, include the board URL with board ID in your prompt. Ensure that you provide instructions to generate code based on the prototype.

To learn more about using Miro MCP, see Miro MCP Server overview.

A codebase AI editor like Cursor accepts a Miro board URL with board ID to generate code based on your prototype.

FAQ