Miro Prototypes

Quiénes pueden hacerlo: Todos los miembros con el complemento Miro Prototypes
Planes: Starter, Business, Enterprise
Plataformas: Navegador, Escritorio

Miro Prototypes te permite crear interfaces de usuario directamente en el lienzo de Miro. 

Puedes generar flujos de una o varias pantallas, perfeccionar tus diseños, aplicar estilos y previsualizar una simulación interactiva de tu prototipo. Construye tu diseño con varias instrucciones específicas que generan cada elemento de tu prototipo. También puedes perfeccionar tus instrucciones para evitar empezar de nuevo.

Este artículo explica cómo usar las funciones de Miro Prototypes. Para información general sobre Miro Prototypes, consulta la descripción general de Miro Prototypes. 

NOTA: La experiencia de Miro Prototypes se ha trasladado a compañeros de IA. Ahora, en Beta pública, algunos usuarios ya cuentan con la entrada actualizada de compañeros de IA para prototipos generados por IA. Si tu experiencia no coincide con la documentación, consulta Crear un prototipo con compañeros de IA (Beta). El contenido que explica cómo refinar e iterar tu resultado sigue siendo aplicable.

Más información: Consulta las Preguntas frecuentes.

Crear un prototipo con Miro AI

Esta sección describe cómo empezar a crear prototipos con Miro AI. Para aprender a comenzar manualmente, consulta la Biblioteca de prototipos.

Empezar desde cero

1. En un lienzo de Miro, arriba de la Barra de creación haz clic en Sidekicks.
   Se abre el panel Sidekick.
2. Haz clic en Biblioteca de compañeros de IA.
   Accede a Prototype en la biblioteca de compañeros de IA 
3. Haz clic en Formatos > Prototype.
4. Especifica si quieres empezar con una instrucción de texto o con una captura de pantalla.
5. Especifica el tipo de dispositivo.
6. Especifica si quieres una sola pantalla o un prototipo de varias pantallas.
7. Sigue las instrucciones en pantalla para escribir tu instrucción o cargar una captura de pantalla. En el cuadro de respuesta, puedes usar opcionalmente las etiquetas de sugerencia para comenzar tu instrucción.
8. Termina tu instrucción y haz clic en la Enviar flecha, o presiona ENTER en tu teclado.
   La IA de Miro genera un prototipo en borrador en el lienzo.
9. (Opcional) Para detener la generación, en tu prototipo haz clic en Detener.
10. (Opcional) Para iterar tu prototipo, continúa escribiendo instrucciones en el Prototype panel.
    Cada iteración crea una versión de tu prototipo en borrador.
11. En tu prototipo borrador, elige una de las siguientes:
    • Aplicar al lienzo
      Tu prototipo ahora es editable en el lienzo.
    • Descartar todo
      Tu borrador se elimina del lienzo. Puedes refinar tu instrucción y repetir los pasos 7–9.

Crear un prototipo con compañeros de IA (Beta)

Algunos usuarios pueden ya tener la entrada de compañeros de IA actualizada para la creación de prototipos. Esta sección describe cómo empezar a prototipar con compañeros de IA. Para aprender a empezar manualmente, consulta la Biblioteca de prototipos.

CONSEJO: Crea tu prototipo con compañeros de IA para habilitar el historial de chat de IA, que recuerda tus instrucciones, permitiéndote revisar opciones que exploraste anteriormente y retomar en cualquier tablero. Para más información, consulta Cómo los compañeros de IA impulsan la creación con IA en Miro y Descripción general de Miro Prototypes.

NOTA: La actualización de compañeros de IA para Prototypes está actualmente en Beta pública. Si tu experiencia no coincide con la documentación de esta sección, consulta Crear un prototipo con Miro AI.

Sigue estos pasos:

1. En un lienzo de Miro, sobre la barra de creación, haz clic en compañeros de IA.
   Se abre el panel de compañeros de IA.

2. En el cuadro de instrucciones, haz clic en Crear prototipo.
   Los compañeros de IA están listos para ayudarte a crear tu prototipo.
   Comienza tu prototipo en el panel de compañeros de IA.

   CONSEJO: Alternativamente, puedes abrir el panel de compañeros de IA y comenzar a dar instrucciones de inmediato. Asegúrate de indicar explícitamente que quieres crear un prototipo, p. ej. "Crear un prototipo para un flujo de pago."

   CONSEJO: También puedes acceder al Formato de prototipo desde Herramientas, medios e integraciones (+) en la barra de creación.

