Miro Prototypes

Quem pode usar: Membros do time
Planos: Business, Enterprise (complemento pago)
Plataformas: Navegador, desktop

O Miro Prototypes permite criar interfaces de usuário diretamente no canvas da Miro. 

É possível gerar fluxos de uma ou várias telas, aprimorar seus designs e aplicar estilos, além de visualizar uma simulação interativa do protótipo. Crie seu design com vários prompts específicos que geram cada elemento do protótipo. Você também pode refinar seus prompts para não precisar recomeçar do zero.

Este artigo explica como usar as funcionalidades do Miro Prototypes. Para informações gerais sobre o Miro Prototypes, consulte Visão geral do Miro Prototypes. 

NOTA: O Miro Prototypes agora está incluído no plano Business. Se você estiver em um plano Business legado ou em um plano Starter, veja o que está mudando.

Mais informações: Veja as perguntas frequentes.

Criar um protótipo com a Miro AI

Esta seção descreve como começar a criar protótipos com a Miro AI. Para aprender a começar manualmente, veja a biblioteca de prototipagem.

Começar do zero

1. No canvas da Miro, acima da Barra de criação clique em Assistentes de IA.
   O Assistente de IA abre.
2. Clique em Biblioteca de Assistentes de IA.
   Acessar Prototype na Biblioteca de Assistentes de IA 
3. Clique em Formatos > Prototype.
4. Especifique se deseja começar com um prompt de texto ou com uma captura de tela.
5. Especifique o tipo de dispositivo.
6. Especifique se o protótipo terá uma única tela ou várias telas.
7. Siga as instruções na tela para escrever seu prompt ou carregar uma captura de tela. Na caixa de resposta, você pode, opcionalmente, usar as tags de sugestão para iniciar seu prompt.
8. Finalize seu prompt então clique na Enviar seta, ou pressione ENTER no seu teclado.
   A Miro IA gera um rascunho de protótipo no canvas.
9. (Opcional) Para interromper a geração, no seu protótipo clique Parar.
10. (Opcional) Para iterar no seu protótipo, continue a inserir prompts no Protótipo painel.
    Cada iteração cria uma versão do rascunho do seu protótipo.
11. No rascunho do seu protótipo, escolha uma das seguintes opções:
    • Aplicar ao canvas
      Seu protótipo agora pode ser editado no canvas.
    • Descartar tudo
      Seu rascunho é removido do canvas. Você pode refinar seu prompt e repetir os passos 7–9.

Criar um protótipo com Assistentes de IA (Beta)

Alguns usuários já podem ter a entrada atualizada dos Assistentes de IA para prototipagem. Esta seção descreve como começar a prototipar com os Assistentes de IA. Para saber como começar manualmente, veja Biblioteca de prototipagem.

DICA: Crie seu protótipo com os Assistentes de IA para ativar o histórico de chat da IA, que lembra seus prompts, permitindo que você revise opções que já explorou e retome em qualquer board. Para mais informações, veja Como os Assistentes de IA evoluem a criação com IA na Miro e Visão geral do Miro Prototypes.

NOTA: A atualização dos Assistentes de IA para Prototypes está atualmente em Beta público. Se sua experiência não corresponder à documentação desta seção, veja Criar um protótipo com a Miro AI.

Siga estas etapas:

1. No canvas da Miro, acima da barra de criação, clique em Assistentes de IA.
   O painel Assistentes de IA é aberto.

2. Na caixa de prompt, clique em Criar prototype.
   Os Assistentes de IA estão prontos para ajudar você a criar seu prototype.
   Inicie seu prototype no painel Assistentes de IA.

   DICA: Como alternativa, você pode abrir o painel Assistentes de IA e começar a inserir prompts imediatamente. Certifique-se de indicar explicitamente que deseja criar um prototype, por exemplo: "Create a prototype for a checkout flow."

   DICA: Você também pode acessar o Prototype Format em Tools, Media and Integrations (+) na Creation bar.

