Diseña landing pages con IA: el proceso real para que no sean solo bonitas

Un proceso real, con fallos incluidos, para diseñar landing pages con IA sin quedarte en una página bonita que no vende.

Infoproductos · 14 min de lectura · 2078 palabras

01

Por qué una landing "bonita" hecha con IA no vende

Si le pides a cualquier IA que diseñe landing pages con IA sin darle antes contexto, el resultado casi siempre es el mismo: una página vistosa, rápida de generar, pero genérica. Lo comprobé grabando en directo cómo rediseñaba una landing real de captación de Agencia Riders, y el primer aviso que me hice a mí mismo fue justo ese: pedir "hazme una página bonita" no es una estrategia, es un atajo que sale caro.

Una landing bonita no es lo mismo que una landing que vende. Puede tener una tipografía cuidada, colores coherentes y hasta una foto decente, y aun así no cumplir su función: captar la atención en los primeros segundos, comunicar una promesa concreta, generar confianza, resolver la objeción principal del visitante y llevarlo a una acción clara. Si cualquiera de esas piezas falta, el diseño no importa demasiado, por mucho presupuesto o por mucha IA que hayas metido de por medio.

El error más frecuente que veo (y que cometí yo mismo al principio de la grabación) es saltarse la estrategia y pasar directo a la herramienta de diseño. La IA genera rápido, pero genera lo que le pides, y si lo que le pides es vago, el resultado también lo será: microtextos genéricos, secciones sin propósito y un mensaje que podría pertenecer a cualquier marca.

Sin estrategia previa, hasta la mejor IA improvisa.

Antes de abrir cualquier herramienta, conviene revisar también qué mirar en una landing antes de culpar al tráfico, porque a veces el problema no es el diseño sino la falta de esa capa previa.

Esto no significa que la IA no sirva para diseñar landing pages. Significa que la IA acelera la ejecución de una decisión que ya has tomado tú antes, no la decisión en sí. Ese matiz es el que separa una landing que parece profesional de una que además funciona.

02

Paso 1: define la estrategia antes de generar nada (el PRD con IA conversacional)

El primer paso real no es abrir una herramienta de diseño, es sentarte con un asistente conversacional (yo usé ChatGPT) y pedirle que analice la landing que quieres mejorar. Le compartí el enlace de la página original, que era un registro para acceder a un caso de estudio en vídeo, y le pedí que la estudiara y me devolviera un PRD: un documento de requisitos donde queden recogidos el objetivo, el público, el problema que resuelve la página y el mensaje que tiene que transmitir.

Ese documento no tiene que ser perfecto ni definitivo. En mi caso fue bastante extenso: avatar, funnel, posicionamiento, problemas de la página actual, objetivos, público objetivo y hasta una primera propuesta de mensaje. No hace falta leerlo entero palabra por palabra ni corregir cada matiz, pero sí usarlo como base para el siguiente prompt, el que de verdad va a dirigir el diseño.

Con ese PRD en la mano, el segundo prompt ya es mucho más concreto: qué agencia eres, qué objetivo tiene la página (en mi caso, conseguir un email a cambio de un vídeo de nueve minutos), qué estructura quieres (hero, tres puntos clave, formulario, apartado sobre ti) y qué dirección visual debe seguir. Cuanto más específico seas en este punto, menos genérico será el resultado que te devuelva Open Design, la herramienta de diseño con IA que uso en el paso siguiente.

Esta secuencia (analizar antes de pedir, pedir un documento antes de pedir un diseño) es la diferencia real entre una landing pensada y una landing improvisada, aunque las dos se hayan generado con IA en cuestión de minutos.

Este orden (primero entender, después pedir) es el que marca la diferencia frente a ir directamente a una herramienta de diseño con una frase suelta. El PRD no es un trámite burocrático, es la parte del trabajo que normalmente hace un estratega antes de que un diseñador toque nada, solo que aquí lo resuelves en minutos con una conversación bien dirigida.

03

Paso 2: construye tu referencia visual antes de tocar cualquier herramienta

Con la estrategia clara, el siguiente paso no es generar el diseño todavía: es buscar referencia visual real. Fui a Pinterest y busqué landings de captación con una estructura parecida a la que quería (promesa, formulario, foto, tres puntos clave y una sección sobre mí), no páginas bonitas al azar.