3. Escribe tu instrucción para describir el prototipo que quieres que generen los compañeros de IA. 
4. Haz clic en la flecha hacia arriba o presiona INTRO en tu teclado.
5. (Opcional) Para detener la generación, en tu prototipo haz clic Detener.
6. (Opcional) Para iterar en tu prototipo, continúa dando instrucciones en el Prototype panel.
   Cada iteración crea una versión de tu prototipo en borrador.
7. En tu prototipo en borrador, elige una de las siguientes opciones:
   • Aplicar al lienzo
     Tu prototipo ahora se puede editar en el lienzo.
   • Descartar todo
     Tu borrador se elimina del lienzo. Puedes refinar tu instrucción y repetir los pasos 3–6.

CONSEJO: Empieza con poco y sé específico. Generar menos pantallas a la vez produce resultados más precisos en menos tiempo. Indica explícitamente los elementos clave que quieres en cada pantalla, como botones, secciones o acciones.

CONSEJO: Aplica varios borradores de prototipo al lienzo. Puedes comparar y explorar decisiones de diseño y seguir refinando la mejor opción.

TIP: Un prototipo puede tardar entre 1 y 3 minutos en generarse, según la complejidad de la instrucción y el tamaño del contenido. Si tu prototipo tarda más en generarse, simplifica la instrucción o reduce la cantidad de pantallas.

TIP: Puedes incluir una URL en tu instrucción e indicarle al compañero de IA que aplique estilos del sitio vinculado.

Usar el lienzo como instrucción

Selecciona contenido del lienzo para usarlo en tu instrucción. Por ejemplo, puedes tener un brief de diseño en un Doc o en notas adhesivas. Los prototipos pueden usar ese contenido como contexto para generar el prototipo. 

Sigue estos pasos:

1. Selecciona contenido del lienzo. Por ejemplo, un Doc o notas adhesivas. Opcionalmente, puedes seleccionar varios objetos.
2. En un lienzo de Miro, encima de la Barra de creación haz clic en Sidekicks.
   Se abre el panel de Sidekick.
3. Haz clic en el icono de Prototype en la parte inferior del cuadro de instrucciones.
4. Sigue las instrucciones en pantalla en el cuadro de instrucciones para generar tu prototipo.
   Miro genera tu prototipo a partir de tus especificaciones y del contenido seleccionado del lienzo.

NOTA: Puedes agregar una o más capturas de pantalla a tu lienzo y hacer que Miro Prototypes cree varias pantallas en tu prototipo a partir de las capturas seleccionadas.

SUGERENCIA: Puedes indicarle a Miro AI que utilice objetos específicos del lienzo seleccionándolos. Por ejemplo, en tu instrucción puedes decir "Usa las capturas de pantalla del lienzo como guías para crear el prototipo." Si tienes muchos objetos similares en el lienzo, describe explícitamente qué objetos quieres que Miro AI utilice.

Convertir un marco insertado de Figma en un Miro Prototype

1. En Figma, selecciona el marco correspondiente.
2. Haz clic derecho en el marco y selecciona Copiar/pegar como > Copiar enlace de la selección. 
3. Ve a tu tablero de Miro.
4. Pega el enlace de Figma.
5. Conecta Figma (si aún no lo has hecho).
6. Selecciona la inserción de Figma en el lienzo.
7. Haz clic en Convertir a en el menú contextual de la inserción.
8. Selecciona Prototipo en el menú Convertir a.
9. Miro AI convertirá tu prototipo de Figma insertado en un prototipo de Miro editable.

Itera tu prototipo

Tu primer borrador puede no ser el resultado perfecto. Antes de aplicar tu borrador al lienzo, puedes seguir iterando y crear varias versiones de tu prototipo.

1. Crea un prototipo con Miro AI. No lo apliques al lienzo.
   El siguiente paso en el Prototipo panel es ¿Qué te gustaría hacer a continuación?
