Miro Prototypes

Quién puede hacerlo: Todos los miembros con el complemento de Miro Prototypes
Qué planes: Starter, Business, Enterprise
Qué 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 en múltiples 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 utilizar las funciones de Miro Prototypes. Para información general sobre Miro Prototypes, consulta la visión general de Miro Prototypes. 

NOTA: La experiencia de Prototypes se ha trasladado a los compañeros de IA. Ahora en beta pública, algunos usuarios ya cuentan con la entrada actualizada de Sidekicks para prototipos generados por IA. Si ves que 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 comenzar a crear prototipos con Miro AI. Para aprender a empezar manualmente, consulta Biblioteca de prototipos.

Empezar desde cero

1. En un lienzo de Miro, por encima de la barra de creación, haz clic en Sidekicks.
   Se abre el panel de Sidekick.
2. Haz clic en Biblioteca de Compañeros de IA.
   Acceder al Prototipo en la Biblioteca de Compañeros de IA 
3. Haz clic en Formatos > Prototipo.
4. Especifica si deseas comenzar con una instrucción de texto o una captura de pantalla.
5. Especifica el tipo de dispositivo.
6. Especifica si deseas un prototipo de una sola pantalla o 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 luego haz clic en la flecha de Enviar o presiona ENTER en tu teclado.
   Miro IA genera un prototipo preliminar en el lienzo.
9. (Opcional) Para detener la generación, en tu prototipo haz clic en Detener.
10. (Opcional) Para iterar en tu prototipo, continúa generando instrucciones en el panel de Prototipo.
    Cada iteración crea una versión de tu prototipo preliminar.
11. En tu prototipo preliminar, elige una de las siguientes opciones:
    • 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.

Crea un prototipo con Compañeros de IA (Beta)

Algunos usuarios ya pueden tener el input actualizado de Compañeros de IA para prototipos. Esta sección describe cómo comenzar a prototipar con Compañeros de IA. Para aprender cómo empezar manualmente, consulta Biblioteca de prototipos.

CONSEJO: Crea tu prototipo con los compañeros de IA para habilitar el historial de chat de IA, lo cual recuerda tus instrucciones, permitiéndote revisar las opciones que has explorado anteriormente y reanudar en cualquier tablero. Para más información, consulta El compañero de IA evoluciona la creación en Miro, y Descripción general de Miro Prototypes.

NOTA: La actualización del compañero de IA para Prototipos 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ñero de IA.
   Se abrirá el panel de Compañero de IA.

2. En el cuadro de instrucción, haz clic en Crear prototipo.
   Sidekicks está listo para ayudarte a crear tu prototipo.
   Comienza tu prototipo en el panel de Sidekicks.

   CONSEJO: Alternativamente, puedes abrir el panel de Sidekicks y comenzar a indicar de inmediato. Asegúrate de declarar explícitamente que deseas crear un prototipo, por ejemplo: "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 Sidekicks genere. 
4. Haz clic en la flecha hacia arriba, o presiona ENTER en tu teclado.
5. (Opcional) Para detener la generación, en tu prototipo haz clic en Detener.
6. (Opcional) Para iterar tu prototipo, sigue proporcionando instrucciones en el panel de Prototipo.
   Cada iteración crea una versión de tu prototipo borrador.
7. En tu prototipo borrador, elige una de las siguientes opciones:
   • Aplicar al lienzo
     Tu prototipo ahora es editable en el lienzo.
   • Descartar todos
     Tu borrador se elimina del lienzo. Puedes refinar tu instrucción y repetir los pasos 3 a 6.

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

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

CONSEJO: Un prototipo puede tardar de 1 a 3 minutos en generarse, dependiendo de 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 el número de pantallas.

CONSEJO: Puedes incluir una URL en tu instrucción e indicar al compañero de IA que aplique estilos del sitio enlazado.

Usar el lienzo como instrucción

Selecciona contenido en el lienzo para usarlo en tu instrucción. Por ejemplo, tienes un resumen de diseño en un Doc o en notas adhesivas. Los prototipos pueden usar el contenido como contexto para crear tu prototipo. 

Sigue estos pasos:

1. Selecciona el contenido del lienzo. Por ejemplo, un Doc o notas adhesivas. Puedes opcionalmente seleccionar varios objetos.
2. En un lienzo de Miro, arriba de la barra de creación, haz clic en Sidekicks.
   El panel Sidekick se abre.
   NOTA: Si tienes la versión actualizada...
3. Haz clic en la biblioteca de compañeros de IA
   Acceder al Protótipo en la biblioteca de compañeros de IA
4. Haz clic en Formatos > Protótipo.
5. Selecciona Una instrucción de texto.
6. Especifica el tipo de dispositivo, luego especifica pantalla única o múltiple.
   El cuadro de respuestas muestra el número de objetos que seleccionaste en el paso 1.
7. Sigue las instrucciones en pantalla para generar tu prototipo.
   Miro genera tu prototipo a partir de tus especificaciones y del contenido del lienzo seleccionado.

CONSEJO: Puedes dar una instrucción a Miro AI para que utilice objetos específicos del lienzo seleccionándolos. Por ejemplo, en tu instrucción puedes decir "Usa capturas de pantalla del lienzo como guías para construir el prototipo". Si tienes muchos objetos similares en el lienzo, describe explícitamente cuáles objetos quieres que Miro AI utilice.

