peterfei/landing-page-skill

Habilidad para Landing Pages

Esta habilidad está diseñada para ser agent-agnostic—Claude Code, Codex CLI, Cursor, Trae, OpenClaw, Hermes Agent o cualquier agente que soporte habilidades basadas en markdown puede utilizarla. Todas las referencias a archivos utilizan rutas relativas al directorio raíz de esta habilidad.

Condiciones de Activación

Se activa cuando la entrada del usuario contiene alguna de las siguientes palabras clave: landing page, página de aterrizaje, página de producto, página de marketing, diseño de página principal, sitio web de una sola página, página de destino.

Límites de Honestidad (Evaluación de Aplicabilidad)

Aplicable:

1. Páginas de aterrizaje de una sola página orientadas a conversión (captación de leads, registro, compra)
2. Páginas de exhibición de productos/servicios (SaaS, productos individuales de ecommerce, consultoría, cursos)
3. Stack tecnológico Next.js 14/15 + Tailwind CSS (fase MVP)
4. Páginas con un objetivo de conversión claro (CTA)

No Aplicable:

1. Sitios web de múltiples páginas o sistemas de blog (fuera del alcance de una sola página)
2. Aplicaciones completas que requieren API backend, base de datos o autenticación de usuarios
3. Interacciones complejas (colaboración en tiempo real, paneles de visualización de datos, juegos)
4. Plataformas no web (miniprogramas, aplicaciones nativas, aplicaciones de escritorio)

Declaración de Límites: Esta habilidad genera un código inicial de alta calidad que requiere ajustes manuales en los detalles del texto y los activos de la marca. No promete "perfección con un solo clic".

Protocolo de Operación en 5 Fases

Fase 1: Recopilación de Requisitos

Confirmar la siguiente información con el usuario en orden (omitir si el usuario ya la ha proporcionado):

1. Producto/Servicio: ¿Qué es? ¿Cuál es la propuesta de valor principal?
2. Audiencia Objetivo: ¿Quién lo usará? ¿Qué puntos de dolor tienen?
3. Objetivo de Conversión: ¿Qué se espera que haga el usuario? (registrarse/comprar/descargar/reservar)
4. Stack Tecnológico: Confirmar el uso de Next.js 14/15 + Tailwind CSS
5. Preferencia de Estilo de Marca: Elegir entre los 6 estilos de references/aesthetic-styles.md
6. Referencia de Competidores: ¿Hay alguna página de aterrizaje de referencia que le guste? (opcional)

Salida: Documento de resumen de requisitos (lista en Markdown) para la Fase 2.

Fase 2: Planificación Estratégica

1. Cargar Plantilla de la Industria: Seleccionar una plantilla de references/page-templates/ según el tipo de producto:
   • Producto SaaS → references/page-templates/saas-product.md
   • Producto individual de ecommerce → references/page-templates/ecommerce.md
   • Otro → Estructura general (Hero → Características → Beneficios → Prueba Social → CTA → Pie de página)
2. Elegir Dirección Estética: Seleccionar un estilo de references/aesthetic-styles.md y confirmar la inclinación de la paleta de colores
3. Estructura del Texto: Planificar usando references/copy-formulas/:
   • Título del Hero: Fórmula "Resultado + Audiencia + Mecanismo" de references/copy-formulas/hero-headlines.md
   • Texto del CTA: Formato "Verbo + Beneficio" de references/copy-formulas/cta-patterns.md
   • Manejo de objeciones: Plantillas de 5 tipos de objeciones de references/copy-formulas/objection-handling.md
4. Mapeo del Marco de Conversión: Mapear el texto en 7 secciones a los 11 elementos de DESIGNNAS (consultar references/conversion-framework.md)

Salida: Documento de estrategia (incluye elección de estilo, dirección de paleta de colores, esquema del texto, tabla de mapeo de elementos).

Fase 3: Sistema de Diseño

Generar tokens de diseño basados en references/design-system.md:

1. Token de Tipografía: Fuente Display, fuente Body, escala de tamaños de heading
2. Token de Color: Primary / Secondary / Accent / Neutral / Background / Text (hex + variables CSS)
3. Token de Movimiento: Animación de carga de página, animación activada por desplazamiento, interacción hover (tipo + duración)
4. Token de Layout: Tipo de Grid, escala de Spacing, ancho de secciones, reglas de diseño asimétrico

Salida: Documento de tokens de diseño (se puede copiar directamente a tailwind.config.ts).

Fase 4: Generación de Código

Generar código siguiendo references/tech-adapters/nextjs-tailwind.md:

1. Estructura del Proyecto: app/page.tsx, app/layout.tsx, components/, lib/utils.ts, tailwind.config.ts
2. Componentización: Cada elemento de DESIGNNAS es un componente independiente (HeroSection, FeaturesSection, etc.)
3. Configuración de Tailwind: Extender los tokens del sistema de diseño (colors, fonts, animations)
4. Responsive: Usar puntos de interrupción sm:/md:/lg:/xl:
5. Accesibilidad: HTML semántico, texto alt, contraste, focus-visible

Salida: Código completo y ejecutable del proyecto Next.js.

Fase 5: Validación de Calidad (Garantía de Cierre)

5.1 Verificación de Conversión

• Cobertura de los 11 elementos: Verificar si incluye Hero, Prueba Social, Características, Beneficios, Cómo Funciona, Testimonios, Precios/CTA, FAQ, Escasez, Pie de Página (al menos 7)
• Claridad del CTA: ¿El texto del CTA usa el formato "Verbo + Beneficio"?
• Título del Hero: ¿Sigue la fórmula "Resultado + Audiencia + Mecanismo"?

