Inicio› Landing Pages› Módulo 3: Arma tu página paso a paso
Módulo 3 · 15 minutos

🚀 Arma tu página, paso a paso, hasta verla lista

Vamos a recorrer el proceso completo, de principio a fin, con un ejemplo real — para que veas exactamente cómo se llega del prompt al resultado final.

De la palabra escrita a la página funcionando: son solo 5 pasos

No importa si en los Módulos 1 y 2 ya generaste tu página o todavía no — aquí la armamos juntas desde cero con el ejemplo de los aretes. No vas a guardar ni un solo archivo.

🧭
Recorrido guiado — Pasos 1 a 5

Del prompt al resultado, sin saltos

Sigue estos 5 pasos en orden. Al final vas a ver la página terminada, exactamente como la vas a tener tú.

  • 1

    Elige qué vas a vender

    Puede ser tu propio producto o servicio (el que llenaste en el Módulo 1 o 2), o puedes seguir este ejemplo con "Aretes artesanales tejidos a mano" para practicar el proceso completo primero.

  • 2

    Copia el prompt completo

    Este es el mismo prompt maestro del Módulo 1, ya lleno con los datos del ejemplo:

📋 Ejemplo guiado: Aretes artesanales — Copia y usa Actúa como diseñador web experto. Crea el código completo de una landing page de UNA SOLA página (un solo archivo HTML con el CSS y JavaScript incluidos adentro, sin depender de internet) para vender lo siguiente: - Producto: Aretes artesanales tejidos a mano - Precio: $8 el par - Público objetivo: mujeres de 20 a 40 años que buscan accesorios únicos y hechos a mano - Contacto para pedidos: WhatsApp 0991234567 - Estilo y colores preferidos: colores tierra, boho, cálido y elegante La página debe tener, en este orden: 1. Un encabezado con el nombre del producto y una frase corta que explique qué es y para quién es. 2. Una sección con una foto grande del producto (usa un marcador de imagen tipo placeholder si todavía no tengo foto) y una descripción breve y persuasiva (máximo 4 líneas). 3. El precio, bien visible, en letras grandes. 4. Un botón grande y de color llamativo que diga "Pedir por WhatsApp" y que al hacer clic abra WhatsApp con el número 0991234567 y el mensaje "Hola, quiero pedir Aretes artesanales tejidos a mano". 5. Una sección con 2 o 3 testimonios inventados de clientas (nombre, frase corta y calificación de 5 estrellas). 6. Un pie de página con mis redes sociales (Instagram y Facebook, con enlaces de ejemplo) y el número de WhatsApp otra vez. Requisitos técnicos: - Totalmente responsive: debe verse bien en celular y en computadora. - Usa la paleta de colores: colores tierra, boho, cálido y elegante. - Todo el código en un único archivo .html listo para guardar y abrir directo, sin instalar nada ni usar librerías externas que necesiten internet. - No agregues explicaciones antes ni después del código, ni frases como "aquí tienes" o "espero que te sirva". Responde ÚNICAMENTE con el código: empieza tu respuesta directo con <!DOCTYPE html> y termina en </html>, sin ningún texto adicional, listo para copiar y pegar.
  • 3

    Pégalo en Claude o ChatGPT (versión gratis)

    Abre claude.ai o chat.openai.com desde tu celular o tu computadora, pega el prompt completo en el cuadro de texto y presiona enviar.

  • 4

    Mira tu resultado — aparece solo, sin guardar nada

    En unos segundos, junto a la respuesta se abre automáticamente una vista previa visual de tu página (en Claude se llama "Artifact", en ChatGPT "Canvas"). Ahí ya ves tu landing page funcionando — con foto, precio y botón de WhatsApp — sin instalar nada ni guardar ningún archivo.

  • 5

    Compártela con un link, con un toque

    Si usaste Claude, toca el botón "Compartir" en la esquina de esa vista previa: te da un link público real (algo como claude.ai/public/...) que puedes enviar por WhatsApp — quien lo abra ve tu página, sin cuenta ni instalar nada. Si usaste ChatGPT, puedes pegar ese mismo código en Claude solo para este paso, o compartir el código como texto por WhatsApp mientras tanto.

🔍 Así se ve el resultado de este ejemplo — en vivo

Esto es exactamente lo que verías en el Artifact o Canvas del paso 4. Interactúa con ella: es una página real y funcional.

↗ Abrir el resultado en una pestaña completa

🎯 Práctica en vivo (8 minutos)

Repite estos mismos 5 pasos, pero ahora con TU prompt lleno con tus propios datos (del Módulo 1 o 2). Al final debes tener tu propia página visible en el Artifact o Canvas, lista para compartir.

🎛
Paso 7

Ajusta lo que no te guste

Tu página no tiene que quedar perfecta al primer intento. En la misma conversación donde la generaste, pega cualquiera de estos prompts para pedir cambios.

📱 Hazla responsive Revisa el código que me diste y asegúrate de que se vea perfecto en un celular pequeño (360px de ancho) y en una computadora. Ajusta tamaños de letra, botones e imágenes para que no se corten ni se vean diminutos en el celular. Dame el código completo actualizado, sin explicaciones antes ni después, listo para copiar y pegar.
🎨 Cambia a rosa Cambia la paleta de colores de la página a tonos rosados. Mantén el mismo diseño y estructura, solo cambia fondo, botones y textos destacados. Dame el código completo actualizado, sin explicaciones antes ni después, listo para copiar y pegar.
💬 Agranda el botón de WhatsApp El botón de "Pedir por WhatsApp" debe ser más grande, ocupar casi todo el ancho en el celular, de color verde WhatsApp y con un ícono. Debe ser lo primero que se vea al entrar. Dame el código completo actualizado, sin explicaciones antes ni después, listo para copiar y pegar.
⭐ Agrega testimonios/precios/mapa Agrega 3 testimonios más de clientas (invéntalos con nombres ecuatorianos), una tabla de 3 precios (básico/medio/premium) y un enlace a mi ubicación en Google Maps. Dame el código completo actualizado, sin explicaciones antes ni después, listo para copiar y pegar.
Después de pedir un ajuste, la vista previa (Artifact o Canvas) se actualiza sola, en el mismo lugar — no necesitas guardar ni abrir nada de nuevo. Si ya compartiste el link, normalmente se actualiza también.

🎯 Práctica en vivo (5 minutos)

Elige un ajuste real que le haga falta a tu página y pídeselo a la IA ahora mismo, en la misma conversación. Observa cómo cambia la vista previa al instante.

🎓
Para cerrar

Es una demostración del poder de la IA — no un sitio profesional

Lo que armaste ya funciona y ya te sirve para vender: es un resultado artesanal, hecho por ti en minutos.

Un sitio "profesional" — con dominio propio (tunegocio.com), URL corta, carrito de compras o pagos en línea — requiere herramientas especializadas para eso. No hace falta hoy, pero conviene saber que existen para cuando tu negocio lo pida:

Siguiente nivel · sitios simples

🎨 Carrd

Especializado en páginas de una sola sección, como la que hiciste hoy — plantillas, dominio propio, planes desde gratis.

Siguiente nivel · sitio completo

🖌 Wix

Constructor de sitios arrastrar-y-soltar, ideal si tu negocio crece y necesitas varias páginas o una tienda en línea.

Reflexión del módulo: tu página nunca está "terminada" — cada semana puedes pedirle a la IA un ajuste nuevo según lo que te digan tus clientas.