Pular para o conteúdo principal
Screenshot 2026 05 06 At 14 19 49
Quando estiver pronto para compartilhar ou entregar um design, Flowstep permite que você o exporte como uma imagem estática — JPG ou PNG. Ambos os formatos são amplamente suportados em ferramentas de design, software de apresentação e navegadores, para que você possa levar seus designs gerados por IA para onde precisar.

​
Como exportar seu design

1

Abra seu design

Navegue até o design que deseja exportar no Flowstep.
2

Abra o menu de exportação

Localize a opção de exportação na barra de ferramentas ou no painel de design. Selecione-a para abrir as configurações de exportação.
3

Escolha seu formato

Selecione JPG ou PNG dependendo do seu caso de uso (veja a comparação abaixo).
4

Baixe o arquivo

Confirme sua seleção e baixe a imagem exportada para seu dispositivo.
Screenshot 2026 05 06 At 14 19 39

​
JPG vs PNG: qual formato você deve usar?

Se você estiver colando seu design em um deck de slides ou enviando uma visualização rápida para um cliente, JPG geralmente é a escolha certa. Se você precisar de bordas nítidas ou fundo transparente — por exemplo, para sobrepor o design em outra imagem — use PNG.

​
Exportar código

Além de imagens, o botão Code exporta seu design como código React + Tailwind — copie um trecho ou baixe o pacote completo como ZIP. Você pode exportar uma única tela, várias telas selecionadas ou um arquivo inteiro de uma vez. Quando você exporta mais de uma tela, cada uma se torna seu próprio arquivo de componente e qualquer navegação que você configurou entre telas é conectada ao código gerado, para que o aplicativo exportado seja clicável do início ao fim. Os pacotes são auto-contidos: imagens usadas no design (incluindo as que você anexou no painel de chat) são incluídas em uma pasta public/assets/ com o código as referenciando pelo caminho local, para que a exportação funcione como está. Os arquivos baixados — imagens e pacotes de código — são nomeados após a tela a qual pertencem (voltando ao nome do arquivo se a tela não estiver nomeada), o que mantém as exportações fáceis de identificar quando você está trabalhando com muitas telas.

​
Envie designs para seu agente de codificação

Em vez de baixar um arquivo, você pode entregar um design diretamente a um assistente de codificação com IA. Clique em Send to your coding agent na barra de ferramentas — ou abra o diálogo de exportação e escolha a mesma opção — para copiar um prompt pronto para colar para seu agente:
Seu agente lê essas telas pelo MCP e as constrói em seu repositório. Cole este prompt no Claude, Cursor ou seu agente preferido.
O prompt diz ao seu agente para buscar as telas pelo servidor MCP do Flowstep e reconstruí-las em sua base de código. Você pode entregar uma única tela, várias telas selecionadas ou um arquivo inteiro de uma vez — o prompt se adapta ao que você selecionou. Isso usa o servidor MCP do Flowstep, então conecte um cliente MCP primeiro. Veja a visão geral do servidor MCP para clientes suportados e o Quickstart para conectar um.
Se você precisar levar seu design para um fluxo de trabalho de edição vetorial, copie-o diretamente no Figma. Veja Copie designs Flowstep no Figma instantaneamente.