Miro Prototypes

Quem pode usar: Membros do time
Quais planos: Business, Enterprise (licença Enterprise Accelerate)
Quais plataformas: Navegador, desktop

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

Você pode gerar fluxos de tela única e multi-tela, refinar seus designs e aplicar estilos, e visualizar uma simulação interativa do seu protótipo. Construa seu design com vários prompts específicos, cada um gerando um elemento do seu protótipo. Você também pode refinar seus prompts para evitar ter que recomeçar.

Este artigo explica como usar os recursos do Miro Prototypes. Para informações gerais sobre o Miro Prototypes, veja Visão geral do Miro Prototypes. 

Nota: 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. Miro Prototypes está incluído na licença Accelerate para planos Enterprise.

Mais informações: Veja perguntas frequentes.

Criar um protótipo com Miro AI

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

Começar do zero

1. No canvas da Miro, acima da Barra de criação clique Assistentes de IA.
   O painel do Assistente de IA abre.
2. Clique em Biblioteca de Assistentes de IA.
   Acessar protótipo na Biblioteca de Assistentes de IA 
3. Clique em Formatos > Protótipo.
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 é um protótipo de tela única ou com 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 começar seu prompt.
8. Finalize seu prompt e clique na Enviar seta, ou pressione ENTER no teclado.
   A Miro AI gera um rascunho de protótipo no canvas.
9. (Opcional) Para interromper a geração, no seu protótipo clique em 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 seu rascunho do protótipo.
11. No seu 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 é 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, consulte 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 explorou anteriormente e retome em qualquer board. Para mais informações, consulte 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á 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 abre.

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

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

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

3. Escreva seu prompt para descrever 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 em Parar.
6. (Opcional) Para iterar no seu protótipo, continue a inserir prompts no Prototype painel.
   Cada iteração cria uma versão do rascunho do seu protótipo.
7. No seu rascunho de 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 3–6.

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

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

DICA: Um protótipo pode levar de 1–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ê tem um brief de design em um Doc ou em notas adesivas. Os protótipos podem usar esse conteúdo como contexto para criar seu protótipo. 

Siga estas etapas:

1. Selecione 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 Barra de criação clique em Sidekicks.
   O painel do Sidekick abre.
3. Clique no ícone Prototype na parte inferior da caixa de prompt.
4. Siga as instruções exibidas na tela na caixa de prompt para gerar seu protótipo.
   A Miro gera seu protótipo com base nas suas especificações e no conteúdo selecionado do canvas.

OBSERVAÇÃO: Você pode adicionar uma ou mais screenshots ao seu canvas e fazer com que o Miro Prototypes crie várias telas no protótipo a partir das screenshots selecionadas.

DICA: Você pode pedir à Miro AI, via prompt, que utilize objetos específicos do canvas selecionando-os diretamente. Por exemplo, no seu prompt você pode dizer "Use screenshots on the canvas as guides for building the prototype." Se houver muitos objetos semelhantes no canvas, descreva explicitamente quais objetos você quer que a Miro AI use.

Converter um quadro incorporado do Figma 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 da 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 para no menu de contexto da incorporação.
8. Selecione Protótipo no menu Converter para.
9. A Miro AI converterá seu protótipo incorporado do Figma em um protótipo editável da Miro.

Itere seu protótipo

Seu primeiro rascunho pode não ser o resultado perfeito. Antes de aplicar seu rascunho no 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 aplique ao canvas.
   O próximo passo no painel Protótipo é O que você gostaria de fazer em seguida?
2. Escolha Editar protótipo. 
3. Para um fluxo de 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 uma tela por vez.

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

Iterar com uma captura de tela como contexto visual

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

1. Criar protótipo com Miro AI. Não aplique ao canvas.
   O próximo passo no Protótipo painel é O que você gostaria de 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 captura de tela no board.
5. Na caixa de resposta, descreva as alterações que deseja com base na captura de tela 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ótipo existentes já no board como contexto visual. Crie e aplique um protótipo no 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, se 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.

   NOTA: Você pode usar Editar com IA e o Assistente de IA em um protótipo por vez. Para alternar, feche o Assistente de IA e reabra Editar com IA no protótipo alvo.

