Ship Page

Crea páginas de aterrizaje interactivas y ricas en animaciones que se ejecuten completamente en el navegador como un único archivo HTML.

Esta habilidad ayuda a quienes no son diseñadores a crear páginas de producto profesionales mediante exploración visual (“muestra, no digas”), y luego genera páginas de aterrizaje con calidad de producción e interactividad real — no maquetas estáticas.

Principios Fundamentales

Cero Dependencias — Un único archivo HTML con CSS/JS en línea. Sin npm, sin herramientas de compilación, sin frameworks. Un solo archivo HTML sobrevivirá a cualquier proyecto de React.
Muestra, No Digas — Las personas no pueden describir lo que quieren, pero lo reconocen cuando lo ven. Genera previsualizaciones visuales, deja que elijan.
Anti-AI-Slop — Sin degradados morados sobre blanco. Sin plantillas SaaS genéricas. Cada página debe sentirse hecha a medida para el producto.
Interactivo por Defecto — Las páginas de aterrizaje no son diapositivas. Tienen animaciones de desplazamiento, estados hover, contadores de datos, efectos de partículas y microinteracciones que hacen que los visitantes se queden.
Listo para Envío — La salida funciona de inmediato. Coloca el archivo HTML en cualquier lugar — GitHub Pages, Vercel, Netlify, o simplemente ábrelo en un navegador.

Modo de Detección

Modo A: Página Nueva — Crear desde cero. Ir a la Fase 1.
Modo B: Conversión de README — Convertir un README de GitHub o una descripción de producto en una página de aterrizaje. Extraer contenido, luego ir a la Fase 1 Paso 2 (saltar preguntas de contenido, ir directamente al estilo).
Modo C: Mejora — Mejorar una página de aterrizaje HTML existente. Leerla, entender la estructura, mejorar preservando el contenido. Seguir las reglas de viewport y densidad de secciones.

Fase 1: Descubrimiento

Entender el producto y recopilar contenido. Hacer TODAS las preguntas en una sola llamada AskUserQuestion.

Pregunta 1 — Tipo de Producto (encabezado: "Producto"): ¿Qué estás construyendo? Opciones: SaaS / Herramienta para Desarrolladores / Aplicación Móvil / Proyecto de Código Abierto / Marca Personal / Otro

Pregunta 2 — Contenido (encabezado: "Contenido"): ¿Qué debería incluir la página? Opciones: Pegaré mi contenido / Extraer de mi README / Solo descríbelo para mí / Tengo un documento

Pregunta 3 — Secciones Clave (encabezado: "Secciones", multiSelect: true): ¿Qué secciones necesitas? Opciones: Hero con CTA / Cuadrícula de Características / Cómo Funciona / Precios / Testimonios / FAQ / Estadísticas y Métricas / Registro al Boletín / Insignia de Estrellas de GitHub

Pregunta 4 — Destino de Lanzamiento (encabezado: "Lanzamiento"): ¿Dónde vivirá esta página? Opciones: GitHub Pages / Sitio web independiente / Lanzamiento en Product Hunt / Solo explorando

Si el usuario proporciona contenido (README, descripción, documento), proceder a:

Paso 1.1: Análisis de Contenido

Analizar el contenido proporcionado y extraer:

Nombre del producto y descripción en una línea
Características clave (apuntar a 3-6)
Señales del público objetivo
Cualquier métrica/número mencionado
Llamada a la acción (¿qué deben hacer los visitantes?)

Confirmar mediante AskUserQuestion (encabezado: "Verificación de Contenido"): "Esto es lo que extraje — ¿te parece correcto?" Opciones: Se ve bien / Déjame ajustar

Fase 2: Descubrimiento de Estilo

Esta es la fase de "muestra, no digas". La mayoría de las personas no pueden articular preferencias de diseño en palabras.

Paso 2.1: Selección de Vibra

