Skip to main content
Flowstep gera ecrãs de UI a partir de prompts em linguagem natural, permitindo-lhe passar de ideia para design visual em segundos. Quer necessite de um único ecrã para validar um conceito ou de um conjunto completo de ecrãs que cubra toda uma jornada do utilizador, um prompt bem escrito é tudo o que precisa para começar.

​
Gerar um design

1

Abra um novo projeto

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

Escreva o seu prompt

Digite uma descrição do ecrã ou ecrãs que quer. Seja específico sobre o tipo de aplicação, o objetivo do utilizador e o conteúdo que espera ver.
3

Especifique quantos ecrãs quer

Por padrão, Flowstep gera um único ecrã. Se quer múltiplos ecrãs, diga-o explicitamente no seu prompt — Flowstep pode gerar até 6 ecrãs a partir de um único prompt.
4

Gerar

Submeta o seu prompt. Flowstep produz os seus ecrãs e exibe-os no editor, prontos para revisar ou refinar.

​
Um único ecrã vs. múltiplos ecrãs

Pode gerar um único ecrã ou até 6 ecrãs a partir de um único prompt. Ambas as abordagens são adequadas para diferentes fases do trabalho de design.
  • Um ecrã — melhor para explorar um estado de UI específico, componente ou conceito focado.
  • Múltiplos ecrãs — melhor para mapear fluxos, comparar opções de layout ou cobrir uma jornada completa do utilizador rapidamente.
Quando quer múltiplos ecrãs, seja explícito no seu prompt. Flowstep usa a redação do seu prompt para decidir quantos ecrãs produzir, portanto prompts vagos geralmente devolvem um único ecrã. Os ecrãs gerados são nomeados Screen 1, Screen 2, e assim por diante — use estes nomes para se referir a um ecrã específico em prompts subsequentes.

​
Mais formas de fazer 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, o selecionador de ficheiros ou colando. Referencie uma imagem anexada no seu prompt e Flowstep incorpora-a nos ecrãs gerados. Veja Usar Referências.
  • Ditar o seu prompt — clique no botão de microfone na barra de prompt (ou prima Cmd+Shift+V no Mac, Ctrl+Shift+V no Windows) e fale até 60 segundos. A transcrição é adicionada ao que já digitou.
  • Permitir que Flowstep pesquise a web — quando o seu prompt o exigir (por exemplo, “clone a página de preços do Stripe”), Flowstep pode pesquisar a web e ler a identidade visual de uma página — cores, fontes, logótipo, componentes de UI — e usá-la nos ecrãs gerados. Flowstep decide por si próprio se deve pesquisar, portanto não necessariamente ativa em cada prompt; note que websites recriados usam imagens e navegação diferentes do original.
  • Definir diretrizes de design — defina regras de estilo permanentes que se aplicam a cada geração no ficheiro. Veja Diretrizes de Design.

​
Escrever prompts eficazes

Exemplo de prompt de 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 com múltiplos 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 de jornada completa: “Cover the full user journey in a expense reporting app, from submitting a receipt to manager approval.”
Mantenha estes princípios em mente ao escrever prompts:
  • Nomeie a plataforma (mobile, desktop, tablet) para que Flowstep dimensione os ecrãs corretamente.
  • Descreva o objetivo do utilizador, não apenas elementos de UI — Flowstep infere o layout a partir da intenção.
  • Inclua conteúdo chave como rótulos, ações ou dados se forem relevantes para o design.
  • Use frases como “generate multiple screens” ou “cover the full user journey” para ativar a saída de múltiplos ecrãs.