3. Escreva um prompt descrevendo o prototype que deseja que os Assistentes de IA gerem. 
4. Clique na seta para cima ou pressione ENTER no seu teclado.
5. (Opcional) Para interromper a geração, no seu protótipo clique Parar.
6. (Opcional) Para iterar no seu protótipo, continue a inserir prompts no Protótipo painel.
   Cada iteração cria uma versão do rascunho do seu protótipo.
7. No rascunho do protótipo, escolha uma das opções a seguir:
   • Aplicar ao canvas
     Seu protótipo agora pode ser editado no canvas.
   • Descartar tudo
     Seu rascunho foi removido do canvas. Você pode refinar seu prompt e repetir os passos 3–6.

DICA: Comece pequeno e seja específico. Gerar menos telas de uma vez produz resultados mais precisos em menos tempo. Indique explicitamente os elementos-chave que você quer para cada tela, como botões, seções ou ações.

DICA: Aplique vários rascunhos de protótipo no canvas. Você pode comparar e explorar decisões de design e continuar refinando a melhor opção.

DICA: Um protótipo pode levar de 1 a 3 minutos para ser gerado, dependendo da complexidade do prompt e do tamanho do conteúdo. Se seu protótipo demorar mais para ser gerado, simplifique seu prompt ou reduza o número de telas.

DICA: Você pode incluir uma URL no seu prompt e instruir o Assistente de IA a aplicar os estilos do site vinculado.

Usar o canvas como prompt

Selecione conteúdo no canvas para usar no seu prompt. Por exemplo, você pode ter um briefing de design em um Doc ou em notas adesivas. O protótipo pode usar esse conteúdo como contexto para ser criado. 

Siga estas etapas:

1. Selecione o conteúdo do canvas. Por exemplo, um Doc ou notas adesivas. Opcionalmente, você pode selecionar vários objetos.
2. No canvas da Miro, acima da Creation bar clique Sidekicks.
   O painel Sidekick abre.
3. Clique no ícone Prototype na parte inferior da caixa de prompt.
4. Siga as instruções exibidas na caixa de prompt para gerar seu protótipo.
   A Miro gera seu protótipo a partir das suas especificações e do conteúdo selecionado do canvas.

NOTA: Você pode adicionar uma ou mais capturas de tela ao canvas e fazer com que o Miro Prototypes crie várias telas no seu protótipo a partir das capturas selecionadas.

DICA: Você pode usar um prompt para pedir à Miro AI que utilize objetos específicos do canvas, selecionando-os no canvas. Por exemplo, no seu prompt você pode dizer "Use as capturas de tela no canvas como guias para criar o protótipo." Se houver muitos objetos semelhantes no canvas, descreva explicitamente quais objetos você quer que a Miro AI use.

Converter um quadro do Figma incorporado em um Miro Prototype

1. No Figma, selecione o quadro relevante.
2. Clique com o botão direito no quadro e selecione Copiar/Colar como > Copiar link para seleção. 
3. Navegue até seu board da Miro.
4. Cole o link do Figma.
5. Conecte o Figma (se ainda não o fez).
6. Selecione a incorporação do Figma no canvas.
7. Clique em Converter em no menu de contexto da incorporação.
8. Selecione Protótipo no menu Converter para.
9. A Miro AI converterá o protótipo incorporado do Figma em um protótipo editável na Miro.

Iterar seu protótipo

Seu primeiro rascunho pode não ser o resultado perfeito. Antes de aplicar o rascunho ao canvas, você pode continuar a iterar e criar várias versões do seu protótipo.

1. Criar protótipo com a Miro AI. Não aplicar ao canvas.
   O próximo passo no painel Prototype é What would you like to do next?
