LandingRabbit/landingrabbit-skills

Habilidad de Formato de Página LandingRabbit

Propósito

Usa esta habilidad cuando un usuario esté redactando el texto de una página de aterrizaje en Claude/ChatGPT/Gemini y quiera:

• Usar el servicio LLM de su elección para la lluvia de ideas y creación de contenido, y luego traer ese contenido a LandingRabbit.
• Obtener el texto en un formato Markdown que LandingRabbit pueda analizar de manera confiable y convertir en una página.
• Usar solo los tipos de sección y campos de contenido compatibles con LandingRabbit para que los usuarios puedan importar fácilmente su estructura de página y texto listos en LandingRabbit.

Tarea paso a paso

Tu tarea es leer el texto listo de la página de aterrizaje del usuario y formatearlo en el Markdown listo para LandingRabbit.

1. Si aún no se ha discutido en el chat, pide al usuario que proporcione un texto listo para una página de aterrizaje (por ejemplo, página de inicio, página de destino de anuncios, página de suscripción a boletín, página de lead magnet, página de precios, etc.)
2. Revisa el texto planificado y la estructura de la página
3. Pide al usuario más información si no estás seguro sobre alguna parte del contenido y qué tipo de sección en LandingRabbit se adaptaría mejor a cada parte del plan
4. Asigna el texto a las secciones y elementos de contenido disponibles
5. Proporciona tu respuesta en Markdown listo para LandingRabbit siguiendo los ejemplos de respuesta

Instrucciones importantes

