Bolt.new Tutorial Completo: Crie Sites

Galera, eu preciso ser direto aqui: o Bolt.new mudou minha forma de prototipar. Antes eu gastava horas configurando projeto, instalando dependências, brigando com Tailwind config. Agora eu descrevo o que quero em português e em 2 minutos tenho um projeto Next.js rodando no navegador. Sem instalar nada na máquina. Esse tutorial é o mais completo que você vai encontrar sobre o Bolt.new. Não vou ficar só no basicão de 'escreva um prompt e pronto'. Vou mostrar os recursos avançados, os erros que todo mundo comete, e como tirar o máximo da ferramenta.

O que é Bolt.new e como funciona

O Bolt.new é um produto da StackBlitz — a mesma empresa por trás do WebContainers, aquela tecnologia que roda Node.js direto no navegador. A sacada do Bolt é combinar esse ambiente de execução com modelos de IA avançados pra gerar código sob demanda. Na prática funciona assim: você abre bolt.new, descreve o que quer em linguagem natural, e a IA gera o projeto completo — estrutura de pastas, componentes, estilização, lógica de negócio. Tudo roda ao vivo no navegador. Você vê a preview do lado direito enquanto o código aparece do lado esquerdo.

A arquitetura por trás

O diferencial técnico do Bolt é que ele não só gera código — ele executa. Graças ao WebContainers, o Node.js roda inteiro no browser. Isso significa que instalar pacotes npm, rodar builds, servir aplicações, tudo acontece ali no navegador sem precisar de um servidor remoto. É por isso que a experiência é tão fluida. O modelo de IA usado muda com o tempo — já passou pelo Claude 3.5 Sonnet, GPT-4o, e hoje usa uma combinação de modelos dependendo da tarefa. Você não precisa se preocupar com isso porque a interface abstrai completamente.

Primeiro projeto passo a passo: Landing Page SaaS em 5 minutos

Vamos parar de teoria e botar a mão na massa. Eu vou criar uma landing page pra um SaaS fictício de gestão financeira chamado FinFlow. Acompanha comigo o processo inteiro, do zero ao deploy.

O prompt que eu usei

Crie uma landing page moderna para um SaaS de gestão financeira chamado "FinFlow".

Seções:
- Hero com headline impactante, subtítulo e 2 CTAs (Começar Grátis / Ver Demo)
- Barra de logos de clientes (5 logos placeholder)
- 3 features principais com ícones (Dashboard, Relatórios, Automação)
- Seção de pricing com 3 planos (Free, Pro, Enterprise)
- Depoimentos (3 cards com foto, nome, cargo e texto)
- FAQ com 5 perguntas (accordion)
- Footer com links e newsletter

Estilo: dark mode, gradiente roxo/azul nos CTAs, fonte Inter
Tecnologia: Next.js + Tailwind CSS
Responsivo e com animações suaves de scroll

Repara que eu fui bem específico. Dei nome pro produto, listei cada seção, defini cores, tipografia e até tecnologias. Quanto mais contexto você dá, menos retrabalho depois. Um prompt vago tipo 'crie um site bonito' vai gerar algo genérico que você vai ter que refazer inteiro. Em 90 segundos o Bolt gerou a landing page completa com todas as seções. O dark mode ficou elegante, os gradientes nos botões estavam corretos, e o layout era responsivo de cara. A estrutura do código era limpa — componentes separados, Tailwind organizado, sem código espaguete.

Tinha uns ajustes necessários: o espaçamento entre seções estava irregular, um dos cards de pricing estava desalinhado, e o accordion do FAQ não tinha animação suave. Pedi tudo isso pelo chat — uma mudança por mensagem — e em 3 iterações ficou pronto. Esse é o segredo: ajustes incrementais. Nunca peça 15 coisas de uma vez.

Recursos avançados que pouca gente usa

A maioria dos tutoriais para por aqui. Mas o Bolt faz muito mais do que landing pages estáticas. Dá pra pedir pro Bolt integrar com qualquer API REST. Eu já criei dashboards que puxam dados da API do GitHub, apps que integram com Stripe pra pagamento, e até um chatbot que conecta na API da OpenAI. Basta descrever a integração no prompt e ele gera as rotas de API, as chamadas fetch, e até o tratamento de erro.

// Exemplo: o Bolt gera rotas API automaticamente
// app/api/github/route.ts
export async function GET() {
  const res = await fetch('https://api.github.com/users/seu-usuario/repos', {
    headers: { Authorization: `token ${process.env.GITHUB_TOKEN}` },
    next: { revalidate: 3600 }
  });
  const repos = await res.json();
  return Response.json(repos);
}

