Instala el skill CLI belt: npx skills add belt-sh/cli
Diseño de Páginas de Aterrizaje
Diseña páginas de aterrizaje de alta conversión con visuales generados por IA mediante la CLI inference.sh.
Inicio Rápido
Requiere la CLI de inference.sh (belt). Instrucciones de instalación
belt login
belt app run falai/flux-dev-lora --input '{
"prompt": "persona profesional sonriendo mientras usa un portátil que muestra un panel de control limpio, oficina moderna y luminosa, luz natural, ambiente productivo y cálido, fotografía de marketing de estilo de vida",
"width": 1248,
"height": 832
}'
belt app run tavily/search-assistant --input '{
"query": "mejores ejemplos de páginas de aterrizaje SaaS 2024 tasa de conversión"
}'
Fórmula Above-the-Fold
Todo lo visible sin hacer scroll debe comunicar valor en 5 segundos.
┌─────────────────────────────────────────────────┐
│ [Logo] [Nav] [Botón CTA] │
│ │
│ Titular (6-12 palabras) │
│ ───────────────────────── │
│ Subtitular (15-25 palabras) [Imagen Hero]│
│ mostrando el │
│ [Botón CTA Principal] RESULTADO, no │
│ "Iniciar prueba gratis" el producto │
│ │
│ Prueba social: "Usado por más de 10,000 equipos"│
│ [logo] [logo] [logo] [logo] [logo] │
└─────────────────────────────────────────────────┘
Los 5 Elementos
| Elemento | Regla | Ejemplo |
|---|
| Titular | 6-12 palabras, expresa el resultado | "Publica documentación en minutos, no en días" |
| Subtitular | 15-25 palabras, amplía el cómo | "Documentación potenciada por IA que se escribe sola desde tu código. Sin necesidad de plantillas." |
| Imagen hero | Muestra el RESULTADO, no el producto | Persona satisfecha mirando resultados, no una captura de tu interfaz |
| CTA principal | Verbo de acción + valor | "Iniciar prueba gratis" no "Enviar" ni "Más información" |
| Prueba social | Logos, conteo o microtestimonio | "Usado por más de 10,000 equipos en [logos]" |
Titulares
Fórmulas que Convierten
| Fórmula | Ejemplo |
|---|
| [Resultado] sin [dolor] | "Documentación bonita sin tener diseño" |
| [Resultado] en [tiempo] | "Lanza tu sitio en 5 minutos" |
| La [mejor manera] de [tarea común] | "La forma más rápida de construir APIs" |
| Deja de [dolor]. Empieza a [resultado]. | "Deja de adivinar. Empieza a saber." |
| [Número] [cosas] para [resultado] | "Una herramienta para gestionar todos tus datos" |
Lo que Hace Fracasar a los Titulares
❌ "Bienvenido a Nuestra Plataforma" (no dice nada sobre el valor)
❌ "La Solución más Avanzada del Mundo Impulsada por IA" (palabras de moda, sin concreción)
❌ "Ayudamos a las Empresas a Crecer" (vago, genérico)
❌ "Software Empresarial de Nueva Generación" (¿QUÉ hace?)
✅ "Convierte los comentarios de los clientes en funciones del producto, automáticamente"
✅ "La hoja de cálculo que piensa como una base de datos"
✅ "Encuentra y corrige errores antes que tus usuarios"
Imágenes Hero
Muestra el Resultado, no el Producto
❌ Captura de tu panel de control (aburrido, difícil de entender de un vistazo)
❌ Fondo geométrico abstracto (no dice nada)
❌ Foto de archivo de un apretón de manos (cliché)
✅ Persona satisfecha mirando resultados claros en su pantalla
✅ Transformación antes/después
✅ El resultado final de usar tu producto
belt app run falai/flux-dev-lora --input '{
"prompt": "equipo profesional feliz celebrando alrededor de un portátil que muestra gráficos de crecimiento positivos, oficina moderna y luminosa, luz solar natural, momento auténtico y espontáneo, estilo de fotografía de marketing, tonos cálidos",
"width": 1248,
"height": 832
}'
belt app run bytedance/seedream-4-5 --input '{
"prompt": "portátil moderno y limpio sobre un escritorio minimalista que muestra un hermoso panel de analíticas, elementos de interfaz flotando que emergen de la pantalla, fondo degradado suave, estilo de marketing de producto, profesional",
"size": "2K"
}'
Botones CTA
Texto
| Buenos CTA | Malos CTA |
|---|
| "Iniciar prueba gratis" | "Enviar" |
| "Empezar gratis" | "Haz clic aquí" |
| "Verlo en acción" | "Más información" (bajo compromiso) |
| "Crear tu primer informe" | "Registrarse" (vago) |
| "Prueba gratis por 14 días" | "Inscribirse" |
Fórmula: Verbo de acción + valor/resultado + (opcional: reduce riesgo)
Diseño
| Elemento | Regla |
|---|
| Color | Alto contraste con el fondo — debe ser el elemento más visible |
| Tamaño | Mínimo 44px de alto (objetivo táctil), ancho suficiente para texto + padding |
| Posición | Above the fold, repetido después de cada sección importante |
| Espacio en blanco | Padding generoso alrededor del botón, no lo amontones |
| CTA secundario | Si es necesario, usa enlace de texto debajo ("o ver una demo") |
Orden de Secciones
La secuencia probada para páginas de aterrizaje:
| Sección | Propósito | Elemento Clave |
|---|
| 1. Hero | Valor principal, CTA primario | Titular + imagen + CTA |
| 2. Prueba Social | Genera confianza | Logos, números, insignias |
| 3. Problema | Crea empatía | Punto de dolor que reconocen |
| 4. Solución/Funcionalidades | Muestra cómo lo resuelves | 3 funcionalidades clave con visuales |
| 5. Cómo Funciona | Reduce complejidad | 3 pasos: registrarse, configurar, beneficiarse |
| 6. Testimonios | Prueba que funciona | 2-3 citas específicas de clientes |
| 7. Precios | Facilita la decisión | Niveles claros, resalta el recomendado |
| 8. FAQ | Maneja objeciones | 5-7 preguntas comunes |
| 9. CTA Final | Captura rezagados | Repite el CTA principal con urgencia |
Tipos de Prueba Social
| Tipo | Impacto | Colocación |
|---|
| Logos de empresas | Más rápido de procesar, alta confianza | Debajo del hero |
| Número de usuarios | Señal de escala | Hero o barra de prueba social |
| Calificación con estrellas | Calidad del producto | Cerca del CTA |
| Testimonios | Credibilidad detallada | Sección dedicada |
| Estadísticas de casos de estudio | Prueba específica | Secciones de funcionalidades |
| Insignias de confianza | Seguridad/cumplimiento | Cerca de formularios, precios, pie de página |
belt app run exa/answer --input '{
"question": "¿Cuál es la tasa de conversión promedio para páginas de aterrizaje SaaS con prueba social frente a sin ella?"
}'
Diseño de Formularios
| Regla | Impacto |
|---|
| Cada campo reduce la conversión ~11% | Minimiza los campos |
| Nombre + Correo electrónico = máximo para registros | No pidas teléfono, empresa, cargo |
| Diseño de una sola columna | No uses formularios de varias columnas |
| Validación en línea | Muestra errores inmediatamente, no al enviar |
| Mensajes de error claros | "El correo electrónico es obligatorio" no "Error en campo 3" |
| Texto del botón de envío = acción | "Crear cuenta" no "Enviar" |
Optimización Móvil
| Regla | Por qué |
|---|
| Botón CTA de ancho completo | Fácil de tocar con los pulgares |
| CTA fijo al hacer scroll | Siempre accesible |
| Sin desplazamiento horizontal | Rompe el diseño móvil |
| Fuente mínima 16px | iOS hace zoom en inputs por debajo de 16px |
| Objetivos táctiles mínimo 48x48px | Apple HIG, Google Material |
| Imágenes responsivas | No desborden el viewport |
| Prioriza titular + CTA | Simplifica el above-the-fold |
Imagen OG para Compartir
belt app run falai/flux-dev-lora --input '{
"prompt": "tarjeta de compartir social limpia y profesional, nombre del producto y eslogan sobre fondo degradado moderno, diseño minimalista, estética corporativa tecnológica, relación de aspecto equivalente a 1200x630",
"width": 1200,
"height": 630
}'
belt app run infsh/html-to-image --input '{
"html": "<div style=\"width:1200px;height:630px;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;align-items:center;justify-content:center;font-family:sans-serif;color:white\"><div style=\"text-align:center\"><h1 style=\"font-size:48px;margin:0\">DataFlow</h1><p style=\"font-size:24px;opacity:0.9\">Publica documentación en minutos, no en días</p></div></div>"
}'
Velocidad de Página
| Regla | Objetivo | Por qué |
|---|
| Imagen hero | < 200 KB | Lo primero en cargar |
| Peso total de la página | < 2 MB | Datos móviles, paciencia |
| Carga diferida de contenido bajo el pliegue | Siempre | Solo carga lo visible |
| Minimiza JavaScript | < 200 KB | Bloquea el renderizado |
| LCP (Largest Contentful Paint) | < 2.5s | Google Core Web Vitals |
Errores Comunes
| Error | Problema | Solución |
|---|
| Sin titular claro | El visitante no sabe qué haces | 6-12 palabras, centrado en el resultado |
| CTA dice "Más información" | Compromiso demasiado bajo | Verbo de acción + valor específico |
| Hero es una captura de producto | Difícil de entender, aburrido | Muestra el resultado, usa imágenes de estilo de vida |
| Múltiples CTA en competencia | Parálisis de decisión | Un CTA principal, máximo uno secundario |
| Sin prueba social | Sin señal de confianza | Añade logos, conteos o testimonios |
| Demasiados campos en formulario | La conversión cae ~11% por campo | Nombre + correo electrónico máximo |
| Diseño solo para escritorio | 60%+ del tráfico es móvil | Diseña primero para móvil |
| Sin urgencia en el CTA final | Los visitantes se van y olvidan | "Empieza tu prueba gratuita de 14 días" |
Habilidades Relacionadas
npx skills add inference-sh/skills@ai-image-generation
npx skills add inference-sh/skills@web-search
npx skills add inference-sh/skills@prompt-engineering
Explora todas las apps: belt app list