Carregando
Dá pra clonar praticamente qualquer site usando o Bolt.new em menos de 20 minutos. Esse tutorial mostra o passo a passo completo, do screenshot ao deploy gratuito.
Como Clonar Qualquer Site com Bolt.new — Passo. Dá pra clonar praticamente qualquer site usando o Bolt.new em menos de 20 minutos. Esse tutorial mostra o passo a passo completo, do screenshot ao deploy gratuito.
Galera, clonar um site com IA virou algo tão simples que chega a ser meio assustador. O Bolt.new, da StackBlitz, é uma das melhores ferramentas pra isso. Você joga uma URL ou um screenshot, descreve o que quer, e em poucos minutos tem uma réplica funcional rodando no navegador. Sem instalar nada. Sem configurar ambiente.
Nesse tutorial, vou te mostrar o passo a passo que eu uso pra clonar sites de diferentes tipos -- landing pages, e-commerce, dashboards. Com exemplos reais e os prompts que dão os melhores resultados.
O Bolt.new é um ambiente de desenvolvimento que roda 100% no navegador, alimentado por IA. Ele usa modelos de linguagem avançados pra gerar código a partir de instruções em linguagem natural. Dá pra criar projetos do zero, mas o uso mais interessante, na minha opinião, é a clonagem de sites existentes.
O processo de clonagem funciona assim: você fornece uma referência visual (URL ou screenshot) e um prompt descrevendo o que quer replicar. A IA analisa a estrutura, layout, cores e tipografia, e gera o código correspondente em React, Next.js ou HTML/CSS puro. O resultado aparece em tempo real numa preview ao lado do editor.
A grande sacada do Bolt.new é que você não precisa mexer em código se não quiser. Dá pra iterar pelo chat, pedindo ajustes tipo 'muda a cor do header pra azul escuro' ou 'adiciona um botão de WhatsApp no canto'. Mas se você manja de código, o editor completo tá ali pra edição manual também.
Gera projetos completos com estrutura de pastas, dependências e configuração
Preview em tempo real -- você vê o resultado enquanto a IA gera o código
Iteração por chat -- pede ajustes em linguagem natural sem tocar em código
Deploy integrado pra Vercel e Netlify com um clique
Comparativo de IDEs com IA
Suporta React, Next.js, Vue, Svelte e HTML/CSS puro
Antes de abrir o Bolt.new, você precisa preparar o material de referência. Existem duas abordagens: passar a URL direto no prompt ou tirar um screenshot da página. Na prática, o screenshot costuma dar resultados melhores porque a IA recebe exatamente o que você tá vendo, sem depender de scraping.
Pra tirar o screenshot ideal, abra o site no Chrome, pressione F12 pra abrir o DevTools, clique no ícone de dispositivo móvel pra colocar em modo responsivo, e ajuste a resolução pra 1440x900 (desktop padrão). Depois, Ctrl+Shift+P e digite 'Capture full size screenshot'. Isso gera uma imagem da página inteira, não só do que aparece na tela.
Se o site tem várias páginas que você quer clonar, tire um screenshot de cada uma separadamente. Vai por mim: é melhor fazer uma página por vez do que tentar clonar tudo de uma vez. A IA se perde quando o prompt é muito grande.
O prompt é onde a mágica acontece ou fracassa. Um prompt vago tipo 'clone esse site' vai te dar um resultado genérico. Quanto mais específico, melhor. Vou te dar três prompts que uso pra os tipos mais comuns de site.
Pra landing pages, o segredo é descrever a estrutura seção por seção. Tipo: 'Clone esta landing page. Hero section com gradiente escuro, título grande à esquerda e mockup do produto à direita. Seção de features com 3 cards lado a lado. Seção de depoimentos com carrossel. Pricing table com 3 planos. Footer com links e redes sociais. Use React + Tailwind CSS. Cores: azul (#1a56db) e branco.' Simples assim.
E-commerce tem mais complexidade. Aqui é bom especificar: 'Clone a página principal deste e-commerce. Header com logo, barra de busca, ícone de carrinho e menu de categorias. Banner hero com imagem grande e CTA. Grid de produtos com 4 colunas, cada card com imagem, nome, preço e botão de comprar. Sidebar com filtros (preço, categoria, tamanho). Responsivo. React + Tailwind.' Quanto mais detalhes, menos retrabalho depois.
Dashboards são os mais chatinhos porque têm muitos componentes. Minha dica: clone só a estrutura visual primeiro, sem funcionalidade. 'Clone este dashboard. Sidebar fixa à esquerda com menu vertical e ícones. Header com breadcrumb e avatar do usuário. Área principal com 4 cards de métricas no topo, gráfico de barras abaixo, e tabela de dados paginada. Tema dark. React + Tailwind + Recharts pra gráficos.'
Sempre especifique a stack: React + Tailwind é o combo que dá melhores resultados
Mencione cores em hexadecimal quando possível -- a IA é mais precisa assim
Descreva a estrutura de cima pra baixo, seção por seção
Se o site original usa fontes específicas, mencione no prompt (ex: Inter, Poppins)
Peça responsivo logo no primeiro prompt -- adicionar depois dá mais trabalho
O primeiro resultado do Bolt.new nunca vai ser perfeito. Espere algo entre 70% e 90% de fidelidade visual. A parte boa é que os ajustes são rápidos porque dá pra fazer pelo chat mesmo.
Começa pelos ajustes visuais maiores: layout, proporções e espaçamentos. Se o hero section tá com a imagem do lado errado, pede pra inverter. Se os cards estão em 3 colunas e deviam ser 4, é só falar. Depois parte pros detalhes: cores exatas, tamanho de fonte, border-radius dos botões.
Um erro comum é tentar corrigir tudo pelo chat. Se você precisa trocar um texto específico ou ajustar 2px de padding, é mais rápido editar direto no código. O editor do Bolt.new é funcional, destaca sintaxe e tem autocomplete. Pra mudanças estruturais, usa o chat. Pra ajustes finos, mexe no código.
Com o clone pronto, o deploy é a parte mais fácil. O Bolt.new tem integração direta com a Vercel. Clica no botão de deploy, conecta sua conta, e em menos de 2 minutos o site tá no ar com uma URL pública. Zero configuração.
Se preferir, dá pra exportar o projeto pro GitHub e fazer deploy por lá. Eu recomendo essa abordagem se você pretende continuar editando o projeto no VS Code ou Cursor depois. O processo é: exporta pro GitHub pelo Bolt, conecta o repositório na Vercel, e qualquer push futuro atualiza o site automaticamente.
O plano gratuito da Vercel é generoso pra projetos pessoais: 100GB de banda por mês, domínio .vercel.app com HTTPS incluso, e deploys ilimitados. Só precisa de domínio próprio se quiser um endereço mais profissional.
Vercel: melhor pra projetos React/Next.js, deploy direto do Bolt.new
Netlify: alternativa sólida, também tem plano free generoso
GitHub Pages: funciona pra sites estáticos (HTML/CSS/JS puro)
Railway: opção se o projeto precisa de backend
Pra deixar isso mais concreto, aqui vão três exemplos reais de sites que clonei usando exatamente o processo que descrevi acima.
Peguei uma landing page de um SaaS de produtividade e clonei em 15 minutos. O primeiro resultado veio com 80% de fidelidade visual. Precisei de 3 iterações no chat pra ajustar cores, espaçamentos e trocar as imagens placeholder. O resultado final ficou praticamente idêntico ao original. A parte mais difícil foi replicar um gradiente diagonal no hero -- tive que dar o CSS exato no prompt.
Portfólios minimalistas são os mais fáceis de clonar. Grid de imagens, tipografia clean, poucas cores. Esse saiu em 8 minutos com quase nenhuma iteração. O único ajuste foi no hover dos cards de projeto -- pedi um efeito de scale com overlay escuro que ficou perfeito de primeira.
Esse foi o mais trabalhoso. Dashboards têm muitos componentes: sidebar, cards de métricas, gráficos, tabelas. Levei 25 minutos e umas 7 iterações. Os gráficos do Recharts precisaram de ajuste manual no código porque a IA não acertou as cores exatas das barras. Mas a estrutura geral veio bem no primeiro prompt.
Na real, quase qualquer um. Mas existem limitações. Sites com muita interatividade (animações complexas, scroll-triggered effects, WebGL) vão sair mais simples no clone. A IA replica a estrutura visual, não a lógica de interação avançada.
Se você pedir no prompt, sim. O Bolt.new com Tailwind CSS gera código responsivo por padrão quando você menciona. Mas sempre teste no mobile depois -- às vezes o layout quebra em telas muito pequenas e precisa de um ajuste ou outro.
Não. Dá pra fazer tudo pelo chat, sem tocar em código. Mas saber o básico de HTML/CSS ajuda muito nos ajustes finos. Se você sabe o que é padding, margin e flex, já consegue editar direto no código e acelerar o processo.
Clonar a estrutura visual e o layout de um site é geralmente aceito. O que não pode é copiar conteúdo (textos, imagens, logos) protegido por direitos autorais. Na prática, a maioria das pessoas clona a estrutura e troca todo o conteúdo pelo seu. Isso é a mesma coisa que comprar um template -- você usa a estrutura e personaliza.