Ferramentas Dev
Como clonar um site com Bolt.new passo a passo
Bolt.new virou a ferramenta preferida de devs que querem clonar designs rapidinho sem sair do navegador. Aqui vai o tutorial completo, do screenshot ao deploy.
Bolt.newClonar Sites
Carregando
Bolt.new virou a ferramenta preferida de devs que querem clonar designs rapidinho sem sair do navegador. Aqui vai o tutorial completo, do screenshot ao deploy.
Como clonar um site com Bolt.new passo a passo. Bolt.new virou a ferramenta preferida de devs que querem clonar designs rapidinho sem sair do navegador. Aqui vai o tutorial completo, do screenshot ao deploy.
O Bolt.new chegou e mudou como muita gente trabalha com frontend. Antes de ferramentas assim, clonar um site significava horas olhando código-fonte, ajustando CSS e tentando adivinhar qual font-weight o designer usou. Hoje dá pra fazer isso em minutos, direto no navegador, sem instalar nada.
Neste tutorial você vai ver o processo completo: do screenshot ao clone funcionando. Sem atalhos vagos, sem 'basta usar IA'. Passo a passo real, com os prompts que funcionam e os erros comuns que você vai querer evitar.
Bolt.new é um ambiente de desenvolvimento full-stack que roda direto no navegador. Criado pela StackBlitz, ele usa modelos de linguagem — principalmente Claude da Anthropic — para gerar, editar e rodar código em tempo real. Nada de configurar ambiente local. Você abre, digita o que quer e o código aparece.
A diferença do Bolt pra outros geradores de código é que ele cria um projeto completo com estrutura de arquivos, dependências instaladas e preview ao vivo. Não é só um snippezinho de HTML. É um projeto React ou Next.js rodando de verdade, que você pode exportar e fazer o que quiser com ele.
Guia completo com os três métodos mais eficazes para clonar qualquer site usando inteligência artificial.
A usar o v0.dev da Vercel para clonar designs de sites famosos com IA em minutos.
Você descreve o que quer (via texto ou imagem) e o modelo gera o código completo.
O ambiente executa o código em tempo real e mostra o preview na tela.
Você itera com novos prompts — 'muda a cor', 'adiciona sidebar', 'deixa responsivo' — e o Bolt atualiza o código.
No final exporta como ZIP ou faz deploy direto pelo Netlify.
Para clonar sites, o fluxo funciona assim: você manda uma imagem do design que quer replicar, descreve o que está vendo e pede pro Bolt gerar o HTML/CSS/React correspondente. Quanto melhor o seu prompt, mais fiel fica o resultado. Simples assim.
Vou usar como exemplo a clonagem de uma landing page de SaaS — aquele tipo de página com hero grande, features em grid e CTA no final. É um dos casos mais comuns e serve pra ilustrar bem o processo.
Primeira coisa: capture o site inteiro, não só a parte visível. Ferramentas como GoFullPage (extensão Chrome) ou Screely fazem isso. O screenshot precisa ter boa resolução — pelo menos 1440px de largura — pra o modelo conseguir identificar os detalhes de layout.
Acesse bolt.new, crie um novo projeto e escolha React ou Next.js dependendo do que você quer gerar. Aí clica no ícone de imagem na barra de prompt e faz o upload do screenshot.
O prompt importa muito mais do que as pessoas acham. 'Clone este site' não funciona. Você precisa ser específico. Um prompt que funciona na prática:
'Crie uma landing page React fiel a este design. Use Tailwind CSS. A página tem: (1) navbar fixa com logo à esquerda e 3 links + botão CTA à direita; (2) seção hero com headline grande centralizdo, subtítulo e dois botões; (3) grid de 3 colunas com cards de features; (4) seção de depoimentos com carrossel; (5) footer com links e logo. Cores primárias: #0F172A (fundo), #6366F1 (accent). Fonte: Inter. Deixe responsivo para mobile.'
Repare que o prompt descreve a estrutura seção por seção. Isso guia o modelo e evita que ele invente componentes que não estavam no original.
O primeiro resultado raramente fica perfeito. E tá ótimo assim. O processo de clonagem com Bolt é iterativo por natureza. Você olha o preview, anota o que ficou errado e manda prompts de ajuste.
Depois de muitas sessões clonando sites com Bolt, aprendi alguns atalhos que fazem diferença real no resultado final.
Uma dica que pouca gente usa: abra o DevTools no site original e copie o CSS de elementos específicos. Cole esse CSS no prompt do Bolt como referência. O modelo consegue usar esse input pra gerar algo muito mais próximo do original do que só com a imagem.
Quando o resultado estiver bom, você tem duas opções principais: exportar o código ou fazer deploy direto do Bolt.
O deploy pelo Netlify é ótimo pra compartilhar rapidinho o clone pra um cliente ou colega. Pra projetos que vão virar produto final, prefiro exportar e colocar num repo próprio.
Bolt.new é incrível, mas tem limites que você vai bater cedo ou tarde. Melhor saber antes pra não perder tempo.
Bolt funciona muito bem para páginas estáticas e projetos de até médio porte. Resultado próximo do original em poucas iterações.
Para projetos com muitas páginas e lógica complexa, o Bolt começa a perder o fio da meada depois de muitas iterações.
Se a sessão ficar longa e o Bolt começar a gerar código errado ou contradizendo o que estava certo, a melhor saída é exportar o projeto, abrir num editor local e continuar de lá.
Outra opção é iniciar uma nova sessão no Bolt e fazer upload do código que você já tem, pedindo pra continuar a partir desse ponto.
Projetos com mais de 20-30 arquivos ficam pesados demais pra manter no Bolt. Nesses casos use o Bolt pra prototipar e depois migra pra um ambiente local.
No plano gratuito você tem um número limitado de tokens por dia. Se vai usar bastante, o plano pago vale muito a pena — especialmente se você está usando pra trabalho de cliente. Veja mais opções de <a href='/2025/3-ways-to-perfectly-clone-webs'>3 formas de clonar sites com IA</a> caso queira combinar ferramentas.
O ecossistema de <a href='/melhores-ai-app-builders-2026-criar-apps-sem-codar'>AI builders como Bolt.new</a> está crescendo rápido e cada um tem seu ponto forte. Vale experimentar mais de um antes de decidir qual vai ser sua ferramenta principal.
Bolt.new não vai substituir um dev experiente em projetos complexos. Mas pra clonar landing pages, prototipado rápido e aprendizado de frontend, é difícil achar algo melhor hoje. A curva de aprendizado é curta e o ganho de produtividade é imediato. Tenta.