Tutoriais
Como Clonar um Site com IA em 5 Minutos (Passo
Tira um screenshot, joga numa ferramenta de IA, e o código sai pronto. Aqui vai o passo a passo completo pra clonar qualquer site em menos de 5 minutos.
DevDoido
Carregando
Tira um screenshot, joga numa ferramenta de IA, e o código sai pronto. Aqui vai o passo a passo completo pra clonar qualquer site em menos de 5 minutos.
Como Clonar um Site com IA em 5 Minutos (Passo. Tira um screenshot, joga numa ferramenta de IA, e o código sai pronto. Aqui vai o passo a passo completo pra clonar qualquer site em menos de 5 minutos.
Antes de sair clonando, precisa ter as ferramentas certas. A boa notícia é que você não precisa instalar quase nada. Tudo roda no browser.
Para capturar o design: GoFullPage (extensão Chrome para screenshots de página inteira), ou simplesmente a URL do site que você quer clonar. Para gerar o código: Bolt.new (melhor pra apps completos), v0.dev da Vercel (melhor pra componentes isolados), ou Claude com visão ativada (mais flexível de todos). Para inspecionar o original: Chrome DevTools, que já vem no browser. Para fazer deploy depois: Vercel ou Netlify, ambos com plano grátis que dá pra caramba.
Se você quiser ir além e precisar de um clone mais fiel, dá pra combinar essas ferramentas. Captura com GoFullPage, inspeciona o CSS com DevTools, e usa o screenshot junto com as cores e fontes que você pegou manualmente. O resultado fica muito mais próximo do original.
O primeiro passo é capturar o design do site que você quer clonar. Você tem duas opções principais: passar a URL direto pra ferramenta de IA, ou tirar um screenshot. Cada abordagem tem suas vantagens.
Passar a URL funciona bem quando o site é público e a IA consegue acessar. Bolt.new e algumas versões do v0 aceitam URL direto. O problema é que sites com muito JavaScript dinâmico nem sempre renderizam certinho pela perspectiva da IA. Aí o screenshot salva o jogo.
Para um screenshot de qualidade, instala a extensão GoFullPage no Chrome. Ela captura a página inteira, não só o que tá visível na tela. Acessa o site, rola uma vez pra baixo pra carregar o conteúdo lazy, depois clica na extensão. Em 10 segundos você tem um PNG ou PDF da página toda.
Uma dica que pouca gente usa: o Chrome DevTools tem um modo de screenshot embutido. Abre o DevTools, aperta Ctrl+Shift+P (ou Cmd+Shift+P no Mac), digita 'screenshot' e escolhe 'Capture full size screenshot'. Funciona sem instalar extensão e a qualidade é ótima. Você também consegue fazer screenshot de um elemento específico clicando com botão direito nele dentro do DevTools e escolhendo 'Capture node screenshot'. Útil quando você só quer clonar um componente específico, não a página toda.
Agora vem a parte boa. Com o screenshot em mãos, você vai jogar numa das ferramentas de IA e deixar ela fazer o trabalho pesado. Cada ferramenta tem um jeito um pouco diferente de trabalhar, então vou mostrar as principais.
Bolt.new é minha primeira escolha quando quero clonar uma página inteira. Você entra no site, clica no botão de upload de imagem no chat, sobe o screenshot, e escreve algo como: 'Clone este site. Use React com Tailwind CSS. Mantenha as cores, tipografia e layout o mais fiel possível ao original.' A IA vai gerar um projeto completo com estrutura de arquivos, componentes, e até um servidor de desenvolvimento rodando no próprio browser.
O ponto forte do Bolt é o terminal integrado. Se alguma dependência falhar ou você precisar rodar um script, dá pra fazer tudo ali mesmo sem sair da plataforma. Para landing pages e sites institucionais, o resultado costuma ser 80-90% fiel ao original já na primeira tentativa. Você refina nos próximos prompts.
O v0 brilha mais em componentes isolados do que em páginas completas. Se você quer clonar um hero section, um pricing table, ou um formulário específico, o v0 entrega um resultado limpo e bem estruturado. Você sobe o screenshot (ou descreve o que quer), e ele gera o código em React com shadcn/ui — que é o stack padrão do ecossistema Vercel.
Uma coisa que o v0 faz muito bem é gerar variações. Você pede o clone e ele mostra 3 versões diferentes do componente. Dá pra escolher a que mais gostou e continuar refinando. O output é diretamente integrável em projetos Next.js, o que poupa muito tempo.
Claude Vision é o mais flexível dos três. Você abre o Claude, arrasta o screenshot pro chat, e faz um prompt mais detalhado: 'Analise este design e gere o HTML/CSS correspondente. Use variáveis CSS para cores. A tipografia parece ser Inter. Mantenha as medidas de espaçamento proporcionais.' Claude vai responder com análise detalhada do design e o código correspondente.
O que eu gosto no Claude é que você consegue ter uma conversa sobre o design. Pergunta 'qual é o espaçamento entre esses elementos?' antes de pedir o código. Ele analisa a imagem e responde. Isso ajuda a entender o design antes de implementar, o que resulta num código mais fiel e mais fácil de manter.
Nenhuma IA gera um clone perfeito na primeira tentativa. E tudo bem. O objetivo é ter 70-80% do trabalho feito pela IA e você finaliza os 20-30% restantes. Na maioria dos casos, os ajustes são previsíveis.
Responsividade é a primeira coisa a verificar. Abre o resultado no DevTools no modo mobile (Ctrl+Shift+M) e vê se quebrou alguma coisa. Geralmente o menu mobile não aparece, ou imagens ficam estouradas, ou algum grid vira coluna quando não deveria. Esses ajustes são rápidos de fazer manualmente no código.
Segundo ponto: fontes e ícones. A IA nem sempre acerta a fonte do original. Inspeciona o CSS do site original (DevTools > Elements > Computed > font-family) e substitui no código gerado. Para ícones, o site original provavelmente usa Lucide, Heroicons, ou FontAwesome — troca pelos equivalentes no mesmo pacote.
Terceiro ponto: cores exatas. Use o ColorZilla (extensão Chrome) pra pegar os hex codes exatos do site original e substituir no código gerado. Parece detalhe, mas faz diferença absurda no resultado final. Um azul levemente errado pode destruir a fidelidade visual do clone.
Com o clone pronto, hora de colocar online. Vercel e Netlify têm plano grátis que atende 90% dos casos de uso. O processo é simples: você sobe o código no GitHub e conecta o repositório na plataforma.
Se você gerou o código no Bolt.new, ele já tem um botão de 'Deploy to Vercel' integrado. Um clique e em 2 minutos seu clone está online com URL pública. Perfeito pra mostrar pra um cliente ou adicionar no portfólio.
Para projetos v0, o processo é quase tão simples. Você copia o código gerado pro seu projeto Next.js local, faz o push pro GitHub, e a Vercel detecta automaticamente e faz o deploy. Se o projeto ainda não tem GitHub, você pode usar o 'npx create-next-app' pra criar a estrutura inicial e colar os componentes gerados pelo v0.
Netlify funciona bem pra projetos que não são Next.js — HTML/CSS puro, projetos Vite, React sem SSR. Arrasta a pasta do projeto pra interface do Netlify e pronto. Você também pode configurar deploy automático pelo GitHub igual ao Vercel.
Pra você ter uma ideia do que esperar, aqui vão alguns exemplos do que já vi funcionar bem e o que costuma dar trabalho.
Landing pages de SaaS com hero, features e pricing: esse tipo funciona muito bem com qualquer ferramenta. São layouts relativamente simples com muito texto e poucos elementos interativos. Um screenshot + prompt direto no Bolt gera algo 85% fiel em menos de 2 minutos. O que sobra pra ajustar é geralmente espaçamento e a fonte.
Dashboards com gráficos e tabelas: aqui é mais complicado. A IA gera a estrutura visual bem, mas os dados são sempre mockados. Se você precisa de um dashboard funcional, vai precisar conectar com uma API depois. O clone serve como template visual, não como produto final. Mesmo assim economiza horas de trabalho.
E-commerces com carrinho: a IA clona o visual muito bem, mas a lógica de estado (adicionar ao carrinho, atualizar quantidade, calcular total) precisa ser implementada manualmente. É o tipo de projeto onde o clone economiza o trabalho de layout mas não de lógica de negócio.
Depois de clonar uns 50 sites usando IA, aprendi alguns truques que fazem diferença real no resultado. Primeiro: seja específico no prompt. 'Clone este site' é fraco. 'Clone este site usando React 18 com Tailwind CSS v3, mantendo as proporções de espaçamento, a paleta de cores azul (#1a73e8 como primária), e a fonte Inter. Priorize fidelidade visual acima de tudo' dá resultados muito superiores.
Segundo: divida o clone em partes. Se o site tem header, hero, features, pricing e footer — clone cada seção separadamente, especialmente no v0. O resultado de cada parte fica mais fiel do que tentar clonar tudo de uma vez. Depois você junta os componentes num arquivo só.
Terceiro: use o DevTools pra extrair informações antes de clonar. Abra o Network tab e veja quais fontes o site carrega. Veja o CSS computed pra pegar as cores exatas. Anote o grid system usado (12 colunas? 16?). Com essas informações no prompt, a IA tem muito mais contexto e gera código mais preciso.
Quarto: não descarte o código gerado por ser impreciso. Mesmo um clone de 60% de fidelidade economiza 3-4 horas de trabalho. Você pega a estrutura e refina. Isso é muito mais rápido do que começar do zero.
O bug que derruba sistemas