Generador de Páginas de Aterrizaje

Genera páginas de aterrizaje de alta conversión a partir de una descripción de producto. Produce componentes completos de Next.js/React con múltiples variantes de sección, marcos de redacción probados, optimización SEO y patrones centrados en el rendimiento. No es lorem ipsum: es texto real que convierte.

Objetivo: LCP < 1s · CLS < 0.1 · FID < 100ms
Salida: Componentes TSX + estilos Tailwind + metadatos SEO + variantes de texto

Cuándo Usarlo

Necesitas generar una página de aterrizaje de marketing en Next.js o React.
La tarea implica una estructura de página centrada en la conversión, variantes de sección, estilo Tailwind o texto optimizado para SEO.
Deseas obtener una página de aterrizaje completa a partir de una descripción de producto, en lugar de fragmentos de UI aislados.

Capacidades Principales

5 variantes de sección héroe (centrado, dividido, degradado, video de fondo, minimalista)
Secciones de características (cuadrícula, alternadas, tarjetas con iconos)
Tablas de precios (de 2 a 4 niveles con listas de características y conmutador)
Acordeón de preguntas frecuentes (FAQ) con marcado de esquema
Testimonios (cuadrícula, carrusel, cita única)
Secciones de llamada a la acción (CTA) (banner, página completa, en línea)
Pie de página (simple, mega, minimalista)
4 estilos de diseño con conjuntos de clases Tailwind

Flujo de Trabajo de Generación

Sigue estos pasos en orden para cada solicitud de página de aterrizaje:

Recopilar entradas — recopila el nombre del producto, eslogan, audiencia, punto de dolor, beneficio clave, niveles de precio, estilo de diseño y marco de redacción utilizando el formato de activación a continuación. Pregunta solo por los campos faltantes.
Analizar la voz de la marca (recomendado) — si el usuario tiene contenido de marca existente (texto del sitio web, publicaciones de blog, materiales de marketing), pásalo por marketing-skill/content-production/scripts/brand_voice_analyzer.py para obtener un perfil de voz (formalidad, tono, perspectiva). Usa el perfil para informar la selección del estilo de diseño y del marco de redacción:
- formal + profesional → estilo enterprise, marco AIDA
- casual + amigable → estilo bold-startup, marco BAB
- profesional + autoritario → estilo dark-saas, marco PAS
- casual + conversacional → estilo clean-minimal, marco BAB
Seleccionar estilo de diseño — asigna la elección del usuario (o infiérela del análisis de voz de marca) a uno de los cuatro conjuntos de clases Tailwind en la Referencia de Estilos de Diseño.
Aplicar marco de redacción — escribe todos los titulares y el texto del cuerpo utilizando el marco elegido (PAS / AIDA / BAB) antes de generar los componentes. Haz coincidir la formalidad y el tono del perfil de voz en todo momento.
Generar secciones en orden — Héroe → Características → Precios → FAQ → Testimonios → CTA → Pie de página. Omite las secciones que no sean relevantes para el producto.
Validar contra el checklist SEO — revisa cada elemento del Checklist SEO antes de generar el código final. Corrige cualquier brecha sobre la marcha.
Entregar componentes finales — proporciona archivos TSX completos y listos para copiar y pegar, con todas las clases Tailwind, metadatos SEO y datos estructurados incluidos.

Activación de Este Skill

Producto: [nombre]
Eslogan: [propuesta de valor en una oración]
Público objetivo: [quiénes son]
Punto de dolor clave: [qué problema resuelves]
Beneficio clave: [resultado principal]
Niveles de precio: [gratuito/pro/empresa o describe]
Estilo de diseño: dark-saas | clean-minimal | bold-startup | enterprise
Marco de redacción: PAS | AIDA | BAB

Referencia de Estilos de Diseño

Estilo	Fondo	Acento	Tarjetas	Botón CTA
Dark SaaS	`bg-gray-950 text-white`	`violet-500/400`	`bg-gray-900 border border-gray-800`	`bg-violet-600 hover:bg-violet-500`
Clean Minimal	`bg-white text-gray-900`	`blue-600`	`bg-gray-50 border border-gray-200 rounded-2xl`	`bg-blue-600 hover:bg-blue-700`
Bold Startup	`bg-white text-gray-900`	`orange-500`	`shadow-xl rounded-3xl`	`bg-orange-500 hover:bg-orange-600 text-white`
Enterprise	`bg-slate-50 text-slate-900`	`slate-700`	`bg-white border border-slate-200 shadow-sm`	`bg-slate-900 hover:bg-slate-800 text-white`

Bold Startup titulares: añade font-black tracking-tight a todos los elementos <h1>/<h2>.

Marcos de Redacción

PAS (Problema → Agitación → Solución)

H1: Estado problemático en el que se encuentran
Subtítulo: Qué sucede si no lo solucionan
CTA: Lo que ofreces
Ejemplo — H1: "Tu equipo pierde 3 horas al día en informes manuales" / Subtítulo: "Cada hora dedicada a hojas de cálculo es una hora sin cerrar tratos. Tus competidores ya están automatizados." / CTA: "Automatiza tus informes en 10 minutos →"

AIDA (Atención → Interés → Deseo → Acción)

H1: Declaración audaz que capta la atención → Subtítulo: Dato interesante o beneficio → Características: Puntos de prueba que generan deseo → CTA: Acción clara

BAB (Antes → Después → Puente)

H1: "[Estado anterior] → [Estado posterior]" → Subtítulo: "Así es como [producto] tiende el puente" → Características: Cómo funciona (el puente)

