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.

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

Puedes dar instrucciones a Prototypes para generar flujos de una sola o múltiple pantalla, refinar tus diseños y aplicar estilos, además de previsualizar una simulación interactiva de tu prototipo.

✏️ La experiencia de Prototipos se ha trasladado a los 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 notas 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.

Construye tu diseño en múltiples instrucciones específicas que generen cada elemento de tu prototipo. También puedes refinar tus instrucciones para evitar comenzar de nuevo.

Más información: Consulta preguntas frecuentes.

Crea un prototipo con Miro AI

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

Empezar desde cero

1. En un lienzo de Miro, 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.
   Accede 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 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 la caja 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 Enviar o presiona ENTER en tu teclado.
   Miro AI genera un borrador de prototipo en el lienzo.
9. (Opcional) Para detener la generación, en tu prototipo haz clic en Detener.
10. (Opcional) Para iterar sobre tu prototipo, continúa dando instrucciones en el panel de Prototipo.
    Cada iteración crea una versión de tu borrador de prototipo.
11. En tu borrador de prototipo, 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.

Crear un prototipo con el compañero de IA (Beta)

Algunos usuarios ya pueden tener la entrada actualizada de compañero de IA para prototipos. Esta sección describe cómo comenzar a crear prototipos con el compañero de IA. Para aprender a empezar manualmente, consulta la biblioteca de prototipos.

✏️ La actualización de Sidekicks para Prototypes está actualmente en beta pública. Si tu experiencia no coincide con la documentación en esta sección, consulta Crear un prototipo con Miro AI.

Sigue estos pasos:

1. En un lienzo de Miro, arriba de la barra de Creación haz clic en Sidekicks.
   Se abre el panel de Sidekicks.

2. En el cuadro de instrucciones, haz clic en Crear prototipo.
   El compañero de IA está listo para ayudarte a crear tu prototipo.
   Empieza tu prototipo en el panel de Sidekicks.

   💡 Alternativamente, puedes abrir el panel del compañero de IA y empezar a introducir instrucciones inmediatamente. Asegúrate de indicar explícitamente que quieres crear un prototipo, por ejemplo: "Crear un prototipo para un flujo de pago."

   💡 También puedes acceder al Formato de Prototipo desde Herramientas, Medios y Integraciones (+) en la barra de Creación.

3. Escribe tu instrucción para describir el prototipo que quieres que el compañero de IA 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 en tu prototipo, continúa indicando en el Panel de prototipos.
   Cada iteración crea una versión de tu prototipo preliminar.
7. En tu borrador de prototipo, 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 3-6.

💡 Comienza con algo pequeño y específico. Generar menos pantallas a la vez produce resultados más precisos en menos tiempo. Indica explícitamente los elementos clave que quieres para cada pantalla, como botones, secciones o acciones.

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

💡 Un prototipo puede tardar entre 1 y 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 tu instrucción o reduce el número de pantallas.

Usar el lienzo como instrucción

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

Sigue estos pasos:

1. Selecciona contenido del lienzo. Por ejemplo, un documento o notas adhesivas. Opcionalmente, puedes seleccionar varios objetos.
2. En un lienzo de Miro, sobre la barra de creación, haz clic en Sidekicks.
   El panel de Sidekick se abre.
   NOTA: Si tienes la versión actualizada...
3. Haz clic en compañero de IA de biblioteca
   Accede a Prototipo en el compañero de IA de biblioteca 
4. Haz clic en Formatos > Prototipo.
5. Selecciona una instrucción de texto.
6. Especifica el tipo de dispositivo, luego especifica una sola pantalla o múltiple.
   El cuadro de respuesta 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.

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

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é quieres hacer a continuación?
2. Elige Editar prototipo. 
3. Para un flujo de varias pantallas, elige la pantalla que deseas iterar.
4. En el cuadro de respuesta, describe los cambios que deseas.
5. Haz clic en la flecha hacia arriba o presiona Enter en tu teclado.
   Miro genera una nueva versión de tu prototipo.

✏️ Las ediciones solo se pueden hacer una pantalla a la vez.

💡 Usa el contexto del lienzo. Selecciona Documentos, diagramas, notas adhesivas u otro contenido del tablero para dar instrucciones a Miro AI.

Iterar 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 apliques al lienzo.
   El siguiente paso en el panel de Prototipos 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 basados 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. 

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

Aplicar estilos de prototipo desde una captura de pantalla

Si deseas 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. Crea un prototipo.
2. Selecciona tu(s) pantalla(s) de prototipo.
   El menú contextual aparece.
3. Haz clic en el icono de 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 deseas importar el estilo.
6. Los estilos se aplican a tu prototipo.

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

Convierte capturas de pantalla en prototipos que puedes editar

Puedes convertir una captura de pantalla de un diseño o interfaz de usuario 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. Selecciona el ícono de Miro AI > Convertir imagen a prototipo.
4. Elige el tipo de dispositivo (Móvil, Tableta, Escritorio).
5. La IA lo reconstruirá como un prototipo editable: texto, botones, diseño y otros elementos.
6. Ahora puedes modificar, añadir o editar esta versión según lo necesites.

💡 Convierte una captura de pantalla en un prototipo editable. Luego, utiliza una instrucción de Miro AI para seguir editando. También puedes usar una captura de pantalla como contexto en tu instrucción y generar un prototipo. Para usar varias capturas, selecciona todas las capturas y copia como imagen. Luego usa la imagen como contexto en tu instrucción.

Selecciona una versión de prototipo

Cada refinamiento crea una versión de prototipo. A medida que refinas tu prototipo, el selector de versión 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 deseas agregar al lienzo.

💡 Antes de hacer clic en Agregar al lienzo, puedes seleccionar una pantalla de cualquier versión y copiarla y pegarla al lienzo. Esto asegura que puedas guardar una pantalla de una versión que podrías descartar. 

⚠️ Al hacer clic en Agregar al lienzo, las demás versiones no podrán recuperarse.

Vista previa de un prototipo

1. Selecciona una pantalla de prototipo.
   Aparecerá el menú contextual.
2. Desde el menú contextual, haz clic en Vista previa.
   Se cargará la vista previa.

💡 Para obtener una vista previa completamente interactiva del prototipo, utiliza líneas conectoras entre las pantallas.

Añadir líneas conectoras 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 ícono de Línea Conectora a la pantalla a la que debe enlazarse.
3. En el modo de vista previa, al hacer clic en el elemento los usuarios serán llevados a la pantalla enlazada.

Ocultar conectores

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

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

Modo sin distracciones

Miro Prototypes incluye el modo sin distracciones. Entra al modo sin distracciones para trabajar en tu prototipo sin ver ningún otro contenido del tablero, permitiéndote 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 sin distracciones con Miro Prototypes.

Exporta tu prototipo

Puedes exportar tu prototipo como SVG. También puedes usar el servidor de Protocolo de Contexto del Modelo (MCP) de Miro para exportar a un editor de código AI; los equipos pueden usar la exportación para generar código funcional y acelerar el desarrollo.

Exportar a SVG

1. En la barra del tablero, haz clic en los tres puntos verticales.
2. Haz clic en Tablero > 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. 

💡 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, luego haz clic en Exportar como imagen. Se abrirá el modal Exportar como imagen, luego selecciona Vector – SVG.

✏️ 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.

Exporta con Miro MCP Server

Para exportar tu prototipo a un editor de código con inteligencia artificial, por ejemplo Cursor, incluye la URL del tablero con la ID del 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 cómo usar Miro MCP, consulta descripción general de Miro MCP Server.

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

Preguntas frecuentes