Página de Aterrizaje Rápida (Landing Page Fast)

Producción opinada de páginas de aterrizaje. Decisiones ya tomadas por ti. Resultado: una página funcional, desplegada y alineada con la marca en 4–8 horas, no semanas.

Este skill incluye las reglas frontend-quality (accesibilidad, Core Web Vitals, mobile-first) y las cabeceras web-security-baseline — no tienes que pensar en ellas mientras construyes.

Stack (por defecto — no te desvíes sin motivo)

Astro + Tailwind + Componentes estilo shadcn/ui + Vercel.
TypeScript en modo estricto.
astro:assets para optimización de imágenes.
astro:transitions si es multipágina (manténlo mínimo — una sola página es más rápida de lanzar).

Cuándo desviarte:

Necesitas autenticación / contenido dinámico por usuario que evolucione hacia la app completa → usa Next.js 15 App Router en lugar de Astro.
El operador ya estandarizó SvelteKit para el proyecto → úsalo.

NO uses: WordPress, Wix, HTML+JS sin framework, CSS vainilla sin Tailwind. Son más lentos de lanzar y más difíciles de evolucionar.

Estructura de secciones (probada para audiencia técnica B2B/SaaS)

En este orden. No saltes ninguna sin motivo explícito:

Hero — titular + subtitular + CTA principal + imagen
Prueba social — logotipos, banner de estadísticas, testimonio (solo si son reales)
Problema — qué está mal del statu quo (aquí GANAS credibilidad)
Solución — cómo lo soluciona (máx. 3 características)
Cómo funciona — 3–4 pasos con diagrama o capturas de pantalla
Casos de uso — 2–3 personas, no más
Precios — muestra los precios a menos que realmente no puedas
FAQ — 5–8 preguntas reales, respuestas reales
CTA final — repite el valor, repite la acción
Pie de página — legal, redes sociales, contacto

Omite "Sobre nosotros / Equipo" a menos que la credibilidad del fundador sea la venta (la mayoría de productos de infraestructura B2B: omítelo; productos liderados por fundadores para consumidor: inclúyelo).

Anatomía del Hero

[Titular: 6-10 palabras, promesa de valor]
[Subtitular: 15-25 palabras, quién/qué/por qué]
[CTA principal] [CTA secundario — "ver cómo funciona"]
[Imagen: captura de pantalla, diagrama o bucle de demo de 30s]

Reglas del titular:

Promete un resultado, no una característica.
Específico antes que abstracto.
Incluye palabra clave principal para SEO + calificación.

Ejemplos:

❌ "Infraestructura potente para aplicaciones modernas"
✅ "Infraestructura RPC de Solana con p99 inferior a 50ms"
❌ "Plataforma transparente para licitaciones públicas"
✅ "Participa en licitaciones públicas en 10 minutos"

Valores por defecto específicos del proyecto

Landing de [Proyecto A]

Mercado localizado principal, inglés en /en cuando se necesita un segundo idioma.
Hero: captura de pantalla del dashboard con una tarjeta de licitación resaltada.
Señales de confianza: referencias legales (insignias de cumplimiento relevantes), logotipo de auditoría, certificaciones regulatorias si aplica.
Color: color primario de la marca + crema neutro + acento sobrio.
Requisito estricto mobile-first: la mayoría de usuarios están en teléfonos.
Captura de formulario: WhatsApp + email (WhatsApp es enorme en AR para PYMES).

Landing de [Proyecto B]

Mercado localizado principal, inglés en /en cuando se necesita un segundo idioma.
Confianza, confianza, confianza. Insignias de cumplimiento, visualización de encriptación, mensajes de control del paciente.
Estilo fotográfico: cálido, humano, NO tecnico/frío.
Color: paleta más cálida que [Proyecto A] (terracota, salvia, crema).
Formularios mínimos — solo email + selector "Soy [paciente | médico | clínica]".
Aviso de privacidad prominente (referencias aplicables a leyes locales de derechos del paciente y protección de datos personales).

Página de producto de [Empresa]

Inglés primero, sin localización.
Con mucho código. Fragmentos en vivo que se copian y pegan.
Números de rendimiento por todas partes ("p99 < 50ms", "100k TPS"), con enlace a la metodología de benchmark.
CTA de registro de nivel gratuito.
Color: paleta de marca de [Empresa] según los resultados de brand-creation.

