> ## 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.

# Gerar ecrãs de UI a partir de prompts de texto com Flowstep

> Use Flowstep para gerar um ecrã ou até 6 ecrãs de uma só 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 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

<Steps>
  <Step title="Abra um novo projeto">
    A partir do seu painel Flowstep, crie um novo projeto ou abra um existente onde quer adicionar ecrãs.
  </Step>

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

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

  <Step title="Gerar">
    Submeta o seu prompt. Flowstep produz os seus ecrãs e exibe-os no editor, prontos para revisar ou refinar.
  </Step>
</Steps>

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

## Escrever prompts eficazes

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

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

<Tip>
  **Exemplo de prompt de jornada completa:** "Cover the full user journey in a expense reporting app, from submitting a receipt to manager approval."
</Tip>

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.