Skip to main content
Screenshot 2026 05 06 At 14 19 49
Cuando estés listo para compartir o entregar un diseño, Flowstep te permite exportarlo como una imagen estática — ya sea JPG o PNG. Ambos formatos son ampliamente compatibles con herramientas de diseño, software de presentación y navegadores, por lo que puedes llevar tus diseños generados por IA a donde los necesites.

​
Cómo exportar tu diseño

1

Abre tu diseño

Navega hasta el diseño que quieres exportar dentro de Flowstep.
2

Abre el menú de exportación

Localiza la opción de exportación en la barra de herramientas o panel de diseño. Selecciónala para abrir la configuración de exportación.
3

Elige tu formato

Selecciona JPG o PNG según tu caso de uso (consulta la comparación a continuación).
4

Descarga el archivo

Confirma tu selección y descarga la imagen exportada a tu dispositivo.
Screenshot 2026 05 06 At 14 19 39

​
JPG vs PNG: ¿qué formato debes usar?

Si pegas tu diseño en una presentación o envías una vista previa rápida a un cliente, JPG suele ser la opción correcta. Si necesitas bordes nítidos o un fondo transparente — por ejemplo, para superponer el diseño sobre otra imagen — usa PNG.

​
Exportar código

Más allá de las imágenes, el botón Code exporta tu diseño como código React + Tailwind — copia un fragmento o descarga el paquete completo como ZIP. Puedes exportar una única pantalla, varias pantallas seleccionadas o un archivo completo de una vez. Cuando exportas más de una pantalla, cada una se convierte en su propio archivo de componente y cualquier navegación que hayas configurado entre pantallas se integra en el código generado, por lo que la aplicación exportada es interactiva de principio a fin. Los paquetes son autónomos: las imágenes utilizadas en el diseño (incluyendo las que adjuntaste en el panel de chat) se incluyen en una carpeta public/assets/ con el código haciendo referencia a ellas por ruta local, por lo que la exportación se ejecuta tal como está. Los archivos descargados — imágenes y paquetes de código — se nombran según la pantalla a la que pertenecen (recurriendo al nombre del archivo si la pantalla no tiene nombre), lo que facilita identificar las exportaciones cuando trabajas con muchas pantallas.

​
Envía diseños a tu agente de codificación

En lugar de descargar un archivo, puedes entregar un diseño directamente a un asistente de codificación IA. Haz clic en Send to your coding agent en la barra de herramientas — o abre el diálogo de exportación y elige la misma opción — para copiar un prompt listo para pegar a tu agente:
Tu agente lee estas pantallas por MCP y las construye en tu repositorio. Pega este prompt en Claude, Cursor o tu agente preferido.
El prompt le indica a tu agente que obtenga las pantallas a través del servidor MCP de Flowstep y las reconstruya en tu base de código. Puedes entregar una única pantalla, varias pantallas seleccionadas o un archivo completo de una vez — el prompt se adapta a lo que hayas seleccionado. Esto usa el servidor MCP de Flowstep, por lo que conecta un cliente MCP primero. Consulta la descripción general del servidor MCP para clientes compatibles y la Guía rápida para conectar uno.
Si necesitas llevar tu diseño a un flujo de trabajo de edición vectorial, cópialo directamente en Figma en su lugar. Consulta Copia diseños de Flowstep en Figma al instante.