2. Selecciona Editar prototipo. 
3. Para un flujo de varias pantallas, selecciona la pantalla que quieres iterar.
4. En el cuadro de respuesta, describe los cambios que quieres.
5. Haz clic en la flecha hacia arriba o presiona Intro en el teclado.
   Miro genera una nueva versión de tu prototipo.

NOTA: Solo se puede editar una pantalla a la vez.

CONSEJO: Usa el contexto del lienzo. Selecciona documentos, diagramas, notas adhesivas u otro contenido del tablero como instrucción para Miro AI.

Iterar con una captura de pantalla como contexto visual

Antes de aplicar tu prototipo al lienzo, puedes usar una captura de pantalla, o otro prototipo que ya esté en el lienzo, como contexto para iterar tu borrador.

1. Crea un prototipo con Miro AI. No lo apliques al lienzo.
   El siguiente paso en el Prototipo panel es ¿Qué te gustaría hacer a continuación?
2. Haz clic en Editar prototipo.
3. Para un flujo de varias pantallas, selecciona la pantalla que quieres iterar.
4. Selecciona una captura de pantalla en el tablero.
5. En el cuadro de respuesta, describe los cambios que quieres basándote en la captura seleccionada.
6. Haz clic en la flecha hacia arriba o presiona Intro en tu teclado.
   Miro genera una nueva versión de tu prototipo. 

CONSEJO: Puedes usar pantallas de prototipo ya existentes en el tablero como contexto visual. Crea y aplica un prototipo al tablero. Selecciona una pantalla.

Editar con IA

Para cualquier prototipo ya aplicado al lienzo, puedes seguir iterando con Editar con IA. Usa Editar con IA para refinar en lugar de reconstruir; por ejemplo, si quieres crear una versión en modo oscuro de un prototipo existente.

Sigue estos pasos:

1. Para cualquier prototipo aplicado al lienzo, en el menú contextual haz clic en Editar con IA.
   Se abre el panel del compañero de IA.
    
   Editar con IA te permite refinar un prototipo existente.

   NOTA: Puedes usar Editar con IA y el compañero de IA con un prototipo a la vez. Para cambiar, cierra el compañero de IA y vuelve a abrir Editar con IA desde el prototipo objetivo.

2. En el cuadro de instrucción, describe los cambios que quieres hacer. Por ejemplo, "Convertir a modo oscuro".
3. Para ejecutar tu instrucción, haz clic en el botón de flecha hacia arriba o presiona Intro en tu teclado.
   El compañero de IA genera tu prototipo refinado.
4. (Opcional) Continúa dando instrucciones al compañero de IA e itera sobre tu prototipo. Puedes seleccionar una versión antes de aplicar tu prototipo al lienzo.
5. Encima del prototipo en borrador, haz clic en Agregar al lienzo.

NOTA: Para Miro Prototypes, todas las funciones de prototipado mejoradas con IA están disponibles solo con el complemento Prototypes.

Aplicar estilos de prototipo desde una URL

Para aplicar un estilo desde una URL existente a tu prototipo:

1. Crear prototipo.
2. Selecciona la(s) pantalla(s) de tu prototipo.
   Se abrirá el menú contextual.
3. En el menú contextual haz clic en Editar con IA para abrir el panel del compañero de IA.
4. En el cuadro de instrucciones, pídele al compañero de IA que aplique el estilo desde la URL incluida (asegúrate de incluir la URL completa).
5. El compañero de IA aplicará el estilo visual de la URL en una versión actualizada de tu prototipo en el tablero.

Aplicar estilos de prototipo desde una captura de pantalla

Si quieres que tu prototipo coincida con un sitio web o producto existente, puedes extraer estilos de una captura de pantalla y aplicarlos a tus pantallas.

1. Crear un prototipo.
2. Selecciona la(s) pantalla(s) del prototipo.
   Se abrirá el menú contextual.
3. Haz clic en el ícono de Miro IA en el menú contextual.
4. Selecciona Importar estilo desde imagen.
   Importa estilos y aplícalos a tu prototipo
5. Elige el archivo de imagen desde el que quieres importar el estilo.
6. Los estilos se aplican a tu prototipo.

