Como criar seu primeiro app no Lovable sem programar: do prompt ao protótipo

Esta é a etapa prática da trilha: você já planejou um site de agendamento para uma barbearia e desenhou o caminho das telas no Figma. Agora vai usar o Lovable para criar uma demonstração navegável por meio de instruções em português, sem escrever código.

O resultado será um protótipo que mostra serviços, deixa selecionar opções de demonstração e exibe uma mensagem fictícia ao concluir. Ele não vai confirmar horários reais, guardar clientes nem enviar dados para a barbearia. Vamos deixar essas diferenças visíveis para não confundir uma tela funcional com um sistema pronto para uso comercial.

Entre no Lovable e crie um projeto novo. Na caixa de conversa, descreva o que a pessoa usuária vai conseguir fazer, quem vai usar o app, quais telas são necessárias e qual estilo você imagina. A documentação recomenda usar conteúdo realista e começar sem login ou banco de dados quando eles ainda não são necessários.

Você pode anexar uma imagem exportada do seu protótipo como referência visual, se tiver essa opção disponível. Se a ferramenta fizer perguntas, responda antes de iniciar a construção. Não peça “faça tudo que faltar”: quando a IA precisa adivinhar regras, ela pode inventar partes do produto.

Crie um site responsivo de demonstração para uma barbearia de bairro, em português do Brasil.

Objetivo: permitir que uma pessoa explore os serviços e simule um pedido de horário pelo celular.
Telas ou seções: início com chamada principal, cartões de serviços, seleção de dia e horário fictícios, formulário de contato e resumo do pedido.
Visual: acolhedor e atual, com tons escuros, detalhes em cobre e botões grandes.
Interações: os cartões podem ser selecionados; a pessoa pode escolher opções fictícias e revisar o resumo.

Use nomes, serviços e preços claramente identificados como exemplos. Não crie login, banco de dados, pagamento, integração de agenda nem envio real de formulário. Ao concluir, mostre: “Demonstração: nenhum agendamento foi enviado”.
Antes de construir, faça perguntas se faltar alguma informação. O site precisa funcionar bem em celular.

Quando a prévia aparecer, percorra a página como se você fosse cliente. Confira se a pessoa entende o serviço, encontra os preços de exemplo e sabe o que fazer em seguida. Reduza o escopo se aparecerem telas que você não pediu, como login ou pagamento.

Se a aparência não estiver perto do Figma, descreva uma diferença concreta. Por exemplo: “Na tela inicial, deixe o botão Agendar horário visível sem rolar a página e use o texto do protótipo”. Faça uma mudança por vez e confira a prévia depois de cada resposta, em vez de pedir uma reformulação completa sem explicar o que incomodou.

A documentação do Lovable também sugere solicitar uma mudança de cada vez e conferir a prévia após cada alteração. Isso facilita perceber qual pedido melhorou o app e qual introduziu um problema.

• O título explica imediatamente que serviço está sendo apresentado?
• Os botões principais fazem alguma coisa visível na demonstração?
• Os preços, horários e depoimentos estão identificados como fictícios?
• O formulário informa que os dados não foram enviados nem salvos?
• A página continua clara quando você troca a prévia para o celular?

Teste cada botão, opção de serviço e estado do formulário. Experimente concluir sem selecionar horário, trocar uma escolha e abrir a página no modo móvel. Se algo não funcionar, diga exatamente qual elemento você clicou, o que aconteceu e o que deveria acontecer.

Quando estiver satisfeito com o visual e o fluxo, você pode compartilhar a prévia com alguém para receber comentários. Só publique uma versão de demonstração se estiver claro para quem abrir o link que os dados são fictícios e que nenhum agendamento real será enviado.

Para transformar esse protótipo em um serviço de verdade, o próximo passo será decidir como consultar horários disponíveis, guardar pedidos, proteger os dados pessoais e enviar uma confirmação. Não conecte banco de dados ou agenda antes de decidir essas regras.

Nesta aula, o sucesso é ter um fluxo clicável para avaliar a ideia. Agendamento real, login e armazenamento são etapas futuras.

Agora você tem uma ideia planejada, um protótipo visual e uma primeira versão clicável feita por prompt. Antes de transformar a demonstração em um app real, a próxima etapa é especificar o que acontece quando alguém escolhe um horário: como saber se continua disponível, o que fica salvo e quem pode confirmar ou cancelar o pedido.

Essa sequência evita começar por login, banco de dados ou integrações só porque a plataforma oferece esses botões. Primeiro valide a experiência com pessoas; depois acrescente a parte que o produto realmente precisa.