aaagbasm1991/landing-page-skill

Landing - Generación Guiada de Páginas de Venta

Una herramienta de generación guiada de páginas de venta. Esta skill maneja la estructura, la lógica de cuenta atrás y el flujo de preguntas guiadas. El sistema de diseño se delega a UUPM, con una ruta alternativa si UUPM no está instalado.

Requisito de ejecución: Requiere un entorno que pueda ejecutar Bash. Claude Code lo soporta de forma nativa; Claude Desktop requiere un MCP shell.

Resumen del Flujo de Trabajo

Paso 1: Q&A guiada, 3 etapas
   |
Paso 2: Manejo del sistema de diseño, UUPM o alternativa
   |
Paso 3: Presentar 2-3 opciones de estilo
   |
Paso 4: Generar HTML
   |
Paso 5: Salida a generated-pages/{slug}/

Paso 1: Q&A Guiada

Regla Principal: No Usar Contexto Fuera de Este Flujo

Dentro del flujo /landing, usa solo las respuestas que el usuario proporciona en este momento. No hagas referencia a:

• Historial de conversación, como temas o proyectos anteriores
• Sistemas de memoria, como MEMORY.md o archivos de persona
• Cualquier contenido de carpetas de proyecto existentes

Por qué: Cada usuario tiene un contexto diferente y el comportamiento de la skill debe mantenerse consistente. Incluso si conoces bien el dominio, comportate como si estuvieras rellenando todo desde cero. La página final debe estar impulsada por las respuestas del usuario, no por suposiciones de la IA.

Ejemplo malo: "Esto suena como el curso Super Individual Work Method, ¿verdad?" Esto hace referencia a la memoria.

Ejemplo bueno: Inferir la industria solo a partir de A1 y A2. No preguntes "¿Es este el curso X?".

Banco de preguntas detallado: references/question-bank.md

Tres etapas:

• A. Posicionamiento del producto, 4 preguntas - Tipo de producto, industria, tono de marca, slug
• B. Relleno de contenido, 10 preguntas - Hero / Gancho / Acerca de / Aprender / Testimonios opcional / Audiencia / Información / Precios / FAQ / Ponente
• C. Cuenta atrás y CTA, 3-4 preguntas - Preguntar primero si se necesita cuenta atrás, luego detalles y texto del CTA

Reglas de Presentación de Preguntas

Cada pregunta debe mostrar:

• La pregunta en sí
• Ejemplos buenos y malos como directrices
• El campo de respuesta
• Comandos especiales: skip para preguntas opcionales y generate 3 for me para opciones generadas por IA

Preguntar Sí/No Antes de Secciones Opcionales

• B5a - Preguntar si incluir testimonios de estudiantes. Si es No, saltar B5b.
• C0 - Preguntar si incluir un temporizador de cuenta atrás. Si es No, saltar C1-C2.

Modo Experto, Ruta Rápida

Si el usuario dice "Voy a pegar todo de una vez", omitir la visualización de directrices, recibir el texto completo y clasificar todo en una sola pasada.

Recopilación de Respuestas

Guardar todas las respuestas finales en generated-pages/{slug}/answers.json en este formato:

{
  "product": { "type": "...", "industry": "...", "tone": ["...", "..."], "slug": "..." },
  "content": {
    "hero": { "title": "...", "subtitle": "..." },
    "hook": "...",
    "about": "...",
    "learn": ["...", "..."],
    "testimonials": [{ "name": "...", "quote": "...", "role": "..." }],
    "audience": { "fit": ["..."], "unfit": ["..."] },
    "info": [{ "label": "...", "value": "..." }],
    "pricing": [{ "plan": "...", "price": "...", "note": "..." }],
    "faq": [{ "q": "...", "a": "..." }],
    "speaker": { "name": "...", "bio": ["..."], "photo": "..." }
  },
  "countdown": {
    "enabled": true,
    "deadline": "2026-04-30T23:59:00+08:00",
    "onZero": "ended-state"
  },
  "cta": { "text": "Registrarse Ahora", "href": "#" }
}

Paso 1.5: Detectar DESIGN.md

