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

# O que é Flowstep?

> Flowstep é uma ferramenta de design com IA que gera telas de UI polidas a partir de prompts de texto. Saiba o que faz, para quem é e o que você pode criar com ela.

<iframe src="https://www.youtube.com/embed/ziyHZVaSbvQ" 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 />

Descreva a tela que você quer, receba uma interface projetada em segundos.

Para desenvolvedores, é a forma mais rápida de especificar uma UI antes de escrever o código. Para PMs e fundadores, é uma forma de comunicar ideias de produtos sem ambiguidade. Para designers, é um ponto de partida que pula a tela em branco.

## O que você pode fazer com Flowstep

* **Gerar telas a partir de texto** — descreva o que você quer, receba uma UI projetada em segundos
* **Iterar através de prompts ou edições diretas** — refine layouts, copy e styling sem sair da tela
* **Visualizar como um protótipo interativo** — Flowstep vincula suas telas em um fluxo clicável automaticamente. Ver [Prototypes](/pt-BR/prototypes).
* **Conectar ao seu IDE via MCP** — gere e edite telas do Cursor, Claude Code, Windsurf ou Claude Desktop. Ver [MCP Server](/pt-BR/mcp/overview).
* **Exportar para Figma, código ou como arquivos de imagem** — cole direto em um arquivo Figma existente, exporte o código ou baixe telas como PNG/JPG
* **Compartilhar com um link** — revisores não precisam de uma conta Flowstep para visualizar ou comentar

## Para quem é Flowstep

* **Desenvolvedores** construindo UI de produto sem um designer disponível, ou que desejam especificar uma tela visualmente antes de implementá-la
* **Gerentes de produto e fundadores** comunicando ideias visualmente ou validando uma ideia
* **Designers** pulando a tela em branco — comece a partir de um layout gerado e edite a partir daí

<Note>
  Nenhuma experiência em design necessária. Se conseguir descrever uma tela em inglês simples, o Flowstep consegue gerá-la.
</Note>

## Próximos passos

<CardGroup cols={2}>
  <Card title="Início Rápido" icon="rocket" href="/pt-BR/getting-started">
    Gere sua primeira tela em menos de cinco minutos.
  </Card>

  <Card title="Servidor MCP" icon="terminal" href="/pt-BR/mcp/overview">
    Use Flowstep do Cursor, Claude Code ou qualquer cliente compatível com MCP.
  </Card>

  <Card title="Gerando designs" icon="wand-magic-sparkles" href="/pt-BR/generating-designs">
    Como escrever prompts que produzem as telas que você realmente quer.
  </Card>

  <Card title="Integração com Figma" icon="figma" href="/pt-BR/figma-integration">
    Cole designs do Flowstep em um arquivo Figma existente com um atalho.
  </Card>
</CardGroup>