Skip to main content
Flowstep gera telas de UI a partir de prompts em linguagem natural, permitindo que você vá de uma ideia para um design visual em segundos. Quer você precise de uma única tela para validar um conceito ou um conjunto completo de telas cobrindo uma jornada de usuário inteira, um prompt bem escrito é tudo o que você precisa para começar.

​
Gere um design

1

Abra um novo projeto

No seu painel Flowstep, crie um novo projeto ou abra um existente onde deseja adicionar telas.
2

Escreva seu prompt

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

Especifique quantas telas você quer

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

Gere

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

​
Tela única vs. várias telas

Você pode gerar uma única tela ou até 6 telas a partir de um único prompt. Ambas as abordagens são adequadas para diferentes estágios do trabalho de design.
  • Uma tela — melhor para explorar um estado de UI específico, componente ou conceito focado.
  • Várias telas — melhor para mapear fluxos, comparar opções de layout ou cobrir uma jornada de usuário completa rapidamente.
Quando você quer várias telas, seja explícito no seu prompt. Flowstep usa a redação do seu prompt para decidir quantas telas produzir, assim prompts vagos geralmente 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 subsequentes.

​
Mais maneiras 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, via arrastar e soltar, o seletor de arquivo ou colando. Referencie uma imagem anexada no seu prompt e Flowstep a incorpora nas telas geradas. Veja Use Referências.
  • Ditar seu prompt — clique no botão de 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 Flowstep pesquisar a web — quando seu prompt pedir (por exemplo, “clone a página de preços do Stripe”), Flowstep pode pesquisar a web e ler a marca de uma página — cores, fontes, logo, componentes de UI — e usá-lo nas telas geradas. Flowstep decide por conta própria se deve pesquisar, portanto não vai necessariamente ativar em cada prompt; note que sites recriados usam imagens e navegação diferentes do original.
  • Defina diretrizes de design — defina regras de estilo permanentes que se aplicam a cada geração no arquivo. Veja Diretrizes de Design.

​
Escrevendo prompts eficazes

Exemplo de prompt de tela única: “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 várias telas: “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 as telas corretamente.
  • Descreva o objetivo do usuário, não apenas elementos de UI — Flowstep infere o layout da intenção.
  • Inclua conteúdo-chave como rótulos, ações ou dados se forem importantes para o design.
  • Use frases como “generate multiple screens” ou “cover the full user journey” para disparar a saída com várias telas.