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 de rendimiento. No es lorem ipsum, sino copy real que convierte.

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

Capacidades Principales

5 variantes de sección Hero (centrado, dividido, degradado, video de fondo, minimalista)
Secciones de características (cuadrícula, alternadas, tarjetas con iconos)
Tablas de precios (2–4 niveles con listas de características y alternancia)
Acordeón de FAQ con marcado schema
Testimonios (cuadrícula, carrusel, cita individual)
Secciones de 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 nombre del producto, eslogan, audiencia, punto de dolor, beneficio clave, niveles de precio, estilo de diseño y marco de copy usando 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/skills/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 el marco de copy:
- formal + profesional → estilo enterprise, marco AIDA
- casual + amigable → estilo bold-startup, marco BAB
- profesional + autoritativo → 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 Estilo de Diseño.
Aplicar marco de copy — escribe todo el copy de encabezados y cuerpo usando 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 — Hero → Características → Precios → FAQ → Testimonios → CTA → Pie de página. Omite secciones que no sean relevantes para el producto.
Validar contra lista de verificación SEO — revisa cada elemento de la Lista de Verificación SEO antes de generar el código final. Soluciona cualquier brecha en línea.
Generar componentes finales — entrega archivos TSX completos y listos para copiar y pegar con todas las clases Tailwind, meta SEO y datos estructurados incluidos.

Activación de Esta Skill

Producto: [nombre]
Eslogan: [propuesta de valor en una oración]
Audiencia 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 Estilo 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 Copy

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

H1: Estado doloroso en el que se encuentran
Sub: Lo que sucede si no lo arreglan
CTA: Lo que ofreces
Ejemplo — H1: "Tu equipo pierde 3 horas al día en informes manuales" / Sub: "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 → Sub: Dato interesante o beneficio → Características: Puntos de prueba que generan 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: Hero (Centrado con Degradado — Dark SaaS)

Usa esto como plantilla estructural para todas las variantes de Hero. Intercambia clases de diseño, dirección del degradado y 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">
          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 que tus usuarios.
          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">
            Comienza prueba gratis
          </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 requiere tarjeta de crédito · Prueba gratis de 14 días</p>
      </div>
    </section>
  )
}

Otros Patrones de Sección

Sección de Características (Alternadas)

Itera sobre 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

Itera sobre 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 Schema

Inyecta el JSON-LD de FAQPage mediante <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(schema) }} /> dentro de la sección. Mapea las FAQs 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 cita hero con avatar, nombre, rol y texto de cita.
Banner CTA: Sección de ancho completo con título, subtítulo y dos botones (primario + 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 a redes sociales + 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 anterior esté satisfecho. Soluciona cualquier brecha en línea: no omitas elementos.

Objetivos de Rendimiento

Métrica	Objetivo	Técnica
LCP	< 1s	Precargar la imagen hero, usar `priority` en Next/Image
CLS	< 0.1	Establecer width/height 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
Paquete	< 100KB JS	Auditar con `@next/bundle-analyzer`

Errores Comunes

La imagen hero no está precargada — añade la prop priority al primer <Image>
Faltan puntos de interrupción móviles — siempre diseñar mobile-first con prefijos sm:
El copy de CTA es demasiado vago — "Comenzar" supera a "Aprender más"; "Iniciar prueba gratis" supera a "Registrarse"
En la página de precios faltan señales de confianza — añade garantía de devolución de dinero y testimonios cerca del CTA
No hay CTA visible en la parte superior de la página móvil — asegúrate de que el botón sea visible sin desplazarse en una ventana de 375px

Skills Relacionadas

Analizador de Voz de Marca (marketing-skill/skills/content-production/scripts/brand_voice_analyzer.py) — Ejecuta antes de la generación para establecer el perfil de voz y garantizar la coherencia del copy
Sistema de Diseño UI (product-team/ui-design-system/) — Genera 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 el mensaje de la página de aterrizaje y la diferenciación

ibada0410/CLAUDE-SKILLS

¿Qué es CLAUDE-SKILLS?

Preguntar en tu IA favorita

Documentación