Miro Prototypes

Who can do it: Team members
Which plans: Business, Enterprise (Accelerate license)
Which platforms: Browser, Desktop

Miro Prototypes enables you to create interactive user interfaces directly on the Miro canvas. Prototypes render as real HTML rather than Miro shapes, so screens have higher-fidelity layouts, fonts, gradients, and shadows, closer to a finished product.

Describe what you want to build, and Miro AI generates it directly on the canvas, ready to edit. Continue prompting to refine the result, connect screens into a flow, and preview or hand off your prototype when it's ready.

For general information about Miro Prototypes, see Miro Prototypes overview. For manual, template-based prototyping, see the Wireframing library.

NOTE: Miro Prototypes is included in the Business plan. If you're on a legacy Business plan, or a Starter plan, see what's changing. Miro Prototypes is included with the Accelerate license for Enterprise plans.

More information: See FAQ.

Create a prototype with Sidekick

1. Ensure Sidekick is active. If you do not see the Sidekick prompt box at the bottom of the your board, click Show Sidekick above the Creation bar.
2. Click inside the Sidekick prompt box.
3. You can type or dictate a description of your prototype. Or, click the plus (+) button, and go to Formats, then choose Prototype.
4. In your description, ensure you specify the device type, and single or multi-screen.
5. To generate your prototype, click the up arrow, or press ENTER on your keyboard. Miro AI generates your prototype directly on the canvas, ready to edit.
6. (Optional) During generation, a stop button replaces the up arrow. Click the stop button to terminate generation.
7. (Optional) Continue prompting Sidekick to refine your prototype.

TIP: You can move your conversation to a side panel. In the Sidekick prompt box, in the upper-right click Open in side panel.

More information: See Sidekicks overview.

Use content as prompt context

Use content on the canvas, like a Doc, sticky notes, or another prototype, to use as context for generating a prototype.

1. Ensure Sidekick is shown. If you do not see the Sidekick prompt box on the bottom of the your board, click Show Sidekick above the Creation bar.
2. Select an object or multiple objects on your canvas.
3. Click inside the Sidekick prompt box. Your selected objects are indicated as labels.
4. (Optional) Click the 'x' for any label to remove that object from context.
5. Type or dictate your prompt.
6. To generate your prototype, click the up arrow, or press ENTER on your keyboard. Miro AI generates your prototype, based on context and your prompt, directly on the canvas.
7. (Optional) Continue prompting Sidekick to refine your prototype.

TIP: In your prompt, you can specify which selected objects to use for specific purposes. For example, "Use design brief Doc to generate a checkout flow, and apply proposed copy from selected sticky notes."

Create a prototype from a Figma frame

1. In Figma, right-click the frame you want to move to Miro and select Copy/Paste as > Copy link to selection.
2. In Miro, paste the link anywhere on your canvas. If you have not already connected Figma to Miro, you are prompted to connect. Your Figma content embeds in your canvas.
3. Click to select your Figma frame.
4. In the frame context menu, click Convert to and select Prototype. Miro AI converts your Figma frame into an editable Miro Prototype.

Create a prototype from a screenshot

1. Upload or paste a screenshot to your Miro canvas.
2. Click to select the screenshot.
3. In the screenshot context menu, click Convert to and select Prototype.
4. Choose the device type: Mobile, Tablet, Desktop, or Custom. Miro AI converts your screenshot into an editable Miro Prototype, including text, buttons, layout, and other elements.

TIP: For multiple screenshots, select all screenshots you want to use, then copy as image. Use the screenshots image as context in a Sidekick prompt.

Add an HTML embed to your board

An HTML embed runs your HTML as a live, interactive demo, instead of rebuilding it into editable Miro elements.

NOTE: Use an embed when you want to show working HTML as-is, and use a prototype when you want an editable, AI-refinable version of it.

Drop or paste HTML onto your board

1. Drag an HTML file onto your Miro board, or paste HTML code directly onto the canvas.
2. Choose Embed to keep your HTML running as-is. Miro adds your HTML to the board as an interactive embed.
3. Click the embed to interact with it, the same as you would in a browser.

NOTE: Scripts in an HTML embed run in a sandboxed frame isolated from the rest of your board. Only embed HTML from sources you trust.

Convert an HTML embed to a prototype

To make an embed's content editable, and open to further AI refinement, convert it to a prototype.

1. Click to select your HTML embed.
2. In the context menu, click Convert to, then select Prototype. Miro detects the prototype screens from your embed, and selects your current screen automatically.
3. (Optional) Click through your embed to add more screens to convert. Each screen you click is added to the conversion.
4. Click the check-mark (Create prototype) button above your embed.
5. Miro converts and imports your screens as an editable Miro Prototype.

Send an HTML embed to Miro from Claude

If you're working in Claude and have a design you want on your board, send it to Miro directly.

1. In Claude, open the design you want to send to Miro.
2. Send it to your Miro board, or to a new board if you don't specify one. Claude sends a self-contained HTML bundle, including images, fonts, and styles, to Miro.
3. Open your Miro board to view the embed.

