Cuándo usar
- El usuario quiere una landing page nueva (producto, servicio, evento, portfolio, waitlist)
- Quiere rediseñar una landing existente para que se vea profesional y única
- Pide animaciones, efectos de scroll o microinteracciones en una página de marketing
- Está en fase de planificación: qué secciones, qué mensaje, qué estructura
Stack (y por qué)
| Pieza | Elección | Por qué | Alternativa descartada |
|---|---|---|---|
| Framework | Astro 5 | Estático por defecto (0 JS de base), componentes, astro:assets para imágenes, deploy = subir dist/ | Next.js (overkill para landing, deploy más complejo), HTML plano (sin componentes ni optimización) |
| Estilos | Tailwind CSS v4 | Tokens propios vía @theme en CSS, sin config JS, purga automática | UI kits (shadcn/DaisyUI/Flowbite → look genérico), CSS puro (lento para iterar) |
| Animación | GSAP 3.13+ (ScrollTrigger, SplitText) | Estándar de la industria para scroll/timeline; desde v3.13 TODOS los plugins son gratis | Framer Motion (atado a React), AOS (limitado, se nota "de plantilla") |
| Smooth scroll | Lenis | Ligero (~4kb), integración documentada con ScrollTrigger | Locomotive Scroll (más pesado, menos mantenido) |
| Deploy | Netlify / Cloudflare Pages / Vercel | Conectar repo → push → deploy; output estático sin servidor | VPS (innecesario para estático) |
Regla dura: NO instalar librerías de componentes UI. El diseño es propio — eso es exactamente lo que separa esta skill de una plantilla.
Flujo de trabajo (obligatorio, en este orden)
NUNCA empieces por el código. Una landing sin brief es una plantilla con otro nombre.
- Brief — completa assets/brief-template.md CON el usuario. Si faltan objetivo, audiencia o CTA: PREGUNTA antes de seguir.
- Dirección de diseño — sigue references/design-direction.md: personalidad → tipografía → color → layout → firma visual. Materialízala en assets/design-tokens.css.
- Arquitectura de secciones — define el arco narrativo (tabla abajo) y el copy de titulares antes de maquetar.
- Construcción — sección por sección, mobile-first (390px primero). Animaciones con references/animation-recipes.md.
- Auditoría — checklist de entrega (abajo). No se entrega sin pasarla.
- Deploy — build estático + hosting (comandos abajo).
Arco narrativo (estructura base)
| # | Sección | Trabajo que hace |
|---|---|---|
| 1 | Hero | Propuesta de valor entendible en <5s + CTA primario |
| 2 | Problema / contexto | Nombra el dolor que el visitante reconoce |
| 3 | Solución / beneficios | Cómo lo resuelves — beneficios, no características |
| 4 | Prueba social | Testimonios reales, logos, métricas |
| 5 | Cómo funciona | Pasos, demo, screenshots |
| 6 | Objeciones | FAQ, garantía, precios |
| 7 | CTA final | Repite la MISMA acción única del hero |
Adapta, funde o elimina secciones según el brief — no todas las landings llevan las 7.
Patrones críticos
- Una sola conversión: toda la página empuja hacia UNA acción. Dos CTAs distintos = brief mal hecho.
- Mobile-first real: se diseña y construye primero a 390px; desktop es la progresión, no al revés.
- LCP intocable: el elemento LCP (headline o imagen del hero) nunca queda
opacity: 0en CSS. Las entradas se hacen congsap.from()(sin JS la página se ve completa) y duran ≤ 1s en total. prefers-reduced-motion: TODA animación vive dentro degsap.matchMedia(). Sin excepciones.- Islands mínimas: JS solo donde hay interacción real. Un acordeón FAQ es
<details>, no un componente hidratado. - Imágenes: siempre
astro:assets(<Image>), AVIF/WebP, dimensiones explícitas,loading="lazy"salvo el hero. - Fuentes: self-hosted (woff2 local o Fontsource),
font-display: swap, máximo 2 familias, preload de la display.
Checklist antes de entregar
- Lighthouse mobile ≥ 95 en Performance, Accessibility y SEO
- CLS = 0 (dimensiones en imágenes, fallback de fuente ajustado)
- Animaciones desactivadas con
prefers-reduced-motion: reduce - Contraste AA: 4.5:1 texto, 3:1 UI grande
- Navegable por teclado, focus visible, un solo
h1 - Meta description, OG tags, favicon, título único
- Probada a 390px, 768px y 1440px
- Test de la marca: tapando el logo, ¿la página podría ser de otra empresa? Si sí → volver a fase 2
Comandos
# Crear proyecto
pnpm create astro@latest mi-landing -- --template minimal --typescript strict
cd mi-landing
pnpm astro add tailwind
pnpm add gsap lenis
# Desarrollo y build
pnpm dev
pnpm build && pnpm preview
# Deploy (elige uno; en Netlify/Vercel/Cloudflare: build "pnpm build", output "dist")
npx wrangler pages deploy dist # Cloudflare Pages directo
npx netlify deploy --prod --dir=dist # Netlify directo
Recursos
- Templates: assets/brief-template.md — cuestionario de planificación; assets/design-tokens.css — base del sistema de diseño propio (Tailwind v4
@theme) - Guías: references/design-direction.md — dirección de arte anti-genérica; references/animation-recipes.md — recetas GSAP/ScrollTrigger/Lenis listas para adaptar