> ## 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.
# Design vs. Build
> Aprenda a diferença entre Design e Build em um projeto Replit, e quando começar em cada um.
Todo projeto Replit tem dois pontos de entrada, lado a lado no cabeçalho: **Design** e **Build**. Design é onde você molda a aparência do seu software; Build é onde o Agent o faz funcionar. Eles abrem o mesmo projeto, então nada do que você projeta fica preso em uma ferramenta de design.
## O que é o Design?
O [Design](/pt/design/what-is-replit-design) mostra o canvas, onde você gera frames de design a partir de um prompt, explora variantes e refina o vencedor, tudo antes de se comprometer com código.
O Design é perfeito para:
* **Testar suas ideias rapidamente**: visualize o design do seu app antes de construir a funcionalidade
* **Criar sites polidos**: landing pages, portfólios, cardápios de restaurante, páginas de eventos
* **Ajustar o design com precisão**: ajuste cores, layouts e conteúdo instantaneamente
Os mockups do Design têm a aparência e o comportamento de páginas reais, mas ainda não armazenam dados nem se conectam a serviços externos. Quando você estiver satisfeito com a aparência de tudo, transforme o design em um app completo com um clique. As etapas abaixo mostram como.
## O que é o Build?
O Build é onde sua criação roda como uma aplicação real e funcional, que pode salvar dados, permitir que as pessoas façam login e se conectar a outros serviços.
Use o Build quando seu app precisar de:
* **Contas de usuário**: permita que as pessoas criem contas e façam login
* **Informações salvas**: armazene dados como pedidos, mensagens ou preferências do usuário
* **Conexões com outros serviços**: processe pagamentos, envie e-mails ou traga dados de outros apps
* **Tarefas complexas**: administre uma loja online, gerencie reservas ou alimente um painel
## Usando os dois juntos
Design e Build atuam no mesmo projeto, então você não precisa escolher um ou outro. Comece pela aparência e evolua para um app completo.
Comece no Design para visualizar sua ideia rapidamente. Foque em como seu app parece e se comporta: o layout, as cores, os botões e a experiência do usuário.
Siga uma [sugestão](/pt/design/explore-suggestions) para explorar novas direções para um frame selecionado, ou selecione a ferramenta **Edit** e clique em um elemento para ajustá-lo no [Visual Editor](/pt/design/visual-editor). Você também pode [conversar com o Agent](/pt/design/chat-about-your-design) para descrever as mudanças que quer.
Quando estiver satisfeito com o seu design e pronto para adicionar funcionalidade real, selecione **Build…** no frame. Crie um novo artefato ou aplique o design a um já existente; o Agent adiciona a capacidade de salvar dados, gerenciar contas de usuário e se conectar a serviços, tudo mantendo seu design intacto.
O Agent vai pedir para você converter quando tentar adicionar um banco de dados ou recursos avançados a um mockup.
Assim que seu app estiver construído, publique-o para que qualquer pessoa possa acessá-lo online. A Replit cuida de toda a infraestrutura técnica para que seu app funcione de forma confiável para seu público.
## Quando começar em cada um
* A aparência é a parte difícil
* Você quer ver sua ideia rapidamente
* Você quer explorar e comparar direções
* Velocidade é sua prioridade
* O comportamento é a parte difícil
* Seu app precisa salvar dados desde o primeiro dia
* As pessoas precisam fazer login
* Você está se conectando a outros serviços
**Não tem certeza de qual escolher?** Comece no Design. É mais rápido, e você sempre pode transformar o design em um app completo depois. Seu trabalho nunca é desperdiçado, ele é aproveitado quando você constrói. E também funciona ao contrário: deixe um app funcionando no Build e depois reestilize-o no Design.
## Principais diferenças
| Recurso | Design (mockups) | Build (apps) |
| -------------------------- | ----------------------------- | --------------------------------------- |
| **Velocidade** | Alguns minutos | Cerca de 10 minutos para apps completos |
| **Armazenamento de dados** | Apenas visual (não salva) | Salva e recupera dados reais |
| **Contas de usuário** | Mostra como o login se parece | Funcionalidade real de login |
| **Conexão com serviços** | Não disponível | Pagamentos, e-mails, dados externos |
## Próximos passos
A jornada completa do prompt ao app fiel à marca
O quadro onde seus frames vivem
O fluxo guiado do frame ao app funcional
Explore o que o Agent pode construir para você