5.2 Detección de Antipatrones (Verificar uno por uno, ver detalle en references/anti-patterns.md)

#	Regla	Lógica de Detección	Gravedad
1	Fuente Común	Inter/Roboto/Arial como fuente Display	Bloqueante
2	Paleta de Colores Plantilla	Combinación plantilla de degradado púrpura + fondo blanco puro	Bloqueante
3	CTA Vago	CTA es Submit/Learn More/Click Here	Bloqueante
4	Falta de Prueba Social	Sin elemento de Prueba Social debajo del Hero	Bloqueante
5	Título del Hero Débil	Comienza con Bienvenido/nombre de marca, meramente descriptivo	Bloqueante
6	Falta de Adaptación Móvil	Sin puntos de interrupción sm:/md:/lg: responsive	Advertencia
7	Línea Base de Accesibilidad	Falta alt/aria/HTML semántico	Advertencia
8	Falta de SEO Básico	Sin etiquetas meta/title/OG	Advertencia
9	Riesgo de Rendimiento	Imágenes grandes no optimizadas, falta lazy load	Advertencia
10	Consistencia de Tokens	Colores hardcodeados/espaciado no estándar	Advertencia

5.3 Bucle de Corrección Automática (Reglas Bloqueantes)

Cuando las reglas bloqueantes (1-5) no se cumplen, ejecutar automáticamente un bucle de corrección:

1. Para cada regla bloqueante no aprobada, generar código de corrección específica
2. Reemplazar solo el código de la Sección que activa la regla (no modificar secciones no relacionadas)
3. Volver a ejecutar la detección de esa regla
4. Repetir los pasos anteriores, máximo 3 rondas
5. Si después de 3 rondas aún no se aprueba → Reportar la razón del fallo, dejar la decisión al usuario

5.4 Validación de Patrones Positivos (Recomendado, ver detalle en references/positive-patterns.md)

#	Patrón	Lógica de Detección
P1	CTA Verbo+Beneficio	El texto del CTA coincide con el formato "Verbo + Beneficio específico"
P2	Hero Resultado+Audiencia	El título contiene un resultado cuantificable + audiencia objetivo
P3	Elemento de Prueba Social	La página contiene ≥1 tipo de prueba social
P4	Urgencia/Escasez	Existe un elemento de urgencia de cupos/tiempo/precio

Los patrones positivos no activan corrección automática, solo proporcionan sugerencias de optimización en el informe.

Salida: Informe de detección (tabla Markdown de antipatrones + patrones positivos) + Resumen de corrección automática (si la hubo).

Fase 5.5: Optimización Iterativa (Opcional)

Después de completar la Fase 5, ofrecer al usuario 3 opciones:

A) Aceptar — Entregar el código completo final del proyecto B) Modificar Sección Específica — El usuario indica la Sección a modificar y los requisitos de modificación C) Regenerar Sección Específica — El usuario especifica la Sección para regenerar desde cero

Reglas de iteración:

• La modificación/regeneración solo afecta la Sección especificada por el usuario (granularidad de Sección)
• Después de cada modificación, volver a detectar las reglas de antipatrones relacionadas con esa Sección
• Máximo 3 rondas de iteración; al exceder, entregar la versión actual
• Cada ronda genera un registro de cambios: "Ronda N: Modificadas [Secciones], Revisadas [Reglas]"

Índice

Adaptadores de Stack Tecnológico

• Next.js 14/15 + Tailwind CSS → references/tech-adapters/nextjs-tailwind.md

Plantillas de la Industria

• Página de producto SaaS → references/page-templates/saas-product.md
• Página de producto ecommerce → references/page-templates/ecommerce.md

Biblioteca de Fórmulas de Texto

• Título del Hero → references/copy-formulas/hero-headlines.md
• Patrones de CTA → references/copy-formulas/cta-patterns.md
• Manejo de objeciones → references/copy-formulas/objection-handling.md

Referencias de Diseño

• Marco de Conversión → references/conversion-framework.md
• Sistema de Diseño → references/design-system.md
• Estilos Estéticos → references/aesthetic-styles.md
• Detección de Antipatrones → references/anti-patterns.md
• Detección de Patrones Positivos → references/positive-patterns.md

Notas de Adaptación a Entornos Multi-Agente

Esta habilidad está diseñada para ser agent-agnostic, compatible con los siguientes entornos de ejecución:

Entorno de Ejecución	Método de Soporte	Notas
Claude Code	Soporte nativo	Recomendado, activado con /agent o palabras clave
Codex CLI	Compatible	Cargar SKILL.md directamente
Cursor	Compatible	Copiar a .cursorrules o usar Composer
Trae	Compatible	Cargar SKILL.md directamente
OpenClaw	Compatible	Sigue el protocolo skills.sh
Hermes Agent	Compatible	Cargar SKILL.md directamente
Otros entornos de ejecución basados en markdown	Compatible	Cualquier entorno que soporte YAML frontmatter + Markdown

Normas de Ruta

Todas las referencias a archivos utilizan rutas relativas al directorio raíz de esta habilidad:

• references/xxx.md
• assets/xxx.svg
• scripts/xxx.py

El agente o usuario resuelve según su ubicación de instalación, sin depender de rutas absolutas.

Principio de Autocontención

SKILL.md contiene toda la información necesaria, se puede copiar y usar directamente. Los archivos en references/ son complementos de conocimiento profundo, se cargan según sea necesario.

Esta habilidad sigue el protocolo abierto Agent Skills.