• Proporciona tu respuesta como un documento único que sea fácil de copiar y pegar en LandingRabbit
• Evita hacer cambios en el texto del usuario y en el orden de las secciones
• Comparte solo el Markdown listo para LandingRabbit con los tipos de sección y diseños sugeridos. No agregues ningún comentario o explicación adicional en tu respuesta
• Los ejemplos en esta habilidad solo muestran la estructura compatible. Preserva el contenido y el tono de voz del usuario
• No necesitas usar todas las secciones y elementos de contenido disponibles. Respeta el contenido listo del usuario
• Usa --- solo entre secciones en la respuesta final, nunca dentro de bloques de contenido de sección
• Nunca inventes ninguna de las configuraciones de diseño opcionales. Consulta las instrucciones del usuario y pide su orientación cuando sea necesario.
• Si el usuario está planeando una publicación de blog, documento de ayuda o cualquier otra página que sea un formato de artículo estándar, puedes usar una sola sección Custom con Markdown.
• No generes líneas solo con URL (por ejemplo, /schedule-a-call, https://...) como texto normal; mantén las URL solo dentro de enlaces Markdown [texto](url)

Secciones disponibles

• hero: La sección principal con la propuesta de valor inicial y la acción de conversión primaria en la mayoría de las páginas.
• trustedBy: Sección de prueba social para logotipos y contenido de credibilidad.
• collection: Bloques estructurados de cómo funciona, beneficios y listas de servicios/características con elementos repetibles. Estos son los diseños más típicos en cualquier página de aterrizaje.
• testimonials: Citas de prueba del cliente
• pricing: Una oferta de servicio única o tabla comparativa de planes de precios
• steps: Proceso, lista de verificación, secuencia de acciones/resultados o problemas que enfrentan los clientes. Solo se usa para listas y declaraciones claras y simples, no para describir algo más complejo que requiera múltiples elementos repetibles.
• comparison: Comparación de contraste antes/después o actual/futuro. Por ejemplo, mostrar cómo se sentía el cliente antes y después de comprar el servicio.
• faq: Sección de preguntas y respuestas para manejar objeciones.
• cta: Sección de conversión enfocada, a menudo cerca del final, pero a veces también entre el contenido de la página.
• custom: Contenido mixto de forma libre (encabezados, bloques de texto, imagen, inserción, CTA). Típicamente usado para secciones como "Acerca de nosotros", declaraciones simples (por ejemplo, H2 y bloque de texto) o el contenido completo de una página de artículo.
• tabs: Pestañas cliqueables, cada una intercambia su propia tarjeta de contenido. Por ejemplo, una pestaña por audiencia o caso de uso.
• feed: Lista dinámica de publicaciones de una colección del espacio de trabajo (solo configuración). Muestra, por ejemplo, las últimas publicaciones de blog y artículos de noticias en una página de inicio.

Formato de respuesta para secciones

Proporciona el tipo de sección en tu respuesta (por ejemplo, Tipo de sección: hero), y cuando lo solicite el usuario, configuraciones de diseño específicas de la sección.

Para cada sección, usa una estructura nativa de Markdown como esta:

• Subtítulo: [subtítulo]: ...
• Icono (para elementos de collection + boxes-icons): [icono]: ... (deja vacío cuando el usuario deba elegir iconos en la interfaz)
• Letra pequeña: [letrapequena]: ...
• Título de sección o elemento: #, ##, ###
• Descripción/cuerpo: párrafos Markdown simples
• Enlaces CTA: uno por línea (cada uno en su propia línea), por ejemplo: [CTA Primario](url) [CTA Secundario](url)
• Imágenes: ![Alt](url)
• Inserciones/formularios/widgets: bloques html delimitados

En hero, cta y collection (diseño alternado), los usuarios pueden agregar:

• Una cuadrícula de cajas que muestren, por ejemplo, logros de la empresa o detalles sobre el servicio. Comienza con una línea [cajas], luego un encabezado + párrafo por caja (### en hero/cta, #### dentro de un elemento collection-alternate).
  • campos: [subtítulo]: ... (opcional), título (el encabezado ###/####), descripción (párrafo), enlaces CTA (uno por línea)
• Un testimonio de un cliente o socio satisfecho, que respalde el texto de la sección y le dé credibilidad. Comienza con una línea [testimonio].
  • campos: cita (primera línea), nombre, cargo, empresa

(En collection, [cajas] y [testimonio] aplican solo cuando suggestedLayout: alternate.)

Usa --- entre secciones.

Listas con viñetas en descripciones

En cualquier campo de descripción o subtítulo, comienza una línea con uno de estos marcadores para agregar una lista con viñetas estilizada:

• ✅ Texto - éxito (marca verde); beneficios, características, resultados positivos
• ✓ Texto - registro (marca simple heredada); beneficios, características, resultados positivos
• ☑ Texto - verificación (casilla); listas de verificación, "lo que está incluido"
• ❌ Texto (o ✗) - destructivo (X roja); problemas, puntos débiles, elementos negativos
• ⭐ Texto - estrella; destacados, elementos destacados
• → Texto (o ➡️) - flecha; flujos direccionales, "siguiente paso"
• - Texto (o *, •) - viñeta estándar (punto); listas neutrales
• :palabra: Texto - un icono personalizado por una palabra, por ejemplo, :cohete: Construye más rápido. La palabra se resuelve a un icono coincidente si hay una coincidencia segura; de lo contrario, se muestra como un punto simple.

Mezcla tipos de marcadores y párrafos regulares en el mismo campo. Las líneas consecutivas con el mismo marcador se convierten en una lista.

Ejemplo - descripción hero con viñetas de éxito:

# El título de tu página

✅ Páginas en vivo en 5 minutos
✅ Amado por más de 200 equipos
✅ Compatible con GDPR

[Comienza](/registro)

Diseño sugerido

Para secciones que admiten múltiples diseños, agrega suggestedLayout: en su propia línea antes del contenido de la sección.

---

Hero

• horizontal (predeterminado) - texto a la izquierda, medios a la derecha
• horizontal-reversed - medios a la izquierda, texto a la derecha
• vertical - texto centrado, sin medios o medios debajo

Basado en la solicitud del usuario, también puedes definir configuraciones de diseño opcionales:

• style: <nombre de estilo guardado> — aplicar un estilo de sección nombrado
• mediaVisibility: all | desktop | mobile | none — mostrar u ocultar los medios del hero por dispositivo (none los oculta)
• imageFit: fill | free-ratio — cómo los medios del hero llenan su espacio

---

Steps

stepDecoration controla el icono mostrado junto a cada elemento. Agréguelo antes del contenido de la sección.

• number (predeterminado) - numerado; usar para pasos de proceso secuenciales
• none - sin icono; usar para listas de contenido simple
• check - marca de verificación; usar para listas de verificación de características y listas "lo que está incluido"
• star - estrella; usar para destacados y logros notables
• arrow - flecha; usar para flujos direccionales y secuencias de "siguiente paso"
• success - círculo relleno con marca; usar para beneficios y resultados positivos
• destructive - círculo relleno con X; usar para problemas y puntos débiles

Si las líneas de elementos de steps ya comienzan con marcadores emoji (por ejemplo, 😩, ✅, 🚀), establece stepDecoration: none. Si stepDecoration no es none, elimina los marcadores emoji/icono principales de las líneas de pasos.

Basado en la solicitud del usuario, también puedes definir configuraciones de diseño opcionales:

• style: <nombre de estilo guardado> — aplicar un estilo de sección nombrado
• mediaVisibility: all | desktop | mobile | none — mostrar u ocultar los medios de la sección por dispositivo
• imageFit: fill | free-ratio — cómo los medios de la sección llenan su espacio
• mediaPosition: left | right — en qué lado de la lista se encuentran los medios
• stepIcon: <una palabra descriptiva o nombre de icono exacto en CamelCase> — icono personalizado junto a cada paso (reemplaza stepDecoration)

---

Tabs

• top (predeterminado) - tira de pestañas sobre la tarjeta
• left - tira de pestañas en una columna a la izquierda de la tarjeta
• right - tira de pestañas en una columna a la derecha de la tarjeta

Basado en la solicitud del usuario, también puedes definir configuraciones de diseño opcionales:

• cardStyle: stacked | split — tarjeta como una pila, o medios en su propia columna (solo diseño top)
• mediaSide: left | right — en qué lado está la columna de medios (diseño top con cardStyle: split)
• tabContentMode: expand | show-all — si solo la pestaña activa muestra su descripción, o todas lo hacen (solo diseños left/right)
• autoplay: <segundos> | off — avance automático de las pestañas
• autoplayProgress: on | off — barra de progreso móvil en cada pestaña
• style: <nombre de estilo guardado> — aplicar un estilo de sección nombrado
• imageFit: fill | free-ratio — cómo los medios de la tarjeta llenan su espacio

---

Collection

• alternate - bloques de beneficios narrativos (cada elemento: título + párrafo, lados alternados) → Por ejemplo, Beneficios, Propuestas de valor, Soluciones, "Por qué elegirnos", Ejemplos de casos de estudio e Historias de clientes
• boxes - cuadrícula de características con imágenes por elemento → Por ejemplo, Servicios, Características, Integraciones, Capacidades técnicas
• boxes-text - cuadrícula de características solo texto, sin imágenes → Por ejemplo, Casos de uso, Listas de capacidades, Resúmenes cortos de características
• boxes-icons - cuadrícula de iconos (icono manejado por separado del contenido de texto) → A menudo aspectos destacados rápidos de características/servicios o cómo funciona en pocos pasos (números como iconos)

Cuando se usa boxes-icons, NO agregues [subtítulo]: ... del elemento arriba del icono a menos que se solicite claramente en el texto planificado. Para cada [icono]:, usa UNA palabra descriptiva (por ejemplo, [icono]: cohete), un nombre de componente exacto en CamelCase que preferiblemente contenga una o dos palabras semánticas (por ejemplo, [icono]: IconCohete o [icono]: IconFlechaDerecha), o déjalo vacío ([icono]:) para que el usuario elija en la interfaz. Los nombres exactos y las coincidencias de una sola palabra con confianza se resuelven a iconos reales. Si se proporciona una frase, solo se busca su primera palabra; los valores sin coincidencia vuelven a vacío.

Basado en la solicitud del usuario, también puedes definir configuraciones de diseño opcionales:

• style: <nombre de estilo guardado> — aplicar un estilo de sección nombrado
• imageFit: fill | free-ratio — cómo los medios del elemento llenan su espacio (solo diseños alternate y boxes)
• sectionHeaderPosition: above | left — colocación del encabezado de sección (solo diseños boxes)
• dividers: on | off — divisores entre cajas (solo diseños boxes)

---

Testimonials

• carousel (predeterminado) - desplazamiento horizontal, mejor para 3+ testimonios
• grid - todos los testimonios visibles a la vez, mejor para 2-4

Basado en la solicitud del usuario, también puedes definir configuraciones de diseño opcionales:

• style: <nombre de estilo guardado> — aplicar un estilo de sección nombrado
• sectionHeaderPosition: above | left | right — colocación del encabezado de sección
• imageFit: fill | free-ratio — cómo los medios del testimonio llenan su espacio
• carouselAutoplay: on | off — avance automático del carrusel (solo diseño carrusel)
• carouselAutoplayDuration: 2-30 — segundos por diapositiva (decimales permitidos; solo con autoplay activado)

---

Comparison

• boxes-text (predeterminado) - comparación solo texto lado a lado
• boxes - lados con una imagen por lado
• boxes-icons - lados con un icono por lado (proporcionado mediante [icono]: ... dentro de cada lado)

Iconos de línea de viñeta: un marcador inicial elige el icono de esa línea y se elimina del texto — ✅ → éxito, ✓ → verificación, ❌/✗ → destructivo, ⭐ → estrella, → → flecha. Las líneas sin marcar usan los valores predeterminados del lado (antes: destructivo, después: éxito). Un marcador por línea; no uses otros emoji como marcadores de línea.

imageFit: fill | free-ratio controla cómo las imágenes laterales llenan sus espacios (solo diseño boxes).

---

CTA

• default (predeterminado) - título centrado, descripción y botones
• embed - título y botones con imagen o inserción al lado

Basado en la solicitud del usuario, también puedes definir configuraciones de diseño opcionales:

• style: <nombre de estilo guardado> — aplicar un estilo de sección nombrado
• mediaVisibility: all | desktop | mobile | none — mostrar u ocultar los medios por dispositivo (solo diseño embed)
• imageFit: fill | free-ratio — cómo los medios llenan su espacio (solo diseño embed)

---

Custom

• left (predeterminado) - alineado a la izquierda, estilo artículo o blog
• middle - centrado, estilo página de aterrizaje

Basado en la solicitud del usuario, también puedes definir configuraciones de diseño opcionales:

• style: <nombre de estilo guardado> — aplicar un estilo de sección nombrado

---

Pricing

Pricing no tiene opciones de diseño.

Basado en la solicitud del usuario, también puedes definir configuraciones de diseño opcionales:

• style: <nombre de estilo guardado> — aplicar un estilo de sección nombrado
• pricingSwitch: billing-period=toggle, currency=tabs — estilo de selector por interruptor (solo toggle o tabs se aplica al interruptor de facturación; toggle necesita exactamente dos opciones)

---

FAQ

FAQ no tiene opciones de diseño.

Basado en la solicitud del usuario, también puedes definir configuraciones de diseño opcionales:

• style: <nombre de estilo guardado> — aplicar un estilo de sección nombrado
• sectionHeaderPosition: above | left — colocación del encabezado de sección

---

TrustedBy

TrustedBy no tiene opciones de diseño.

Basado en la solicitud del usuario, también puedes definir configuraciones de diseño opcionales:

• style: <nombre de estilo guardado> — aplicar un estilo de sección nombrado
• logosScroll: off | right-to-left | left-to-right — desplazamiento automático de la fila de logotipos (desactivado por defecto)
• logosScrollSpeed: 5-120 — segundos por bucle de desplazamiento (solo cuando el desplazamiento está activado)

---

Feed

• boxes (predeterminado) - cuadrícula de publicaciones con imágenes por publicación
• boxes-text - cuadrícula de publicaciones solo texto, sin imágenes
• alternate - bloques de publicaciones narrativas, lados alternados

La configuración de Feed va en sus propias líneas después de Tipo de sección: feed:

• suggestedLayout: boxes | boxes-text | alternate
• style: <nombre de estilo de sección>
• collection: <título o slug exacto de la colección>