Como Clonar Sites Responsivos: Mobile-First

Por que clones quebram no mobile

Galera, vou ser direto: a maioria dos clones feitos com IA tem um problema grave de responsividade. Você joga o screenshot, a ferramenta gera um resultado lindo no monitor, e quando abre no celular... é caos. Texto cortado, botões sobrepostos, imagens que vazam da tela.

Isso acontece porque ferramentas como Bolt, Lovable e V0 olham o screenshot que você mandou — que quase sempre é do desktop — e geram código otimizado pra aquela largura. Elas usam valores fixos em pixels, flexbox sem wrap, e grids que assumem telas largas. É como tirar foto de uma casa e pedir pra alguém construir — sem mostrar a planta.

O CSS gerado por IA tende a ser desktop-first. Ou seja, o layout base é pra telas grandes e depois (se tiver sorte) vem um media query de correção pra mobile. O problema é que essas correções quase nunca cobrem tudo. Um grid de 3 colunas vira coluna única, mas o padding não ajusta, o font-size fica enorme, e o menu hambúrguer nem existe.

Outro ponto que ninguém menciona: quando você manda um screenshot pro V0 ou Lovable, eles não capturam o comportamento responsivo do site original. Eles só veem uma foto estática. Não sabem que aquele menu vira drawer no mobile, que a hero section empilha verticalmente, ou que o grid muda de 4 pra 2 colunas. Você precisa dizer isso explicitamente.

Estrategia mobile-first para clones com IA

A sacada é simples mas pouca gente faz: mande dois screenshots. Um do desktop e um do mobile. Isso muda completamente o resultado que a IA gera. Quando ela tem as duas referências, o código já sai com breakpoints coerentes.

Dá pra ir além disso. Em vez de mandar só screenshots, inclua no prompt instruções específicas sobre o comportamento responsivo. Algo como: 'No mobile, o menu lateral vira hamburger com drawer. O grid de produtos muda de 3 pra 1 coluna. O hero empilha texto acima da imagem.' Quanto mais contexto, melhor o resultado.

A abordagem mobile-first funciona assim: você pede pra IA gerar primeiro o layout mobile, depois expande pra desktop com media queries. Isso inverte a lógica padrão e garante que a base do CSS funciona em telas pequenas. O Tailwind facilita muito isso porque os prefixos sm:, md: e lg: já seguem essa lógica.

Tutorial: clonando com V0 usando mobile-first

Vou mostrar o passo a passo usando o V0 porque ele gera componentes React com Tailwind — que já é mobile-first por natureza. Mas a mesma lógica se aplica pro Bolt e Lovable.

Um detalhe que faz diferença: quando o V0 gera o componente, ele costuma usar shadcn/ui que já tem responsividade razoável. Mas 'razoável' não é 'perfeito'. Os componentes Sheet e Drawer do shadcn são ótimos pro menu mobile — peça especificamente pra IA usá-los em vez de tentar criar menu custom.

Testando responsividade do clone

Depois que o clone tá pronto, você precisa testar de verdade. Não adianta só redimensionar a janela do browser e achar que tá tudo certo. Tem coisa que só aparece em device real — scroll horizontal escondido, texto que não quebra direito, imagem que carrega em tamanho errado.

Dá pra automatizar parte disso. O Lighthouse do Chrome roda auditoria de acessibilidade e performance mobile. Pega nota abaixo de 90 em mobile? Tem coisa pra ajustar. O PageSpeed Insights do Google também testa com conexão 3G simulada — isso mostra se as imagens estão pesadas demais pro mobile.

Uma ferramenta pouco conhecida mas muito boa: o Responsively App. É open source e mostra seu site em múltiplos dispositivos ao mesmo tempo, com scroll sincronizado. Você vê iPhone, iPad e desktop lado a lado enquanto faz ajustes. Economiza muito tempo comparado com ficar alternando no DevTools.

CSS customizado: o que a IA erra e como corrigir

Mesmo com o melhor prompt do mundo, a IA vai errar em alguns pontos de responsividade. Os erros são previsíveis e a correção é rápida quando você sabe o que procurar.

Erro número 1: larguras fixas. A IA adora usar w-[600px] ou max-w-[1200px] porque esses valores existiam no site original. O problema é que em telas de 375px isso vaza. A correção é simples — troque por classes relativas como w-full max-w-6xl mx-auto. Simples assim.

/* ERRADO - o que a IA gera */
.container {
  width: 1200px;
  margin: 0 auto;
}
.grid {
  display: grid;
  grid-template-columns: repeat(3, 400px);
}

/* CERTO - mobile-first corrigido */
.container {
  width: 100%;
  max-width: 75rem; /* 1200px */
  margin: 0 auto;
  padding: 0 1rem;
}
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 640px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

Erro número 2: font-sizes absurdos. A IA copia o font-size do desktop (tipo 64px no hero) e não reduz pro mobile. No Tailwind, a correção é direta: text-3xl md:text-5xl lg:text-7xl. Sempre defina o tamanho mobile primeiro, depois aumente nos breakpoints maiores.

Erro número 3: imagens sem aspect-ratio. A IA coloca a imagem com width e height fixos, e no mobile ela distorce ou vaza. Use a classe aspect-video ou aspect-square do Tailwind junto com object-cover. Isso garante que a imagem se adapta ao container mantendo proporção.

<!-- ERRADO -->
<img src="hero.jpg" width="1200" height="600" />

<!-- CERTO -->
<img 
  src="hero.jpg" 
  class="w-full aspect-video object-cover rounded-lg"
  alt="Descrição da imagem"
  loading="lazy"
/>

Erro número 4: espaçamentos que não escalam. Padding de py-24 no desktop fica gigante no mobile. Use py-8 md:py-16 lg:py-24. Mesma lógica pra gap, margin e qualquer espaçamento. A regra de ouro: se o valor é maior que 8 (2rem), ele provavelmente precisa de versão mobile menor.

Depois de aplicar essas correções nos pontos mais comuns, seu clone vai funcionar em 95% dos dispositivos. Os 5% restantes são edge cases tipo notch do iPhone, teclado virtual em Android, e landscape mode — que você resolve conforme aparece no teste com dispositivo real.

Próximos passos

Clonar sites responsivos com IA é totalmente viável em 2026. A chave é entender que a IA gera o esqueleto, mas os detalhes de responsividade precisam da sua atenção. Com o workflow certo — screenshots mobile + desktop, prompt detalhado, e checklist de revisão — dá pra entregar clones que funcionam perfeitamente em qualquer dispositivo.

O segredo de verdade? Pratique com sites simples primeiro. Clona uma landing page de uma página só, acerta o responsivo, depois parte pra layouts mais complexos. Cada clone que você faz calibra melhor a sua capacidade de dar prompts precisos e identificar o que a IA vai errar antes dela errar.