Pular para o conteúdo principal
O Flowstep gera telas de UI a partir de prompts em linguagem natural, permitindo que você vá da ideia ao design visual em segundos. Seja para validar um conceito com uma única tela ou para criar um conjunto completo de telas cobrindo toda a jornada do usuário, um prompt bem escrito é tudo o que você precisa para começar.

​
Gerar um design

1

Abra um novo projeto

No seu dashboard do Flowstep, crie um novo projeto ou abra um existente onde você quer adicionar telas.
2

Escreva seu prompt

Digite uma descrição da tela ou das telas que você quer. Seja específico sobre o tipo de app, o objetivo do usuário e o conteúdo que você espera ver.
3

Especifique quantas telas você quer

Por padrão, o Flowstep gera uma única tela. Se você quiser várias telas, diga isso explicitamente no seu prompt — o Flowstep pode gerar até 6 telas a partir de um único prompt.
4

Gere

Envie seu prompt. O Flowstep produz suas telas e as exibe no editor, prontas para revisar ou refinar.
Quando você cria um novo arquivo e envia o primeiro prompt, o Flowstep dá um nome ao arquivo com base nesse prompt, para que seja fácil encontrá-lo depois. Um arquivo que já tem nome — ou prompts anteriores — mantém o nome, e você pode renomear qualquer arquivo a qualquer momento.

​
Interromper uma geração

Enquanto o Flowstep está respondendo, o botão de envio se transforma em um botão de parar (Stop Flowstep response). Clique nele para interromper a geração. Em uma solicitação de várias telas, as telas que já terminaram permanecem no seu canvas, e as que não foram concluídas são removidas. Interromper depois que o Flowstep começou a criar telas ainda consome a mensagem — veja mensagens e limites.

​
Uma tela ou várias telas

Você pode gerar uma tela ou até 6 telas a partir de um único prompt. Cada abordagem se adapta a etapas diferentes do trabalho de design.
  • Uma tela — ideal para explorar um estado específico da UI, um componente ou um conceito focado.
  • Várias telas — ideal para mapear fluxos, comparar opções de layout ou cobrir uma jornada completa do usuário rapidamente.
Quando quiser várias telas, seja explícito no seu prompt. O Flowstep usa a redação do seu prompt para decidir quantas telas produzir, então prompts vagos normalmente retornam uma única tela. As telas geradas são nomeadas Screen 1, Screen 2 e assim por diante — use esses nomes para se referir a uma tela específica em prompts de acompanhamento.

​
Mais formas de fazer prompts

Texto não é a única entrada. Você também pode:
  • Anexar arquivos — adicione imagens (JPG, PNG, WEBP) ou documentos (PDF, MD, TXT) de até 3 MB cada ao prompt, por arrastar e soltar, pelo seletor de arquivos ou colando. Mencione uma imagem anexada no seu prompt e o Flowstep a incorpora nas telas geradas. Veja Usar referências.
  • Dite seu prompt — clique no botão do microfone na barra de prompt (ou pressione Cmd+Shift+V no Mac, Ctrl+Shift+V no Windows) e fale por até 60 segundos. A transcrição é anexada ao que você já digitou.
  • Deixe o Flowstep pesquisar na web — quando seu prompt pedir isso (por exemplo, “clone a página de preços da Stripe”), o Flowstep pode pesquisar na web e ler a identidade visual de uma página — cores, fontes, logo e componentes de UI — e usá-la nas telas geradas. O Flowstep decide por conta própria se deve pesquisar, então isso não será acionado necessariamente em todo prompt; observe que sites recriados usam imagens e navegação diferentes do original.
  • Defina diretrizes de design — defina regras de estilo permanentes que se aplicam a todas as gerações no arquivo. Veja Diretrizes de design.

​
Como escrever prompts eficazes

Exemplo de prompt para uma tela: “Crie uma tela de login mobile para um app de acompanhamento de treinos, com campos de e-mail e senha, um botão de entrar e um link de esqueci a senha.”
Exemplo de prompt para várias telas: “Gere várias telas para o fluxo de onboarding de um app de delivery de comida — cubra a seleção de preferências de culinária, a inserção de um endereço de entrega e a confirmação do primeiro pedido.”
Exemplo de prompt para a jornada completa: “Cubra a jornada completa do usuário em um app de relatório de despesas, desde o envio de um recibo até a aprovação do gestor.”
Mantenha estes princípios em mente ao escrever prompts:
  • Informe a plataforma (mobile, desktop, tablet) para que o Flowstep dimensione as telas corretamente.
  • Descreva o objetivo do usuário, não apenas os elementos de UI — o Flowstep infere o layout a partir da intenção.
  • Inclua conteúdo importante, como rótulos, ações ou dados, se eles forem relevantes para o design.
  • Use frases como “gere várias telas” ou “cubra a jornada completa do usuário” para acionar uma saída com várias telas.