Antes de entrar en el paso del sistema de diseño, comprobar si el usuario ya tiene directrices de diseño de marca:

# Buscar DESIGN.md en orden de prioridad
DESIGN_FILE=""
for f in \
  "$PROJECT_ROOT/DESIGN.md" \
  "$PROJECT_ROOT/design.md" \
  "$PROJECT_ROOT/.claude/DESIGN.md" \
  "$HOME/.claude/DESIGN.md"; do
  if [ -f "$f" ]; then
    DESIGN_FILE="$f"
    break
  fi
done

Si Existe DESIGN.md, Aplicarlo Directamente

Si se encuentra DESIGN.md, leer sus colores de marca, tipografía y reglas de estilo, luego usarlos directamente como sistema de diseño:

1. Analizar las secciones de colores, tipografía y estilo en DESIGN.md.
2. Confirmar con el usuario: "Encontré tu DESIGN.md. El color de marca es #XXX y la fuente es XXX. ¿Debo usar esta configuración?"
3. Si el usuario confirma, saltar los Pasos 2 y 3, luego ir directamente al Paso 4 para generar HTML.
4. Si el usuario dice que no, proceder normalmente al Paso 2.

Si No Existe DESIGN.md, Proceder al Paso 2

Usar el flujo de UUPM o el flujo alternativo.

Por qué existe este paso: La Lección 3-2 enseña a los estudiantes a crear DESIGN.md. Si /landing no lo lee, el estudiante ha creado directrices de marca que no se pueden usar, lo que rompe la experiencia. Un solo DESIGN.md debería impulsar salidas visuales como tarjetas sociales, presentaciones y páginas de venta.

---

Paso 2: Manejo del Sistema de Diseño, Solo Cuando No Existe DESIGN.md

Flujo detallado: references/uupm-integration.md

Detectar UUPM

test -d ~/.claude/skills/ui-ux-pro-max || \
test -d "$PROJECT_ROOT/.claude/skills/ui-ux-pro-max" || \
command -v uipro

Si alguna comprobación es exitosa, UUPM está instalado y el flujo entra en modo UUPM.

Si todas las comprobaciones fallan, mostrar el mensaje de persuasión de references/uupm-integration.md.

Ramificación Cuando UUPM No Está Instalado

Respuesta del usuario	Manejo
y / yes / ok	Ejecutar npm install -g uipro-cli && uipro init --ai claude --global, luego continuar al Paso 3 después de la instalación
n / no / later	Usar modo alternativo, ver references/fallback-design-rules.md
La instalación falla	Mostrar el error y preguntar si continuar con la alternativa

Modo UUPM: Generar Sistema de Diseño

Construir la consulta a partir de las respuestas de la Etapa A:

query="<industria A2> <palabras clave tono A3>"
slug="<A4>"

python3 ~/.claude/skills/ui-ux-pro-max/scripts/search.py \
  "$query" \
  --design-system \
  --persist \
  -p "$slug" \
  -f markdown

El resultado se escribe en design-system/MASTER.md. Leerlo y analizar colores, tipografía, patrón y antipatrones.

Paso 3: Presentar Opciones de Estilo

Modo UUPM

Usar el patrón recomendado por UUPM como opción principal. Luego elegir 2 opciones compatibles pero distintas de los otros 7 Estilos de Página de Venta, creando 3 opciones en total.

Por ejemplo, si UUPM recomienda Hero-Centric + Social Proof, añadir Conversion-Optimized y Trust & Authority como opciones de comparación.

Renderizar cada estilo como una mini tarjeta de vista previa usando <div class="cards">, haciendo referencia a la interfaz visual complementaria, para que el usuario pueda elegir.

Modo Alternativo

Claude genera 2 direcciones, por ejemplo minimalista vs. divertida. Cada dirección incluye su propio color, tipografía y reglas de espaciado. El usuario elige una.

Paso 4: Generar HTML

Leer esqueleto: templates/base.html

Leer JS de cuenta atrás: templates/countdown.js

Lógica de Ensamblaje

