> ## Documentation Index
> Fetch the complete documentation index at: https://docs.flowstep.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Gere telas de UI a partir de prompts de texto com Flowstep

> Use Flowstep para gerar uma tela ou até 6 telas de uma vez a partir de um único prompt de texto — ideal para rápida ideação de UI e exploração de fluxos completos.

<iframe src="https://www.youtube.com/embed/hHNwjKz_264" title="YouTube video player" frameborder="0" className="w-full aspect-video rounded-xl" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen />

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

<Steps>
  <Step title="Abra um novo projeto">
    No seu painel Flowstep, crie um novo projeto ou abra um projeto existente onde você quer adicionar telas.
  </Step>

  <Step title="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.
  </Step>

  <Step title="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.
  </Step>

  <Step title="Gerar">
    Envie seu prompt. Flowstep produz suas telas e as exibe no editor, prontas para revisar ou refinar.
  </Step>
</Steps>

## 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](/pt-BR/design-references).
* **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](/pt-BR/design-guidelines).

## Escrevendo prompts eficazes

<Tip>
  **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."
</Tip>

<Tip>
  **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."
</Tip>

<Tip>
  **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."
</Tip>

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.