More information: See Miro MCP Server overview.

Prototype context menu

Rename your prototype

In the prototype context menu, double-click the title to rename.

Convert to wireframe

To edit your prototype manually, you can convert your prototype from HTML (default) to a free-form wireframe and use the Wireframing library.

In the prototype context menu, click Convert to, then select Free-form wireframe.

IMPORTANT: Conversion from HTML prototype to wireframe is one-way. You cannot iterate wireframes with Miro AI. Any new generation creates an HTML prototype.

Preview prototype

Click the Preview prototype (play) button to launch a preview of your prototype. In a multi-screen prototype, click the navigation arrows on the bottom to move between screens.

TIP: Create an interactive preview. Add connectors to your prototype screens, then open preview mode. You can click through connected UI elements and test the flow.

Focus mode

Focus mode enables a distraction-free prototyping experience.

In the prototype context menu, click Focus mode.

TIP: In Focus mode, use Precise resizing for pixel-perfection.

More information: See Formats and focus modes.

Auto/Release layout

By default, Miro AI auto-arranges HTML prototypes on a structured grid. You can reorder elements and screens while preserving alignment and spacing.

To arrange your prototype in whatever layout you want, you can optionally disable auto layout. In the prototype context menu, click Release layout.

To re-enable auto layout, in the same context menu position click Auto layout.

More

The More (three-dots) menu provides all other actions like copy, link, export, save as template, hide connectors, and many more.

Click the three-dots button to open the More menu.

TIP: The More menu includes the Create variants sub-menu, which enables you to select pre-set, Miro AI refinements to your prototype.

Refine your prototype with Sidekick

Create variants

Use the Create variants menu to refine your prototype instead of rebuilding from scratch.

1. Click the three-dots in the prototype context menu to open More.
2. Hover over Create variants.
3. Select a variant option, like Rewrite copy or Shorten flow. Or click Create with Sidekick to open the Sidekick panel, where you can type or dictate your refinements in a prompt.

TIP: If you want to refine only one screen in a multi-screen prototype, select the screen you want to change before you prompt, to ensure Sidekick edits only the selected screen.

Refine with prompts

You can continue prompting Sidekick to refine your prototype anytime after generation.

Click your prototype to select, or click a single prototype screen. Click inside the Sidekick prompt box. Then type or dictate your refinement.

You can optionally select other objects on the canvas for context.

In the Sidekick prompt box, you can optionally click Open in side panel to move your conversation away from the canvas.

Apply styles from a URL

In your Sidekick prompt, you can paste a URL and instruct Sidekick to apply styles based on the website to your prototype.

Review earlier versions

Sidekick keeps a history of your prompts. To return to an earlier conversation, click inside the Sidekick prompt box. The Sidekick box expands. In the top-left, click Untitled chat or {Chat name}. In the drop-down, select the conversation you want to review.

Connect your prototype screens

Add interactive connector lines

1. Click an element on your prototype. For example a button.
2. Drag the Connector line point to an element on another screen.
3. Open preview mode. You can now interact with your prototype where you have placed connector lines.

Hide connector lines

If your prototype has many connections, you can hide the connector lines anytime for a clean view on the canvas.

In the prototype context menu, click the More (three-dots) menu. Then click Hide connectors.

To show connector lines, in the same menu position click Show connectors.

In Focus mode, in the top-left click Hide | Show connectors.

TIP: Press Shift + E to hide or show connectors. In canvas mode, you must click your prototype to select the hotkey target.

Export and share your prototype

Copy to Figma

To copy your entire prototype, go directly to the prototype context menu. To copy a single screen in your prototype, click the screen first to select it.

1. In the prototype context menu, click the More (three-dots) menu.
2. Click Copy to Figma. Miro copies your prototype, or screen, to your clipboard.
3. Paste in Figma. Press Ctrl + V (Windows) or Command + V (macOS) on your keyboard.

Export as HTML

In the prototype context menu, click the More (three-dots) menu. Then click Share and export > Export as HTML. Your prototype downloads as an HTML file.

Export as JPG, PDF, or SVG

1. In the prototype context menu, click the More (three-dots) menu.
2. Click Share and export > Export as image.
3. Adjust the selection window to cover your prototype.
4. In the Export image as modal, select file format and size if JPG.
5. Click Export.

TIP: Export a single screen the same way: select the screen first, then follow the same steps from its context menu.

NOTE: If you import an SVG export with images into other software, like Figma, images are replaced with placeholders.

Export with Miro MCP Server

Export your prototype to a codebase AI editor, like Cursor, to generate working code. Ensure your prompt includes the board URL and board ID, with instructions to generate code based on the prototype.

More information: See Miro MCP Server overview.

Build from a prototype with Claude Code

Create a Miro Prototype from your Claude Code project, or send a prototype to Claude Code, via the Model Context Protocol.

1. Connect to Miro's MCP server by following these instructions.
2. In your AI tool, run: "Fetch this design file, and implement the relevant aspects of the design. {Miro board URL}"
3. View the Miro Prototype on your Miro board, and the Claude Code session in your terminal.

FAQ