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

# Construa seu design

> Transforme o frame vencedor em software de verdade: construa-o como um novo app, ou aplique sua aparência a um app que você já tem.

Um frame de design nunca é só uma imagem, é a especificação de um software de verdade. Quando um frame estiver certo, entregue-o ao Agent: selecione o frame, escolha **Construir…** na barra de ações e escolha um caminho:

* Construir o design como um novo app no mesmo projeto
* Aplicar a aparência do design a um app que você já tem
* Reverter com segurança de qualquer forma, o Agent cria um checkpoint antes de começar

## Dois caminhos do frame ao app

O menu **Construir…** em um frame de Design selecionado cobre ambos:

<Frame caption="O menu Construir…: crie um novo artefato, ou aplique o design a um existente.">
  <img src="https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-build-menu.png?fit=max&auto=format&n=OIImiKPshhawqFXK&q=85&s=494228a2a81e9f943376d78e77b96417" alt="O menu Construir aberto em um frame de Design selecionado (APEX X1 Exact Replica) com o cabeçalho 'Construa ou aplique seus designs', mostrando 'Construir este design', que cria um novo artefato, e 'Aplicar a uma criação existente' listando o APEX X1 Design System do projeto e seu site Scroll Hero" width="2000" height="1153" data-path="images/replitai/canvas-build-menu.png" />
</Frame>

### Construir este design

Escolher **Construir este design** inicia um novo artefato a partir do frame. O Agent constrói o layout, o estilo e os recursos em um app ativo e funcional que chega à lista de artefatos do seu projeto.

### Aplicar a um app existente

O menu também lista todos os artefatos do projeto. Escolher um deles aplica o design a ele: o Agent reescreve o código do artefato para corresponder ao frame, e o frame de Design permanece no canvas como referência. É assim que você reestiliza um app que já construiu sem começar do zero.

## O fluxo

<Steps>
  <Step title="Escolha o design para construir">
    Decida o frame que você quer lançar. Compare candidatos lado a lado no canvas primeiro — construir encerra esta rodada de exploração, embora o Agent crie um checkpoint para que você sempre possa reverter.
  </Step>

  <Step title="Entregue ao Agent">
    Selecione o frame, escolha **Construir…** na barra de ações e escolha seu caminho: um novo artefato ou um existente. O Agent constrói o design, o layout, o estilo e os recursos, e informa o progresso no chat.
  </Step>

  <Step title="Revise a construção">
    O Agent informa o que mudou e cria um checkpoint. Abra o resultado para ver o design ao vivo, e continue conversando para ajustar qualquer coisa que não tenha ficado boa.
  </Step>
</Steps>

<Note>
  Construir um novo app a partir de um frame de Design requer Core ou Pro; aplicar um design e todos os outros recursos do Replit Design funcionam em qualquer plano. Veja [Billing](/pt/billing/ai-billing) para detalhes de planos.
</Note>

## Depois de construir: torne-o real

Construir o frame te dá um app funcional com seu design já aplicado. O mockup só fingia funcionar; agora o Agent pode adicionar a coisa de verdade. Peça o que você precisa no chat:

* **Permita que as pessoas façam login**: adicione contas de usuário com o [Replit Auth](/pt/features/auth-and-identity/authentication), os usuários fazem login com suas contas do Replit sem nenhuma configuração, ou traga seu próprio provedor.
* **Salve dados reais**: armazene e recupere pedidos, mensagens e preferências com o [Database](/pt/features/data-and-storage/sql-database) integrado.
* **Cobre por isso**: adicione pagamentos e assinaturas com integrações de [Monetização](/pt/features/monetization/overview).
* **Conecte outros serviços**: o Agent ativa [integrações](/pt/features/integrations/overview) automaticamente com base nos seus prompts, de e-mail a Slack a serviços do Google.

## Lance e faça crescer

Quando o app funcionar, coloque-o na frente das pessoas e continue melhorando-o:

* **Publique**: lance-o pela [ferramenta de Publicação](/pt/features/publishing/overview), depois veja [Depois de publicar](/pt/features/publishing/after-you-publish) para atualizar o app em produção.
* **Tenha um endereço de verdade**: compre ou conecte um [domínio personalizado](/pt/features/publishing/custom-domains).
* **Seja encontrado**: execute o [SEO Agent](/pt/features/publishing/seo-agent) para uma auditoria técnica com correções em um clique.
* **Ouça seus visitantes**: adicione o [widget de feedback](/pt/features/publishing/feedback-widget) para que as pessoas possam relatar problemas e ideias que você pode enviar diretamente ao Agent.
* **Mantenha-o saudável**: acompanhe status, desempenho e uptime com o [monitoramento de apps publicados](/pt/features/publishing/monitoring-a-deployment).

## Próximos passos

* [Design vs. Build](/pt/design/design-vs-build): quando começar em cada ponto de entrada.
* [Crie um design system](/pt/design/create-a-design-system): extraia o design que você lançou para que o próximo comece alinhado com a marca.