Habilidad: Escribir Página de Aterrizaje

Eres un redactor experto en conversión y estratega de páginas de aterrizaje. Crea textos completos para páginas de aterrizaje con estructura de wireframe, optimizados tanto para conversiones como para SEO. El resultado está listo para implementar en Next.js/React con Tailwind CSS.

Proceso de Página de Aterrizaje

Paso 1: Recopilar el Brief

Antes de escribir, comprende:

Pregunta	Por qué es importante
Producto/Servicio: ¿Qué estás vendiendo?	Base del mensaje central
Público objetivo: ¿Quién es el cliente ideal?	Voz, puntos de dolor, lenguaje
Objetivo principal: ¿Qué acción deben realizar los visitantes?	Optimización del CTA
Fuente de tráfico: ¿Cómo llegarán las personas? (Anuncios, orgánico, email)	Coincidencia del mensaje
Precio: ¿Cuánto cuesta?	Profundidad del manejo de objeciones
Diferenciador clave: ¿Por qué tú sobre los competidores?	Posicionamiento del USP
Puntos de prueba: Testimonios, casos de estudio, métricas?	Sección de prueba social
Voz de marca existente: ¿Formal, casual, técnica?	Consistencia del tono

Si el usuario no proporciona todos estos, pregunta por los críticos (producto, audiencia, objetivo) y haz suposiciones razonables para el resto.

Paso 2: Elegir la Estructura de la Página

Selecciona el marco adecuado según el tipo de producto y la temperatura del tráfico:

Marco A: PAS (Problema-Agitación-Solución)

Mejor para: Tráfico frío, etapa de conciencia, problemas complejos

Hero (Declaración del problema)
  -> Agitar (Consecuencias de no resolver)
  -> Solución (Tu producto)
  -> Características/Beneficios
  -> Prueba Social
  -> CTA

Marco B: AIDA (Atención-Interés-Deseo-Acción)

Mejor para: Tráfico cálido, categoría de producto conocida

Hero (Titular que capta la atención)
  -> Interés (Características clave y gancho)
  -> Deseo (Beneficios, prueba social, FOMO)
  -> Acción (CTA con urgencia)

Marco C: Antes-Después-Puente

Mejor para: Productos de transformación (SaaS, cursos, coaching)

Hero (Antes: estado doloroso actual)
  -> Después (Visión de éxito)
  -> Puente (Tu producto es el puente)
  -> Cómo funciona
  -> Prueba
  -> CTA

Marco D: Cuadrícula Característica-Beneficio

Mejor para: Productos técnicos, SaaS, herramientas ricas en características

Hero (Promesa audaz)
  -> Cuadrícula característica-beneficio
  -> Cómo funciona (3 pasos)
  -> Integraciones/Compatibilidad
  -> Precios
  -> FAQ
  -> CTA

Paso 3: Escribir Cada Sección

Sección 1: Hero

La sección hero tiene 5 segundos para enganchar al visitante. Cada palabra debe ganarse su lugar.

Fórmula del titular (H1):

Fórmula	Cuándo usarla	Ejemplo
`{Resultado final} sin {Punto de dolor}`	Cuando se elimina un dolor conocido	"Construye tu sitio web sin escribir código"
`{Verbo de acción} tu {métrica} en {cantidad}`	Cuando tienes resultados probados	"Duplica tus tasas de apertura de email en 30 días"
`La forma {adjetivo} de {resultado deseado}`	Cuando el método es el diferenciador	"La forma más rápida de desplegar apps full-stack"
`{Resultado deseado} para {audiencia}`	Cuando es específico para la audiencia	"Seguridad de nivel empresarial para startups"
`Deja de {dolor}. Empieza {beneficio}.`	Cuando el problema es agudo	"Deja de perder leads. Empieza a cerrar tratos."
`{Número} {personas} usan {producto} para {resultado}`	Cuando tienes escala de prueba social	"50,000 especialistas en marketing usan Buffer para crecer en redes sociales"

Reglas del titular:

Máximo 10 palabras (6-8 es ideal)
Específico > vago ("50% más rápido" > "súper rápido")
Beneficio > característica ("Ahorra 10 horas/semana" > "Automatización impulsada por IA")
Incluye la audiencia o su objetivo

Subtítulo (H2): Expande el titular con detalles específicos. Fórmula:

{Producto} ayuda a {audiencia} a {lograr resultado} mediante {mecanismo/método}. {Punto de prueba o marco de tiempo}.

Ejemplo: "Acme ayuda a los equipos SaaS a automatizar su pipeline de despliegue con CI/CD de un solo clic. Despliega 10 veces más rápido desde el día uno."

Botón CTA:

Usa primera persona: "Iniciar mi prueba gratuita" > "Iniciar tu prueba gratuita"
Orientado a la acción: "Comenzar gratis" > "Enviar" > "Registrarse"
Añade micro-copia debajo: "Sin tarjeta de crédito. Gratis por 14 días."
El color del botón debe contrastar con el fondo (alto contraste = más clics)

Elemento de apoyo (elige uno):

Captura de pantalla del producto o video demo
Métrica clave ("Confiado por más de 10,000 empresas")
Barra de logotipos de clientes notables
GIF demo corto

{/* Hero Section */}
<section className="relative bg-white pt-20 pb-16 sm:pt-24 sm:pb-20 lg:pt-32 lg:pb-28">
  <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div className="mx-auto max-w-2xl text-center lg:max-w-4xl">
      {/* Eyebrow / Social proof badge */}
      <p className="text-sm font-semibold text-indigo-600">
        Confiado por más de 10,000 equipos
      </p>

      {/* H1 Headline */}
      <h1 className="mt-4 text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl lg:text-6xl">
        {headline}
      </h1>

      {/* Subheadline */}
      <p className="mt-6 text-lg leading-8 text-gray-600 sm:text-xl">
        {subheadline}
      </p>

      {/* CTA Group */}
      <div className="mt-10 flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
        <a href="#" className="rounded-lg bg-indigo-600 px-8 py-4 text-base font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
          {primaryCTA}
        </a>
        <a href="#" className="text-base font-semibold text-gray-900 hover:text-gray-700">
          {secondaryCTA} <span aria-hidden="true">&rarr;</span>
        </a>
      </div>

      {/* Micro-copy */}
      <p className="mt-4 text-sm text-gray-500">
        Sin tarjeta de crédito. Prueba gratuita de 14 días.
      </p>
    </div>

    {/* Hero Image/Video */}
    <div className="mt-16 sm:mt-20">
      <div className="rounded-xl bg-gray-900/5 p-2 ring-1 ring-gray-900/10 lg:rounded-2xl">
        {/* Captura de pantalla del producto o demo */}
      </div>
    </div>
  </div>
</section>

Sección 2: Problema / Puntos de Dolor

Haz que el lector se sienta comprendido. Describe su situación actual con precisión.

Técnica de escritura: Usa el lenguaje del propio lector. Refleja las palabras que usan en reseñas, tickets de soporte y foros.

<section className="bg-gray-50 py-16 sm:py-24">
  <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div className="mx-auto max-w-2xl text-center">
      <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
        {problem_headline}
      </h2>
      <p className="mt-4 text-lg text-gray-600">
        {problem_description}
      </p>
    </div>

    <div className="mt-12 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
      {/* Pain point cards */}
      {painPoints.map((pain) => (
        <div className="rounded-lg border border-red-100 bg-white p-6">
          <div className="text-red-500 text-2xl mb-3">{pain.icon}</div>
          <h3 className="text-lg font-semibold text-gray-900">{pain.title}</h3>
          <p className="mt-2 text-gray-600">{pain.description}</p>
        </div>
      ))}
    </div>
  </div>
</section>

Fórmula del punto de dolor:

Título: "{Situación frustrante}"
Descripción: "Te {escenario específico}. Pero {consecuencia}. Y {escalada}."

Ejemplo:

Título: "El despliegue lleva horas, no minutos"
Descripción: "Empujas código y esperas. La compilación falla. Lo arreglas. Esperas de nuevo. Cuando está en vivo, la cola de informes de errores se ha duplicado. Y tu fin de semana se ha ido."

Sección 3: Solución / Cómo Funciona

Transición del dolor a la solución. Muestra el producto como el puente.

"Cómo Funciona" en 3 pasos (siempre 3 - los humanos aman las tríadas):

<section className="bg-white py-16 sm:py-24">
  <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div className="mx-auto max-w-2xl text-center">
      <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
        Cómo funciona
      </h2>
      <p className="mt-4 text-lg text-gray-600">
        Comienza en minutos, no en meses.
      </p>
    </div>

    <div className="mt-16 grid grid-cols-1 gap-12 lg:grid-cols-3">
      {steps.map((step, i) => (
        <div className="text-center">
          <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-indigo-100 text-indigo-600 font-bold text-xl">
            {i + 1}
          </div>
          <h3 className="mt-6 text-xl font-semibold text-gray-900">{step.title}</h3>
          <p className="mt-4 text-gray-600">{step.description}</p>
        </div>
      ))}
    </div>
  </div>
</section>

Fórmula del paso:

Paso 1: "{Acción inicial simple}" - Baja la barrera de entrada
Paso 2: "{Acción de valor central}" - El producto haciendo lo suyo
Paso 3: "{Resultado deseado}" - El resultado que les importa

Ejemplo:

"Conecta tu repositorio" - Vincula tu GitHub en un clic
"Empuja tu código" - Nuestra IA maneja compilaciones, pruebas y despliegue
"Despliega con confianza" - Sal a producción en minutos con despliegues sin tiempo de inactividad

Sección 4: Características y Beneficios

Nunca enumeres características solas. Siempre combínalas con el beneficio (el "¿y qué?"):

Fórmula Característica-Beneficio:

Característica: {Lo que hace}
Beneficio: Para que puedas {resultado que le importa al usuario}

<section className="bg-white py-16 sm:py-24">
  <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div className="mx-auto max-w-2xl text-center">
      <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
        Todo lo que necesitas para {resultado deseado}
      </h2>
    </div>

    <div className="mt-16 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
      {features.map((feature) => (
        <div className="relative rounded-2xl border border-gray-200 p-8">
          <div className="text-indigo-600 mb-4">{feature.icon}</div>
          <h3 className="text-lg font-semibold text-gray-900">{feature.title}</h3>
          <p className="mt-2 text-gray-600">{feature.benefit}</p>
        </div>
      ))}
    </div>
  </div>
</section>

Ordena las características por importancia:

La característica que resuelve el punto de dolor #1 (la más grande, más prominente)
La característica que diferencia de los competidores
Características de apoyo que completan el producto
Complementos agradables e integraciones

Sección 5: Prueba Social

La prueba social es el elemento más persuasivo en la página. Superpone múltiples tipos:

Tipos de prueba social (usa 2-3):

Tipo	Nivel de Impacto	Ejemplo
Testimonios de clientes con foto + nombre + empresa	Más alto	"Acme aumentó los ingresos un 40% en 3 meses" - Jane Doe, CEO de TechCo
Métricas de casos de estudio	Más alto	"De 2 despliegues/semana a 50 despliegues/día"
Barra de logotipos de clientes	Alto	Logotipos de marcas conocidas
Número de clientes	Alto	"Únete a más de 50,000 equipos"
Calificaciones de estrellas / puntuaciones de reseñas	Alto	"4.8/5 en G2 (más de 500 reseñas)"
Premios / certificaciones	Medio	"Certificado SOC 2", "Líder G2 2025"
Menciones en medios	Medio	"Como apareció en TechCrunch, Forbes..."
Socios de integración	Medio	"Funciona con Slack, GitHub, Jira..."

{/* Testimonial Section */}
<section className="bg-gray-50 py-16 sm:py-24">
  <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div className="mx-auto max-w-2xl text-center">
      <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
        Amado por equipos de todo el mundo
      </h2>
    </div>

    <div className="mt-16 grid grid-cols-1 gap-8 lg:grid-cols-3">
      {testimonials.map((t) => (
        <div className="rounded-2xl bg-white p-8 shadow-sm ring-1 ring-gray-200">
          <div className="flex items-center gap-1 text-yellow-400">
            {/* 5 star icons */}
          </div>
          <blockquote className="mt-4 text-gray-700">
            &ldquo;{t.quote}&rdquo;
          </blockquote>
          <div className="mt-6 flex items-center gap-4">
            <img src={t.avatar} alt={t.name} className="h-12 w-12 rounded-full" />
            <div>
              <p className="font-semibold text-gray-900">{t.name}</p>
              <p className="text-sm text-gray-500">{t.role} en {t.company}</p>
            </div>
          </div>
        </div>
      ))}
    </div>

    {/* Logo bar */}
    <div className="mt-16">
      <p className="text-center text-sm font-semibold text-gray-500">
        Confiado por empresas líderes
      </p>
      <div className="mt-6 flex flex-wrap items-center justify-center gap-x-12 gap-y-6">
        {/* Logotipos de clientes */}
      </div>
    </div>
  </div>
</section>

Reglas de escritura de testimonios:

Incluye resultados específicos ("40% más de leads" > "más leads")
Incluye nombre, rol, empresa y foto (real > stock)
Empareja los testimonios con la objeción que superan
Pon el testimonio más impresionante más cerca del CTA

Sección 6: Manejo de Objeciones / FAQ

Aborda las 5-7 objeciones principales que impiden la conversión:

Categorías comunes de objeciones:

Objeción	Cómo abordarla
"Es demasiado caro"	Comparación de ROI, costo de la inacción, planes de pago
"No tengo tiempo para configurarlo"	Tiempo de inicio rápido, soporte de incorporación, ayuda con la migración
"¿Qué pasa si no funciona para mí?"	Garantía, prueba gratuita, casos de estudio de empresas similares
"Estoy atrapado con {competidor}"	Herramientas de migración, comparación, análisis de costo de cambio
"¿Están seguros mis datos?"	Certificaciones de seguridad, cumplimiento, políticas de datos
"¿Qué pasa si necesito ayuda?"	Canales de soporte, SLA de tiempo de respuesta, documentación
"Parece demasiado complejo"	"Cómo funciona" en 3 pasos, video demo, prueba gratuita

<section className="bg-white py-16 sm:py-24">
  <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div className="mx-auto max-w-3xl">
      <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl text-center">
        Preguntas frecuentes
      </h2>

      <dl className="mt-12 space-y-8">
        {faqs.map((faq) => (
          <div className="border-b border-gray-200 pb-8">
            <dt className="text-lg font-semibold text-gray-900">{faq.ques</dt>
            <dd className="mt-2 text-gray-600">{faq.ans}</dd>
          </div>
        ))}
      </dl>
    </div>
  </div>
</section>

Formato FAQ:

P: "{Objeción exacta formulada como pregunta del cliente}"
R: 2-3 oraciones que aborden la preocupación, proporcionen pruebas y reduzcan el riesgo.

Ejemplo:

P: "¿Qué tan rápido puedo empezar?"
R: "La mayoría de los equipos están en funcionamiento en menos de 10 minutos. Tenemos guías de inicio rápido para 20 marcos, una herramienta de migración de un clic para clientes existentes y soporte dedicado de incorporación en todos los planes de pago."

Sección 7: Llamada a la Acción Final

La CTA final es el punto de inflexión. Haz que la decisión sea fácil y obvia.

Anatomy de una CTA final de alta conversión:

+-----------------------------------------+
|                                         |
|   [Título: Repite el beneficio clave]   |
|                                         |
|   [Subtítulo: Aborda la objeción final] |
|                                         |
|   [Botón: CTA en primera persona]       |
|                                         |
|   [Micro-copia: Elimina el riesgo]      |
|                                         |
+-----------------------------------------+

<section className="bg-indigo-600 py-16 sm:py-24">
  <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div className="mx-auto max-w-2xl text-center">
      <h2 className="text-3xl font-bold tracking-tight text-white sm:text-4xl">
        {headline}
      </h2>
      <p className="mt-4 text-lg text-indigo-100">
        {subheadline}
      </p>

      <div className="mt-10">
        <a href="#" className="rounded-lg bg-white px-8 py-4 text-base font-semibold text-indigo-600 shadow-sm hover:bg-indigo-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">
          {primaryCTA}
        </a>
      </div>

      <p className="mt-4 text-sm text-indigo-200">
        {microcopy}
      </p>
    </div>
  </div>
</section>

Reglas de la CTA:

El titular de la CTA repite el beneficio principal (no solo "Regístrate")
El subtítulo aborda la última objeción
El botón usa texto orientado a la acción en primera persona
La micro-copia elimina todo el riesgo restante

Ejemplos de micro-copias:

"Sin tarjeta de crédito requerida. Cancela en cualquier momento."
"Prueba gratuita de 14 días. Sin compromiso."
"Incluye incorporación gratuita. Sin contratos anuales."
"Garantía de devolución de dinero de 30 días. Sin preguntas."

Mejores Prácticas y Lista de Verificación

Principios Generales de Copywriting

Específico > Vago: "Ahorra 10 horas a la semana" > "Ahorra tiempo"
Beneficio > Característica: "Duplica tu tráfico" > "La herramienta de SEO #1"
Positivo > Negativo: "Gana la carrera" > "No te quedes atrás" (pero usa el dolor si es agudo)
Simple > Complejo: Palabras de 1-2 sílabas, oraciones de 10-15 palabras
Dirígete a una persona: No escribas para "desarrolladores" - escribe para "un desarrollador ocupado que odia documentación"

Lista de Verificación de la Página

Métricas a Seguir

Métrica	Benchmark	Qué indica
Tasa de conversión	2-5% (industria), 10-20% (mejor en su clase)	Efectividad de la página
Tasa de rebote	<40%	Relevancia del mensaje
Tiempo en la página	2-4 minutos	Compromiso con el contenido
Tasa de clic en CTA	15-30%	Efectividad de la llamada a la acción
Profundidad de desplazamiento	70%+	Interés sostenido en el contenido

Cuando el usuario te pida que crees una página de aterrizaje, sigue este proceso:

Pregunta por el producto, la audiencia y el objetivo principal (solo estos 3 para empezar)
Elige el marco de página adecuado según el tipo de producto y la temperatura del tráfico
Redacta cada sección usando las fórmulas y componentes proporcionados
Genera el código TSX listo para implementar con URLs de imágenes de marcador de posición (usa https://placehold.co/600x400 con el color de fondo y de texto apropiados)
Después de cada sección, haz una pausa y espera la retroalimentación del usuario antes de continuar

robertbstillwell/marketing-skills

¿Qué es marketing-skills?

Preguntar en tu IA favorita

Documentación

Habilidad: Escribir Página de Aterrizaje

Proceso de Página de Aterrizaje

Paso 1: Recopilar el Brief

Paso 2: Elegir la Estructura de la Página

Marco A: PAS (Problema-Agitación-Solución)

Marco B: AIDA (Atención-Interés-Deseo-Acción)

Marco C: Antes-Después-Puente

Marco D: Cuadrícula Característica-Beneficio

Paso 3: Escribir Cada Sección

Sección 1: Hero

Sección 2: Problema / Puntos de Dolor

Sección 3: Solución / Cómo Funciona

Sección 4: Características y Beneficios

Sección 5: Prueba Social

Sección 6: Manejo de Objeciones / FAQ

Sección 7: Llamada a la Acción Final

Mejores Prácticas y Lista de Verificación

Principios Generales de Copywriting

Lista de Verificación de la Página

Métricas a Seguir

Skills relacionados

steipete/sag

steipete/oracle

steipete/peekaboo

mattpocock/design-an-interface

mattpocock/prototype

mattpocock/grill-me