Diseño de Página de Aterrizaje

Descripción General

Crea páginas de aterrizaje que CONVIERTAN y CAUTIVEN. Este skill combina una estructura centrada en la conversión con un diseño visual distintivo para crear páginas que destaquen en un mundo saturado de IA. El objetivo: páginas que valgan entre 50 y 100 dólares y de las que te sientas orgulloso de vender.

OBLIGATORIO: Descubrimiento de Vibra (Haz Esto Primero)

ANTES de escribir cualquier código, DEBES ejecutar el proceso de Descubrimiento de Vibra. Esto no es una tabla de referencia: es un prompt creativo que genera una dirección estética ÚNICA cada vez.

El objetivo: Que no haya dos páginas de aterrizaje iguales, incluso para productos similares.

El Proceso de Descubrimiento de Vibra

Haz estas preguntas al usuario, luego SINTETIZA una dirección única. No te limites a mapear respuestas a ajustes preestablecidos.

Paso 1: Reunir Contexto (Pregunta Esto)

P1: ¿Cuál es un lugar u objeto del mundo real que representaría a esta marca?

No "qué industria", sino una cosa específica y real. Un konbini de Tokio a las 2 a.m. La cocina de una abuela. Un estacionamiento brutalista. Un arrecife de coral. La cabina de un 747. Un mercado de pulgas en Marrakech. Un estudio de grabación de los años 70.

P2: ¿Cuál es la ÚNICA emoción que alguien debería sentir en los primeros 3 segundos?

Elige UNA: Calma. Energía. Curiosidad. Confianza. Deleite. Impresión. Rebeldía. Nostalgia. Inspiración. Diversión. Sofisticación. Bienvenida. Intriga. Certeza.

P3: Elige DOS influencias inesperadas para chocar:

Ejemplos: "envases médicos + gráficos de skateboard", "hojas de cálculo + arte callejero", "hotel de lujo + fanzine punk", "control de misión de la NASA + jardín de infantes", "konbini japonés + biblioteca victoriana"

P4: ¿Con qué NUNCA se debería confundir esta página?

Nombra 2-3 cosas específicas que evitar activamente. "Un proyecto de criptomonedas", "Una app de bienestar", "Algo hecho por un banco", "Cualquier cosa con degradados morados"

Paso 2: Inventa la Estética (No Busques, Crea)

Según las respuestas, CREA una vibra única decidiendo:

INVENCIÓN DE COLOR (No uses paletas memorizadas: derívalas del lugar/objeto)

¿Qué colores existen en ese lugar/objeto real de la P1?
Extrae 3-4 colores que se sientan auténticos a esa referencia
Inventa códigos hexagonales específicos desde cero, no reutilices códigos de proyectos anteriores
Ponle un nombre evocador a tu paleta (no "azul y naranja" sino "Bodega de Medianoche" o "Mañana de Cinturón Oxidado")

INVENCIÓN DE TIPOGRAFÍA (Haz coincidir la voz con la colisión)

¿Cómo sonaría el texto en ese lugar?
Encuentra una fuente de exhibición que encarne la colisión de la P3
No uses tus opciones habituales: explora Google Fonts con ojos nuevos
Considera: peso, ancho, contraste, peculiaridades

INVENCIÓN DEL DISEÑO (Derívalo del espacio físico)

¿Cómo está organizado el espacio en ese lugar de la P1?
¿Es estrecho o amplio? ¿Parecido a una cuadrícula u orgánico? ¿Vertical u horizontal?
¿Qué elección de diseño inesperada encarnaría la colisión de la P3?

INVENCIÓN DEL MOVIMIENTO (Haz coincidir la emoción)

¿Cómo se mueve la emoción de la P2?
Calma = apenas perceptible. Energía = cinético. Sofisticación = lento y deliberado.
¿Cuál es un movimiento característico que define esta página?

Paso 3: Escribe tu Especificación de Vibra

Antes de programar, escribe esto explícitamente:

NOMBRE DE VIBRA: [Inventa un nombre de 2-3 palabras]
REFERENCIA: [El lugar/objeto de la P1]
EMOCIÓN: [De la P2]
COLISIÓN: [De la P3]
ANTIPATRONES: [De la P4]

