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

​
Gerar um design

1

Abra um novo projeto

No seu painel Flowstep, crie um novo projeto ou abra um projeto 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, Flowstep gera uma única tela. Se você quer múltiplas telas, diga isso explicitamente no seu prompt — Flowstep pode gerar até 6 telas a partir de um prompt.
4

Gerar

Envie seu prompt. Flowstep produz suas telas e as exibe no editor, prontas para revisar ou refinar.

​
Uma única tela vs. múltiplas telas

Você pode gerar uma única tela ou até 6 telas a partir de um único prompt. Ambas as abordagens adequam-se a diferentes estágios do trabalho de design.
  • One screen — melhor para explorar um estado específico de UI, componente ou conceito focado.
  • Multiple screens — melhor para mapear fluxos, comparar opções de layout ou cobrir uma jornada completa de usuário rapidamente.
Quando você quer múltiplas telas, seja explícito no seu prompt. Flowstep usa a redação do seu prompt para decidir quantas telas produzir, então prompts vagos normalmente retornam uma única tela. 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 é o único input. Você também pode:
  • Attach files — adicione imagens (JPG, PNG, WEBP) ou documentos (PDF, MD, TXT) de até 3 MB cada ao prompt, via drag-and-drop, seletor de arquivos ou colando. Referencie uma imagem anexada no seu prompt e Flowstep a incorpora nas telas geradas. Veja Usar Referências.
  • Dictate your 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.
  • Let Flowstep research the web — quando seu prompt exige (por exemplo, “clone a página de preços do Stripe”), Flowstep pode buscar na web e ler a marca de uma página — cores, fontes, logo, componentes de UI — e usá-los nas telas geradas. Flowstep decide por si só se deve pesquisar, então não necessariamente acionará em cada prompt; observe que sites recriados usam imagens e navegação diferentes do original.
  • Set design guidelines — 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: “Projete uma tela de login móvel para um aplicativo de rastreamento de fitness com campos de email e senha, um botão de login e um link de senha esquecida.”
Exemplo de prompt multi-tela: “Gere múltiplas telas para um fluxo de onboarding de aplicativo de entrega de comida—cubra seleção de preferências de culinária, inserção de endereço de entrega e confirmação do primeiro pedido.”
Exemplo de prompt de jornada completa: “Cubra a jornada completa do usuário em um aplicativo de relatório de despesas, desde o envio de um recibo até a aprovação do gerente.”
Mantenha esses princípios em mente ao escrever prompts:
  • Nomeie a plataforma (móvel, 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 a partir da intenção.
  • Inclua conteúdo-chave como rótulos, ações ou dados se forem importantes para o design.
  • Use frases como “gerar múltiplas telas” ou “cobrir a jornada completa do usuário” para disparar saída multi-tela.