Crear páginas de destino que venden – Guía paso a paso

Introducción

¿Alguna vez deseaste poder diseñar secciones bonitas y responsivas para páginas de destino —sin escribir una sola línea de código? Con el Plugin Selldone en ChatGPT ese sueño se hace realidad.

En esta guía aprenderás paso a paso cómo pasar de una imagen de inspiración a una sección en vivo y totalmente responsiva dentro del Page Builder de Selldone —todo impulsado por IA.

Al final tendrás una sección con diseño profesional lista para publicar en tu sitio Selldone.

💡 Nota: El Page Builder de Selldone está construido sobre Vuetify (Vue 3) — así que cada sección generada por el plugin es totalmente compatible con el moderno y responsivo framework de front-end de Selldone.

Paso 1 – Prepara tu inspiración

Para comenzar, busca un diseño de sección que te inspire. En este tutorial usamos una sección tomada como referencia de la página principal de Mercado Libre — un diseño limpio y moderno que muestra productos destacados con imágenes potentes y llamadas a la acción claras.

Toma una captura de pantalla de esa sección de Mercado Libre; la usaremos como referencia visual en ChatGPT al generar nuestro diseño personalizado con el Plugin Selldone.

💡 Consejo: Elige una sección con una composición estructurada y visualmente equilibrada. Cuanto más claro sea el diseño, mejor podrá analizarlo y reproducirlo ChatGPT.

⚠️ Aviso de uso legítimo: La captura de pantalla de Mercado Libre mostrada aquí se utiliza con fines educativos e ilustrativos como inspiración de diseño. Todas las marcas, imágenes y diseños pertenecen a Mercado Libre S.R.L. — este tutorial no está afiliado ni es aprobado por Mercado Libre.

Paso 2 – Abre ChatGPT con el Plugin Selldone

Asegúrate de tener el Plugin Selldone habilitado en ChatGPT:

1. Ve a ChatGPT → Settings → Beta Features → Plugins y activa los plugins.
2. Visita la Tienda de Plugins e instala el Plugin Selldone.
3. Inicia un chat nuevo con el plugin activo.

Deberías ver el logo de Selldone junto a tu caja de chat — eso significa que está listo para usar.

Paso 3 – Sube tu diseño de referencia

Sube tu captura de pantalla y escribe un prompt claro, por ejemplo:

Desde el menú superior, asegúrate de usar la versión más reciente de ChatGPT.

“Quiero crear una sección como la de esta imagen, con tamaños de fuente responsivos, tipografías y colores de tarjeta personalizables, y tarjetas que puedan ser circulares o cuadrados con bordes redondeados.”

ChatGPT (con Selldone) analizará la imagen y generará código basado en Vuetify (Vue 3) totalmente compatible con el Page Builder de Selldone.

Crea una nueva landing page en Selldone

Antes de agregar tu sección personalizada, creemos primero una landing page en bruto dentro de Selldone para usarla.

1. Desde el menú superior de la tienda, navega a Páginas → Landing → Añadir nueva landing.
   
2. En esta pantalla verás tres plantillas predeterminadas para landing pages.
3. Haz clic en cualquiera de ellas para seleccionarla y entrar al Diseñador de Landing. Dentro del diseñador, abre el panel lateral izquierdo, encuentra el elemento “Code” y arrástralo al área del Page Builder. Este elemento “Code” es donde pegarás o importarás la sección generada por ChatGPT usando el Plugin Selldone.
4. Haz clic dentro del cuadro de Code para activar la barra de herramientas — aparecerá una barra superior que usaremos con frecuencia.

-El primer ícono (<>) abre el Editor de Código, donde puedes pegar o editar el HTML y el código basado en Vue generado por ChatGPT.-El segundo ícono abre Propiedades, donde puedes ajustar la disposición de la sección, el espaciado y los ajustes visuales.

Paso 4 – Copia y pega el código inicial de ChatGPT en el editor

Versión posiblemente incorrecta

Ahora debes copiar la primera versión del código que ChatGPT te generó.
Como verás en la captura, el resultado puede verse diferente a tu imagen de referencia — esto significa que ChatGPT produjo una versión incorrecta de la sección. Esto es completamente normal, así que no te preocupes.Para solucionarlo, reenvía la imagen de referencia y pídele que lo intente de nuevo, por ejemplo, diciendo:

“Concéntrate en la imagen que envié arriba. La vuelvo a enviar.”

Ahora ChatGPT empezará de nuevo y generará un código nuevo. Esa versión no será la final necesariamente, ya que posiblemente querrás añadir más peticiones y ajustes.Ahora, copia el código y pégalo en el editor de código y presiona Apply:

Nota importante: El modo predeterminado del editor de código es HTML. Debes cambiar a la opción Vue — de lo contrario, obtendrás un resultado en blanco.

Ahora verás la primera versión correcta de la sección generada por ChatGPT. Presiona el segundo elemento en la barra de herramientas (como se mencionó antes) para abrir el menú Propiedades para ajustes. Como verás, hay muchas opciones disponibles para personalizar esta sección según tu negocio.

Opción RESTABLECER A VALORES PREDETERMINADOS:

A veces, cuando pegas una versión actualizada del código, puede que no veas cambios visibles. Esto puede ocurrir si las modificaciones son profundas. En esos casos, tendrás que hacer clic en la opción Restablecer a valores predeterminados. Ten en cuenta que usar esta opción eliminará todas tus personalizaciones, incluidos nuevos textos, colores, tamaños de fuente e incluso imágenes subidas — es básicamente un restablecimiento de fábrica 🙂.Úsala solo cuando tus cambios no se estén aplicando correctamente.