2. Escolha Editar protótipo. 
3. Para um fluxo com várias telas, escolha a tela que deseja iterar.
4. Na caixa de resposta, descreva as alterações que deseja.
5. Clique na seta para cima ou pressione Enter no teclado.
   A Miro gera uma nova versão do seu protótipo.

NOTA: As edições só podem ser feitas em uma tela por vez.

DICA: Use o contexto do canvas. Selecione Documentos, diagramas, notas adesivas ou outro conteúdo do board para dar um prompt à Miro AI.

Iterar usando uma captura de tela como contexto visual

Antes de aplicar o protótipo ao canvas, você pode usar uma captura de tela ou outro protótipo já no canvas como contexto para iterar o rascunho.

1. Criar protótipo com a Miro AI. Não aplique ao canvas.
   O próximo passo no painel Prototype é O que deseja fazer a seguir?
2. Clique em Editar protótipo.
3. Para um fluxo de várias telas, escolha a tela que deseja iterar.
4. Selecione uma screenshot no board.
5. Na caixa de resposta, descreva as alterações que deseja com base na screenshot selecionada.
6. Clique na seta para cima ou pressione Enter no seu teclado.
   A Miro gera uma nova versão do seu protótipo. 

DICA: Você pode usar telas de protótipos já presentes no board como contexto visual. Crie e aplique um protótipo ao board. Selecione uma tela.

Editar com IA

Para qualquer protótipo já aplicado ao canvas, você pode continuar iterando com Editar com IA. Use Editar com IA para refinar em vez de recriar, por exemplo, quando quiser criar uma versão em modo escuro de um protótipo existente.

Siga estas etapas:

1. Para qualquer protótipo aplicado ao canvas, no menu de contexto clique em Editar com IA.
   O painel do Assistente de IA abre.
    
   Editar com IA permite refinar um protótipo existente.

   OBSERVAÇÃO: É possível usar Editar com IA e o Assistente de IA em apenas um protótipo por vez. Para alternar, feche o Assistente de IA e reabra Editar com IA no protótipo desejado.

2. Na caixa de prompt, descreva as alterações que deseja fazer. Por exemplo, "Converter para tema escuro".
3. Para executar seu prompt, clique no botão com seta para cima ou pressione ENTER no teclado.
   O Assistente de IA gera seu protótipo refinado.
4. (Opcional) Continue a enviar prompts ao Assistente de IA e aperfeiçoar seu protótipo. Você pode selecionar uma versão antes de aplicar seu protótipo ao canvas.
5. Acima do protótipo rascunhado, clique em Adicionar ao canvas.

Aplicar estilos de protótipo a partir de uma URL

Para aplicar um estilo de uma URL existente ao seu protótipo:

1. Criar protótipo.
2. Selecione a(s) tela(s) do seu protótipo.
   O menu de contexto aparece.
3. No menu de contexto, clique em Editar com IA para abrir o painel do Assistente de IA.
4. Na caixa de prompt, peça ao Assistente de IA para aplicar o estilo a partir da URL incluída (certifique-se de incluir a URL completa).
5. O Assistente de IA aplicará o estilo visual da URL em uma versão atualizada do seu protótipo no board.

Aplicar estilos de protótipo a partir de uma captura de tela

Se quiser que seu protótipo corresponda a um site ou produto existente, você pode extrair estilos de uma captura de tela e aplicá-los às suas telas.

1. Criar protótipo.
2. Selecione as telas do protótipo.
   O menu de contexto aparece.
3. Clique no ícone da Miro AI no menu de contexto.
4. Selecione Importar estilo de imagem.
   Importe estilos e aplique-os ao seu protótipo
5. Escolha o arquivo de imagem do qual deseja importar o estilo.
6. Os estilos são aplicados ao seu protótipo.

DICA: Aplique os estilos primeiro ou por último. Para garantir que todos os elementos do seu protótipo sigam um tema, aplique o tema no início do design do protótipo ou como etapa final.

Converter screenshots em protótipos editáveis

Você pode converter uma screenshot de um design ou da interface de um concorrente em um protótipo editável.

1. Adicione a captura de tela ao seu board da Miro.
2. Clique na imagem para abrir o menu de contexto.
3. Clique no botão Converter em e depois em Protótipo.
4. No submenu, escolha o tipo de dispositivo (Mobile, Tablet, Desktop, Personalizado).
5. A IA reconstruirá a captura de tela como um protótipo editável, com texto, botões, layout e outros elementos.
6. Agora você pode modificar, adicionar elementos ou editar esta versão conforme necessário.

DICA: Converta uma captura de tela em um mockup editável. Em seguida, use um prompt para que a Miro AI continue a editar. Você também pode usar uma captura de tela como contexto no seu prompt e gerar um protótipo. Para usar várias capturas de tela, selecione todas as capturas e copie como imagem. Em seguida, use a imagem como contexto no seu prompt.

Selecionar uma versão do protótipo

Cada refinamento cria uma versão do protótipo. Ao refinar seu protótipo, o seletor de versões fica acima do rascunho do protótipo. 

Clique nas setas para alternar entre as versões. Quando tiver escolhido uma versão, clique em Adicionar ao canvas. Sua versão será aplicada ao canvas.

Escolha qual refinamento ou versão do seu protótipo adicionar ao canvas.

DICA: Antes de clicar em Adicionar ao canvas, você pode selecionar uma tela de qualquer versão e copiar e colar no canvas. Isso garante que você possa salvar uma tela de uma versão que poderá descartar. 

DICA: Depois de adicionar uma versão ao canvas, você pode acessar versões anteriores no histórico de chat da IA.

Visualizar protótipo

No menu de contexto do protótipo, clique em Visualizar. A pré-visualização é carregada.

DICA: Para obter uma visualização totalmente interativa do protótipo, use linhas de conexão entre as telas.

Adicionar linhas de conexão para tornar um protótipo interativo

Para adicionar ou alterar conexões entre objetos no seu protótipo da Miro:

1. Clique em um elemento (como um botão) no seu protótipo.
2. Arraste o ícone da Linha de conexão para a tela à qual deve se conectar.
3. No modo de visualização, clicar no elemento levará os usuários para a tela vinculada.

Ocultar linhas de conexão

Em protótipos com muitas linhas de conexão, você pode ocultá-las para simplificar a visualização.

No modo canvas, selecione seu protótipo. No menu de contexto, clique nos três pontos. Em seguida, selecione Ocultar conectores.

No modo foco, no canto superior esquerdo, clique no botão Ocultar | Mostrar conectores.

Ocultar ou mostrar conectores no modo foco.

Repita os mesmos passos para mostrar os conectores.

DICA: Use atalhos de teclado para ocultar ou mostrar os conectores. No seu teclado, pressione Shift + E. No modo canvas, para usar os atalhos, selecione seu protótipo.

Modo foco

O Miro Prototypes inclui o modo foco. Entre no modo foco para trabalhar no seu protótipo sem que outros conteúdos do board estejam visíveis, permitindo que você trabalhe sem distrações.

Para entrar no modo foco, selecione seu protótipo da Miro. No menu de contexto, clique em modo foco.

O modo foco oferece uma experiência do Miro Prototypes sem distrações.

Copiar para o Figma

Compartilhe seu protótipo com designers no Figma sem precisar reconstruí-lo manualmente. Você pode copiar seu protótipo ou telas individuais.

Copiar um protótipo para o Figma

1. Clique no quadro do protótipo.
   O menu de contexto Formato aparece.
2. No menu de contexto, clique nos três pontos verticais para abrir o menu Mais.
3. Clique em Copiar para o Figma.
   A Miro copia seu protótipo para a área de transferência.
   Copie seu protótipo para o Figma. 
4. No Figma, cole seu protótipo. Você pode usar (Windows) Ctrl + V ou (MacOS) Command + V como atalhos.
   O protótipo é colado no Figma.