Cronograma hora por hora

Hora 1: Configuración

pnpm create astro@latest <proyecto> -- --template basics --typescript strict
cd <proyecto>
pnpm add @astrojs/tailwind @astrojs/sitemap @astrojs/vercel
pnpm dlx astro add tailwind sitemap vercel
pnpm add -D @astrojs/check

Inicializa el proyecto en Vercel (la CLI detecta Astro automáticamente):

pnpm dlx vercel link
pnpm dlx vercel deploy --prod  # despliegue base vacío, valida pipeline

Hora 2-3: Copia + estructura

Escribe el texto primero en markdown (en docs/landing-copy.md).
No diseñes hasta que el texto sea real.
Sección por sección. Construye con la vista mobile-first.

Hora 4: Pulido visual

Imagen del Hero mediante el skill nanobanana O una captura de pantalla real.
Ilustraciones de las secciones consistentes (un solo estilo — no mezcles).
Escala de espaciado de Tailwind estrictamente (sin valores arbitrarios).

Hora 5: Formularios + analíticas

El formulario va a Resend (correo transaccional) O a Supabase (BD de lista de espera) mediante una función Edge de Vercel.
Script de Plausible (auto-alojado en Walter-VM o en la nube por €9/mes).
Prueba el flujo completo: formulario → confirmación por correo → fila en BD.

Hora 6: SEO + cabeceras

Metaetiquetas (title, description, og:, twitter:) por página.
URL canónica.
Datos estructurados JSON-LD (Organization o Product).
Robots.txt + sitemap.xml (el plugin de Astro lo genera automáticamente).

Cabeceras de seguridad (en vercel.json o middleware):

{
  "headers": [{
    "source": "/(.*)",
    "headers": [
      { "key": "Strict-Transport-Security",
        "value": "max-age=31536000; includeSubDomains; preload" },
      { "key": "X-Content-Type-Options", "value": "nosniff" },
      { "key": "Referrer-Policy", "value": "strict-origin-when-cross-origin" },
      { "key": "Permissions-Policy",
        "value": "camera=(), microphone=(), geolocation=()" },
      { "key": "Content-Security-Policy",
        "value": "default-src 'self'; img-src 'self' data: https:; style-src 'self' 'unsafe-inline'; script-src 'self' https://plausible.io" }
    ]
  }]
}

Hora 7: Pasada de rendimiento

Ejecuta Lighthouse. LAS CUATRO puntuaciones ≥ 95.
Tamaños de imagen correctos (formatos de nueva generación, dimensionados para el viewport).
Bundle < 150KB comprimido (gzip) inicial.
Elemento LCP precargado.

Hora 8: Despliegue + verificación

Dominio personalizado mediante Vercel (DNS de Cloudflare apuntando a Vercel).
Despliegue en producción.
Prueba en un teléfono real.
Envía a Google Search Console.
Primer evento de analíticas registrado.

Presupuesto de rendimiento (OBLIGATORIO)

Métrica	Presupuesto	Herramienta
Rendimiento Lighthouse	≥ 95	CI
Accesibilidad Lighthouse	≥ 95	CI
Buenas Prácticas Lighthouse	≥ 95	CI
SEO Lighthouse	≥ 95	CI
LCP en 3G	< 2.5s	WebPageTest
INP p75	< 200ms	RUM (Plausible si está habilitado, o librería web-vitals)
CLS	< 0.1	RUM
JS inicial comprimido (gzip)	< 150KB	bundlewatch
Tiempo hasta el primer byte	< 200ms	Vercel edge

Si alguna métrica falla: arréglala antes del lanzamiento. Las páginas de marketing con malas métricas hunden la conversión de inmediato.

Reglas de redacción

Para producto técnico ([Empresa]):

Lidera con el sustantivo que busca el cliente ("RPC de Solana").
Estadística temprana — da una razón para creer en los primeros 5 segundos.
Muestra > cuenta: fragmento de código, captura de pantalla, números reales.
Un CTA, repetido.

Para mercados de consumo / localizados ([Proyecto A], [Proyecto B]):

