Constructor de Páginas de Aterrizaje con v0
Resumen
v0 de Vercel es la forma más rápida de crear una página de aterrizaje de calidad profesional. Describe la página en lenguaje natural. v0 genera código React/Next.js/Tailwind. Iteras conversacionalmente. Exportas y despliegas. Lo que solía tomarle a un diseñador + desarrollador 1-2 semanas ahora le toma a un fundador o profesional de marketing 2-4 horas. Esta skill es un manual paso a paso para construir cada tipo de página de aterrizaje GTM con v0.
Bases Autorizadas
- v0 de Vercel — Plataforma de UI generativa (Guillermo Rauch)
- shadcn/ui — Biblioteca de componentes que impulsa v0
- Tailwind CSS — Framework CSS de utilidades primero
- Next.js — Framework de React para producción
Cuándo Usarlo
Frases desencadenantes: "construir una página de aterrizaje con v0", "tutorial v0", "prompt para página de aterrizaje v0", "v0 de Vercel para marketing", "constructor de páginas de aterrizaje con IA", "generar página de aterrizaje con v0", "página de precios v0", "lista de espera v0"
Conceptos Básicos de v0
Qué es: v0.dev — la plataforma de UI generativa de Vercel. Tú escribes. Ella genera componentes React usando shadcn/ui + Tailwind CSS. Puedes:
- Generar páginas completas desde un solo prompt
- Iterar en secciones específicas ("cambia el titular del héroe")
- Generar componentes individuales ("una tarjeta de testimonio con avatar")
- Exportar código a tu proyecto Next.js
- Desplegar directamente en Vercel
Precios: Nivel gratuito (200 generaciones/mes). Pro ($20/mes) para ilimitado.
Proceso Paso a Paso
Fase 1: Preparación (Antes de Abrir v0)
Define 5 cosas antes de tu primer prompt:
- El tipo de página: ¿Página de aterrizaje, página de precios, página de lista de espera, página de evento, anuncio de funcionalidad o micrositio?
- La audiencia: ¿Quiénes son? ¿Qué les importa?
- La acción: ¿Qué ÚNICA cosa quieres que hagan? (Iniciar prueba, reservar demo, unirse a lista de espera, comprar ahora)
- La marca: Colores (primario/secundario/neutros), fuente (Inter es segura), tono (profesional, divertido, técnico, premium)
- La referencia: ¿A qué sitio existente debería parecerse? "Limpio como Stripe" o "Técnico como Vercel" o "Audaz como Linear"
Documento de contexto de marca (pégalo en tu primer prompt de v0):
CONTEXTO DE MARCA:
- Empresa: [nombre]
- Producto: [descripción breve]
- Color primario: #0066FF
- Secundario: #FF6600
- Fuente: Inter
- Tono: Directo, respaldado por datos, seguro
- Referencia: Stripe (limpio, minimalista) + Linear (oscuro, técnico)
- NO: degradados, emojis, fotos de stock, tópicos genéricos de SaaS
Fase 2: Generar la Página (Ingeniería de Prompts)
La plantilla de prompt maestra:
Construye un [tipo de página] para [empresa/producto].
Audiencia: [ICP]. Les importa [las 3 principales preocupaciones].
SECCIONES (en orden):
1. Nav: [logo de la empresa a la izquierda, enlaces al centro, CTA a la derecha — "Iniciar prueba gratuita"]
2. Héroe: Titular [centrado en el beneficio, menos de 10 palabras]. Subtítulo [una oración expandiendo]. CTA principal ["Iniciar prueba gratuita"]. CTA secundario ["Ver cómo funciona"]. Marcador de posición para imagen/video del héroe.
3. Prueba social: 6 logotipos de clientes en una fila. "Con la confianza de más de 2,000 equipos"
4. Propuestas de valor: 3 columnas. Cada una: icono, titular, una oración. Enfócate en RESULTADOS, no en funcionalidades.
5. Cómo funciona: 3 pasos. Cada uno: número de paso, titular, una oración. Visual: marcador de posición para captura de pantalla/GIF.
6. Funcionalidades: Cuadrícula de 2 columnas. 6 funcionalidades. Cada una: nombre de la funcionalidad + una oración.
7. Testimonios: 3 tarjetas de citas. Cada una: cita (1-2 oraciones), nombre, cargo, empresa, marcador de posición para foto.
8. Precios (si es página de precios): 3 niveles. Alternador mensual/anual. Nivel recomendado resaltado. Cada nivel: precio, descripción, 5 funcionalidades, CTA.
9. FAQ: 6 preguntas con respuestas expandibles. Cubre precios, configuración, seguridad, soporte, cancelación, comparación.
10. CTA final: Igual que el CTA del héroe. "Iniciar prueba gratuita." No se requiere tarjeta de crédito.
11. Pie de página: Logotipo, enlaces, derechos de autor, iconos de redes sociales.
ESTILO:
- Tema oscuro (o claro — elige uno)
- Paleta de colores: primario #0066FF, secundario #FF6600, fondo #0A0A0A, texto #FFFFFF, atenuado #9CA3AF
- Tipografía: Inter, titulares en negrita, cuerpo regular
- Espaciado: generoso. 80-120px entre secciones
- Tarjetas: bordes sutiles, radio de 8px, efecto de elevación al pasar el ratón
- Botones: primario (relleno, texto blanco), secundario (con contorno, color primario)
- Ancho máximo: 1200px, centrado
TÉCNICO:
- Responsive para móvil: apila las secciones verticalmente en móvil
- Objetos táctiles: 44px+ en móvil
- Animaciones: desvanecimiento sutil al hacer scroll (Intersection Observer)
- Sin animaciones pesadas. Respeta prefers-reduced-motion.
Por qué funciona este prompt:
- Especifica cada sección en orden (v0 construye de arriba a abajo)
- Incluye estilo visual (colores, tipografía, espaciado)
- Incluye requisitos técnicos (responsive, accesible)
- Da ejemplos concretos ("Iniciar prueba gratuita" no "CTA aquí")
Fase 3: Iterar Sección por Sección
No arregles todo en un solo prompt. Itera sección por sección:
SECUENCIA DE ITERACIÓN (15-30 minutos):
1. "El titular del héroe es demasiado genérico. Hazlo específico: '[Empresa] ayuda a [ICP] a hacer [cosa] en [plazo]'"
2. "Las propuestas de valor están centradas en funcionalidades. Reescríbelas como resultados: 'Lanza campañas en 2 horas, no en 2 semanas' en lugar de 'Constructor de campañas impulsado por IA'"
3. "Los testimonios son demasiado largos. Cada cita debe tener un máximo de 1-2 oraciones"
4. "Añade una tabla comparativa encima del FAQ. 5 filas: [funcionalidad], Nosotros, Competidor A, Competidor B. Marcas de verificación para nosotros. Donde los competidores carezcan, usa '—'"
5. "Las tarjetas de precios necesitan estados al pasar el ratón. Añade un sutil scale(1.02) + sombra al pasar el ratón para el nivel recomendado"
6. "Reemplaza el marcador de posición de la imagen del héroe con un componente de captura de pantalla. Fondo oscuro, esquinas redondeadas, borde sutil"
7. "Los botones CTA se sienten pequeños. Aumenta el padding a 16px, fuente a 16px"
8. "En móvil, la navegación debe colapsar en un menú de hamburguesa. Muéstrame la versión móvil"
9. "Añade una barra CTA fija que aparezca después de desplazarte más allá del héroe. Botón 'Iniciar prueba gratuita', fondo blanco, sombra sutil"
10. "Haz que toda la página sea responsive. Pruébala en 375px, 768px, 1024px, 1440px"
Fase 4: Generar Componentes Individuales
Cuando la página completa es buena pero una sección necesita más trabajo:
"Genera solo la sección de testimonios. 3 tarjetas en una fila. Cada tarjeta:
- Fondo: ligeramente más claro que el fondo de la página
- Borde: 1px, sutil
- Padding: 32px
- Cita en la parte superior: grande, cursiva
- Autor debajo: avatar (círculo, 48px) + nombre + cargo + logotipo de la empresa
- Al pasar el ratón: acento de borde sutil, sin elevación"
v0 regenerará solo ese componente. Reemplaza la sección existente con la versión mejorada.
Fase 5: Pulir para Producción
Antes de desplegar, itera en:
-
Texto: Reemplaza todo el lorem ipsum con texto real. "v0 generará texto de marcador de posición — DEBES reemplazarlo." Escribe titulares reales, propuestas de valor reales, testimonios reales.
-
Imágenes: Reemplaza los marcadores de posición con imágenes reales:
- Héroe: captura de pantalla del producto (Cmd+Shift+4, subir a v0)
- Logotipos de clientes: logotipos reales de clientes (subir)
- Fotos de testimonios: fotos reales de clientes
-
Enlaces: Conecta todos los botones y enlaces:
- "Iniciar prueba gratuita" → URL de registro
- "Reservar demo" → enlace de Calendly
- "Ver precios" → ancla de la sección de precios
- Enlaces del pie de página → páginas reales
-
Formularios: Si tu página tiene un formulario (lista de espera, contacto, solicitud de demo):
- Conéctalo a un backend de formularios (ConvertKit, HubSpot, Google Forms o API)
- Añade validación (formato de correo electrónico, campos obligatorios)
- Añade mensaje de éxito ("¡Gracias! Nos pondremos en contacto.")
- Añade manejo de errores
-
Analítica: Añade antes de desplegar:
<!-- Añadir al head --> <script defer data-domain="tudominio.com" src="https://plausible.io/js/script.js"></script>O Google Analytics, PostHog, etc.
Fase 6: Exportar y Desplegar
Opción A: Desplegar directamente desde v0 (más rápido)
- Haz clic en "Deploy" en v0
- Conecta tu cuenta de Vercel
- Añade un dominio personalizado en la configuración de Vercel
- Listo — en vivo en menos de 5 minutos
Opción B: Exportar a proyecto Next.js (más control)
npx shadcn@latest add [component-url]— añade el componente v0 a tu proyecto Next.js existente- O: Copia el código manualmente desde v0 → pégalo en tu proyecto
git push→ Vercel despliega automáticamente al hacer push
Opción C: Exportar como HTML estático (más simple)
- Copia el HTML/CSS generado
- Pégalo en un nuevo archivo
- Despliega en cualquier host estático (Netlify, Cloudflare Pages, GitHub Pages)
Fase 7: Iteración Post-Lanzamiento
Después del lanzamiento, itera basándote en datos:
PROMPTS IMPULSADOS POR ANALÍTICA:
1. "El CTA del héroe tiene una tasa de clics del 2.1%. Genera 3 variantes del héroe con diferentes titulares y CTA para hacer pruebas A/B"
2. "La tasa de rebote en móvil es del 68%. Audita la versión móvil y corrige cualquier problema de diseño. Apila todas las secciones verticalmente. Asegura objetivos táctiles de 44px+"
3. "La página de precios tiene una tasa de conversión del 1.2%. Genera 3 variantes de la página de precios: una con anual por defecto, una con mensual por defecto, una con una insignia de 'Más Popular' en el nivel intermedio"
4. "El tiempo de carga de la página es de 4.2 segundos. Optimiza: carga diferida de imágenes debajo del pliegue, elimina CSS no utilizado, aplaza scripts no críticos"
Prompts de v0 para Tipos de Página Específicos
Página de Aterrizaje SaaS
"Construye una página de aterrizaje SaaS para [producto]. Tema oscuro. Secciones: héroe, prueba social (logotipos), 3 propuestas de valor (resultados), cómo funciona (3 pasos), testimonios (3), precios (3 niveles, anual por defecto, Crecimiento recomendado), FAQ (6), CTA final, pie de página. Estilo: limpio como Stripe, oscuro como Linear. Primario: #0066FF. Fuente: Inter."
Página de Precios
"Construye una página de precios para [producto]. 3 niveles: Starter $49/mes, Crecimiento $199/mes (RECOMENDADO), Empresarial (Contáctanos). Alternador mensual/anual, anual por defecto. Tabla comparativa de funcionalidades debajo de los niveles. Sección FAQ con 8 preguntas. Empresarial incluye un CTA 'Reservar una llamada' en lugar de precio."
Página de Lista de Espera
"Construye una página de lista de espera para [producto] que se lanza en [mes]. Héroe: nombre del producto, propuesta de valor de una línea, entrada de correo electrónico + botón 'Unirse a la lista de espera'. Debajo: 3 cosas que obtendrás (acceso anticipado, precios de fundador, soporte prioritario). Prueba social: 'Más de 2,000 en la lista de espera.' Contador que muestra el número de registros."
Página de Evento/Webinar
"Construye una página de registro para [nombre del evento] el [fecha]. Héroe: nombre del evento, fecha/hora, descripción de una línea. Debajo: 3 razones para asistir. Sección de oradores con fotos, nombres, cargos, títulos de charlas. Agenda/cronograma. Formulario de registro: nombre, correo electrónico, empresa. CTA 'Reservar mi lugar'."
Formato de Salida
CONSTRUCCIÓN DE PÁGINA DE ATERRIZAJE CON V0 — [Nombre de la Página]
URL del Proyecto v0: [enlace v0.dev]
URL Desplegada: [URL de producción]
Prompt Utilizado:
[Texto del prompt maestro]
Registro de Iteraciones:
1. Generada v1 — [lo que funcionó, lo que necesitaba cambio]
2. ["Cambiar héroe"] — [resultado]
3. ["Añadir sección de testimonios"] — [resultado]
...
Método de Exportación: [Despliegue directo / shadcn add / copia manual]
Post-Lanzamiento:
- Analítica: [Plausible / GA / PostHog conectado]
- Tasa de conversión: X% (objetivo: Y%)
- Próxima iteración: [fecha / desencadenante]
Lista de Verificación de Implementación
- Texto real — sin lorem ipsum, sin texto de marcador de posición generado por IA
- Imágenes reales — capturas de pantalla del producto, logotipos de clientes, fotos reales
- Todos los CTA enlazados a URLs reales (no "#")
- Formularios conectados a un backend (ConvertKit, HubSpot, API)
- Responsive para móvil (probado en iPhone SE + iPhone Pro Max + iPad)
- Carga de página en menos de 3 segundos (puntuación Lighthouse 90+)
- Analítica instalada y verificada (comprobar panel en tiempo real)
- SEO: etiqueta title, meta description, H1, texto alternativo en todas las imágenes
- Legal: enlace a política de privacidad, enlace a términos en el pie de página
- Sin "basura" de IA — sin ilustraciones SVG genéricas, sin lorem ipsum
Control de Calidad
Antes de entregar, verifica:
- La salida coincide con la solicitud declarada del usuario
- Los frameworks o fuentes nombrados se reflejan en la recomendación
- El entregable es lo suficientemente específico para que un agente lo ejecute
- Cualquier suposición, riesgo o dependencia es explícita
- No se incluyen afirmaciones no respaldadas, hechos inventados o referencias privadas/internas
Errores Comunes
-
Prompt de una sola vez. "Construir un sitio web SaaS" en un solo prompt = salida genérica, sin marca y mediocre. Solución: Construye sección por sección. Héroe primero. Itera. Luego precios. Itera.
-
Salida genérica sin contexto de marca. Sin colores de marca, fuentes y referencias, v0 genera Tailwind genérico. Solución: Pega tu contexto de marca en el primer prompt. Referencia un sitio conocido para el estilo.
-
Contenido de marcador de posición enviado a producción. v0 genera "Lorem ipsum" e imágenes de marcador de posición. Enviar esto en vivo = amateur. Solución: Reemplaza TODO el contenido de marcador de posición antes de desplegar.
-
No iterar en móvil. v0 genera primero para escritorio por defecto. El diseño móvil a menudo se rompe. Solución: "Muéstrame la versión móvil" como un paso de iteración dedicado.
-
Sin conexión de formulario. Un botón "Iniciar prueba gratuita" que enlaza a "#" es una promesa incumplida. Solución: Conecta formularios y CTA antes de desplegar.
-
Demasiadas secciones. v0 generará felizmente 15 secciones si se lo pides. Más secciones = más carga cognitiva = menor conversión. Solución: Máximo 6-8 secciones. Elimina cualquier cosa que no apoye directamente el objetivo de conversión.
Referencias de Expertos
- Guillermo Rauch (@rauchg) — Creador de v0, CEO de Vercel. Síguelo para actualizaciones de v0, técnicas de prompts y filosofía de UI generativa.
- Documentación de v0: v0.dev/docs — guía de prompts, biblioteca de componentes, instrucciones de exportación/despliegue
- shadcn/ui: ui.shadcn.com — la biblioteca de componentes que v0 genera. Apréndela para entender lo que v0 está construyendo.
Artefactos de Ejecución
references/framework-notes.md— Frameworks nombrados y tablas de referenciatemplates/output-template.md— Esqueleto del entregable para la salida del agentescripts/check-output.py— Validador ligero de entregables
Habilidades Relacionadas
vibe-coding— Comparación completa de herramientas de IA para desarrollo (v0, Lovable, Bolt, Cursor)vibe-marketing— Contenido de marketing impulsado por IA a escalalanding-pages— Auditorías de CRO, patrones de optimización de conversióndesign-system-gtm— Tokens de marca, variables CSS para salida de IA consistentepopular-web-designs— 54 sistemas de diseño de marca como referencia visualui-ux-gtm— UX de páginas de aterrizaje, diseño de formularios, accesibilidad