Outro recurso subestimado: banco de dados com Supabase. Você descreve o schema no prompt — 'preciso de uma tabela de usuários com nome, email e plano' — e o Bolt configura a conexão, cria as queries, e monta as telas de CRUD. Já fiz apps completos com autenticação e banco de dados funcionando em menos de 30 minutos. E o deploy? Um clique. O botão de deploy manda direto pra Netlify ou Vercel. Não precisa clonar repo, configurar CI/CD, nada. Um clique e o site está no ar com HTTPS e CDN global.

Bolt.new vs Lovable vs v0: qual escolher

Essa é a pergunta que mais recebo. As três ferramentas são boas, mas têm perfis diferentes. Eu uso as três dependendo do contexto e vou explicar quando cada uma faz sentido pra você não perder tempo testando todas.

E o v0? O v0 da Vercel é diferente dos dois. Ele gera componentes individuais, não projetos inteiros. É ideal quando você já tem um projeto rodando e quer acelerar a criação de interfaces específicas — uma tabela de dados, um formulário complexo, um dashboard. Pra criar do zero, Bolt e Lovable são melhores. Minha recomendação pessoal: Bolt.new pra projetos do zero com backend, Lovable pra MVPs visuais que precisam ficar bonitos rápido, e v0 pra componentes dentro de um projeto existente.

Erros comuns de iniciantes

Eu já vi muita gente desistir do Bolt porque cometeu erros bobos no começo. O erro número 1 é escrever prompts vagos demais. Se você digita 'crie um site pra mim', o resultado vai ser genérico e inútil. Especifique seções, cores, tecnologias, funcionalidades. Trate o prompt como um briefing de projeto — quanto mais detalhado, melhor o resultado.

O segundo erro é mudar tudo de uma vez. Depois que o projeto é gerado, a tentação é mandar um prompt enorme pedindo 15 mudanças simultâneas. Isso confunde a IA e frequentemente quebra coisas que estavam funcionando. Faça ajustes incrementais — uma ou duas mudanças por mensagem. Terceiro erro: não salvar versões. O Bolt tem um sistema de snapshots que muita gente ignora. Se você pediu uma mudança que quebrou o layout, sem snapshot não tem como voltar. Sempre salve uma versão antes de grandes alterações.

Dicas de prompts que ninguém fala

Depois de meses usando o Bolt diariamente, eu desenvolvi algumas técnicas de prompt que fazem diferença no resultado. Coisas que não estão na documentação oficial. Primeira dica: comece pelo layout, não pela funcionalidade. Peça primeiro a estrutura visual, valide que ficou bom, e depois adicione lógica. Tentar fazer tudo de uma vez gera código mais bagunçado e mais difícil de ajustar.

Segunda dica: use referências visuais. Escrever 'estilo semelhante ao site da Linear' ou 'layout parecido com o dashboard do Vercel' dá um norte muito mais claro pra IA do que descrever em palavras abstratas. Terceira: especifique o que NÃO quer. 'Sem carrossel', 'sem sidebar', 'nada de animações pesadas'. Dizer o que não quer evita retrabalho e economiza tokens do plano free.

Quando NÃO usar o Bolt.new

Nem tudo é cenário ideal pro Bolt. Projetos com lógica de negócio muito complexa, sistemas legados, ou apps que precisam de performance extrema — nesses casos, codar na mão ainda é melhor. O Bolt brilha pra prototipagem, MVPs, landing pages, e projetos que precisam ir pro ar rápido. Também não recomendo pra projetos que exigem um stack muito específico. Se você precisa de Elixir, Rust, ou Go no backend, o Bolt não vai ajudar. Ele é focado no ecossistema JavaScript/TypeScript — Next.js, React, Node.js.

O futuro do Bolt.new e das ferramentas de IA

A StackBlitz tá investindo pesado no Bolt. Nos últimos meses eles adicionaram suporte a mais frameworks, melhoraram a qualidade do código gerado, e lançaram features de colaboração em equipe. A tendência é que a ferramenta gere aplicações ainda mais complexas com menos iteração de prompt. Minha aposta pessoal: em 2027, ferramentas como o Bolt vão ser tão comuns quanto o VS Code no workflow diário. Todo dev vai usar alguma variante de IA pra gerar a base dos projetos. Quem aprender agora sai na frente e constrói um diferencial competitivo real no mercado.