2. Na caixa de prompt, descreva as alterações que deseja fazer. Por exemplo, "Converter para modo escuro".
3. Para executar seu prompt, clique no botão de 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 iterar 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 uma ou mais telas de protótipo.
   O menu de contexto aparece.
3. No menu de contexto, clique em Editar com IA para abrir o painel Assistente de IA.
4. Na caixa de prompt, peça ao Assistente de IA para aplicar o estilo 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 combine com 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 a(s) tela(s) do seu protótipo.
   O menu de contexto aparece.
3. Clique no ícone da Miro IA 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 estilos primeiro ou por último. Para garantir que todos os elementos do seu protótipo sigam um mesmo tema, aplique o tema logo no início do design do protótipo ou como etapa final.

Converter capturas de tela em protótipos editáveis

Você pode converter uma captura de tela 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 para e depois clique em Protótipo.
4. No submenu, escolha o tipo de dispositivo (Celular, Tablet, Desktop, Personalizado).
5. A IA reconstruirá isso como um protótipo editável: texto, botões, layout e outros elementos.
6. Agora você pode modificar, adicionar 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 pedir à Miro AI que continue editando. Você também pode usar uma captura de tela como contexto no prompt e gerar um protótipo. Para usar várias capturas de tela, selecione todas e copie como imagem. Em seguida, use a imagem como contexto no prompt.

Selecionar uma versão do protótipo

Cada refinamento cria uma versão do protótipo. Conforme você refina seu protótipo, o seletor de versões fica acima do rascunho do protótipo. 

Clique nas setas para alternar entre versões. Quando escolher uma versão, clique em Add to 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 Add to canvas, você pode selecionar uma tela de qualquer versão e copiar e colar no canvas. Assim, você garante que pode salvar uma tela de uma versão que talvez descarte. 

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

Visualizar protótipo

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

DICA: Para obter uma prévia 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 Miro Prototype:

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 à 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.

Em 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 conectores. No teclado, pressione Shift + E. No modo canvas, selecione seu protótipo para usar os atalhos.

Modo foco

O Miro Prototypes inclui o modo foco. Entre no modo foco para trabalhar no seu protótipo sem ver nenhum outro conteúdo do board, 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 proporciona uma experiência de Miro Prototypes sem distrações.

Copiar para o Figma

Compartilhe seu protótipo com designers no Figma sem precisar recriar manualmente. Você pode copiar o protótipo inteiro ou telas individuais.

Copiar um protótipo para o Figma

1. Clique no quadro do protótipo.
   O menu de contexto Formatar 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 .
   Seu protótipo será colado no Figma.

Copiar uma tela de protótipo para o Figma

1. Clique para selecionar uma tela de 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 de protótipo para a área de transferência.
4. No Figma, cole sua tela de protótipo. Você pode usar (Windows) Ctrl + V ou (MacOS) Command + V atalhos.
   Sua tela de 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 assim que estiver conectado:
   "Busque este arquivo de design e implemente os aspectos relevantes do design. [link relevante do board da Miro]"
3. Você poderá visualizar o Miro Prototype no seu board da Miro e ver o Claude Code na janela do Terminal.

Compartilhe um link do seu protótipo (Beta)

Você pode copiar um link exclusivo para compartilhar com membros do time ou stakeholders externos sem uma 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 é aberto.
3. Clique em Copiar link.
4. (Opcional) Clique em Visualizar no navegador para ver como qualquer pessoa com o link vê seu protótipo.
5. Compartilhe seu link.

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

DICA: Você também pode copiar um link compartilhável no modo foco: no canto superior direito, clique nos três pontos verticais. 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 Miro Model Context Protocol (MCP) Server para exportar para um editor de IA para base 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.
   Uma janela de seleção e o modal Exportar imagem como serão abertos.
3. Ajuste a janela de seleção para cobrir o 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 verticais e em seguida clique em Export as image. O modal Export as image abre; selecione Vector – SVG.

NOTA: Para exportações de SVG de protótipos que contenham imagens, ao importar o SVG para outro software de edição, como Figma, as imagens são substituídas por espaços reservados.

Exportar com o Servidor MCP da Miro

Para exportar seu protótipo para um editor de código com IA, por exemplo Cursor, inclua a URL do board com o ID do board no seu prompt. 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 Miro MCP Server.

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

Perguntas frequentes