O que é o Design?
O 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.1
Design primeiro
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.
2
Refine e itere
Siga uma sugestão 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. Você também pode conversar com o Agent para descrever as mudanças que quer.
3
Construa o design
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.
4
Publique e compartilhe
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
Comece no Design
- A aparência é a parte difícil
- Você quer ver sua ideia rapidamente
- Você quer explorar e comparar direções
- Velocidade é sua prioridade
Comece no Build
- 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
Principais diferenças
Próximos passos
O que é o Replit Design
A jornada completa do prompt ao app fiel à marca
Canvas
O quadro onde seus frames vivem
Construa seu design
O fluxo guiado do frame ao app funcional
Agent
Explore o que o Agent pode construir para você