Preguntar mediante AskUserQuestion (encabezado: "Vibra", multiSelect: true, max 2): ¿Qué sensación deberían tener los visitantes? Opciones: Futurista y Tecnológico / Limpio y Minimalista / Audaz y Energético / Oscuro y Premium / Divertido y Creativo / Corporativo y Confiable

Paso 2.2: Generar Previsualizaciones de Estilo

Basado en la selección de vibra, generar 3 previsualizaciones HTML distintas de una sola sección que muestren:

Opciones tipográficas (combinación de fuente para encabezado y cuerpo)
Paleta de colores (fondo, texto, acento, CTA)
Diseño de sección Hero con el nombre del producto
Una microinteracción o animación
Atmósfera general (tratamiento de fondo, espaciado)

Cada previsualización debe ser un archivo HTML completo y funcional que muestre solo la sección Hero estilizada de tres maneras completamente diferentes. Guardar las previsualizaciones en .ship-page/previews/.

Leer references/STYLE_PRESETS.md para definiciones de presets curadas. Usar los presets como BASE, luego personalizar para el producto específico.

Confirmar mediante AskUserQuestion (encabezado: "Elige tu Estilo"): "¿Qué dirección resuena contigo?" Opciones: Estilo A / Estilo B / Estilo C / Mezclar elementos (describe)

Paso 2.3: Selección Directa de Preset (Alternativa)

Si el usuario ya sabe lo que quiere o dice "solo hazlo oscuro/minimalista/tecnológico":

Leer references/STYLE_PRESETS.md
Emparejar con el preset más cercano
Saltar la generación de previsualizaciones, ir a la Fase 3

Fase 3: Generar Página de Aterrizaje

Generar la página de aterrizaje completa usando el contenido de la Fase 1 y el estilo de la Fase 2.

Reglas de Estructura

Toda página de aterrizaje sigue esta arquitectura:

<!DOCTYPE html>
<html lang="es">
<head>
  <!-- Fuentes, variables CSS, todos los estilos en línea -->
  <!-- Sin dependencias externas excepto Google Fonts + Font Awesome CDN -->
</head>
<body>
  <nav><!-- Navegación fija con nombre del producto + CTA --></nav>
  
  <section class="hero"><!-- Above the fold: titular, subtitular, CTA --></section>
  <section class="features"><!-- Cuadrícula o muestra de características --></section>
  <section class="social-proof"><!-- Estadísticas, testimonios, logotipos --></section>
  <!-- ... secciones adicionales según sea necesario ... -->
  <section class="cta-final"><!-- Llamada a la acción final --></section>
  <footer><!-- Enlaces, derechos de autor --></footer>

  <script>
    // Animaciones de desplazamiento, contadores, interacciones — todo en línea
  </script>
</body>
</html>

Requisitos Técnicos Obligatorios

Ajuste al Viewport — Cada sección debe sentirse "completa" pero nunca desbordar. Usar min-height: 100vh para el hero, alturas proporcionales para las demás.
Responsive — Debe funcionar en móvil. Usar clamp() para todos los tamaños de fuente, unidades relativas al viewport para el espaciado.
Animaciones de Desplazamiento — Usar IntersectionObserver para revelar al desplazarse. Los elementos deben animarse al entrar mientras el usuario se desplaza.
Rendimiento — Preferir animaciones CSS sobre JS. will-change en elementos animados. Debouncer en manejadores de desplazamiento.
Accesible — HTML semántico, contraste suficiente, consulta de medios prefers-reduced-motion para todas las animaciones.

Límites de Densidad por Sección

Por sección (para evitar saturación):

Hero: 1 titular (máx. 8 palabras), 1 subtitular (máx. 20 palabras), 1-2 CTAs, efecto de fondo opcional
Características: Máx. 6 tarjetas. Cada tarjeta: icono + título (3-4 palabras) + descripción (máx. 15 palabras)
Estadísticas/Métricas: Máx. 4 contadores
Testimonios: Máx. 3 citas
Precios: Máx. 3 niveles
FAQ: Máx. 6 elementos (usar acordeón/colapsable)