Copiar tela de protótipo para o Figma

1. Clique para selecionar uma tela do protótipo.
   O menu de contexto do widget aparece.
2. No menu de contexto, clique nos três pontos verticais para abrir o menu Mais.
3. Clique em Copiar para o Figma.
   A Miro copia sua tela do protótipo para a área de transferência.
4. No Figma, cole seu protótipo. Você pode usar (Windows) Ctrl + V ou (MacOS) Command + V como atalhos de teclado.
   A tela do seu protótipo é colada no Figma.

Conexão do Claude Code com Miro Prototypes

Crie Miro Prototypes a partir dos seus projetos Claude Code por meio do Model Context Protocol.

1. Conecte-se ao servidor MCP da Miro seguindo estas instruções.
2. Copie e execute este comando na sua ferramenta de IA depois de conectado:
   "Fetch this design file, and implement the relevant aspects of the design. [Relevant Miro board link]"
3. Você poderá visualizar o Miro Prototype no seu board da Miro e ver o Claude Code na janela do Terminal.

Compartilhar um link do seu prototype (Beta)

Você pode copiar um link exclusivo para compartilhar com membros do time ou stakeholders externos que não tenham conta na Miro. 

1. No menu de contexto do protótipo, clique nos três pontos verticais para abrir o menu Mais.
2. Clique em Compartilhar e exportar > Compartilhar protótipo.
   O modal Compartilhar protótipo abre.
3. Clique em Copiar link.
4. (Opcional) Clique em Visualizar no navegador para ver como qualquer pessoa com seu link vê seu protótipo.
5. Compartilhe seu link.

NOTA: Para que usuários externos acessem, seu board deve ser público. Os usuários externos só podem acessar o protótipo no modo foco, e não têm acesso a nenhum outro conteúdo do canvas. Eles podem interagir com hotspots e com o fluxo do protótipo. Se as permissões do board permitirem, os usuários externos também podem comentar.

DICA: Também é possível copiar um link compartilhável no modo foco: No canto superior direito, clique nos três pontos. Em seguida, clique em Compartilhar protótipo. E no modo de pré-visualização: No canto superior direito, clique em Compartilhar protótipo.

Exportar seu protótipo

Você pode exportar seu protótipo como SVG. Você também pode usar o Servidor Model Context Protocol (MCP) da Miro para exportar para um editor de IA para repositórios de código; os times podem usar a exportação para gerar código funcional e acelerar o desenvolvimento.

Exportar para SVG

1. No menu de contexto do protótipo, clique nos três pontos verticais.
2. Clique em Compartilhar e exportar > Exportar como imagem.
   Abre-se uma janela de seleção e o modal Exportar imagem como.
3. Ajuste a janela de seleção para que cubra seu protótipo.
4. No modal Exportar imagem como, selecione Vetor – SVG.
5. Clique em Exportar. 

DICA: Você pode exportar uma única tela como SVG pelo menu de contexto. Selecione uma tela no seu protótipo. No menu de contexto, clique nos três pontos na vertical e depois em Exportar como imagem. O modal Exportar como imagem é aberto; em seguida, selecione Vetor – SVG.

NOTA: Para exportações de SVG de protótipos que contêm imagens, se você importar o SVG para outro software para edição, como o Figma, as imagens serão substituídas por espaços reservados.

Exportar com o Servidor MCP da Miro

Para exportar seu protótipo para um editor de IA para base de código, por exemplo o Cursor, inclua no prompt a URL do board com o ID do board. Certifique-se de fornecer instruções para gerar código com base no protótipo.

Para saber mais sobre como usar o Miro MCP, consulte Visão geral do servidor Miro MCP.

Um editor de código com IA, como o Cursor, aceita a URL do board contendo o ID para gerar código com base no seu protótipo.

Perguntas frequentes