Who can do it: All users
Which plans: All plans, Enterprise admins can request beta access here.
Which platforms: Browser, Desktop
Prototyping lets you create interactive prototypes using Create with AI 2.0.
More information: See Prototyping overview.
Create a prototype with Create with AI
- Open the Create with AI (
) panel.
- Select Prototype.
- Select the Device type for the prototype.
- Select whether you want to create a Multi screen flow or Single screen prototype.
- Enter your prompt. Providing more detail will create more accurate results.
- Press enter or click the Send icon.
- Your prototype will be generated on the Canvas. Note that generating prototypes may take a few minutes.
- If you’re happy with the first result and want to begin editing manually, click Apply to canvas.
- If you want to start over, click Discard version.
- If you want to edit or refine your prototype using Create with AI, proceed to Refine your prototype below.
Add context from the Canvas
You can add context to your AI prompt, such as a design brief document or sticky notes, to create a prototype that more closely fits your design needs.
- Select relevant board content to add context to your prototype.
- Open the Create with AI (
) panel.
- Follow the prompts to create a prototype with Create with AI.
- Create with AI will use the selected board content as context for your prototype.
Refine your prototype with AI
Once your Prototype draft has been created, you can refine the results.
- Click an option in the prompt window to either Add a screen or Edit prototype.
- Enter the changes you want to make or the screen you want to add.
- Press enter or click the Send icon.
- Repeat this process until you’re satisfied with the prototype output.
- When you’re done, click Apply to canvas.
- You can now manually edit your prototype.
Apply styles to your prototypes
If you want to apply the visual style from an existing website to your prototype, you can use Miro AI to automatically apply the style.
- Select your prototype screen(s).
- Click on the Miro AI icon in the Context menu.
- Select Import style from image.
- Choose the image file you’d like to import the style from.
- Miro AI will apply the style to your prototype.
Add Connector lines to make a prototype interactive
AI generated prototypes include connector lines, though you can modify them or add more.
- Click on the element in your prototype that should lead to another screen. A Connector line icon will appear next to the element.
- Click and drag the Connector line icon to the relevant screen.A connector line will appear.
- In the prototype Preview, when you click on a connected element, you’ll be directed to the connected screen.
Create a prototype from an existing design
If you want to iterate on an existing design, you can use Miro AI to convert screenshots into interactive prototypes.
- Add a screenshot of your existing design to the Canvas.
- Click on the screenshot to view the Context menu.
- Click on the Miro AI icon.
- Select Convert image to prototype.
- Select the device type: Mobile, Tablet, or Desktop.
- Miro AI will convert your design into an interactive prototype.