CONSEJO: Aplica los estilos al principio o al final. Para asegurarte de que todos los elementos de tu prototipo se ajusten a un mismo tema, aplícalo al inicio del diseño del prototipo o como paso final.

Convierte capturas de pantalla en prototipos editables

Puedes convertir una captura de pantalla de un diseño o de la interfaz de un competidor en un prototipo editable.

1. Agrega la captura de pantalla a tu tablero de Miro.
2. Haz clic en la imagen para abrir el menú contextual.
3. Haz clic en el botón Convertir a y luego en Prototipo.
4. En el submenú, elige el tipo de dispositivo (Móvil, Tableta, Escritorio, Personalizado).
5. La IA la reconstruirá como un prototipo editable: texto, botones, diseño y otros elementos.
6. Ahora puedes modificar, agregar o editar esta versión según lo necesites.

CONSEJO: Convierte una captura de pantalla en una maqueta editable. Luego envía una instrucción a Miro AI para que continúe editando. También puedes usar una captura de pantalla como contexto en tu instrucción y generar un prototipo. Para usar varias capturas de pantalla, selecciona todas y copia como imagen. Luego usa la imagen como contexto en tu instrucción.

Seleccionar una versión del prototipo

Cada refinamiento crea una versión del prototipo. A medida que refinas tu prototipo, el selector de versiones está encima del borrador del prototipo. 

Haz clic en las flechas para alternar entre versiones. Cuando hayas elegido una versión, haz clic en Agregar al lienzo. Tu versión se aplica al lienzo.

Elige qué refinamiento o versión de tu prototipo agregar al lienzo.

CONSEJO: Antes de hacer clic en Agregar al lienzo, puedes seleccionar una pantalla de cualquier versión y copiarla y pegarla en el lienzo. Esto te permite guardar una pantalla de una versión que podrías descartar. 

ADVERTENCIA: Cuando hagas clic en Agregar al lienzo, todas las demás versiones no se podrán recuperar.

Vista previa del prototipo

Desde el menú contextual del prototipo, haz clic en Vista previa. Se cargará la vista previa.

CONSEJO: Para obtener una vista previa del prototipo totalmente interactiva, usa líneas de conector entre las pantallas.

Agregar líneas de conector para que el prototipo sea interactivo

Para agregar o cambiar conexiones entre objetos en tu prototipo de Miro:

1. Haz clic en un elemento (por ejemplo, un botón) en tu prototipo.
2. Arrastra el icono Línea de conector hacia la pantalla a la que debe enlazar.
3. En el modo Vista previa, al hacer clic en el elemento, los usuarios irán a la pantalla vinculada.

Ocultar líneas de conector

Si tu prototipo tiene muchos conectores, puedes ocultarlos para simplificar la vista.

En el modo lienzo, selecciona tu prototipo. Haz clic en los tres puntos del menú contextual. Luego selecciona Ocultar conectores.

En el modo sin distracciones, en la esquina superior izquierda haz clic en el botón Ocultar | Mostrar conectores.

Ocultar o mostrar los conectores en modo sin distracciones.

Repite los mismos pasos para mostrar los conectores.

CONSEJO: Usa atajos de teclado para ocultar o mostrar los conectores. En tu teclado presiona Shift + E. En el modo lienzo, para usar atajos de teclado asegúrate de seleccionar tu prototipo.

Modo sin distracciones

Miro Prototypes incluye el modo sin distracciones. Entra en este modo para trabajar en tu prototipo sin ver otros contenidos del tablero y sin distracciones.

Para entrar en modo sin distracciones, selecciona tu Miro Prototype. En el menú contextual, haz clic en modo sin distracciones.

El modo sin distracciones permite usar Miro Prototypes sin elementos que distraigan.

Copiar a Figma

Proporciona tu prototipo a los diseñadores en Figma sin rehacerlo manualmente. Puedes copiar tu prototipo o pantallas individuales.

Copiar un prototipo a Figma

1. Haz clic en el marco del prototipo.
   Aparece el menú contextual Formato.
2. En el menú contextual, haz clic en los tres puntos verticales para abrir el menú Más.
3. Haz clic en Copiar a Figma.
   Miro copia tu prototipo al portapapeles.
   Copiar tu prototipo a Figma. 
