Antes y después: rediseñamos nuestra landing de herramienta a marca
Un antes y después sección por sección de nuestro propio rediseño: un color de acento, voz serif, espacio en blanco, prueba real y un workflow que puedes copiar.
Una página que funciona y una página que la gente recuerda no son lo mismo.
Nuestra landing anterior explicaba el producto, mostraba pasos y convertía. Pero parecía una herramienta, y las herramientas se olvidan fácil. Por eso reconstruimos todo el lenguaje visual de arriba abajo.
Punto de partida: claro, pero demasiado utilitario
La primera versión usaba un estilo Paper and Evergreen: hero verde, titular sans en negrita y secciones separadas por bloques grises. La información estaba ahí. Lo que faltaba era identidad.
Antes: todo estaba en la página, pero nada tenía una voz propia.
Un acento, no una paleta
Antes: un verde que funcionaba como acento y como ambiente.
Después: un índigo disciplinado, #4f66d8, usado solo dónde merece atención: titular, links, botón principal y foco.
Un acento contenido se siente intencional. Una página que colorea todo se siente como un tema descargado.
Una voz serif
Antes: una sans bold para todo.
Después: titulares Libre Baskerville sobre cuerpo Inter.
La serif permitió dividir el hero en dos ideas:
Clone any website from a URL. Yours to edit and export.
La primera línea dice que ocurre. La segunda dice por qué importa: propiedad.
Espacio en blanco y prueba real
Antes: bandas grises alternadas hasta el final.
Después: un lienzo blanco editorial y una sola banda oscura para la afirmación técnica más importante.
También cambiamos badges por prueba visual: un frame de navegador con clones reales y una señal de rebranding. Código editable es abstracto; una preview lo vuelve visible.
Convertir una página en sistema
El cambio más importante no se ve en una sola captura. Movimos el look a tokens: escala de color, tipo, spacing y helpers para la banda oscura. Así pricing, galería, FAQ y footer heredan la misma identidad.
Después: el hero Indigo Serif, construido desde tokens compartidos.
El workflow que puedes copiar
- Encuentra un sitio cuyo lenguaje visual admires; la galería tiene clones reales para estudiar.
- Clónalo con Clonesite para obtener código editable, no una captura.
- Lee sus decisiones: acento, tipografía, contraste y espacio.
- Aplica esas decisiones a tu propio contenido.
- Reemplaza cada asset de marca, logo, imagen, claim y línea de copy.
- Exporta y publica.
El clon te saca del lienzo en blanco. Las decisiones son lo que hacen que la página se sienta como marca.
FAQ
¿Cómo rediseñar mi landing page?+
Trabaja sección por sección: elige un acento, una tipografía display, agrega espacio en blanco, sustituye prueba prestada por prueba real y convierte las decisiones en tokens.
¿Qué hace memorable una landing?+
Un sistema visual consistente: acento claro, voz tipográfica, espacio intencional y prueba real.
¿Conviene rediseñar o reconstruir?+
Reconstruir desde un clon suele ser más rápido. El clon da estructura editable y te deja concentrarte en la capa de marca.
Guías relacionadas
Clonación de URL vs captura de pantalla a código: qué cambia de verdad en el resultadoLa clonación de URL lee la estructura real de una página en vivo (DOM, CSS, fuentes, enlaces y breakpoints responsive) y la reconstruye como código editable. La captura de pantalla a código solo ve píxeles, así que infiere el layout y pierde fuentes, enlaces y responsividad. La diferencia se nota directamente en lo utilizable que es el resultado.
Los mejores clonadores de sitios web con IA en 2026El mejor clonador de sitios web es aquel cuya entrada y salida encajan con tu tarea: de URL a código para reutilizar un layout real, de captura de pantalla a código para un mockup estático y de prompt a sitio para construir desde cero. Compáralos por tipo de entrada, editabilidad y calidad de exportación antes de elegir.
Cómo clonar un sitio web con Claude Code (2026): el pipeline real y dónde se rompeGuía para builders sobre clonar un sitio con Claude Code: el pipeline agéntico de cinco fases que mide una página viva y la reconstruye como React y Tailwind editable, el setup necesario, los casos que fallan sin supervisión y cuándo conviene usar un cloner alojado.