Quiénes pueden hacerlo: miembros del equipo
Qué planes: Business, Enterprise (licencia Accelerate)
Qué plataformas: navegador, escritorio
Miro Prototypes te permite crear interfaces de usuario interactivas directamente en el lienzo de Miro. Los prototipos se renderizan como HTML real en lugar de formas de Miro, por lo que las pantallas tienen diseños, fuentes, degradados y sombras de mayor fidelidad, más parecidos a un producto terminado.
Describe lo que quieres construir y Miro AI lo genera directamente en el lienzo, listo para editar. Sigue dando instrucciones para refinar el resultado, conecta las pantallas en un flujo y previsualiza o entrega tu prototipo cuando esté listo.
Para obtener información general sobre Miro Prototypes, consulta la descripción general de Miro Prototypes. Para prototipado manual y basado en plantillas, consulta la biblioteca de wireframes.
NOTA: Miro Prototypes está incluido en el plan Business. Si estás en un plan Business heredado o en un plan Starter, consulta qué está cambiando. Miro Prototypes está incluido con la licencia Accelerate para planes Enterprise.
Más información: Consulta las preguntas frecuentes.
Crear un prototipo con el compañero de IA
- Asegúrate de que el compañero de IA esté activo. Si no ves el cuadro de instrucciones del compañero de IA en la parte inferior de tu tablero, haz clic en Mostrar compañero de IA encima de la barra de creación.
- Haz clic dentro del cuadro de instrucciones del compañero de IA.
- Puedes escribir o dictar una descripción de tu prototipo. O haz clic en el botón más (+), ve a formatos y elige Prototipo.
- En tu descripción, asegúrate de especificar el tipo de dispositivo y si será de una sola pantalla o de varias pantallas.
- Para generar tu prototipo, haz clic en la flecha hacia arriba o presiona ENTER en tu teclado. Miro AI genera tu prototipo directamente en el lienzo, listo para editar.
- (Opcional) Durante la generación, un botón de detener reemplaza a la flecha hacia arriba. Haz clic en el botón de detener para terminar la generación.
- (Opcional) Sigue dando instrucciones al compañero de IA para refinar tu prototipo.
CONSEJO: Puedes mover tu conversación a un panel lateral. En el cuadro de instrucciones del compañero de IA, en la esquina superior derecha, haz clic en Abrir en panel lateral.
Más información: Consulta Descripción general de los compañeros de IA.
Usar contenido como contexto de la instrucción
Usa contenido del lienzo, como un Doc, notas adhesivas u otro prototipo, como contexto para la instrucción.
- Asegúrate de que el compañero de IA esté visible. Si no ves el cuadro de instrucciones del compañero de IA en la parte inferior de tu tablero, haz clic en Mostrar compañero de IA encima de la barra de creación.
- Selecciona uno o varios objetos en tu lienzo.
- Haz clic dentro del cuadro de instrucciones del compañero de IA. Los objetos seleccionados aparecen como etiquetas.
- (Opcional) Haz clic en la 'x' de cualquier etiqueta para quitar ese objeto del contexto.
- Escribe o dicta tu instrucción.
- Para generar tu prototipo, haz clic en la flecha hacia arriba o presiona Intro en tu teclado. Miro AI genera tu prototipo, basándose en el contexto y en tu instrucción, directamente en el lienzo.
- (Opcional) Sigue dando instrucciones al compañero de IA para refinar tu prototipo.
CONSEJO: En tu instrucción, puedes especificar qué objetos seleccionados usar para fines específicos. Por ejemplo, "Usa el documento design brief para generar un flujo de pago y aplica el texto propuesto de las notas adhesivas seleccionadas."
Crear un prototipo a partir de un marco de Figma
- En Figma, haz clic derecho en el marco que quieres mover a Miro y selecciona Copiar/Pegar como > Copiar enlace de la selección.
- En Miro, pega el enlace en cualquier lugar del lienzo. Si aún no has conectado Figma con Miro, se te pedirá que lo conectes. Tu contenido de Figma se inserta en tu lienzo.
- Haz clic para seleccionar el marco de Figma.
- En el menú contextual del marco, haz clic en Convertir a y selecciona Prototipo. Miro AI convierte tu marco de Figma en un Prototipo de Miro editable.
Crear un prototipo a partir de una captura de pantalla
- Sube o pega una captura de pantalla en el lienzo de Miro.
- Haz clic para seleccionar la captura de pantalla.
- En el menú contextual de la captura de pantalla, haz clic en Convertir a y selecciona Prototipo.
- Elige el tipo de dispositivo: Móvil, Tablet, Escritorio o Personalizado. Miro AI convierte tu captura de pantalla en un Prototipo editable de Miro, incluyendo texto, botones, diseño y otros elementos.
CONSEJO: Para varias capturas de pantalla, selecciona todas las capturas que quieras usar y luego copia como imagen. Usa la imagen de las capturas como contexto en una instrucción del compañero de IA.
Insertar HTML en tu tablero
Una inserción HTML ejecuta tu HTML como una demo interactiva en vivo, en lugar de reconstruirlo como elementos editables de Miro.
NOTA: Usa una inserción cuando quieras mostrar HTML funcional tal cual, y usa un prototipo cuando quieras una versión editable que se pueda refinar mediante IA.
Arrastrar o pegar HTML en tu tablero
- Arrastra un archivo HTML a tu tablero de Miro, o pega el código HTML directamente en el lienzo.
- Elige Insertar para mantener tu HTML funcionando tal cual. Miro añade tu HTML al tablero como una inserción interactiva.
- Haz clic en la inserción para interactuar con ella, como lo harías en un navegador.
NOTA: Los scripts en una inserción HTML se ejecutan en un marco aislado (sandbox), separado del resto de tu tablero. Inserta HTML solo de fuentes en las que confíes.
Convertir una inserción HTML en un prototipo
Para que el contenido de una inserción sea editable y pueda refinarse mediante IA, conviértela en un prototipo.
- Haz clic para seleccionar tu inserción HTML.
- En el menú contextual, haz clic en Convertir a, y luego selecciona Prototipo. Miro detecta las pantallas del prototipo a partir de tu inserción y selecciona automáticamente la pantalla actual.
- (Opcional) Haz clic dentro de tu inserción para añadir más pantallas a convertir. Cada pantalla en la que hagas clic se añade a la conversión.
- Haz clic en el botón de marca de verificación (Crear prototipo) encima de tu inserción.
- Miro convierte e importa tus pantallas como un Prototipo de Miro editable.
Enviar una inserción HTML a Miro desde Claude
Si estás trabajando en Claude y tienes un diseño que quieres en tu tablero, envíalo directamente a Miro.
- En Claude, abre el diseño que quieres enviar a Miro.
- Envíalo a tu tablero de Miro, o a uno nuevo si no especificas uno. Claude envía a Miro un paquete HTML autocontenido, que incluye imágenes, fuentes y estilos.
- Abre tu tablero de Miro para ver la inserción.
Más información: Consulta la descripción general del servidor MCP de Miro.
Menú contextual del prototipo
Renombrar tu prototipo
En el menú contextual del prototipo, haz doble clic en el título para renombrarlo.
Convertir a wireframe
Para editar tu prototipo manualmente, puedes convertirlo de HTML (predeterminado) a un wireframe de forma libre y usar la biblioteca de wireframing.
En el menú contextual del prototipo, haz clic en Convertir a y luego selecciona Wireframe de forma libre.
IMPORTANTE: La conversión de un prototipo HTML a un wireframe es irreversible. No puedes iterar wireframes con Miro AI. Cualquier nueva generación crea un prototipo HTML.
Vista previa de prototipo
Haz clic en el botón Vista previa de prototipo (reproducir) para abrir una vista previa de tu prototipo. En un prototipo de varias pantallas, haz clic en las flechas de navegación en la parte inferior para desplazarte entre las pantallas.
CONSEJO: Crea una vista previa interactiva. Agrega conectores a las pantallas de tu prototipo y luego abre el modo de vista previa. Puedes hacer clic en los elementos de la interfaz conectados y probar el flujo.
Modo sin distracciones
El modo sin distracciones ofrece una experiencia de prototipado sin distracciones.
En el menú contextual del prototipo, haz clic en Modo sin distracciones.
CONSEJO: En el modo sin distracciones, usa Redimensionamiento preciso para lograr precisión a nivel de píxel.
Más información: Consulta Formatos y modos sin distracciones.
Diseño automático / Liberar diseño
Por defecto, Miro AI organiza automáticamente los prototipos HTML en una cuadrícula estructurada. Puedes reordenar elementos y pantallas conservando la alineación y el espaciado.
Para organizar tu prototipo en el diseño que prefieras, puedes deshabilitar opcionalmente el diseño automático. En el menú contextual del prototipo, haz clic en Liberar diseño.
Para volver a habilitar el diseño automático, en la misma posición del menú contextual haz clic en Diseño automático.
Más
El menú Más (tres puntos) incluye todas las demás acciones, como copiar, enlazar, exportar, guardar como plantilla, ocultar conectores y muchas más.
Haz clic en el botón de tres puntos para abrir el menú Más.
CONSEJO: El menú Más incluye el submenú Crear variantes, que te permite seleccionar refinamientos predefinidos de Miro AI para tu prototipo.
Refina tu prototipo con tu compañero de IA
Crear variantes
Usa el menú Crear variantes para refinar tu prototipo en lugar de reconstruirlo desde cero.
- Haz clic en los tres puntos del menú contextual del prototipo para abrir Más.
- Pasa el cursor sobre Crear variantes.
- Selecciona una opción de variante, por ejemplo Reescribir el texto o Acortar flujo. O haz clic en Crear con el compañero de IA para abrir el panel del compañero de IA, donde puedes escribir o dictar tus refinamientos en una instrucción.
CONSEJO: Si quieres refinar solo una pantalla en un prototipo de varias pantallas, selecciona la pantalla que quieras cambiar antes de dar la instrucción, para asegurarte de que el compañero de IA edite únicamente la pantalla seleccionada.
Refinar con instrucciones
Puedes seguir dando instrucciones al compañero de IA para refinar tu prototipo en cualquier momento después de generarlo.
Haz clic en tu prototipo para seleccionarlo, o haz clic en una sola pantalla del prototipo. Haz clic dentro del cuadro de instrucciones del compañero de IA. Luego escribe o dicta tu refinamiento.
Opcionalmente puedes seleccionar otros objetos en el lienzo para obtener contexto.
En el cuadro de instrucciones del compañero de IA, puedes opcionalmente hacer clic en Abrir en el panel lateral para mover tu conversación fuera del lienzo.
Aplicar estilos desde una URL
En el cuadro de instrucciones del compañero de IA, puedes pegar una URL e indicarle que aplique a tu prototipo los estilos del sitio web.
Revisar versiones anteriores
El compañero de IA guarda un historial de tus instrucciones. Para volver a una conversación anterior, haz clic dentro del cuadro de instrucciones del compañero de IA. El cuadro del compañero de IA se expande. En la esquina superior izquierda, haz clic en Chat sin título o en {Chat name}. En el menú desplegable, selecciona la conversación que quieres revisar.
Conectar tus pantallas de prototipo
Agregar líneas de conector interactivas
- Haz clic en un elemento de tu prototipo. Por ejemplo, un botón.
- Arrastra el punto de la línea de conector hasta un elemento en otra pantalla.
- Abre el modo de vista previa. Ahora puedes interactuar con tu prototipo en los lugares donde colocaste los conectores.
Ocultar conectores
Si tu prototipo tiene muchas conexiones, puedes ocultar los conectores en cualquier momento para tener una vista despejada del lienzo.
En el menú contextual del prototipo, haz clic en el menú Más (tres puntos). Luego haz clic en Ocultar conectores.
Para mostrar los conectores, en la misma posición del menú haz clic en Mostrar conectores.
En modo sin distracciones, en la esquina superior izquierda haz clic en Ocultar | Mostrar conectores.
CONSEJO: Presiona Shift + E para ocultar o mostrar los conectores. En modo lienzo, haz clic en tu prototipo para que el atajo de teclado funcione.
Exportar y compartir tu prototipo
Copiar a Figma
Para copiar todo tu prototipo, ve directamente al menú de contexto del prototipo. Para copiar una sola pantalla de tu prototipo, haz clic primero en la pantalla para seleccionarla.
- En el menú de contexto del prototipo, haz clic en el menú Más (tres puntos).
- Haz clic en Copiar a Figma. Miro copia tu prototipo, o la pantalla, al portapapeles.
- Pega en Figma. Presiona Ctrl + V (Windows) o Command + V (macOS) en tu teclado.
Exportar como HTML
En el menú contextual del prototipo, haz clic en el menú More (tres puntos). Luego haz clic en Share and export > Export as HTML. Tu prototipo se descarga como un archivo HTML.
Exportar como JPG, PDF o SVG
- En el menú contextual del prototipo, haz clic en el menú More (tres puntos).
- Haz clic en Share and export > Export as image.
- Ajusta la ventana de selección para abarcar tu prototipo.
- En la ventana modal Export image as, selecciona el formato de archivo y el tamaño si eliges JPG.
- Haz clic en Export.
CONSEJO: Exporta una sola pantalla de la misma manera: selecciona primero la pantalla y luego sigue los mismos pasos desde su menú contextual.
NOTA: Si importas una exportación SVG con imágenes a otro software, como Figma, las imágenes se reemplazan por marcadores de posición.
Exportar con el Servidor MCP de Miro
Exporta tu prototipo a un editor IA orientado al código, como Cursor, para generar código funcional. Asegúrate de que tu instrucción incluya la URL del tablero y el ID del tablero, con indicaciones para generar código basándose en el prototipo.
Más información: Consulta la descripción general del Servidor MCP de Miro.
Crear desde un prototipo con Claude Code
Crea un prototipo de Miro a partir de tu proyecto de Claude Code, o envía un prototipo a Claude Code, mediante el Model Context Protocol.
- Conéctate al servidor MCP de Miro siguiendo estas instrucciones.
- En tu herramienta de IA, ejecuta: "Obtén este archivo de diseño e implementa los aspectos relevantes del diseño. {Miro board URL}"
- Ve el Miro Prototype en tu tablero de Miro y la sesión de Claude Code en tu terminal.
Preguntas frecuentes
Miro Prototypes sirve para crear prototipos interactivos y cliqueables directamente en el lienzo de Miro, representados como HTML real en lugar de formas. La IA puede generar pantallas a partir del contexto del lienzo, como notas adhesivas, capturas de pantalla, diagramas o instrucciones de texto. Luego puedes refinarlos con componentes que se arrastran y sueltan y con el estilo de la marca, conectarlos en flujos de varias pantallas con puntos de acceso y previsualizarlos a pantalla completa para obtener comentarios. Está diseñado para ayudar a los equipos a explorar ideas con rapidez, alinearse pronto y tomar decisiones con confianza antes de invertir en diseño o código de alta fidelidad.
Para cualquiera que participe en el desarrollo de productos: gerentes de producto, diseñadores, desarrolladores, consultores, especialistas en marketing y más. Son especialmente útiles para quienes no son diseñadores y quieren dar vida a sus ideas, y para diseñadores que quieren explorar varias direcciones con rapidez.
Miro Prototypes se diseñó para la fase más temprana del desarrollo del producto. Simplifica a todos los miembros del equipo, desde gerentes de producto e ingenieros hasta especialistas en marketing y diseñadores, la tarea de convertir el contexto del lienzo, como notas, PRD y flujos, en prototipos interactivos en un solo paso. Al ser intencionalmente de baja fidelidad, los equipos pueden explorar opciones juntos, recopilar aportes de más voces y alinearse más rápido sobre el valor y la dirección antes de pasar al trabajo de diseño pulido en herramientas de prototipado como Figma.
Las herramientas de codificación automática están pensadas para generar aplicaciones listas para producción, normalmente pantalla por pantalla y requiriendo configuración técnica o depuración. Miro Prototypes tienen otro propósito. Permiten a los equipos mapear y visualizar rápidamente todo el flujo, recorrerlo juntos haciendo clic y alinearse sobre la solución adecuada antes de que se escriba una sola línea de código. Esto facilita la colaboración, acelera la alineación y ayuda a los equipos a evitar costosos retrabajos más adelante.
Miro AI ofrece la forma más rápida de generar y refinar prototipos en Miro. Aún así, puedes editar, conectar y previsualizar flujos sin Miro AI, pero activarlo te da acceso a una generación e iteración por IA más potentes.
No. Tu contenido se mantiene privado y seguro. Miro no usa tus instrucciones ni tus resultados para entrenar modelos de IA ni los comparte con proveedores de IA externos. Solo las interacciones de IA de usuarios del plan Free pueden usarse para mejorar las funciones de IA de Miro. Esto no aplica a los usuarios de Education, Starter, Business o Enterprise. Para más información, consulta Mejoras de calidad de Miro AI.
Miro Prototypes está incluido en el plan Business. Para Enterprise, Miro Prototypes está incluido con la licencia Accelerate. Contacta a tu equipo de cuentas para obtener detalles sobre precios. Los créditos de IA se comparten entre todas las funciones de Miro AI, incluidas Miro Prototypes.
Sí. Puedes usar el redimensionamiento preciso para lograr elementos perfectos al píxel cuando trabajes en modo sin distracciones. Más información: Consulta Redimensionamiento preciso.
Sí. El historial de chat de IA es una función de los compañeros de IA (Sidekicks), una experiencia unificada de creación con IA en Miro. Para más información, consulta Cómo los compañeros de IA (Sidekicks) hacen evolucionar la creación con IA en Miro.