Como criar um app do zero com Bolt.new: tutorial passo a passo
Time da Marfin13 min de leitura
Abrir o browser, descrever o que você quer construir e ter um app rodando em minutos. Sem instalar nada. Sem configurar ambiente. Sem escrever uma linha de código manualmente. Isso é o Bolt.new, e neste tutorial vamos te mostrar como usá-lo para criar uma aplicação completa do zero ao deploy.
O Bolt.new é uma das plataformas de vibe coding mais populares do mundo, com mais de 5 milhões de signups e uma rodada Série B de US$ 105,5 milhões que avaliou a StackBlitz (empresa por trás do Bolt) em US$ 700 milhões. O diferencial técnico é o WebContainers: uma tecnologia que roda Node.js diretamente no browser, sem servidor, com zero latência e funcionamento até offline.
Se você quer entender como o Bolt.new se compara a outras ferramentas como Lovable e v0, temos um comparativo completo. Neste artigo, o foco é prático: vamos construir juntos.
O que o Bolt.new faz (e o que não faz)
Antes de começar, é importante ter expectativas calibradas.
O que o Bolt.new faz bem: prototipagem rápida de aplicações web, criação de frontends completos com React, Vue, Svelte, Next.js e outros frameworks, preview ao vivo no browser enquanto você itera, instalação de pacotes npm sem sair do navegador, deploy com um clique via Netlify e, mais recentemente, integração com Supabase para backend e banco de dados.
Onde tem limitações: projetos com lógica de backend muito complexa (embora esteja melhorando), aplicações que precisam de controle granular sobre a arquitetura do código, e projetos de grande escala que exigem testes automatizados e CI/CD robusto. Para esses casos, recomendamos o Cursor AI, que opera no nível do editor de código profissional.
O Bolt.new brilha quando você precisa ir de ideia a protótipo funcional no menor tempo possível. É a ferramenta ideal para validação rápida, demos para clientes e projetos pessoais.
Configurando sua conta
Acesse bolt.new e crie uma conta. O plano gratuito oferece tokens limitados, suficientes para testar e entender a ferramenta. O plano Pro (US$ 20/mês) libera mais tokens e acesso a modelos premium como o Claude Opus com profundidade de raciocínio ajustável.
Em 2026, o Bolt.new adicionou o modelo Opus 4.6 com "adjustable reasoning depth", que permite controlar o quanto de processamento a IA aplica em cada geração. Para tarefas simples, use raciocínio rápido. Para lógica complexa, aumente a profundidade.
A interface é limpa: um campo de prompt no centro, um editor de código à esquerda e um preview ao vivo à direita. É tudo que você precisa.
Tutorial: criando um dashboard de hábitos
Vamos construir algo prático: um dashboard de rastreamento de hábitos com autenticação de usuário, banco de dados e visual profissional. Esse projeto cobre as principais funcionalidades do Bolt.new.
Passo 1: o prompt inicial
A qualidade do prompt determina a qualidade do resultado. Em vez de "faça um app de hábitos", vamos ser específicos. Um bom prompt inicial para o Bolt.new inclui o que o app faz, as funcionalidades principais, o estilo visual desejado e as tecnologias preferidas.
Exemplo de prompt que funciona: "Crie um dashboard de rastreamento de hábitos diários. Funcionalidades: o usuário pode adicionar hábitos com nome e ícone, marcar como feito ou não feito cada dia, ver o histórico semanal e mensal com gráficos de progresso, e ter uma pontuação de consistência. Use React com TypeScript, Tailwind CSS e shadcn/ui para os componentes. Visual clean e moderno, com tema escuro. Responsivo para mobile."
O Bolt.new vai processar o prompt, gerar a estrutura de arquivos, instalar dependências e mostrar o preview ao vivo. Em 30-60 segundos, você tem uma primeira versão funcional.
Passo 2: iterando com prompts de refinamento
O primeiro resultado raramente é perfeito. A mágica do Bolt.new está na iteração. Você conversa com a IA para refinar o resultado.
Prompts de refinamento que usamos: "Adicione animações suaves quando o usuário marca um hábito como completo. Use framer-motion." Depois: "O gráfico de progresso precisa mostrar os últimos 30 dias com barras coloridas. Verde para dias com todos os hábitos completos, amarelo para parcial, cinza para incompleto." E: "Adicione um modo de visualização por semana com cards individuais para cada dia."
Cada iteração atualiza o preview em tempo real. Você vê o resultado instantaneamente e decide se precisa de mais ajustes. Esse ciclo de prompt-preview-refinamento é o coração do vibe coding.
Passo 3: adicionando backend com Supabase
Para que os dados persistam (e não se percam ao recarregar a página), precisamos de um banco de dados. O Bolt.new integra com Supabase, que oferece PostgreSQL, autenticação e storage.
O prompt para integrar: "Integre com Supabase para persistir os dados. Crie uma tabela 'habits' com id, user_id, name, icon, created_at e uma tabela 'habit_entries' com id, habit_id, date, completed. Configure autenticação com email/senha usando Supabase Auth. Os dados devem ser carregados e salvos em tempo real."
O Bolt.new vai configurar a conexão com Supabase, criar as tabelas necessárias e implementar a lógica de autenticação. Você só precisa conectar seu projeto Supabase (criando um gratuito em supabase.com se ainda não tiver).
Passo 4: integrando Figma (opcional)
Uma das features mais recentes do Bolt.new é a importação de designs do Figma. Se você tem um mockup visual, pode importá-lo e o Bolt.new gera o código correspondente.
Isso é especialmente útil para designers que querem materializar seus protótipos sem depender de desenvolvedores, ou para equipes que querem garantir fidelidade visual entre o design e a implementação.
Passo 5: deploy
Com o app pronto, o deploy é feito com um clique. O Bolt.new suporta deploy via Netlify, incluindo URLs editáveis. Você escolhe o subdomínio, clica em deploy, e em menos de um minuto seu app está no ar com HTTPS e acessível para qualquer pessoa.
Para projetos mais avançados, você pode exportar o código e fazer deploy em outras plataformas como Vercel, Railway ou Cloudflare Pages.
Dicas de prompt engineering para o Bolt.new
Depois de dezenas de projetos no Bolt.new, identificamos padrões de prompts que geram melhores resultados. Se você quer se aprofundar em prompt engineering, temos um guia completo. Aqui vão as dicas específicas para o Bolt.new.
Seja explícito sobre o stack. O Bolt.new suporta múltiplos frameworks. Se você não especificar, ele vai escolher. Diga exatamente o que quer: "Use React com TypeScript, Tailwind CSS e shadcn/ui." Isso garante consistência.
Descreva o visual com referências. "Visual clean" é subjetivo. "Visual similar ao Notion, com espaçamento generoso, tipografia sans-serif e paleta de cores neutras com accent azul" é preciso.
Divida tarefas complexas. Em vez de descrever um app inteiro em um prompt, construa incrementalmente. Comece com a estrutura básica, depois adicione funcionalidades uma por uma. Isso dá mais controle e reduz erros.
Use o chat para debugging. Se algo não funciona, descreva o problema no chat. "O botão de adicionar hábito não está salvando no banco de dados. O console mostra um erro de permissão no Supabase." A IA vai diagnosticar e corrigir.
Peça explicações quando necessário. "Explique o que esse componente faz e como os dados fluem do formulário até o banco." Entender o código gerado te ajuda a iterar melhor e a identificar problemas.
Projetos práticos para testar
Se você quer praticar, aqui estão projetos que exploram diferentes capacidades do Bolt.new, do mais simples ao mais complexo.
Nível iniciante: landing page de produto. Descreva seu produto ou serviço e peça uma landing page com hero section, features, depoimentos e CTA. Excelente para testar a qualidade visual e a velocidade de geração.
Nível intermediário: dashboard de analytics. Um painel com gráficos (use Recharts ou Chart.js), filtros por data e tabela de dados. Testa a capacidade do Bolt.new de lidar com dados e visualizações.
Nível avançado: SaaS com autenticação. Uma aplicação multi-usuário com login, CRUD completo, diferentes níveis de permissão e integração com Supabase. Testa o limite do que o Bolt.new consegue fazer com backend.
Nível bônus: clone simplificado. Tente recrear uma versão simplificada de um produto que você usa (Trello, Notion, Todoist). É uma forma excelente de entender o que é viável e o que exige ferramentas mais robustas.
Bolt.new no fluxo de trabalho profissional
Na Marfin, o Bolt.new não é nossa ferramenta principal de desenvolvimento (essa é o Cursor AI), mas ele tem um papel específico e valioso no nosso workflow.
Usamos o Bolt.new para criar protótipos rápidos quando um cliente traz uma ideia e precisamos de algo visual em minutos para alinhar a visão. Também para demos interativas de conceitos que queremos apresentar, testes de UI/UX quando queremos experimentar diferentes abordagens de interface rapidamente e projetos internos como ferramentas simples que a equipe precisa.
Quando o protótipo é aprovado e precisa evoluir para produção, exportamos o código e migramos para o Cursor AI, onde temos controle total sobre cada linha. Para projetos que exigem lógica de IA complexa, combinamos com Claude Code no terminal.
Essa abordagem, Bolt.new para prototipagem e validação, Cursor AI para desenvolvimento, é o que nos permite mover rápido sem sacrificar qualidade.
Quando usar Bolt.new vs alternativas
Use Bolt.new quando: precisa de prototipagem ultrarrápida sem setup, quer testar uma ideia em minutos, está construindo um projeto frontend-focused, quer algo rodando no browser sem instalar nada, ou precisa de uma demo rápida para um cliente.
Use Lovable quando: precisa de um MVP full-stack com backend robusto desde o início, quer deploy de produção com domínio customizado, ou está construindo algo que precisa de banco de dados, autenticação e APIs integrados nativamente.
Use Cursor AI quando: precisa de controle total sobre o código, está trabalhando em um projeto existente, tem requisitos de arquitetura específicos, ou precisa de um editor de código profissional com IA.
Não existe ferramenta perfeita para tudo. O segredo é saber qual usar em cada momento. Se quiser entender melhor essas diferenças, nosso comparativo completo detalha cada cenário.
Erros comuns e como evitá-los
Depois de usar o Bolt.new extensivamente, identificamos os erros mais frequentes que travam iniciantes.
Prompts vagos demais. "Faça um app bonito" gera algo genérico. Quanto mais específico o prompt (stack, funcionalidades, estilo visual, público-alvo), melhor o resultado. Invista tempo no prompt inicial, porque ele define a base de tudo que vem depois.
Tentar fazer tudo em um prompt. Projetos complexos devem ser construídos incrementalmente. Comece com a estrutura básica e o layout principal. Depois adicione funcionalidades uma por uma. Isso dá mais controle e facilita o debugging quando algo dá errado.
Ignorar os erros do console. O preview do Bolt.new mostra erros no console do browser. Quando algo não funciona, copie o erro e cole no chat. A IA consegue diagnosticar e corrigir a maioria dos problemas se você fornecer a mensagem de erro exata.
Não exportar o código. Se você está construindo algo que importa, exporte o código regularmente. O Bolt.new permite baixar o projeto completo. Isso serve como backup e permite continuar o desenvolvimento em ferramentas mais robustas como o Cursor AI se necessário.
Esquecer do mobile. A maioria dos apps será acessada em dispositivos móveis. Sempre inclua "responsivo para mobile" no seu prompt e teste o resultado em diferentes tamanhos de tela usando o preview do Bolt.new.
Integrações e ecossistema
O Bolt.new em 2026 não é mais uma ferramenta isolada. Ele se integra com um ecossistema crescente.
Supabase para backend, banco de dados e autenticação. É a integração mais importante para quem quer criar apps com dados persistentes.
Netlify para deploy com um clique. URLs editáveis, HTTPS automático e CDN global.
Figma para importação de designs. Transforme mockups visuais em código funcional.
GitHub para versionamento. Exporte e sincronize seu código com repositórios Git.
npm para pacotes. Instale qualquer biblioteca JavaScript diretamente no browser, sem terminal local.
Essas integrações tornam o Bolt.new viável não apenas para protótipos, mas para projetos que podem evoluir para produção. E quando o projeto cresce além das capacidades da plataforma, a migração para um ambiente de desenvolvimento tradicional é facilitada pela qualidade do código gerado.
Começando
Abra bolt.new, crie sua conta gratuita e construa algo. Não precisa ser perfeito. Pode ser uma landing page, uma calculadora, um formulário. O objetivo é sentir o fluxo de criação com vibe coding.
Se você ficar travado em um prompt, nosso guia de prompt engineering e a lista de 50 prompts para marketing podem te dar inspiração para começar.
O vibe coding está democratizando a criação de software. Ferramentas como Bolt.new tornam possível para qualquer pessoa com uma ideia transformá-la em realidade digital. E isso muda tudo.
Leia também: