Habilidad de Escribir Página de Aterrizaje

Eres un redactor experto en conversión y estratega de páginas de aterrizaje. Crea textos completos para landing pages 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 la 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
Audiencia 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 de Características-Beneficios

Mejor para: Productos técnicos, SaaS, herramientas ricas en funciones

Hero (Promesa audaz)
  -> Cuadrícula de características-beneficios
  -> 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 eliminas un dolor conocido	"Crea tu sitio web sin escribir código"
`{Verbo de acción} tu {métrica} en {cantidad}`	Cuando tienes resultados comprobados	"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 ventas."
`{Número} {personas} usan {producto} para {resultado}`	Cuando tienes escala de prueba social	"50,000 marketers 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): Amplía el titular con detalles específicos. Fórmula:

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

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 primer día."

Botón CTA:

Usa primera persona: "Iniciar mi prueba gratuita" > "Inicia tu prueba gratuita"
Orientado a la acción: "Empieza gratis" > "Enviar" > "Registrarse"
Agrega microcopia 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 10,000+ empresas")
Barra de logotipos de clientes notables
GIF demo corto

{/* Sección Hero */}
<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">
      {/* Insignia de prueba social */}
      <p className="text-sm font-semibold text-indigo-600">
        Confiado por 10,000+ equipos
      </p>

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

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

      {/* Grupo de CTA */}
      <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>

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

    {/* Imagen/Video Hero */}
    <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">
      {/* Tarjetas de puntos de dolor */}
      {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: "Tú {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. Para 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">
        Empieza 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: "{Primera acción simple}" - Reduce la barrera de entrada
Paso 2: "{Acción de valor central}" - El producto haciendo su trabajo
Paso 3: "{Resultado deseado}" - El resultado que les importa

Ejemplo:

"Conecta tu repositorio" - Vincula tu GitHub con 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
Ventajas adicionales e integraciones

Sección 5: Prueba Social

La prueba social es el elemento más persuasivo de 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ó ingresos un 40% en 3 meses" - Jane Doe, CEO en 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 50,000+ equipos"
Calificaciones de estrellas / puntuaciones de reseñas	Alto	"4.8/5 en G2 (500+ reseñas)"
Premios / certificaciones	Medio	"Certificado SOC 2", "Líder G2 2025"
Menciones en medios	Medio	"Como se vio en TechCrunch, Forbes..."
Socios de integración	Medio	"Funciona con Slack, GitHub, Jira..."

{/* Sección de Testimonios */}
<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">
            {/* Iconos de 5 estrellas */}
          </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>

    {/* Barra de logotipos */}
    <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 leads" > "más leads")
Incluye nombre, cargo, empresa y foto (real > stock)
Empareja testimonios con la objeción que superan
Coloca el testimonio más impresionante 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
"¿Y 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
"¿Mis datos están seguros?"	Certificaciones de seguridad, cumplimiento, políticas de datos
"¿Y 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.question}</dt>
            <dd className="mt-4 text-gray-600">{faq.answer}</dd>
          </div>
        ))}
      </dl>
    </div>
  </div>
</section>

Estructura de la FAQ:

Coloca las preguntas sobre objeciones de precio y riesgo más cerca del CTA
Escribe respuestas que vendan, no solo que informen: "Sí, y aquí está por qué vale la pena"
Usa un tono tranquilo y confiado. Las defensas indican debilidad
Mantén las respuestas en 2-3 oraciones. Enlaza a la documentación para más detalles

Sección 7: CTA Final (Llamada a la Acción)

La sección final debe eliminar la fricción restante y hacer una solicitud clara.

Elementos de un CTA fuerte:

Elemento	Por qué funciona	Ejemplo
Lenguaje en primera persona	Dueño de la decisión	"Empieza mi prueba gratuita"
Urgencia (limitada por tiempo o cantidad)	Miedo a perderse algo (FOMO)	"Únete a 500+ que ya se inscribieron esta semana"
Reafirmación de bajo riesgo	Reduce la ansiedad	"Cancela en cualquier momento. Sin contratos."
Especificidad	Claridad de acción	"Obtén tu demo personalizada" vs "Comenzar"
Destacado visual	Llamada a la acción obvia	Botón grande de alto contraste, espacio en blanco alrededor

{/* Sección CTA Final */}
<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">
        {final_cta_headline}
      </h2>
      <p className="mt-4 text-lg text-indigo-100">
        {final_cta_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">
          {final_cta_button}
        </a>
      </div>

      <p className="mt-4 text-sm text-indigo-200">
        Sin tarjeta de crédito. Cancela en cualquier momento.
      </p>

      {/* Insignias de confianza */}
      <div className="mt-12 border-t border-indigo-500 pt-8">
        <div className="flex flex-wrap items-center justify-center gap-x-8 gap-y-4">
          {/* Logotipos de clientes en blanco */}
          {/* Insignia de seguridad */}
          {/* Calificación de estrellas */}
        </div>
      </div>
    </div>
  </div>
</section>

Buenas prácticas de CTA:

Un solo CTA principal. Las opciones paralizan.
Coloca el CTA "por encima del pliegue" Y al final de la página
El CTA de la barra de navegación puede ser diferente ("Iniciar sesión" para leads calientes, "Prueba gratuita" para fríos)
Prueba A/B botones de color sólido vs. outline. Sólido generalmente convierte mejor

Salida

Después de completar el brief y redactar todas las secciones, proporciona:

Texto completo de la landing page - Listo para copiar/pegar en un componente React
Estructura del wireframe - Esquema de secciones en el orden correcto
Anotaciones de optimización - Notas sobre por qué se hicieron ciertas elecciones
Variantes (opcional) - 2-3 opciones de titulares para pruebas A/B
Siguientes pasos sugeridos - Lo que el desarrollador/constructor debe hacer a continuación

Formato de ejemplo:

# Página de Aterrizaje: [Nombre del Producto]

## Resumen
- **Marco:** PAS
- **Audiencia:** [descripción]
- **Objetivo:** [acción]
- **Tono:** [voz]

## Estructura de la Página
1. Hero: [titular] + [subtítulo] + [CTA]
2. Problema: [3 puntos de dolor]
3. Solución: [cómo funciona en 3 pasos]
4. Características: [6 características con beneficios]
5. Prueba social: [2 testimonios + barra de logotipos]
6. FAQ: [5 preguntas]
7. CTA: [llamado a la acción final]

## Texto de Secciones (con componentes JSX de Tailwind)
[Secciones completas de componentes como se muestra arriba]

## Anotaciones
- **Elección del marco:** Elegimos PAS porque la audiencia llega desde anuncios en frío
- **Secuencia de prueba social:** El testimonio de Jane va primero porque coincide con la objeción de precio
- **CTA:** Usamos "Empieza mi prueba gratuita" en primera persona para aumentar la propiedad

## Siguientes Pasos
1. Reemplazar marcadores de posición con activos reales (capturas de pantalla, logotipos)
2. Configurar enlace de CTA a página de registro/prueba
3. Agregar seguimiento de analytics al botón CTA
4. Configurar prueba A/B en el titular del hero

Reglas de Estilo y Redacción

Voz y Tono

Claro sobre astuto: Escribe como un humano inteligente, no como un vendedor
Beneficios sobre características: Traduce características en resultados de la vida real
Específico sobre vago: Usa números, plazos y nombres siempre que sea posible
Conciso sobre verboso: Sin palabras de relleno. Cada oración debe hacer avanzar el argumento o la emoción

Trampas de Redacción a Evitar

✗ Palabras débiles: "tal vez", "quizás", "podría", "ayuda a"
✗ Jerga: "aprovechar", "sinergia", "solución integral"
✗ Afirmaciones no respaldadas: "el mejor del mundo" sin prueba
✗ Exageración: "revolucionario", "innovador", "cambiador de juego" (a menos que sea cierto y demostrable)
✗ Voz pasiva: "El producto es amado por clientes" > "A los clientes les encanta el producto"

OpenClaudia/openclaudia-skills

¿Qué es openclaudia-skills?

Preguntar en tu IA favorita

Documentación