COLORES:
- Primario: [hex] - [por qué este color]
- Secundario: [hex] - [por qué]
- Fondo: [hex] - [por qué]
- Acento: [hex] - [por qué]
- Nombre de paleta: [nombre evocador]

TIPOGRAFÍA:
- Exhibición: [nombre de fuente específica] - [por qué encaja]
- Cuerpo: [nombre de fuente específica] - [por qué]
- Carácter: [describe la voz]

DISEÑO:
- Densidad: [escaso/equilibrado/denso]
- Formas: [afiladas/redondeadas/orgánicas/mixtas]
- Elemento característico: [una elección de diseño inusual]

MOVIMIENTO:
- Nivel: [estático/sutil/moderado/dinámico/caótico]
- Animación característica: [una animación específica que define esto]

COMODÍN:
- Un detalle inesperado que no "encaja" pero lo hace memorable

Paso 4: La Verificación de Frescura

Antes de continuar, verifica:

NO reutilicé códigos hexagonales de mis últimos 3 proyectos
NO usé mis fuentes "cómodas" por defecto (verifica: ¿estoy usando Inter? ¿Nunito? ¿Space Grotesk? Si es así, encuentra otra cosa)
La colisión de la P3 es realmente visible en mis elecciones
Alguien NO podría confundir esto con mis páginas de aterrizaje anteriores
Incluí un comodín que me sorprende incluso a mí

Ejemplo de Descubrimiento de Vibra

P1 - Lugar/Objeto: "Una estación de tren japonesa en hora punta"

P2 - Emoción: "Confianza"

P3 - Colisión: "Señalización de tránsito + alta costura"

P4 - Que nunca se confunda con: "Una app de meditación, cualquier cosa caprichosa, tecnología para emprendedores"

Especificación de Vibra Generada:

NOMBRE DE VIBRA: Shinjuku Runway
REFERENCIA: Estación de tren japonesa en hora punta
EMOCIÓN: Confianza
COLISIÓN: Señalización de tránsito + alta costura
ANTIPATRONES: Sin degradados suaves, sin ilustraciones divertidas, sin formas redondeadas amigables

COLORES:
- Primario: #1a1a1a - el negro de las puertas del tren
- Secundario: #f5f5f0 - el hormigón del andén, desgastado y suave
- Fondo: #fafaf8 - blanco de luz fluorescente
- Acento: #e60012 - el rojo de la línea JR, que llama la atención
- Nombre de paleta: "Borde del Andén"

TIPOGRAFÍA:
- Exhibición: Darker Grotesque - confianza, ligeramente condensada, toque europeo
- Cuerpo: Noto Sans JP - utilidad limpia, inspirada en el transporte
- Carácter: Autoritario pero no frío. Claro. Direccional.

DISEÑO:
- Densidad: Rico pero organizado - como un mapa de estación
- Formas: Afiladas con excepciones intencionalmente redondeadas (como las ventanas del tren)
- Elemento característico: Bandas horizontales fuertes que dividen las secciones como los horarios de los trenes

MOVIMIENTO:
- Nivel: Sutil pero preciso
- Animación característica: Los elementos se deslizan desde el lateral como trenes que llegan - horizontales, suaves, con una sincronización exacta

COMODÍN:
- Un elemento utiliza una superposición de textura similar a la tela - la colisión de la alta costura

Inspiración para Empezar (Cuando estés Atascado en la P1)

Las Reglas Anticonvergencia

Sin memoria de código hex - Genera colores frescos desde la referencia, no recuerdes "mi azul habitual"
Rotación de fuentes obligatoria - No puedes usar la misma fuente de exhibición en proyectos consecutivos
La colisión debe mostrarse - Si alguien no puede ver AMBAS influencias de la P3, esfuérzate más
El comodín es obligatorio - Cada vibra necesita un elemento que no "encaje" pero que la haga única
Ponle nombre - Una vibra sin nombre se vuelve genérica. Una vibra con nombre tiene identidad.

Preguntas de Contexto Rápidas (Versión Mínima)

Si el usuario solo dice "hazme una página de aterrizaje" sin contexto, pregúntale:

"¿Qué lugar u objeto captura la energía de esta marca?"
"¿Qué emoción debería dominar?"
"¿A qué NO debería parecerse esto NUNCA?"