Componente Representativo: Héroe (Centrado con Degradado — Dark SaaS)

Utiliza esto como plantilla estructural para todas las variantes de héroe. Cambia las clases de diseño, la dirección del degradado y la ubicación de la imagen para las variantes dividida, video de fondo y minimalista.

export function HeroCentered() {
  return (
    <section className="relative flex min-h-screen flex-col items-center justify-center overflow-hidden bg-gray-950 px-4 text-center">
      <div className="absolute inset-0 bg-gradient-to-b from-violet-900/20 to-transparent" />
      <div className="pointer-events-none absolute -top-40 left-1/2 h-[600px] w-[600px] -translate-x-1/2 rounded-full bg-violet-600/20 blur-3xl" />
      <div className="relative z-10 max-w-4xl">
        <div className="mb-6 inline-flex items-center gap-2 rounded-full border border-violet-500/30 bg-violet-500/10 px-4 py-1.5 text-sm text-violet-300">
          <span className="h-1.5 w-1.5 rounded-full bg-violet-400" />
          Ahora en beta pública
        </div>
        <h1 className="mb-6 text-5xl font-bold tracking-tight text-white md:text-7xl">
          Envía más rápido.<br />
          <span className="bg-gradient-to-r from-violet-400 to-pink-400 bg-clip-text text-transparent">
            Rompe menos.
          </span>
        </h1>
        <p className="mx-auto mb-10 max-w-2xl text-xl text-gray-400">
          La plataforma de despliegue que detecta errores antes que tus usuarios.
          Configuración cero. Rollbacks instantáneos. Monitoreo en tiempo real.
        </p>
        <div className="flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
          <Button size="lg" className="bg-violet-600 text-white hover:bg-violet-500 px-8">
            Comienza prueba gratuita
          </Button>
          <Button size="lg" variant="outline" className="border-gray-700 text-gray-300">
            Ver cómo funciona →
          </Button>
        </div>
        <p className="mt-4 text-sm text-gray-500">Sin necesidad de tarjeta de crédito · Prueba gratuita de 14 días</p>
      </div>
    </section>
  )
}

Otros Patrones de Sección

Sección de Características (Alternadas)

Recorre un array features con { title, description, image, badge }. Alterna la dirección del diseño con i % 2 === 1 ? "lg:flex-row-reverse" : "". Usa <Image> con width/height explícitos y rounded-2xl shadow-xl. Envuelve en <section className="py-24"> con un contenedor max-w-6xl.

Tabla de Precios

Recorre un array plans con { name, price, description, features[], cta, highlighted }. El plan destacado obtiene border-2 border-violet-500 bg-violet-950/50 ring-4 ring-violet-500/20; los demás obtienen border border-gray-800 bg-gray-900. Renderiza el precio null como "Personalizado". Usa el icono <Check> por fila de característica. Diseño: grid gap-8 lg:grid-cols-3.

FAQ con Marcado de Esquema

Inyecta JSON-LD de FAQPage mediante <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(schema) }} /> dentro de la sección. Recorre las FAQ con { q, a } en un <Accordion> de shadcn con type="single" collapsible. Contenedor: max-w-3xl.

Testimonios, CTA, Pie de Página

Testimonios: Cuadrícula (grid-cols-1 md:grid-cols-3) o bloque de héroe de cita única con avatar, nombre, cargo y texto de la cita.
Banner CTA: Sección de ancho completo con titular, subtítulo y dos botones (principal + fantasma). Añade señales de confianza (garantía de devolución de dinero, tira de logotipos) inmediatamente debajo.
Pie de página: Logotipo + columnas de navegación + enlaces sociales + legal. Usa un separador border-t border-gray-800.

Checklist SEO

Paso de validación: Antes de entregar el código final, verifica que cada elemento del checklist anterior esté satisfecho. Corrige cualquier brecha sobre la marcha: no omitas elementos.

Objetivos de Rendimiento

Métrica	Objetivo	Técnica
LCP	< 1s	Precargar la imagen del héroe, usar `priority` en Next/Image
CLS	< 0.1	Establecer ancho/alto explícitos en todas las imágenes
FID/INP	< 100ms	Diferir JS no crítico, usar `loading="lazy"`
TTFB	< 200ms	Usar ISR o generación estática para páginas de aterrizaje
Bundle	< 100KB JS	Auditar con `@next/bundle-analyzer`

Errores Comunes

La imagen del héroe no está precargada: añade la propiedad priority al primer <Image>
Faltan puntos de interrupción para móviles: siempre diseñar con enfoque mobile-first usando prefijos sm:
Texto de CTA demasiado vago: "Comenzar" es mejor que "Saber más"; "Iniciar prueba gratuita" es mejor que "Registrarse"
La página de precios carece de señales de confianza: añade garantía de devolución de dinero y testimonios cerca del CTA
Sin CTA visible en la parte superior en móvil: asegúrate de que el botón sea visible sin desplazarse en una ventana de 375px

Skills Relacionados

Analizador de Voz de Marca (marketing-skill/content-production/scripts/brand_voice_analyzer.py) — Ejecutar antes de la generación para establecer el perfil de voz y asegurar la coherencia del texto
Sistema de Diseño UI (product-team/ui-design-system/) — Generar tokens de diseño a partir del color de la marca antes de construir la página
Análisis Competitivo (product-team/competitive-teardown/) — El posicionamiento competitivo informa los mensajes y la diferenciación de la página de aterrizaje

agency-black/Skills

¿Qué es Skills?

Preguntar en tu IA favorita

Documentación