La diferencia importa.

Buscar por estructura te da referencias que puedes replicar; buscar solo por estética te da inspiración que luego no sabes cómo convertir en secciones concretas.

Una vez tienes dos o tres referencias que te convencen a nivel de estructura y otras a nivel de estilo visual, el siguiente artefacto útil es un documento de marca, un design.md. Es un archivo de texto plano donde documentas tipografía, espaciado, paleta de color y el razonamiento detrás de cada decisión, igual que un README pero para el sistema visual de tu marca. Puedes partir de cero o inspirarte en el de marcas que ya lo tienen público, adaptándolo siempre a tu propia identidad.

Ese documento cumple una función muy concreta cuando trabajas con IA: es el contexto que evita que la herramienta invente un branding genérico.

Sin él, cada vez que generas una landing nueva empiezas de cero a nivel visual; con él, la IA parte de reglas de marca reales en lugar de inventarse una paleta de colores porque sí.

No hace falta que ese documento de marca sea perfecto desde el primer día. Puedes empezar con lo básico (colores principales, tipografía de titulares y de cuerpo, tono de las imágenes) e ir ampliándolo cada vez que tomes una decisión de diseño que quieras que se repita en el futuro. Lo importante es que exista en algún sitio como texto, no solo en tu cabeza.

04

Paso 3: genera el primer borrador con Open Design, la alternativa open source

Con el PRD, el prompt de diseño y la referencia visual listos, llega el momento de generar. Aquí la diferencia importante es usar una herramienta pensada específicamente para diseño (con plantillas, criterio visual propio y flujo de iteración) en lugar de un chat genérico al que simplemente le pides "hazme una web". En el vídeo usé Open Design, la alternativa de código abierto a Claude Design, la herramienta de pago de Anthropic de la que nace: te deja conectar el modelo de IA que quieras en vez de depender de un único proveedor cerrado.

Eso es justo lo que la hace interesante si el presupuesto es ajustado. Open Design habla por debajo con Open Code, y ahí puedes enchufar modelos gratuitos o de muy bajo coste, como DeepSeek V4 Flash en su versión free con cuota diaria, en lugar de pagar una suscripción completa solo para probar el proceso. No es la opción más rápida ni la de mejor calidad de salida, pero sirve perfectamente para validar el flujo antes de invertir en una herramienta de pago.

Antes incluso de tocar el diseño, Open Code decidió por su cuenta escribir un Brand Spec: un documento con la paleta (Dark Premium sobre un Dark Navy Canvas, con un azul eléctrico como acento), los tokens de color y la pareja de fuentes para títulos y cuerpo. No se lo pedí explícitamente, lo dedujo del PRD.

Es la prueba más clara de que un buen PRD no solo mejora el resultado final: también cambia lo que la IA decide hacer antes de generar nada.

El primer resultado, aun con todo el contexto previo bien preparado, no va a ser la versión final. En mi caso salió una primera landing con la promesa, el formulario, las tres cajas de beneficios y la foto en su sitio, pero con microtextos claramente genéricos y decisiones que no tenían mucho sentido (como un vídeo incrustado sin ninguna función). Es un punto de partida razonable, no el resultado que vas a publicar.

El objetivo de este paso no es la perfección, es tener algo tangible sobre lo que empezar a dar feedback concreto. Publicar el primer prompt sin iterar es tan mala idea en el diseño de una landing como en unas creatividades y segmentación de campañas en Meta Ads: la primera versión rara vez es la que convierte.

05

Paso 4: itera con feedback real hasta que la landing sea usable

Aquí es donde de verdad se nota la diferencia entre un resultado mediocre y uno usable. Después del primer borrador, le fui dando feedback concreto: que el hero cargara sin necesidad de hacer scroll en mobile, que bajara la intensidad del fondo oscuro, que quitara el vídeo incrustado, que añadiera una foto real mía en lugar de un icono genérico. Cada instrucción específica movió el resultado un paso más cerca de algo publicable; las instrucciones vagas del estilo "mejóralo" no movieron nada.