Itera tu prototipo

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

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

NOTA: Las ediciones solo pueden realizarse una pantalla a la vez.

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

Itera con una captura de pantalla como contexto visual

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

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

CONSEJO: Puedes usar pantallas de prototipos existentes ya 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 Compañero de IA.
   Editar con IA te permite refinar un prototipo existente.

   NOTA: Puedes usar Editar con IA y 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 instrucciones, describe los cambios que deseas realizar. Por ejemplo, "Convertir a tema 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 y mejora tu prototipo. Puedes seleccionar una versión antes de aplicar tu prototipo al lienzo.
5. Sobre el prototipo redactado, 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. Crea un prototipo.
2. Selecciona tu(s) pantalla(s) de 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, indica al compañero de IA que aplique el estilo de 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 tu(s) pantalla(s) de prototipo.
   Aparecerá el menú contextual.
3. Haz clic en el icono Miro AI en el menú contextual.
4. Selecciona Importar estilo desde imagen.
   Importa estilos y aplícalos a tu prototipo
5. Elige el archivo de imagen del que te gustaría importar el estilo.
6. Los estilos se aplican a tu prototipo.

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

Convierte capturas de pantalla en prototipos editables

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

1. Añade 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 haz clic en Prototipo.
4. En el submenú, elige el tipo de dispositivo (Móvil, Tableta, Escritorio, Personalizado).
5. La IA lo reconstruirá como un prototipo editable: texto, botones, diseño y otros elementos.
6. Ahora puedes modificar, agregar o editar esta versión según sea necesario.

CONSEJO: Convierte una captura de pantalla en un prototipo editable. Luego, da una instrucción a Miro AI para continuar editando. También puedes usar una captura de pantalla como contexto en tu instrucción y generar un prototipo. Para usar múltiples capturas de pantalla, selecciona todas las capturas 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 Añadir al lienzo. Tu versión se aplicará 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 asegura poder guardar una pantalla de una versión que puedas descartar. 

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

Vista previa de un prototipo

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

CONSEJO: Para obtener una vista previa completamente interactiva del prototipo, usa líneas de conexión entre las pantallas.

Agregar líneas de conexión para hacer un prototipo interactivo

Para añadir o cambiar conexiones entre objetos en tu prototipo de Miro:

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

Ocultar líneas de conexión

Para prototipos con muchos conectores, para simplificar la vista de tu prototipo puedes ocultar los conectores.

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

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

Ocultar o mostrar conectores en el modo sin distracciones.

Repite los mismos pasos para mostrar los conectores.

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

Modo sin distracciones

Miro Prototypes incluye el modo sin distracciones. Entra en modo sin distracciones para trabajar en tu prototipo sin ningún otro contenido de tablero a la vista, lo que te permite trabajar sin distracciones.

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

El modo sin distracciones permite una experiencia de Miro Prototypes sin distracciones.

Copiar a Figma

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

Copiar un prototipo a Figma

1. Haz clic en el marco del prototipo.
   El menú de contexto de formato aparece.
2. En el menú de contexto, 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.
   Copia tu prototipo a Figma. 
4. En Figma, pega tu prototipo. Puedes usar las teclas de acceso rápido Ctrl + V (Windows) o Comando + V (MacOS).
   Tu prototipo se pega en Figma.

Copiar una pantalla de prototipo a Figma

1. Haz clic para seleccionar una pantalla de prototipo.
   El menú contextual del widget aparece.
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 pantalla de prototipo al portapapeles.
4. En Figma, pega tu prototipo. Puedes usar las teclas rápidas (Windows) Ctrl + V o (MacOS) Comando + V .
   Tu pantalla de prototipo se pega en Figma.

Comparte un enlace a tu prototipo (Beta)

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

1. Desde el menú contextual del prototipo, haz clic en los tres puntos verticales para abrir el menú de Más.
2. Haz clic en Compartir y exportar > Compartir prototipo.
   Se abre el modal de 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 otro contenido en el lienzo. Ellos pueden interactuar con puntos de acceso y flujos del prototipo. Si los permisos del tablero lo permiten, los usuarios externos también pueden comentar.

CONSEJO: También puedes copiar un enlace compartible 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 de Protocolo de Contexto de Modelo (MCP) de Miro para exportar a un editor de código base IA; los equipos pueden usar la exportación para generar código funcional y acelerar el desarrollo.

Exportar como SVG

1. En 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 imagen como.
3. Ajusta la ventana de selección para que cubra tu prototipo.
4. En el modal Exportar imagen como, 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. Desde el menú contextual, haz clic en los tres puntos verticales y luego haz clic en Exportar como imagen. Se abre el modal Exportar como imagen, y luego selecciona Vector – SVG.

NOTA: Para exportaciones SVG de prototipos con imágenes, si importas el SVG a otro software para editar, 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 de código con IA, por ejemplo Cursor, incluye la URL del tablero con el ID de tablero en tu instrucción. Asegúrate de proporcionar instrucciones para generar código basado en el prototipo.

Para obtener más información sobre el uso de Miro MCP, consulta la visión general del servidor Miro MCP.

Un editor de código basado en IA como Cursor acepta una URL de tablero de Miro con ID de tablero para generar código basado en tu prototipo.

Preguntas frecuentes