Luego sintetiza una vibra a partir de esas tres respuestas.

OBLIGATORIO: Estrategia de Copy (Haz Esto con el Descubrimiento de Vibra)

Ejecuta esto EN PARALELO con el Descubrimiento de Vibra. El Descubrimiento de Vibra te da la apariencia. La Estrategia de Copy te da las palabras. Ambos deben realizarse antes de cualquier código.

La Ecuación de Conversión

Cada decisión de copy fluye de esto:

Tasa de Compra = Deseo - (Esfuerzo + Confusión)

Aumenta el deseo → comunica el valor de forma clara y específica
Disminuye el esfuerzo → brevedad, estructura escaneable, siguientes pasos obvios
Disminuye la confusión → di exactamente qué es, haz que los botones sean imposibles de pasar por alto

Si te quedas atascado en una decisión de copy, pregúntate: "¿Esto aumenta el deseo o disminuye el esfuerzo/la confusión?"

Paso 1: Descubrimiento de Objeciones

Antes de escribir un solo titular, identifica las objeciones de compra. Pregunta al usuario:

"¿Qué casi impide que tus clientes compren?" "¿Por qué los no clientes aún no han comprado?"

Categorías comunes de objeciones:

"No tengo las habilidades/el tiempo para esto"
"Esto no funcionará en mi situación específica"
"Es demasiado caro para lo que obtengo"
"Todavía no confío lo suficiente en esto"
"No entiendo qué hace esto realmente"

Escribe las 3 principales objeciones. Estas impulsan el gancho de tu titular, el copy de las características y el encuadre de la CTA.

Paso 2: Fórmula del Titular

Cada titular principal sigue: Propuesta de Valor + Gancho

La propuesta de valor debe pasar esta prueba de fuego:

Si un visitante ve SOLO el titular y nada más, ¿sabrá exactamente qué vendes?

❌ "Mejora tu flujo de trabajo" (relleno corporativo: ¿flujo de trabajo para qué?) ❌ "El futuro de la productividad" (no dice nada concreto) ✅ "Comestibles entregados en 1 hora" (específico, concreto, claro) ✅ "Diseña sitios web visualmente, sin necesidad de código" (qué hace + objeción clave resuelta)

El gancho es de dos tipos:

Tipo A — Afirmación audaz y específica (desencadena curiosidad):

"Reduce el tiempo de implementación de 4 horas a 12 minutos"
"10,000 equipos enviaron más rápido el mes pasado"

