Instant Landing

Una landing page de calidad que convierte requiere un copywriter, un diseñador, un developer, dos semanas de coordinación, y $500-3000 dólares. Instant Landing es la skill open-source que produce una landing completa en una sola ejecución: hero, features, social proof, pricing, FAQ y CTA. Stack Next.js 15 + Tailwind v4. Lista para deploy en 15 minutos.

Esta nota cubre cómo se usa, qué tipos de landings produce mejor, y los gotchas para que la landing final convierta de verdad y no sea "bonita pero vacía".

Qué hace exactamente

Instant Landing es skill que combina varias sub-skills:

• Copywriter: escribe el copy de cada sección.
• Designer: elige paleta, tipografía, layout coherentes.
• Developer: genera el código Next.js + Tailwind.
• SEO checker: asegura meta tags, semántica, performance.
• Conversion auditor: revisa que la landing tenga los elementos que convierten.

Una invocación produce el output completo.

Instalación

npx skills@latest add agora/instant-landing

Uso típico

> /instant-landing:

Producto: SaaS de gestión de inventario para tiendas pequeñas.
Audiencia: dueños de comercio LatAm, 1-3 sucursales, no técnicos.
Tono: profesional pero accesible, sin jerga de Silicon Valley.

Plan de precios: 
- Starter $19/mes — hasta 100 productos.
- Pro $49/mes — hasta 1000 productos + reportes.
- Business $149/mes — ilimitado + multi-sucursal.

Sociales:
- 3 testimonios (placeholder con nombres realistas LatAm).
- Logos de 6 clientes (placeholder, después los cambio).

CTA principal: "Empezá gratis por 14 días".

Stack: Next.js 15 con App Router, Tailwind v4, TypeScript estricto.
Diseño: minimal, paleta turquesa + grises, fuente Inter.

Estructura: hero, features (4), how-it-works (3 pasos), testimonios (3), 
pricing (3 planes), FAQ (6 preguntas), CTA final.

Output: proyecto Next.js completo listo para `pnpm dev`.

Claude:

1. Genera todo el código (página, componentes, layouts, styles).
2. Genera copy para cada sección.
3. Genera placeholder data (testimonios, logos, FAQs).
4. Setup SEO básico (meta tags, sitemap).
5. Setup analytics placeholder (Vercel Analytics o Plausible).

En 5-10 minutos tenés:

mi-landing/
├── app/
│   ├── page.tsx
│   ├── layout.tsx
│   └── globals.css
├── components/
│   ├── Hero.tsx
│   ├── Features.tsx
│   ├── HowItWorks.tsx
│   ├── Testimonials.tsx
│   ├── Pricing.tsx
│   ├── FAQ.tsx
│   └── CTA.tsx
├── public/
│   └── (placeholder images)
├── package.json
├── tailwind.config.ts
├── tsconfig.json
└── README.md

Corrés pnpm dev, ves la landing en localhost:3000. Lista para refinar.

Las 7 secciones que produce

Hero

• Título corto y potente (max 12 palabras).
• Subtítulo aclarando la propuesta (max 25 palabras).
• CTA primario + secundario.
• Imagen o video placeholder.
• Social proof discreto bajo el CTA ("usado por 1000+ tiendas").

Features

3-5 features destacadas con:

• Icono.
• Título corto.
• Descripción 1-2 oraciones.

How it works

3-5 pasos del flujo:

• "1. Conectás tu inventario."
• "2. Subís productos."
• "3. Empezás a operar."

Testimonials

3-5 testimonios con:

• Foto/avatar.
• Quote 1-3 oraciones.
• Nombre + cargo + empresa.

Pricing

2-4 planes con:

• Nombre.
• Precio (mensual / anual).
• Lista de features incluidas.
• CTA por plan.

FAQ

5-8 preguntas comunes con respuestas breves.

CTA final

Última oportunidad de conversión:

• Frase potente.
• CTA primario destacado.

Tipos de landing donde brilla

Tipo 1: SaaS B2B

El sweet spot. Producto recurrente, audiencia clara, value proposition concreta.

Tipo 2: Curso online

Headline → para quién es → qué aprendés → testimonios → precio → CTA.

Tipo 3: E-commerce one-product

Para producto destacado o launch. No reemplaza tienda completa (eso es Shopify), reemplaza landing de un solo producto.

Tipo 4: Eventos / conferencias

Quién, cuándo, dónde, agenda, speakers, sponsors, CTA registro.

Tipo 5: Consultoría / agencia

