Communitygithub.com

Página de aterrizaje

Redacta y construye una página de aterrizaje que pruebe la demanda de una oferta: un visitante, una promesa, pruebas reales, una llamada a la acción, una página HTML accesible de un solo archivo y los números para leer después del lanzamiento (visitantes, registros, conversión por fuente).

¿Qué es Página de aterrizaje?

Esta habilidad (skill) está diseñada para fundadores y equipos de producto que necesitan validar una idea de negocio de forma rápida y honesta. Permite crear una página de aterrizaje de un solo archivo HTML que sigue las mejores prácticas de marketing directo y Growth Design. Su propósito principal es ser un 'smoke test': si extraños no dejan su correo, es poco probable que paguen. La habilidad se enfoca en definir claramente un visitante objetivo, una promesa única, pruebas reales (citas, números, logos con permiso) y una única llamada a la acción. Además, guía al usuario en la planificación del test (fuentes de tráfico, número de visitantes, tasa de conversión objetivo y duración) y en la interpretación de los resultados después del lanzamiento. Es compatible con plataformas como Claude Code, Cursor, Codex, y otras herramientas de desarrollo de IA para agentes. Su funcionamiento se basa en una metodología paso a paso que prioriza la honestidad, la accesibilidad web (WCAG 2.2) y la medición de resultados. Al final, genera un plan de página, un borrador de copia y el código HTML accesible, listo para ser desplegado.

Compatible con~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/teodstr/garage/tree/HEAD/skills/landing-page

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

Documentación

¿Qué hace Página de aterrizaje?

Una página de aterrizaje suele ser el primer experimento real de una startup: si desconocidos no quieren dejar su correo, es poco probable que paguen. Esta habilidad redacta la página, la construye como un único archivo HTML y establece los números que determinan qué sucede a continuación.

Cuándo usarla

  • Para probar la demanda antes de construir (un smoke test), para recoger una lista de espera o para tomar pedidos anticipados.
  • Después de brand-identity si ya existen un nombre y colores, pero una página simple también funciona.
  • No para un sitio web completo ni una estrategia de motores de búsqueda.

Entradas

  1. Visitante objetivo, problema, promesa y cualquier prueba real (citas, números, logotipos con permiso).
  2. La única acción deseada: un correo electrónico, un pedido anticipado, una solicitud de demo.
  3. Elementos de marca si existen, y a dónde deben ir los datos del formulario.

Método

  1. Una página, un visitante, una acción. Elige el visitante objetivo y la única llamada a la acción; elimina enlaces que se alejen de ella.
  2. Escribe primero la parte superior de la página: un titular que exprese el resultado para el visitante (no la tecnología), una línea que explique cómo, la llamada a la acción y una imagen del producto o del resultado. Prueba: un extraño entiende qué es y para quién es en cinco segundos.
  3. Luego el resto: el problema en las propias palabras de los clientes (de customer-interviews), cómo funciona en tres pasos, pruebas reales, respuestas a las objeciones principales (precio, confianza, tiempo), una breve sección de preguntas frecuentes y la llamada a la acción nuevamente.
  4. Mantente honesto: si el producto aún no existe, di "únete a la lista de espera" o "pedido anticipado, entrega prevista para…". Nunca inventes testimonios, contadores ni escasez. Para pedidos anticipados, indica la fecha de entrega y las condiciones de reembolso.
  5. Constrúyela como un único archivo HTML: encabezados semánticos, texto alternativo en las imágenes, contraste legible, funciona en un teléfono. El formulario envía los datos a un servicio que el fundador elija (una herramienta de formularios, una herramienta de newsletter o una hoja de cálculo), y un breve aviso de privacidad explica cómo se usarán los correos electrónicos (GDPR en la Unión Europea).
  6. Planifica la prueba: de dónde vendrán los visitantes (importa tanto como la página), cuántos, la tasa de conversión objetivo decidida de antemano y la duración. Prueba como máximo dos titulares.
  7. Lee los resultados: visitantes y conversión por fuente, preguntas que hicieron las personas y la decisión contra los criterios establecidos antes del lanzamiento.

Salida

### Plan de página
Visitante: … | Promesa: … | Llamada a la acción: … | Éxito si …% de … visitantes de … en … días

### Copia
Titular: … | Línea debajo: … | Botón: …
Secciones: problema, cómo funciona, pruebas, objeciones, preguntas frecuentes

### HTML
<un archivo accesible, dirección del formulario para configurar, aviso de privacidad incluido>

Nivel de calidad

  • El titular expresa un resultado para un visitante específico y la página tiene una única llamada a la acción principal.
  • Cada afirmación, testimonio y número en la página es real; nada finge escasez ni prueba social.
  • La página es accesible, funciona en un teléfono y explica cómo se utilizan los datos recopilados.
  • El plan de tráfico y el criterio de éxito se escriben antes del lanzamiento.
  • Está escrita en el idioma del usuario, con los términos a continuación.

Terminología

InglésFrançaisEspañol
Landing pagePage d'atterrissage (landing page)Página de aterrizaje (landing page)
Call to action (CTA)Appel à l'actionLlamada a la acción
Above the foldHaut de page, partie visible sans défilerPrimera pantalla
Conversion rateTaux de conversionTasa de conversión
WaitlistListe d'attenteLista de espera
A/B testTest A/BPrueba A/B

Fuentes

  • Krug, S. (2014). Don't Make Me Think, Revisited (3ª ed.). New Riders.
  • Ries, E. (2011). The Lean Startup. Crown Business.
  • W3C. (2023). Web Content Accessibility Guidelines (WCAG) 2.2. https://www.w3.org/TR/WCAG22/

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

Skills relacionados