Carregando
O clone ficou lindo no desktop e quebrou no celular? Isso acontece com quase todo mundo. Aqui tem o passo a passo pra clonar sites que funcionam de
Como Clonar Sites Responsivos: Mobile-First. O clone ficou lindo no desktop e quebrou no celular? Isso acontece com quase todo mundo. Aqui tem o passo a passo pra clonar sites que funcionam de verdade em qualquer tela.
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.
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.
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.