1. Leer templates/base.html.
2. Renderizar condicionalmente:
   • {{#if countdown.enabled}} - Mantener la cuenta atrás grande del hero y la barra fija inferior; de lo contrario, eliminar ambas secciones.
   • {{#if testimonials}} - Mantener la sección de testimonios; de lo contrario, eliminarla.
3. Rellenar contenido desde answers.json.
4. Inyectar tokens de diseño en <style>. En modo UUPM, leer MASTER.md. En modo alternativo, generarlos a partir de las tres reglas alternativas.
5. Inyectar countdown.js solo cuando la cuenta atrás está habilitada.

Navegación, Obligatoria y Fija en la Parte Superior

La navegación es un requisito fijo y debe incluirse en cada página generada:

• Marca: Lado izquierdo. Un nombre corto derivado del slug A4, o una abreviatura corta en inglés basada en el tipo de producto.
• Enlaces de secciones: Centro. Enlazar a Acerca de / Aprender / Audiencia / Precios / Ponente / FAQ. No incluir enlaces para secciones opcionales que no estén presentes.
• CTA de registro: Lado derecho. Etiqueta corta, como "Registrar" o "Comprar".
• Fijo al hacer scroll. Añadir sombra al hacer scroll mediante JS toggle .scrolled.
• Ocultar enlaces en móvil, por debajo de 860px.

Datos requeridos, inferidos de answers.json:

"nav": {
  "brandText": "Taller AI Solo",
  "linkAbout": "Taller",
  "linkLearn": "Lo Que Aprenderás",
  "linkAudience": "Para Quién Es",
  "linkPricing": "Planes",
  "linkSpeaker": "Instructor",
  "linkFaq": "FAQ",
  "ctaShort": "Registrar"
}

El estilo de la navegación debe seguir el sistema de diseño seleccionado, incluyendo tipografía, colores y estilo de divisor. La estructura y los enlaces permanecen iguales.

Estrategia de Archivo HTML Único

• Usar Tailwind vía CDN: <script src="https://cdn.tailwindcss.com"></script>
• CSS en línea en <style>
• JS en línea en <script>
• Usar URLs de imágenes proporcionadas por el estudiante

Esto facilita que los estudiantes copien y peguen en Framer, Notion o un CMS.

Paso 5: Salida

Escribir en generated-pages/{slug}/:

generated-pages/
└── {slug}/
    ├── index.html
    ├── design-system.md    # Solo en modo UUPM
    └── answers.json

Abrir el Archivo para el Usuario Después de Escribirlo

No decirle al usuario que abra el archivo manualmente. Abrirlo por él:

open "generated-pages/{slug}/index.html"

En macOS, esto abre el archivo en el navegador predeterminado. Si falla, como en un entorno Linux sin open, entonces decirle al usuario cómo abrirlo manualmente.

Mensaje final al estudiante:

Página de venta generada y abierta en el navegador.

Ubicación del archivo:
   generated-pages/{slug}/index.html

¿Quieres editar el texto? Edita el HTML directamente, o ejecuta /landing nuevamente para rellenar las respuestas. Se leerá el answers.json existente.

Manejo de Errores

Situación	Comportamiento
Error de permisos de npm	Sugerir ! sudo npm install -g uipro-cli, luego dejar que el estudiante lo ejecute manualmente
npm no existe	Sugerir instalar Node.js mediante Homebrew o nvm
Python3 no existe	Sugerir brew install python3
UUPM search.py falla	Registrar el error y alternativa automática
Herramientas Bash no disponibles	Capturar el error y alternativa mostrando comandos manuales
Ya existe una carpeta con el mismo slug	Preguntar si sobrescribir, añadir una marca de tiempo o elegir otro nombre

Fuera de Alcance

• Páginas de suscripción o membresía, páginas de consultoría de servicios
• Secciones de garantía o reembolso
• Páginas multilingües, actualmente solo inglés
• Integración de formularios como pago o suscripción; CTA es solo un enlace
• Despliegue real
• Comportamiento on-zero: new-price

Frases de Activación

/landing, "make a sales page", "help me make a landing page", "sales page"