Palabras sencillas, frases cortas.
Lidera con la pregunta que el usuario se está haciendo.
Señales de confianza (cumplimiento, insignias de seguridad) más visibles.
Varios CTAs está bien (registrarse, aprender más, contactar).

Captura de formularios

// Función Edge de Vercel: /api/signup.ts
export const config = { runtime: 'edge' }

export default async function handler(req: Request) {
  if (req.method !== 'POST') return new Response('Method Not Allowed', { status: 405 })

  const { email, source } = await req.json()

  // Limitar tasa por IP mediante Vercel KV / Upstash
  // Validar email con zod
  // Insertar en tabla waitlist de Supabase (protegida por RLS)
  // Disparar correo de confirmación mediante Resend
  // Devolver 200 o error específico

  return Response.json({ ok: true })
}

NUNCA:

Confíes en que el cliente "recuerde" el estado del envío.
Omitas la validación del lado del servidor.
Olvides la limitación de tasa (un usuario, un bot, un DDoS — el mismo error).

Valores por defecto de analíticas

Plausible (auto-alojado en Walter-VM o en la nube):

<script defer data-domain="[proyecto-a].com.ar" src="https://plausible.<dominio>/js/script.js"></script>

Rastrea:

Vistas de página (por defecto)
Clics salientes (data-domain="..." data-track-outbound="true")
Envíos de formularios (evento personalizado)
Profundidad de desplazamiento en páginas largas (evento personalizado, con rebote)

NO hagas:

Agregar Google Analytics. Pesado, hostil a la privacidad, ambiguo en UE-AR.
Agregar herramientas de repetición de sesiones. Especialmente no para [Proyecto B] (riesgo de PHI).
Agregar mapas de calor. Pesados + extraños.

Anti-patrones (no hagas esto)

Hero con carrusel — nadie hace clic más allá de la diapositiva 1.
Demasiados CTAs — "Regístrate" + "Más información" + "Ver demo" + "Leer blog" en el hero = parálisis por decisión.
Fotos de stock de personas sonrientes diversas en oficinas — señal instantánea de "SaaS genérico".
Marquesina de 50 logotipos de competidores diminutos — elige 4-6 legibles.
Muro de características — elige 3 o 6, no 27.
Video con sonido que se reproduce automáticamente — rebote instantáneo.
Ventana modal que aparece antes de cargar la página — rebote instantáneo.
Banner de cookies que bloquea la página — ilegal en la UE, molesto en todas partes. Usa una notificación mínima y no bloqueante.

Cuándo hacer pruebas A/B

No hasta que tengas 1k+ visitantes/semana. Por debajo de eso, el ruido domina.

Cuando estés listo:

Prueba UN elemento a la vez (titular, imagen del Hero, texto del CTA).
Usa las pruebas A/B de Vercel o la división de pruebas de Plausible.
Significancia estadística antes de declarar un ganador.

Reglas estrictas

El presupuesto de 8h es estricto. Si estás en la hora 6 y aún estás diseñando, despliega el trabajo de la hora 7 y omite el pulido de la hora 8. Mejor imperfecto en vivo que perfecto en tu repositorio.
Cada script externo auditado. No "ya que estamos, agreguemos Hotjar / FullStory / Drift". Cada script ralentiza la página y añade riesgo de privacidad.
Sin cambios en producción sin un despliegue de vista previa aprobado.
Lighthouse falla = lanzamiento bloqueado.

Integración

nanobanana para generación de imágenes Hero / ilustraciones.
Resultados de brand-creation para paleta, tipografía, voz.
Reglas frontend-quality integradas (accesibilidad + rendimiento).
Cabeceras web-security-baseline integradas.
seo-keyword-research (pendiente en backlog) informa el texto y los meta.
Skill pr-review para la revisión final antes de fusionar.

Lo que este skill NO hace

Aplicaciones multipágina con autenticación, paneles, etc. → empieza con Next.js.
Configuración de blog. Usa Astro Starlight o un framework de documentación tipo Mintlify.
Automatización de marketing por correo. Usa ConvertKit / Beehiiv.
Chat de atención al cliente. Si es necesario, usa Crisp (opción argentina, multilingüe).

Página de Aterrizaje Rápida

¿Qué es Página de Aterrizaje Rápida?

Preguntar en tu IA favorita

Documentación