¿Demasiado contenido para una sección? Dividir en dos secciones con un quiebre visual entre ellas.

Arquitectura CSS

:root {
  /* Tipografía — siempre usar clamp() */
  --font-display: 'TU_ELECCIÓN', sans-serif;
  --font-body: 'TU_ELECCIÓN', sans-serif;
  --heading-size: clamp(2rem, 5vw, 4.5rem);
  --body-size: clamp(0.875rem, 1.5vw, 1.125rem);
  
  /* Colores — definir paleta completa */
  --bg-primary: #...;
  --bg-secondary: #...;
  --text-primary: #...;
  --text-secondary: #...;
  --accent: #...;
  --accent-hover: #...;
  --cta-gradient: linear-gradient(...);
  
  /* Espaciado */
  --section-padding: clamp(3rem, 8vw, 8rem);
  --content-width: min(90vw, 1200px);
  
  /* Animación */
  --transition-fast: 0.3s ease;
  --transition-smooth: 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Clase base de revelación por desplazamiento */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--transition-smooth), transform var(--transition-smooth);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

Elementos Esenciales de JavaScript

Incluir siempre estos patrones:

// Revelación por desplazamiento con IntersectionObserver
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('visible');
    }
  });
}, { threshold: 0.1 });

document.querySelectorAll('.reveal').forEach(el => observer.observe(el));

// Contadores animados (para secciones de estadísticas)
function animateCounter(el, target, duration = 2000) { ... }

// Desplazamiento suave para enlaces de navegación
document.querySelectorAll('a[href^="#"]').forEach(anchor => { ... });

Leer references/SECTION_LIBRARY.md para plantillas de secciones completas con patrones HTML, CSS y JS para cada tipo de sección.

Lista de Verificación Anti-AI-Slop

Antes de generar, verificar:

Las fuentes NO son Inter, Roboto, Arial ni valores predeterminados del sistema
El esquema de colores NO es degradado morado sobre blanco
El Hero no usa las palabras "Revolucionar" ni "Potenciar"
Los botones CTA tienen animaciones hover, no solo cambio de color
El fondo tiene textura/profundidad — NO un color sólido plano
Al menos una elección de diseño inesperada (diseño asimétrico, tipografía audaz, divisor de sección creativo)

Entrega

Guardar el archivo HTML con un nombre descriptivo: {nombre-producto}-landing.html
Abrir en el navegador: open {nombre-producto}-landing.html
Presentar al usuario y pedir comentarios

Fase 4: Iteración

Después de la generación inicial, preguntar mediante AskUserQuestion (encabezado: "Comentarios"): "¿Cómo se ve?" Opciones: ¡Envíalo! / Ajustar colores-fuentes / Cambiar diseño / Agregar-quitar secciones / Empezar de nuevo con otro estilo

Para modificaciones, seguir estas reglas:

Agregar contenido: Verificar primero los límites de densidad de sección. Si se exceden, dividir secciones.
Cambiar estilo: Actualizar variables CSS, no reescribir la estructura.
Agregar secciones: Leer references/SECTION_LIBRARY.md para la plantilla de sección, insertar en orden lógico.
Eliminar secciones: Eliminar limpiamente, verificar que no se rompan referencias de JS.

Referencias (Divulgación Progresiva)

Esta habilidad usa divulgación progresiva — cargar archivos de referencia solo cuando sea necesario:

Archivo	Cuándo leer	Qué contiene
`references/STYLE_PRESETS.md`	Fase 2 (descubrimiento de estilo)	5 presets de estilo curados con variables CSS completas, combinaciones de fuentes y tratamientos de fondo
`references/SECTION_LIBRARY.md`	Fase 3 (generación)	Plantillas HTML/CSS/JS completas para cada tipo de sección (hero, características, precios, etc.)

Ship Page — prompt→landing interactiva (1 HTML)

¿Qué es Ship Page — prompt→landing interactiva (1 HTML)?

Preguntar en tu IA favorita

Documentación