Antes e depois: como transformamos nossa landing page de ferramenta em marca
Um antes e depois seção por seção do nosso redesign: uma cor de destaque, voz serifada, respiro, prova real e um workflow que você pode copiar.
Uma página que funciona e uma página que as pessoas lembram não são a mesma coisa.
Nossa landing antiga explicava o produto e convertia, mas parecia uma ferramenta. Então reconstruímos a linguagem visual inteira.
O ponto de partida
A primeira versão tinha hero esverdeado, título sans em negrito e blocos cinza separando quase tudo. A informação estava ali. A identidade não.
Uma cor e uma voz
Trocamos o verde espalhado por um índigo disciplinado, #4f66d8, usado só onde precisa chamar atenção.
Também colocamos Libre Baskerville nos títulos e Inter no corpo. O hero ganhou duas batidas:
Clone any website from a URL. Yours to edit and export.
Respiro e prova
Os blocos cinza viraram uma tela branca editorial, com uma única faixa escura para a afirmação técnica mais forte. Em vez de dizer que o clone é editável, mostramos um navegador com clones reais e controle de rebranding.
Sistema, não página
A parte mais importante não aparece em um screenshot: cor, tipo, espaçamento, faixa escura e glow viraram tokens e componentes compartilhados. Por isso pricing, galeria, FAQ e footer se sentem parte da mesma marca.
Workflow para copiar
- Encontre um site cuja linguagem visual você admira; a galeria tem clones reais para estudar.
- Clone com Clonesite para obter código editável.
- Leia as decisões: destaque, tipografia, contraste, respiro.
- Aplique essas decisões ao seu conteúdo.
- Troque todo logo, imagem, claim e linha de copy.
- Exporte e publique.
O clone tira você da página em branco. As decisões transformam isso em marca.
FAQ
Como redesenhar minha landing page?+
Trabalhe seção por seção: uma cor de destaque, fonte display, mais respiro, prova real e tokens. Assim o redesign continua publicável.
O que torna uma landing memorável?+
Um sistema visual consistente: destaque claro, voz tipográfica, espaço intencional e prova real.
Redesenhar ou reconstruir?+
Reconstruir a partir de um clone costuma ser mais rápido. O clone dá estrutura editável; sua energia vai para a camada de marca.
Guias relacionados
Clonagem de URL vs captura de tela para código: o que muda de fato na saídaA clonagem de URL lê a estrutura real de uma página ativa — DOM, CSS, fontes, links e breakpoints responsivos — e a reconstrói como código editável. A captura de tela para código só enxerga pixels, então infere o layout e perde fontes, links e responsividade. A diferença aparece direto na utilidade da saída.
Melhores clonadores de sites com IA em 2026O melhor clonador de sites com IA é aquele cuja entrada e saída combinam com a sua tarefa — URL para código quando você quer reaproveitar um layout real, captura de tela para código quando só tem um mockup estático, e prompt para site quando vai criar do zero. Compare por tipo de entrada, editabilidade e qualidade de exportação antes de escolher.
Como clonar um site com Claude Code (2026): o pipeline real e onde ele falhaGuia para builders sobre clonar site com Claude Code: pipeline agentic em cinco fases, medição no navegador, reconstrução em React e Tailwind editável, setup necessário, casos que quebram sem supervisão e quando usar um clonador hospedado.