Landing page latam

Skill MagnusCole/alpha-skills-latam/skills/landing-page-latam

Skills SOTA de marketing digital en español para founders LATAM, ejecutables por agentes IA. Formato Anthropic Skills.

Install

npx -y skills add MagnusCole/alpha-skills-latam --skill landing-page-latam

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Diseña y genera landing pages de conversión usando Next.js 14+ App Router, Tailwind CSS y shadcn/ui, optimizadas para audiencia LATAM en español. Cubre arquitectura de secciones (hero, social proof, oferta, FAQ, CTA), Core Web Vitals (LCP <1s, CLS <0.1), métodos de pago locales (Stripe, MercadoPago, Culqi, Yape, PSE), y dolarización de precios. Use cuando el usuario diga "crea una landing page", "redesign de mi homepage", "página de ventas para [producto]", "landing para mi curso/SaaS", o necesite TSX listo para producción.

SKILL.md

9.1 KB, as published. Nobody here has run it

Landing Page LATAM

Landing pages que convierten para founders LATAM. No "wow" — convierten. Stack default: Next.js 14+ App Router + TypeScript + Tailwind + shadcn/ui. Optimizado para Core Web Vitals porque Google penaliza en LATAM tan duro como en US.

Cuándo activarte

"Crea una landing para..."
"Redesign de mi homepage"
"Página de ventas para mi [curso/SaaS/servicio]"
Usuario te muestra una landing actual con mala conversión
Lanzamiento de producto/feature

Diagnóstico antes de codear

Exigir siempre:

ICP exacto (no "PyMEs" — "PyMEs peruanas de logística con 5-50 empleados que facturan SUNAT").
Awareness stage (Schwartz). Determina la arquitectura de secciones.
Promesa única medible. Si no la tienes → al skill copywriting-latam primero.
Tipo de oferta: SaaS subscription / curso one-time / consultoría high-ticket / waitlist / lead magnet gratis.
Tráfico esperado: cold (ads) / warm (email/social) / hot (referidos). Cambia drásticamente el copy y la longitud.
Métodos de pago necesarios (ver tabla LATAM abajo).
Branding existente: colores, fuentes, tono. Si no hay → propone 2 opciones.

Sin ICP + promesa + awareness, no escribas TSX. Es perder tiempo.

Arquitectura por tipo

SaaS B2B (cold traffic)

1. Hero                    — headline + subhead + CTA primario + screenshot del producto
2. Logos de clientes       — solo si reconocibles. Si no, skip.
3. Problema agitado        — 3 puntos de dolor en lenguaje del ICP
4. Solución (3 features)   — qué hace, no cómo
5. Demo / loom embed       — opcional pero alto valor
6. Casos con números       — "X resultado en Y tiempo" con foto + nombre
7. Pricing                 — 3 tiers max, USD primario
8. FAQ                     — objeciones #1, #2, #3 contestadas
9. CTA final               — refuerzo del CTA primario

Curso / Infoproducto

1. Hero (promesa + transformación)
2. Para quién es / para quién NO es
3. Lo que vas a aprender (módulos)
4. El instructor (autoridad)
5. Testimonios de alumnos con resultados
6. Lo que recibes (value stack visual)
7. Pricing + garantía
8. FAQ
9. Bonus + urgencia
10. CTA final

Waitlist / Pre-launch

1. Hero (curiosidad + 1 CTA: tu email)
2. Qué es (3-4 frases máximo)
3. Por qué importa ahora
4. Quiénes ya están en la lista (logos / countercount)
5. Form prominente

Consultoría / Servicios high-ticket

1. Hero (resultado específico + para quién)
2. Casos con métricas duras
3. El proceso (3-5 pasos)
4. Quién soy / por qué confiar
5. CTA aplicar (calendly o form de calificación, NUNCA pricing)

Regla LATAM: high-ticket NO muestra precio. Genera fricción y descalifica al tire-kicker.

Pago: específico para LATAM

País	Métodos críticos	Cómo integrar
México	Tarjeta, OXXO, SPEI	Stripe + Conekta o MercadoPago
Argentina	Tarjeta, MercadoPago, transferencia	MercadoPago Checkout Pro
Brasil	Pix, boleto, tarjeta	Stripe (Pix soportado 2025+) o Iugu
Perú	Yape, Plin, tarjeta, transferencia	Culqi o Izipay
Chile	Webpay, tarjeta, transferencia	Transbank / Khipu
Colombia	PSE, tarjeta, Nequi, Bancolombia QR	Wompi o ePayco
LATAM general USD	Tarjeta	Stripe + Paddle (MoR para impuestos)

Default recomendado para SaaS LATAM B2B: Stripe (USD) con fallback a MercadoPago por país. Para B2C bajo ticket: MercadoPago primario.

Hero: el 80/20 de la landing

Estructura:

