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 copy probados, optimización SEO y patrones centrados en el rendimiento. Nada de lorem ipsum: texto real que convierte.

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

Cuándo usar

Necesitas generar una página de aterrizaje de marketing en Next.js o React.
La tarea implica estructura de página enfocada en conversión, variantes de sección, estilos Tailwind o copy optimizado para SEO.
Quieres un resultado completo de página de aterrizaje a partir de una descripción de producto, en lugar de fragmentos de UI aislados.

Capacidades principales

5 variantes de sección héroe (centrada, dividida, con degradado, fondo de video, 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 alternancia)
Acordeón de preguntas frecuentes con marcado de esquema
Testimonios (cuadrícula, carrusel, cita individual)
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 información — recopila nombre del producto, eslogan, audiencia, punto de dolor, beneficio clave, niveles de precios, estilo de diseño y marco de copy utilizando el formato de activación a continuación. Pregunta solo por los campos faltantes.
Analizar la voz de marca (recomendado) — si el usuario tiene contenido de marca existente (copy del sitio web, publicaciones de blog, materiales de marketing), ejecútalo a través de 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 copy:
- 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 infiere 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 copy — escribe todo el copy de titulares y 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 con la lista de verificación SEO — revisa cada elemento de la Lista de Verificación SEO antes de generar el código final. Corrige cualquier brecha en línea.
Generar componentes finales — entrega archivos TSX completos y listos para copiar y pegar, con todas las clases Tailwind, metadatos SEO y datos estructurados incluidos.

Cómo activar esta habilidad

Producto: [nombre]
Eslogan: [propuesta de valor en una frase]
Público objetivo: [quiénes son]
Punto de dolor clave: [qué problema resuelves]
Beneficio clave: [resultado principal]
Niveles de precio: [gratuito/pro/empresarial o describe]
Estilo de diseño: dark-saas | clean-minimal | bold-startup | enterprise
Marco de copy: 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: agrega font-black tracking-tight a todos los elementos <h1>/<h2>.

Marcos de Copy

PAS (Problema → Agitar → Solución)

H1: Estado doloroso en el que se encuentran
Sub: Qué sucede si no lo solucionan
CTA: Lo que ofreces
Ejemplo — H1: "Tu equipo pierde 3 horas al día en informes manuales" / Sub: "Cada hora en 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 → Sub: Dato o beneficio interesante → Características: Puntos de prueba que crean deseo → CTA: Acción clara

BAB (Antes → Después → Puente)

H1: "[Estado antes] → [Estado después]" → Sub: "Así es como [producto] tiende el puente" → Características: Cómo funciona (el puente)

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

Usa esto como plantilla estructural para todas las variantes de héroe. Intercambia las clases de diseño, la dirección del degradado y la ubicación de la imagen para las variantes dividida, con fondo de video 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úblico
        </div>
        <h1 className="mb-6 text-5xl font-bold tracking-tight text-white md:text-7xl">
          Despliega 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 de que tus usuarios lo hagan.
          Configuración cero. Reversiones instantáneas. 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">
            Iniciar 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">No se requiere 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 recibe border-2 border-violet-500 bg-violet-950/50 ring-4 ring-violet-500/20; los otros reciben 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. Mapea las preguntas frecuentes 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 individual con avatar, nombre, rol y texto de la cita.
Banner CTA: Sección de ancho completo con titular, subtítulo y dos botones (principal + fantasma). Agrega señales de confianza (garantía de devolución de dinero, tira de logotipos) inmediatamente después.
Pie de página: Logo + columnas de navegación + enlaces a redes sociales + información legal. Usa un separador border-t border-gray-800.

Lista de Verificación SEO

Paso de validación: Antes de generar el código final, verifica que cada elemento de la lista de verificación anterior esté satisfecho. Corrige cualquier brecha en línea: no omitas elementos.

Objetivos de Rendimiento

Métrica	Objetivo	Técnica
LCP	< 1s	Precarga la imagen héroe, usa `priority` en Next/Image
CLS	< 0.1	Establece `width`/`height` explícitos en todas las imágenes
FID/INP	< 100ms	Difiere JS no crítico, usa `loading="lazy"`
TTFB	< 200ms	Usa ISR o generación estática para páginas de aterrizaje
Bundle	< 100KB JS	Audita con `@next/bundle-analyzer`

Errores Comunes

Imagen héroe no precargada: agrega la propiedad priority al primer <Image>
Puntos de interrupción móviles faltantes: siempre diseña primero para móviles con prefijos sm:
Copy de CTA demasiado vago: "Comenzar" es mejor que "Saber más"; "Iniciar prueba gratuita" es mejor que "Registrarse"
Página de precios sin señales de confianza: agrega 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

Habilidades Relacionadas

Analizador de Voz de Marca (marketing-skill/content-production/scripts/brand_voice_analyzer.py) — Ejecutar antes de la generación para establecer un perfil de voz y garantizar la coherencia del copy
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 de la página de aterrizaje y la diferenciación

Limitaciones

Usa esta habilidad solo cuando la tarea coincida claramente con el alcance descrito anteriormente.
No trates el resultado como un sustituto de la validación, las pruebas o la revisión de expertos específicos del entorno.
Detente y pide aclaraciones si faltan entradas requeridas, permisos, límites de seguridad o criterios de éxito.

n2g7/agent-skills

¿Qué es agent-skills?

Preguntar en tu IA favorita

Documentación