4. En Figma, pega tu prototipo. Puedes usar (Windows) Ctrl + V o (MacOS) Comando + V como atajos de teclado.
   Tu prototipo se pega en Figma.

Copiar una pantalla de prototipo a Figma

1. Haz clic para seleccionar una pantalla del prototipo.
   Aparece el menú contextual del widget.
2. En el menú contextual, haz clic en los tres puntos verticales para abrir el menú Más.
3. Haz clic en Copiar a Figma.
   Miro copia la pantalla de tu prototipo al portapapeles.
4. En Figma, pega tu prototipo. Puedes usar (Windows) Ctrl + V o (MacOS) Comando + V atajos de teclado.
   La pantalla de tu prototipo se pega en Figma.

Conexión de Claude Code con Miro Prototypes

Crea Miro Prototypes desde tus proyectos de Claude Code a través del Model Context Protocol.

1. Conéctate al servidor MCP de Miro siguiendo estas instrucciones.
2. Copia y ejecuta este comando en tu herramienta de IA una vez conectado:
   "Recupera este archivo de diseño e implementa los aspectos relevantes del diseño. [Enlace relevante del tablero de Miro]"
3. Podrás ver el Miro Prototype en tu tablero Miro y consultar el Claude Code en la ventana de tu Terminal.

Compartir un enlace a tu prototipo (Beta)

Puedes copiar un enlace único para compartir con miembros del equipo o partes interesadas externas que no tengan una cuenta de Miro. 

1. En el menú de contexto del prototipo, haz clic en los tres puntos verticales para abrir el menú Más.
2. Haz clic en Compartir y exportar > Compartir prototipo.
   Se abre el modal Compartir prototipo.
3. Haz clic en Copiar enlace.
4. (Opcional) Haz clic en Vista previa en el navegador para ver cómo cualquier persona con tu enlace ve tu prototipo.
5. Comparte tu enlace.

NOTA: Para que los usuarios externos puedan acceder, tu tablero debe ser público. Los usuarios externos solo pueden acceder al prototipo en modo sin distracciones y no a ningún otro contenido del lienzo. Pueden interactuar con hotspots y con el flujo del prototipo. Si los permisos del tablero lo permiten, los usuarios externos también pueden comentar.

CONSEJO: También puedes copiar un enlace para compartir en modo sin distracciones: en la esquina superior derecha, haz clic en los tres puntos verticales. Luego haz clic en Compartir prototipo. Y en modo de vista previa: en la esquina superior derecha, haz clic en Compartir prototipo.

Exportar tu prototipo

Puedes exportar tu prototipo como SVG. También puedes usar el Servidor Model Context Protocol (MCP) de Miro para exportar a un editor de IA para la base de código; los equipos pueden usar esta exportación para generar código funcional y acelerar el desarrollo.

Exportar como SVG

1. Desde el menú contextual del prototipo, haz clic en los tres puntos verticales.
2. Haz clic en Compartir y exportar > Exportar como imagen.
   Se abre una ventana de selección y el modal Exportar como imagen.
3. Ajusta la ventana de selección para que cubra tu prototipo.
4. En el Exportar como imagen modal, selecciona Vector – SVG.
5. Haz clic en Exportar. 

CONSEJO: Puedes exportar una sola pantalla como SVG desde el menú contextual. Selecciona una pantalla en tu prototipo. En el menú contextual, haz clic en los tres puntos verticales y luego en Exportar como imagen. Se abrirá el modal Exportar como imagen; selecciona Vector – SVG.

NOTA: En las exportaciones de prototipos a SVG que contienen imágenes, si importas el SVG a otro software para editarlo, como Figma, las imágenes se reemplazan por marcadores de posición.

Exportar con el Servidor MCP de Miro

Para exportar tu prototipo a un editor IA para bases de código, por ejemplo Cursor, incluye la URL del tablero con su ID en tu instrucción. Asegúrate de proporcionar instrucciones para generar código basándose en el prototipo.

Para saber más sobre el uso de Miro MCP, consulta Descripción general del servidor Miro MCP.

Un editor de código con IA como Cursor acepta una URL de tablero de Miro con el ID del tablero para generar código a partir de tu prototipo.

Preguntas frecuentes