Saltar para o conteúdo principal
O Flowstep gera ecrãs de UI a partir de prompts em linguagem natural, permitindo-lhe passar da ideia a um design visual em segundos. Quer precise de um único ecrã para validar um conceito, quer de um conjunto completo de ecrãs que cubra toda a jornada do utilizador, basta um prompt bem escrito para começar.

​
Gerar um design

1

Abrir um novo projeto

No seu painel do Flowstep, crie um novo projeto ou abra um existente onde quer adicionar ecrãs.
2

Escrever o seu prompt

Escreva uma descrição do ecrã ou dos ecrãs que pretende. Seja específico quanto ao tipo de aplicação, ao objetivo do utilizador e ao conteúdo que espera ver.
3

Indicar quantos ecrãs pretende

Por predefinição, o Flowstep gera um único ecrã. Se quiser vários ecrãs, indique-o explicitamente no seu prompt — o Flowstep pode gerar até 6 ecrãs a partir de um único prompt.
4

Gerar

Envie o seu prompt. O Flowstep produz os seus ecrãs e apresenta-os no editor, prontos a rever ou a refinar.
Quando cria um novo ficheiro e envia o seu primeiro prompt, o Flowstep dá-lhe nome com base nesse prompt, para que seja fácil de encontrar mais tarde. Um ficheiro que já tenha nome — ou prompts anteriores — mantém o seu nome, e pode mudar o nome de qualquer ficheiro a qualquer momento.

​
Parar uma geração

Enquanto o Flowstep está a responder, o botão de envio transforma-se num botão de paragem (Stop Flowstep response). Clique nele para parar a geração. Num pedido com vários ecrãs, os ecrãs já concluídos permanecem na sua tela e os que não chegaram a ser concluídos são removidos. Parar depois de o Flowstep ter começado a criar ecrãs continua a usar a mensagem — veja mensagens e limites.

​
Um ecrã ou vários ecrãs

Pode gerar um único ecrã ou até 6 ecrãs a partir de um único prompt. Ambas as abordagens se adequam a diferentes fases do trabalho de design.
  • Um ecrã — ideal para explorar um estado específico da UI, um componente ou um conceito focado.
  • Vários ecrãs — ideal para mapear fluxos, comparar opções de layout ou cobrir rapidamente uma jornada completa do utilizador.
Quando quiser vários ecrãs, seja explícito no seu prompt. O Flowstep usa a formulação do seu prompt para decidir quantos ecrãs produzir, por isso prompts vagos normalmente devolvem um único ecrã. Os ecrãs gerados têm o nome Screen 1, Screen 2, e assim sucessivamente — use estes nomes para se referir a um ecrã específico em prompts de seguimento.

​
Mais formas de criar prompts

O texto não é a única entrada. Também pode:
  • Anexar ficheiros — adicione imagens (JPG, PNG, WEBP) ou documentos (PDF, MD, TXT) até 3 MB cada ao prompt, através de arrastar e largar, do seletor de ficheiros ou colando. Referencie uma imagem anexada no seu prompt e o Flowstep incorpora-a nos ecrãs gerados. Veja Usar referências.
  • Ditar o seu prompt — clique no botão do microfone na barra de prompts (ou prima Cmd+Shift+V no Mac, Ctrl+Shift+V no Windows) e fale durante até 60 segundos. A transcrição é acrescentada ao que já tiver escrito.
  • Deixar o Flowstep pesquisar na web — quando o seu prompt o exigir (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, tipos de letra, logótipo, componentes de UI — e usá-la nos ecrãs gerados. O Flowstep decide por si próprio se deve pesquisar, por isso nem sempre será acionado em todos os prompts; tenha em conta que os websites recriados usam imagens e navegação diferentes das do original.
  • Definir diretrizes de design — defina regras de estilo permanentes que se aplicam a todas as gerações do ficheiro. Veja diretrizes de design.

​
Escrever prompts eficazes

Exemplo de prompt para um único ecrã: “Design a mobile login screen for a fitness tracking app with email and password fields, a sign-in button, and a forgot password link.”
Exemplo de prompt para vários ecrãs: “Generate multiple screens for a food delivery app onboarding flow—cover selecting cuisine preferences, entering a delivery address, and confirming the first order.”
Exemplo de prompt para a jornada completa: “Cover the full user journey in a expense reporting app, from submitting a receipt to manager approval.”
Tenha estes princípios em mente ao escrever prompts:
  • Indique a plataforma (mobile, desktop, tablet) para que o Flowstep dimensione corretamente os ecrãs.
  • Descreva o objetivo do utilizador, e não apenas os elementos de UI — o Flowstep infere o layout a partir da intenção.
  • Inclua conteúdos essenciais, como etiquetas, ações ou dados, se forem importantes para o design.
  • Use expressões como “generate multiple screens” ou “cover the full user journey” para acionar a produção de vários ecrãs.