<section className="min-h-[88vh] flex items-center px-6 lg:px-12">
  <div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-12 items-center">
    <div>
      <p className="text-sm uppercase tracking-wide text-muted-foreground">
        {/* Categoría: "Plataforma de cobranza" "Curso de marketing IA" */}
      </p>
      <h1 className="text-5xl lg:text-7xl font-bold tracking-tight mt-3">
        {/* Headline — promesa específica medible */}
      </h1>
      <p className="text-xl text-muted-foreground mt-6 max-w-xl">
        {/* Subhead — para quién, en qué tiempo, sin qué fricción */}
      </p>
      <div className="flex gap-4 mt-8">
        <Button size="lg">{/* CTA primario */}</Button>
        <Button size="lg" variant="ghost">{/* CTA secundario opcional */}</Button>
      </div>
      <p className="text-sm text-muted-foreground mt-4">
        {/* Trust line: "Usado por 200+ founders LATAM" o "Gratis · sin tarjeta" */}
      </p>
    </div>
    <div>
      {/* Screenshot, loom, ilustración. Nunca placeholder genérico. */}
    </div>
  </div>
</section>

Reglas:

Hero altura mínima 88vh, no full screen (deja afford para scroll).
CTA primario es un solo color de alto contraste.
Trust line debajo del CTA — quita fricción.
Imagen lado derecho debe mostrar el producto en uso, no ilustración stock.

Core Web Vitals (no negociable)

Targets:

LCP < 1.0s (no 2.5s — apunta a top 10%)
CLS < 0.05
INP < 200ms
TBT < 100ms

Cómo:

Imágenes: next/image siempre. priority={true} solo en hero. WebP/AVIF. Definir width/height para evitar CLS.
Fuentes: next/font con display: 'swap'. Subset a latin-ext si usas tildes/ñ.
JS: server components por default. 'use client' solo donde necesites interactividad real.
Embeds: nunca cargues YouTube/Vimeo directo en hero. Usa lite-youtube-embed o screenshot + lazy load on click.
Tracking: GA4 + Meta Pixel cargan después de interacción del usuario, no en <head>. Usa Partytown si necesitas más scripts.
CSS: Tailwind purgea solo. Sin CSS-in-JS pesado tipo styled-components.

Componentes obligatorios

Social proof

Logos: grayscale opacity-60 hover opacity-100. Máximo 6 visibles, scroll si más.
Testimonios: foto + nombre + cargo + empresa + handle (link a su X/LinkedIn = legitima).
Métricas: "$2.3M procesados" > "Procesamos mucho". Números específicos.

Pricing

3 tiers max. Highlight uno (no necesariamente el del medio — el que quieras vender).
USD primario para >$50 USD. Local para <$50.
"Cobrado anualmente" con toggle mensual/anual (default anual con 20% descuento).
CTA por tier: "Empezar gratis" / "Reservar demo" / "Hablar con ventas" según ticket.
Sin "Contact us" en pricing público — perdiste el lead. Excepto enterprise >$10K MRR.

FAQ

5-7 preguntas. Top objeciones reales del ICP.
Si tu producto requiere config técnica, FAQ debe contestar "¿cuánto tarda implementar?".
Schema.org FAQPage para AI search (ver skill ai-seo-latam).

Anti-patterns

Hero genérico con ilustración stock. → Screenshot real del producto en uso.
3 CTAs primarios en hero. → Uno solo. Uno.
"Get started for free" sin contexto. → "Empezar gratis — sin tarjeta de crédito".
Modal popup en cold traffic en <10s. → Mínimo 30s o scroll del 50%.
Carrusel de testimonios auto-play. → Estático con grid. Carruseles bajan engagement y CWV.
Cookie banner agresivo que tapa el hero. → Tira bottom, dismissible, no tapa el CTA.
Footer con 47 links en una landing de conversión. → Footer mínimo. Links importantes solo.
"Únete a la familia" "Bienvenido a bordo" — cringe.

Tracking esencial

// app/layout.tsx
import { GoogleAnalytics } from '@next/third-parties/google'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>{children}</body>
      <GoogleAnalytics gaId="G-XXXXX" />
    </html>
  )
}

Eventos a trackear sin negociar:

hero_cta_click
pricing_view (scroll a sección)
pricing_cta_click (con tier)
faq_open (con pregunta)
form_submit
form_error

Heatmaps: Microsoft Clarity (gratis, GDPR-safe) > Hotjar para empezar.

Output esperado

Cuando completes una landing:

Estructura completa en archivos:
- app/page.tsx (server component, importa secciones)
- components/sections/hero.tsx, social-proof.tsx, features.tsx, etc.
- components/ui/* de shadcn ya instalados
Copy completo en español neutral usando framework de copywriting-latam.
Metadata SEO + OG (app/page.tsx exporta metadata).
Schema.org JSON-LD para Product/Service/FAQ según tipo.
2 variants de hero para A/B test (diferente angle de promesa).
Lista de assets faltantes que el founder debe proveer (screenshots reales, logos de clientes, testimonios con foto).
Comando de instalación completo: npx create-next-app + shadcn init + componentes específicos.

Nunca entregues una landing sin variants de hero ni lista de assets faltantes.