Paso 5 – Ajusta la sección

ChatGPT, basándose en lo que ha aprendido de otros usuarios que han usado este método, ahora genera maquetados más completos — así que no necesitas solicitar cada elemento uno por uno. Esta es la ventaja real de conversar más: cuanto más larga y clara sea tu conversación, mejor ChatGPT entenderá tus preferencias de diseño y entregará resultados más completos y precisos.El código generado por defecto ya es bastante responsivo, pero aún puedes ajustar detalles como tamaños de fuente, pesos tipográficos, alturas de sección o tarjetas, anchos y otros elementos visuales según tus preferencias.
Aquí, por ejemplo, puedes configurar Selldone para mostrar 8 tarjetas por fila en pantallas de escritorio grandes, 4 tarjetas en tabletas y 2 tarjetas en dispositivos móviles.
Veamos cómo ChatGPT interpreta y aplica estos ajustes — quizás necesitemos hacer algunos ediciones o peticiones adicionales en los siguientes pasos.En este caso deberías cambiar el ancho maximo de la sección a 1400px para una mejor disposición. También puedes ajustar las tarjetas por fila a 8, 4 y 2 para escritorio, tablet y móvil respectivamente.
Para refinar los espacios, prueba reduciendo el Espacio entre Tarjetas (Desktop) a alrededor de 12px. Además, puedes disminuir la altura de las tarjetas de 180px a 160px o ajustar el tamaño de la imagen para que se adapte a tu diseño.

Es importante recordar que puedes personalizar fácilmente la apariencia probando con estos valores — juega con los números hasta encontrar lo que mejor se adapte a tu estilo.

Para visualizar mejor el resultado, puedes subir tus propias imágenes. Recomendamos usar imágenes con fondo transparente, de modo que la Opción Color de Fondo de la Tarjeta se aplique de manera uniforme a todas ellas — dando a tu sección un aspecto más limpio y profesional.Después de subir tus imágenes, editar los textos y finalizar todo, haz clic en el botón Guardar — o presiona Ctrl + S en Windows para guardar al instante.
Ahora es momento de abrir la Página en Vivo y ver tu sección en acción.
Para verla en vivo, puedes usar la opción Vista previa en vivo o hacer clic en el botón junto al nombre de tu landing — esto abrirá la página en la vista de comprador, tal como la verán tus visitantes. Sin embargo, no recomiendo usar la Vista previa en vivo para verificar la versión final, ya que no refleja completamente la responsividad en distintos dispositivos — algo que abordaremos más abajo.Este es el resultado del código. Ahora necesitamos probarlo en diferentes tamaños de pantalla para asegurarnos de que todo funcione correctamente.
Para abrir las Herramientas de Desarrollador Web en navegadores de Windows, presiona F12.
Esta herramienta te permite previsualizar la página en varios tamaños de pantalla — sin necesidad de probarla por separado en móvil, tablet, portátil u otros dispositivos.Ahora, desde el menú superior, selecciona Responsive para previsualizar cómo se ve tu sección en distintos tamaños de pantalla.Como puedes ver, la versión móvil luce limpia y completamente responsiva.En la vista de tablet — específicamente en el iPad Pro de 11 pulgadas — nuestras configuraciones (4 tarjetas por fila en tablet) no se están aplicando y solo muestra 2. Necesitamos pedirle a ChatGPT que arregle este problema y vuelva a codificarlo.

Paso 6 – Itera y perfecciona

No te detengas en la primera versión — aquí es donde ocurre la verdadera creatividad. Puedes seguir conversando con ChatGPT para ajustar detalles como:

• Hacer la sección responsiva en todas las pantallas.
• Añadir animación al pasar el ratón (hover).
• Usar botones con degradado.

Cada iteración actualiza tu sección al instante.

💡 Consejo profesional: Cuanto más converses y describas lo que quieres, mejor ChatGPT entendrá tu estilo de diseño. Con el tiempo aprenderá tus preferencias y producirá resultados más precisos y de mayor calidad.
Aquí debes explicar claramente el problema para ayudar a ChatGPT a entenderlo mejor.
Recuerda, no puede leer tu mente — necesitas describir el problema en detalle, como en este ejemplo de comentario:

He seleccionado 4 tarjetas por fila para el tamaño tablet pero en un iPad Pro de 11 pulgadas se muestran 2 tarjetas por fila. Arriba seleccioné 2 por fila para móvil. Arréglalo.

Cuando ChatGPT responda a tu petición, a veces solo proporciona las modificaciones de código específicas que necesitas reemplazar o añadir manualmente, como se muestra en la imagen abajo. Para facilitarlo, simplemente pídele: “Envíame el código completo.”A menudo, al final de su mensaje, ChatGPT recomienda ajustes adicionales que podrías haber pasado por alto — como en este caso, donde sugiere añadir enlaces a las tarjetas, algo esencial para nuestra sección.¡Casi listo! Copia y pega el código actualizado en el editor, guarda tus cambios y míralo en Modo Vivo para asegurarte de que todo se ve correctamente.
Como verás, ahora muestra perfectamente 4 tarjetas por fila en la versión de tablet.

Paso 7 – Finaliza el código y guarda la sección

Cuando tu diseño esté listo, es buena idea proporcionar a ChatGPT una descripción detallada de la estructura y los requerimientos de la sección. Usa el siguiente prompt para generar el código final:

Añade un bloque de descripción conceptual arriba del