Guía gratis · Flujos de trabajo
De idea a landing en una tarde: los 4 pasos con las instrucciones exactas para cada fase
IA para ganar más dinero como consultora: lanza tu landing page en una tarde con las 4 instrucciones exactas para copy, estructura, diseño y publicación.
Por qué estás aquí
Pediste LANDING, y esto es exactamente lo que prometí: el proceso completo para pasar de idea a landing page publicada, con las instrucciones listas para copiar en cada fase. En heypiili enseño a trabajar con la IA como herramienta de trabajo real, no como experimento. Construir una landing sin diseñadora ni programadora es uno de los casos más claros de retorno inmediato: contratar ese trabajo a una agencia puede costar entre $1,000 y $3,000 y tomar entre 1 y 3 semanas (Clutch, 2025). Este proceso tiene cuatro fases, y la lógica que las conecta es siempre la misma: copy primero, estructura después, prototipo visual, y publicación el mismo día.
¿Por qué el copy va primero y no el diseño?
Porque sin copy claro, el diseño rellena el espacio vacío con decisiones genéricas. La IA también. Si le pides un prototipo sin decirle qué vende, a quién y qué transforma, genera algo que parece una landing pero no convierte nada. La Fase 1 existe para que llegues al prototipo con las palabras exactas, no con ideas vagas.
Instrucción para el Paso 1: copy de la landing
nombre de mi producto o servicio
Enter para continuar
Rol: Eres una copywriter especializada en landing pages de alta conversión para negocios de servicios y productos digitales. Contexto: Estoy lanzando [nombre de mi producto o servicio]. Mi cliente ideal es [descripción: quién es y qué problema tiene]. El precio es [precio o rango de precio]. Tarea: Escribe el copy inicial de mi landing page con tres elementos: 1. Un headline principal que exprese la transformación o resultado concreto que obtiene mi cliente (máximo 10 palabras). 2. Un subheadline que amplíe el headline con más contexto (máximo 20 palabras). 3. Tres beneficios en formato "verbo + resultado tangible" (máximo 12 palabras cada uno). Formato: Presenta cada elemento con etiqueta clara: Headline, Subheadline, Beneficio 1, Beneficio 2, Beneficio 3. Sin frases genéricas como "solución integral", "experiencia única" o "diseñada para ti".
¿Cómo organizo la estructura antes de abrir el prototipo?
Una landing efectiva tiene cuatro secciones en orden específico: hero (lo primero que ve quien llega), prueba social (por qué creerme), oferta (qué incluye y cuánto cuesta) y CTA final (qué hace ahora). Ese orden no es arbitrario: sigue la secuencia de preguntas que hace quien llega sin conocerte. La Fase 2 toma el copy de la fase anterior y lo organiza en esas cuatro secciones con el texto listo para usar.
Instrucción para el Paso 2: estructura de la página
pegar headline del Paso 1
⌘ + Enter para continuar
Rol: Eres una arquitecta de landing pages con experiencia en páginas de conversión para negocios de servicios digitales. Contexto: Tengo el siguiente copy para mi landing: - Headline: [pegar headline del Paso 1] - Subheadline: [pegar subheadline del Paso 1] - Beneficios: [pegar los 3 beneficios del Paso 1] - Precio: [precio o rango] Tarea: Organiza este copy en una landing de una sola página con cuatro secciones en este orden: 1. Hero: headline + subheadline + texto del botón CTA principal. 2. Prueba social: qué tipo de evidencia usar para mi tipo de producto (testimonios, números, logos, casos). Escribe el copy sugerido para esa sección aunque sea en formato de ejemplo. 3. Oferta: presenta los beneficios y el precio de forma que justifique el valor antes de mostrar el número. 4. CTA final: texto del botón y la frase que lo acompaña (garantía, urgencia o promesa del siguiente paso). Formato: Cuatro bloques etiquetados con el copy listo para usar. Al final de cada bloque, una frase que explique por qué ese elemento en esa posición ayuda a la conversión.
¿Cómo diseño una página que no parezca genérica sin contratar a una diseñadora?
La respuesta es la técnica de las tres referencias. En lugar de intentar describir un estilo a la IA con palabras vagas como "moderno" o "limpio", le muestras tres páginas reales en tu nicho que te gustan visualmente. La IA toma la paleta de una, la tipografía de otra y la disposición de la tercera. El resultado es tuyo porque tus gustos lo eligieron, pero la IA lo ejecutó. Hay dos pasos: primero pídele que te sugiera páginas en tu nicho, después elige tres y úsalas como referencia.
Instrucción para el Paso 3a: encontrar referencias
mi nicho o industria
Enter para continuar
Rol: Eres una investigadora de diseño digital especializada en negocios de [mi nicho o industria]. Contexto: Voy a crear la landing page para [nombre de mi producto o servicio] dirigida a [descripción de mi cliente ideal]. Tarea: Sugiere 10 landing pages que funcionen bien visualmente en mi nicho. Para cada una, incluye la URL (o si no tienes acceso, el nombre de la marca y cómo encontrarla) y una frase sobre qué hace bien a nivel visual o de conversión. Formato: Lista numerada del 1 al 10. URL o nombre de marca, seguido de una frase de análisis.
Después de revisar las 10 opciones, elige las tres que más te gustan visualmente. Usa la instrucción siguiente para generar el prototipo.
Instrucción para el Paso 3b: generar el prototipo
Esta instrucción funciona en Claude.ai (sección Artefactos, disponible en el nivel gratuito), en v0.dev (nivel gratuito con créditos mensuales) o en cualquier modelo que genere código HTML. El prototipo que produce es funcional: un archivo que puedes publicar sin retoques mayores.
URL o nombre y descripción breve de la primera referencia
Enter para continuar
Rol: Eres una diseñadora UI especializada en landing pages de alta conversión para negocios digitales. Contexto: Tengo el copy y la estructura de mi landing listos. Las tres páginas que más me gustan visualmente en mi nicho son: 1. [URL o nombre y descripción breve de la primera referencia] 2. [URL o nombre y descripción breve de la segunda referencia] 3. [URL o nombre y descripción breve de la tercera referencia] El copy completo de mi landing es: [pegar todo el copy y la estructura del Paso 2] Tarea: Diseña y genera el código completo de mi landing en un solo archivo HTML con CSS embebido. Toma como referencias visuales las tres páginas que mencioné: la paleta de colores de la primera, la tipografía de la segunda y la disposición general de la tercera. No copies ninguna página, combínalas con criterio. Formato: Un solo archivo HTML con CSS embebido. Diseño mobile-first. Sin librerías externas. Usa el texto real de mi copy, no Lorem Ipsum. Donde se necesiten imágenes de personas o productos, incluye placeholders etiquetados con lo que debe ir ahí.
La primera versión no va a estar perfecta. No la perfecciones antes de publicar. Una landing viva con datos reales vale más que una landing perfecta en tu cabeza. Los ajustes que valen la pena vienen del tráfico, no de la intuición.
¿Dónde publico la landing sin código y sin pagar?
Una vez que tienes el archivo HTML generado, publicarlo no requiere saber de código. Estas son las opciones gratuitas ordenadas de menor a mayor fricción:
- Netlify Drop (netlify.com/drop): arrastra el archivo HTML al navegador y obtienes una URL pública en segundos. Sin cuenta, sin configuración. Es la opción más directa para una primera versión.
- GitHub Pages: si ya usas GitHub, puedes publicar desde un repositorio público de forma gratuita. Requiere crear un repositorio y subir el archivo. La URL tiene el formato
tunombre.github.io/tu-proyecto. - Framer (framer.com): tiene un plan gratuito con el que puedes publicar una página. El plan gratuito incluye el subdominio de Framer (
tunombre.framer.website) y la marca de agua de Framer. Si quieres tu propio dominio, necesitas el plan de pago.
Para la primera versión, Netlify Drop es la opción más directa. Cuando el tráfico real te diga qué cambiar, editas el archivo HTML y vuelves a publicar.
Referencias
- Clutch. (2025). *How Much Does a Website Cost?* clutch.co. Estimado de costos para landing pages con diseño profesional a medida.
- Anthropic. (2026). *Claude Artifacts*. claude.ai. Disponible en el nivel gratuito de Claude.ai para generar prototipos de código.
- Vercel. (2026). *v0 by Vercel*. v0.dev. Generador de interfaces con nivel gratuito de créditos mensuales.
- Netlify. (2026). *Netlify Drop*. netlify.com/drop. Herramienta gratuita de publicación por arrastre sin cuenta requerida.
- Framer. (2026). *Framer Free Plan*. framer.com/pricing. Plan gratuito con subdominio de Framer y marca de agua; dominio propio requiere plan de pago.
Lectura adicional
¿Quieres dos ideas de IA todos los días?
Gratis, en Instagram, en español, FACILITOOOO y para todos. Solo cosas que funcionan de verdad.
sigueme @heypiili