Tipo B — Objeción abordada (elimina la barrera de compra #1):

"No se requiere tarjeta de crédito" (aborda la objeción de confianza)
"Funciona con tus herramientas existentes" (aborda la objeción de coste de cambio)
"Configuración en 5 minutos" (aborda la objeción de esfuerzo)

Usa tu objeción principal del Paso 1 para elegir el tipo de gancho.

Paso 3: Reglas del Subencabezado

El subencabezado hace exactamente dos cosas:

Explica qué es el producto (si el titular se centró en los beneficios)
Explica cómo es posible la afirmación audaz (si el titular hizo una afirmación)

Máx.: 1-2 oraciones. Mantenlo ligero. Si necesitas tres oraciones, tu titular no está haciendo suficiente trabajo.

Paso 4: Estructura del Copy de las Características

Cada característica recibe exactamente tres elementos:

Elemento	Reglas
Encabezado de la característica	Solo propuesta de valor corta. Sé directo. ❌ "Empodera a tu equipo" ✅ "Colaboración en tiempo real"
Párrafo de la característica	Descripción concisa + aborda UNA objeción crítica. Vincula a los detalles si es necesario, sin muros de texto.
Imagen de la característica	Muestra el producto EN ACCIÓN. Para software: GIFs > capturas de pantalla > arte abstracto. Para bienes físicos: casos de uso + primeros planos de calidad de construcción.

Cada característica debe vincularse con la propuesta de valor dominante del héroe. Las características no son aleatorias: son evidencia de la afirmación que hiciste arriba del pliegue.

Paso 5: Copy de la CTA

Las CTA deben continuar la narrativa del héroe, no ser genéricas.

❌ "Comienza ahora" / "Solicita una demo" / "Regístrate" (perezoso, sin contexto) ✅ "Encuentra comida cerca de mí" (continúa una narrativa de entrega) ✅ "Empieza a diseñar" (continúa una narrativa de herramienta de diseño) ✅ "Ve tus ahorros" (continúa una narrativa financiera)

El texto del botón de la CTA debe sentirse como la siguiente oración natural después de leer el titular.

Paso 6: Estrategia de Prueba Social

Si tienes clientes/prensa notables:

Muestra los logotipos en una marquesina: crea FOMO ("todos ya saben de esto")
Destaca métricas impresionantes (número de clientes, ingresos procesados, etc.)

Si NO tienes prueba social notable aún (inicio en frío):

Ofrece acceso gratuito a 3-5 empresas reconocibles, luego muestra sus logotipos
Usa testimonios específicos con nombres y fotos reales (incluso de usuarios beta)
Muestra estadísticas agregadas ("Usado por más de 500 equipos" supera a una barra de logotipos vacía)
Considera "Visto en" con cualquier mención de prensa, podcasts o boletines informativos

No lo finjas. Una sección de prueba social vacía es peor que ninguna sección.

Paso 7: Enrutamiento para Múltiples Audiencias

Si tu producto sirve a personas distintas (ej., individuos vs. equipos, desarrolladores vs. diseñadores):

Agrega un elemento "elige tu propia aventura" cerca de la parte superior de la página que dirija a los visitantes a las secciones relevantes. Ejemplos:

Pestañas de alternancia: "Para desarrolladores" / "Para diseñadores"
Héroe dividido: "Soy [rol A]" / "Soy [rol B]"
Páginas de aterrizaje segmentadas vinculadas desde el héroe

No fuerces a todos a través del mismo embudo si tienen necesidades diferentes.

Especificación de la Estrategia de Copy

Escribe esto junto con tu Especificación de Vibra:

LAS 3 PRINCIPALES OBJECIONES:
1. [objeción] → abordada en: [titular/característica/CTA]
2. [objeción] → abordada en: [titular/característica/CTA]
3. [objeción] → abordada en: [titular/característica/CTA]

TITULAR:
- Propuesta de valor: [qué vendes, de forma concreta]
- Tipo de gancho: [afirmación audaz / objeción abordada]
- Titular completo: [el texto real]
- Prueba de fuego: ¿Alguien sabría qué vendemos solo con esto? [sí/no]

SUBENCABEZADO: [1-2 oraciones: qué es + cómo funciona la afirmación]

TEXTO DE CTA: [continuación narrativa del titular]

AUDIENCIA: [única / múltiples personas]
- Si es múltiple: [cómo los enrutamos]

La Regla del 50%

Dedica el 50% de tu tiempo a la sección héroe. Es la imagen de portada para las redes sociales, la primera impresión, el gancho. Todo lo demás fluye de hacer bien el héroe.

Composición de las Secciones (De Arriba a Abajo)

1. Sección Héroe (Enfoque Principal)

El elemento que lo define todo o lo rompe. Debe contener:

Titular: Propuesta de Valor + Gancho de tu Especificación de Estrategia de Copy (ver arriba). Debe pasar la prueba de fuego: si alguien ve SOLO esto, ¿sabe qué vendes?
Subencabezado: Explica qué es + cómo funciona la afirmación. Máximo 1-2 oraciones, mantenlo ligero.
Botón(es) de CTA: Continuación narrativa del titular (no "Comienza ahora" — ver reglas de Copy de CTA arriba). CTA secundaria opcional.
Prueba Social: Marquesina de logotipos, testimonios o insignias de confianza. Si es un inicio en frío, consulta la Estrategia de Prueba Social arriba.
Elemento Visual: Imagen del producto, ilustración o fondo animado

Variaciones del Héroe:

Diseño dividido (texto a la izquierda, imagen a la derecha)
Centrado con elementos flotantes
Fondo a sangre con texto superpuesto
Asimétrico con elementos decorativos

2. Sección de Características/Beneficios

Muestra qué hace el producto. Cada característica necesita tres elementos: encabezado (propuesta de valor corta, sin "Empoderar/Revolucionar")

...

diyanto29/crm_worrie

¿Qué es crm_worrie?

Preguntar en tu IA favorita

Documentación