También puedes editar directamente sobre el diseño cuando el chat no acierta a la primera, marcando el elemento concreto y ajustándolo a mano, sin depender de que la IA entienda perfectamente una instrucción en texto. Es más lento que pedirlo por chat, pero mucho más preciso cuando el detalle es pequeño (un tamaño de fuente, un margen, un color puntual).

Y conviene estar preparado para que algo falle a mitad de proceso. En mi caso, DeepSeek V4 Flash agotó la cuota diaria de Open Code justo cuando ya llevaba varias rondas de feedback dadas: la llamada al modelo empezó a fallar y el mensaje fue directo, cuota agotada. Probé a cambiar a otro proveedor gratuito, Mimo, para seguir con el mismo contexto sin perder el trabajo hecho.

Si vas a depender de modelos gratuitos o de cuota limitada, ten siempre un plan B al que cambiar sin reiniciar el proceso.

Ninguno de estos contratiempos es motivo para abandonar a mitad de camino: son parte normal de trabajar con modelos gratuitos o de cuota limitada.

06

Errores frecuentes al diseñar landing pages con IA

El primero, y el que más veo repetirse, es aceptar el primer resultado como si fuera el definitivo. Una IA de diseño te da un punto de partida decente en minutos, pero publicar esa primera versión sin iterar es publicar algo a medias: microtextos genéricos, secciones que sobran y un mensaje que no está afinado a tu marca ni a tu oferta real.

El segundo es no revisar la versión mobile antes de dar por bueno el diseño. En mi caso, la primera versión se veía razonablemente bien en escritorio pero necesitaba scroll para ver el mensaje principal en mobile, que es precisamente donde llega la mayoría del tráfico de muchas campañas. Revisar el mobile no es un detalle final, tiene que ser parte del propio ciclo de iteración.

El tercero son los microtextos y frases que delatan que "lo ha hecho una IA": textos de relleno arriba del todo, títulos genéricos, ese tono ligeramente artificial que se nota incluso sin saber por qué. Cada uno de esos detalles hay que pedirlos concretamente que se corrijan, porque la IA no los va a detectar sola.

Y el cuarto, el más caro de arreglar después, es tratar la landing como una pieza aislada en lugar de como parte de un embudo. Puedes tener el mejor diseño del mundo y seguir sin vender si el tráfico que llega no está segmentado, si la oferta no está clara o si no hay una secuencia detrás que acompañe al visitante que todavía no está listo para convertir.

07

La landing es una pieza, no el sistema completo

Todo el proceso que he descrito (PRD, referencia visual, primer borrador, iteración) resuelve el diseño. No resuelve el negocio. Una landing, por bien diseñada que esté, no arregla una oferta débil, un mensaje confuso o un tráfico que llega sin ningún tipo de segmentación previa. Lo que de verdad convierte es el sistema completo: investigación del cliente, oferta clara, copy que conecta, la propia landing, medición y optimización continua detrás.

Esa distinción es la que más me interesa que se quede del proceso: el diseño resuelve la primera impresión, pero la venta la resuelve el sistema completo que hay detrás de esa primera impresión. Confundir ambas cosas es lo que lleva a rediseñar una landing una y otra vez, sin que la tasa de conversión se mueva.

Antes de escalar cualquier campaña sobre una landing recién diseñada, merece la pena preparar tus landing pages antes de escalar campañas con IA, porque un diseño mejor sobre una medición rota sigue sin darte datos fiables para decidir nada.

Si ya has pasado por este proceso, has iterado con feedback específico y la landing sigue sin vender, el problema probablemente ya no es de diseño. En ese punto tiene sentido revisar la estrategia completa detrás: la oferta, el mensaje, la segmentación del tráfico y la secuencia de comunicación. Es exactamente el tipo de trabajo que hacemos en Agencia Riders, como agencia de lanzamientos especializada en construir embudos de venta completos para formadores e infoproductores, no solo la pieza visual de arriba.

Escrito por

Equipo Digital Riders

Especialistas en lanzamientos digitales e infoproductos

Digital Riders es la referencia en lanzamientos digitales, infoproductos y embudos de venta para creadores y formadores hispanohablantes. Agencia Riders es nuestra agencia especializada.

digitalriders.com