Como Clonar Qualquer Site com Bolt.new — Passo

O que é o Bolt.new e como ele clona sites

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.

Passo 1 — Preparando a URL e o screenshot

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.

Passo 2 — Prompt ideal pra clonagem (landing page, e-commerce, dashboard)

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.

Prompt pra clonar landing page

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.

Prompt pra clonar e-commerce

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.

Prompt pra clonar dashboard

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.'

Passo 3 — Editando o resultado (layout, cores/fontes, funcionalidades)

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.

Passo 4 — Deploy gratuito

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.

Exemplos de clones que fiz

Pra deixar isso mais concreto, aqui vão três exemplos reais de sites que clonei usando exatamente o processo que descrevi acima.

Clone de landing page SaaS

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.

Clone de portfólio de designer

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.

Clone de dashboard de analytics

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.

Dá pra clonar qualquer site?

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.

O clone fica responsivo?

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.

Precisa saber programar pra usar o Bolt.new?

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.

É legal clonar sites?

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.