Servicio → casos de éxito → metodología → CTA contacto.

Tipos donde no es ideal

No ideal 1: marketplace multi-sided

Marketplaces necesitan UX más compleja (búsqueda, perfiles, etc.). Landing simple no aplica.

No ideal 2: producto físico complejo

Productos con muchas variantes/SKUs necesitan tienda real, no landing.

No ideal 3: app móvil

Para promocionar app, mejor App Store / Google Play como destino principal, no landing extensa.

No ideal 4: enterprise sales largo

B2B enterprise no se cierra con landing. Necesita case studies extensos, white papers, sales motion.

Gotchas que matan la conversión

Gotcha 1: copy genérico

Output de Instant Landing por default es decente pero genérico. "Aumentá tu productividad" funciona menos que "Tu hijo deja de pelearse con la tarea en 3 días".

Solución: pegale al output, después editás copy con frases reales que escuchaste de clientes (mining de language).

Gotcha 2: testimonios fake obvios

Placeholder testimonials tienen "John Doe, CEO of Acme Corp". Si lanzás así, perdés credibilidad inmediato.

Solución: antes de publicar, reemplazá con testimonios reales (incluso si solo tenés 1-2). Mejor 2 reales que 5 inventados.

Gotcha 3: pricing sin tracción

Pricing demasiado optimista (planes caros sin nadie pagándolos) se nota. Mostrar precios solo cuando podés sustentar la conversación.

Solución: si recién arrancás, "contactanos para precio" puede ser más honesto. Cuando tengas 5+ clientes pagando, mostrá pricing público.

Gotcha 4: features sin beneficios

"Multi-platform, real-time sync, advanced analytics" — features. "Funcionás desde tu celular, tu equipo siempre alineado, decisiones basadas en data" — beneficios.

Solución: tu output viene en features. Reescribilo en términos de beneficios para el usuario.

Gotcha 5: CTA débil

"Conocé más" — convierte 30% menos que "Probalo gratis 14 días".

Solución: editá los CTAs hasta que cada uno comunique acción + valor + low risk.

Iteración post-launch

Landing no es proyecto que terminás. Es producto que iterás:

Semana 1-2: monitorear

• Cuántos visitantes.
• Cuántos llegan al CTA.
• Cuántos convierten.

Semana 3-4: hipótesis

Basado en data, ¿qué cambia?

• ¿La gente abandona en hero? → cambiá hero copy.
• ¿La gente baja pero no clickea CTA? → cambiá CTA copy o oferta.
• ¿La gente clickea CTA pero no completa form? → simplificá form.

Semana 4+: A/B test

Para landings con tráfico decente (1000+ visitas/semana), usá A/B test:

> /instant-landing --variant: generá segunda versión del hero con
  copy A/B test apuntando a [hipótesis distinta].

Compará performance. Ganador se queda.

Combinación con outras skills

Con SEO Specialist

Después de generar landing, audit con skill SEO:

> /seo-audit miapp.vercel.app

Te lista mejoras a aplicar (meta description, schema markup, sitemap, etc.).

Con Conversion Auditor

> /conversion-audit

Revisa la landing contra los 30 elementos clásicos de conversion (urgency, scarcity, social proof, etc.). Te dice qué falta.

Con Cyber Neo

Audit de seguridad antes de deploy:

> /cyber-neo audit

Importante si tu form captura emails / data sensible.

Con All Deploy

> /all-deploy

Deploy a Vercel automatizado.

Tiempo total realista

• Generación inicial: 10-30 min.
• Refinamiento copy: 2-4 horas.
• Reemplazo de placeholders por data real: 1-2 horas.
• Diseño fino (colores, fuentes, spacing): 1-3 horas.
• Testing en dispositivos: 30 min.
• Deploy: 30 min.

Total: 5-10 horas para landing decente.

Comparado con flujo tradicional (copy + design + dev): 40-80 horas. Speedup 5-10×.

Costos

• Instant Landing skill: gratis.
• Tu plan Claude: ya incluido.
• Hosting Vercel: free tier.
• Dominio: $10-20/año.

Total operativo: <$5/mes para landings activas.

Conclusión

Si tenés idea de SaaS, curso, servicio o producto y todavía no tenés landing publicada porque "es mucho trabajo": no lo es más. Instant Landing produce un punto de partida sólido en minutos. Refinar es trabajo, pero arrancar dejó de serlo.

Las landings perfectas no existen — existen las landings publicadas e iteradas. Empezá hoy. Iterá en producción.

Tags: landing, frontend, nextjs, ui