LandingRabbit/landingrabbit-skills

Compétence de Formatage de Page LandingRabbit

Objectif

Utilisez cette compétence lorsqu'un utilisateur rédige du contenu de page d'atterrissage dans Claude/ChatGPT/Gemini et souhaite :

• Utiliser le service LLM de son choix pour le brainstorming et la création de contenu, puis importer ce contenu dans LandingRabbit.
• Obtenir le texte dans un format Markdown que LandingRabbit peut analyser de manière fiable et transformer en page.
• Utiliser uniquement les types de sections et les champs de contenu pris en charge par LandingRabbit pour que les utilisateurs puissent facilement importer la structure de page et le texte prêts à l'emploi dans LandingRabbit.

Tâche étape par étape

Votre tâche consiste à lire le contenu de page d'atterrissage prêt de l'utilisateur et à le formater en Markdown prêt pour LandingRabbit.

1. Si cela n'a pas déjà été discuté dans la conversation, demandez à l'utilisateur de fournir un texte prêt pour une page d'atterrissage (par exemple, page d'accueil, page d'atterrissage publicitaire, page d'inscription à une newsletter, page d'aimant à prospects, page de tarification, etc.).
2. Examinez le texte prévu et la structure de la page.
3. Demandez plus d'informations à l'utilisateur si vous n'êtes pas sûr de certaines parties du contenu et du type de section dans LandingRabbit qui conviendrait le mieux à chaque partie du plan.
4. Faites correspondre le contenu avec les sections et les éléments de contenu disponibles.
5. Fournissez votre réponse en Markdown prêt pour LandingRabbit en suivant les exemples de réponses.

Instructions importantes

• Fournissez votre réponse sous forme d'un seul document facile à copier-coller dans LandingRabbit.
• Évitez de modifier le texte de l'utilisateur et l'ordre des sections.
• Partagez uniquement le Markdown prêt pour LandingRabbit avec les types de sections et les mises en page suggérées. N'ajoutez aucun commentaire ou explication supplémentaire dans votre réponse.
• Les exemples de cette compétence servent uniquement à montrer la structure prise en charge. Préservez le contenu et le ton de l'utilisateur.
• Vous n'avez pas besoin d'utiliser toutes les sections et tous les éléments de contenu disponibles. Respectez le contenu prêt de l'utilisateur.
• Utilisez --- uniquement entre les sections dans la réponse finale, jamais à l'intérieur des blocs de contenu de section.
• N'inventez jamais de configurations de mise en page optionnelles. Référez-vous aux instructions de l'utilisateur et demandez ses conseils si nécessaire.
• Si l'utilisateur prévoit un article de blog, un document d'aide ou toute autre page au format article standard, vous pouvez utiliser une seule section personnalisée avec Markdown.
• Ne produisez pas de lignes contenant uniquement des URL (par exemple /planifier-un-appel, https://...) comme texte normal ; conservez les URL uniquement dans les liens Markdown [texte](url).

Sections disponibles

• hero : La section principale avec la proposition de valeur d'ouverture et l'action de conversion principale sur la plupart des pages.
• trustedBy : Section de preuve sociale pour les logos et le contenu de crédibilité.
• collection : Blocs structurés de type « comment ça marche », avantages et listes de services/fonctionnalités avec des éléments répétables. Ce sont les mises en page les plus typiques sur toute page d'atterrissage.
• testimonials : Témoignages de clients.
• pricing : Une offre de service unique ou un tableau de comparaison de plans tarifaires.
• steps : Processus, liste de contrôle, séquence d'actions/résultats ou problèmes auxquels les clients sont confrontés. Utilisé uniquement pour des listes et des déclarations claires et simples, pas pour décrire quelque chose de plus complexe nécessitant plusieurs éléments répétables.
• comparison : Comparaison avant/après ou contraste actuel/futur. Par exemple, montrer comment le client se sentait avant et après l'achat du service.
• faq : Section de questions-réponses pour traiter les objections.
• cta : Section de conversion ciblée, souvent vers la fin, mais parfois aussi entre les contenus de la page.
• custom : Contenu mixte libre (titres, blocs de texte, image, intégration, CTA). Généralement utilisé pour des sections comme « À propos de nous », des déclarations simples (par exemple, H2 et bloc de texte), ou le contenu complet d'un article.
• tabs : Onglets cliquables, chacun affichant sa propre carte de contenu. Par exemple, un onglet par public ou cas d'utilisation.
• feed : Liste dynamique de publications issues d'une collection d'espace de travail (configuration uniquement). Affiche, par exemple, les derniers articles de blog et actualités sur une page d'accueil.

Format de réponse pour les sections

Indiquez le type de section dans votre réponse (par exemple, Section type : hero), et lorsque l'utilisateur le demande, les configurations de mise en page spécifiques à la section.

Pour chaque section, utilisez une structure native Markdown comme celle-ci :

• Accroche : [eyebrow]: ...
• Icône (pour les éléments collection + boxes-icons) : [icon]: ... (laissez vide lorsque l'utilisateur doit choisir les icônes dans l'interface)
• Petit texte : [smallprint]: ...
• Titre de section ou d'élément : #, ##, ###
• Description/corps : paragraphes Markdown simples
• Liens CTA : un par ligne (chacun sur sa propre ligne), par exemple : [CTA principal](url) [CTA secondaire](url)
• Images : ![Alt](url)
• Intégrations/formulaires/widgets : blocs html délimités

Dans les sections hero, cta et collection (mise en page alternative), les utilisateurs peuvent ajouter :

• Une grille de boîtes qui montrent, par exemple, les réalisations de l'entreprise ou des détails sur le service. Commencez par une ligne [boxes], puis un titre + un paragraphe par boîte (### dans hero/cta, #### à l'intérieur d'un élément de collection-alternate).
  • champs : [eyebrow]: ... (optionnel), titre (le titre ###/####), description (paragraphe), liens CTA (un par ligne)
• Un témoignage d'un client ou partenaire satisfait, soutenant le texte de la section et lui donnant de la crédibilité. Commencez par une ligne [testimonial].
  • champs : citation (première ligne), nom, rôle, entreprise

(Dans collection, [boxes] et [testimonial] s'appliquent uniquement lorsque suggestedLayout: alternate.)

Utilisez --- entre les sections.

Listes à puces dans les descriptions

Dans tout champ de description ou de sous-titre, commencez une ligne par l'un de ces marqueurs pour ajouter une liste à puces stylisée :

• ✅ Texte - succès (coche verte) ; avantages, fonctionnalités, résultats positifs
• ✓ Texte - succès (coche simple héritée) ; avantages, fonctionnalités, résultats positifs
• ☑ Texte - case à cocher (coche simple) ; listes de contrôle, « ce qui est inclus »
• ❌ Texte (ou ✗) - destructif (X rouge) ; problèmes, points douloureux, éléments négatifs
• ⭐ Texte - étoile ; points forts, éléments en vedette
• → Texte (ou ➡️) - flèche ; flux directionnels, « prochaine étape »
• - Texte (ou *, •) - puce standard (point) ; listes neutres
• :mot: Texte - une icône personnalisée en un mot, par exemple :rocket: Construisez plus vite. Le mot est résolu en une icône correspondante s'il y a une correspondance fiable ; sinon, il s'affiche comme un point simple.

Mélangez les types de marqueurs et les paragraphes normaux dans le même champ. Les lignes consécutives avec le même marqueur deviennent une seule liste.

Exemple - description hero avec puces de succès :

# Titre de votre page

✅ Pages en ligne en 5 min
✅ Adopté par plus de 200 équipes
✅ Conforme au RGPD

[Commencer](/inscription)

Mise en page suggérée

Pour les sections qui prennent en charge plusieurs mises en page, ajoutez suggestedLayout: sur sa propre ligne avant le contenu de la section.

---

Hero

• horizontal (par défaut) - texte à gauche, média à droite
• horizontal-reversed - média à gauche, texte à droite
• vertical - texte centré, pas de média ou média en dessous

Sur demande de l'utilisateur, vous pouvez également définir des configurations de mise en page optionnelles :

• style: <nom du style enregistré> — appliquer un style de section nommé
• mediaVisibility: all | desktop | mobile | none — afficher ou masquer le média hero par appareil (none le masque)
• imageFit: fill | free-ratio — comment le média hero remplit son emplacement

---

Steps

stepDecoration contrôle l'icône affichée à côté de chaque élément. Ajoutez-la avant le contenu de la section.

• number (par défaut) - numéroté ; à utiliser pour les étapes de processus séquentielles
• none - pas d'icône ; à utiliser pour les listes de contenu simples
• check - coche ; à utiliser pour les listes de contrôle des fonctionnalités et les listes « ce qui est inclus »
• star - étoile ; à utiliser pour les points forts et les réalisations notables
• arrow - flèche ; à utiliser pour les flux directionnels et les séquences « prochaine étape »
• success - cercle rempli avec coche ; à utiliser pour les avantages et les résultats positifs
• destructive - cercle rempli avec X ; à utiliser pour les problèmes et les points douloureux

Si les lignes des éléments de l'étape commencent déjà par des marqueurs emoji (par exemple 😩, ✅, 🚀), définissez stepDecoration: none. Si stepDecoration n'est pas none, supprimez les marqueurs emoji/icône de début des lignes d'étape.

Sur demande de l'utilisateur, vous pouvez également définir des configurations de mise en page optionnelles :

• style: <nom du style enregistré> — appliquer un style de section nommé
• mediaVisibility: all | desktop | mobile | none — afficher ou masquer le média de la section par appareil
• imageFit: fill | free-ratio — comment le média de la section remplit son emplacement
• mediaPosition: left | right — de quel côté de la liste se trouve le média
• stepIcon: <un mot descriptif ou un nom d'icône exact en CamelCase> — icône personnalisée à côté de chaque étape (remplace stepDecoration)

---

Tabs

• top (par défaut) - bande d'onglets au-dessus de la carte
• left - bande d'onglets dans une colonne à gauche de la carte
• right - bande d'onglets dans une colonne à droite de la carte

Sur demande de l'utilisateur, vous pouvez également définir des configurations de mise en page optionnelles :

• cardStyle: stacked | split — carte comme une seule pile, ou média dans sa propre colonne (mise en page top uniquement)
• mediaSide: left | right — de quel côté se trouve la colonne média (mise en page top avec cardStyle: split)
• tabContentMode: expand | show-all — si seul l'onglet actif affiche sa description, ou tous (mises en page left/right uniquement)
• autoplay: <secondes> | off — avance automatique des onglets
• autoplayProgress: on | off — barre de progression animée sur chaque onglet
• style: <nom du style enregistré> — appliquer un style de section nommé
• imageFit: fill | free-ratio — comment le média de la carte remplit son emplacement

---

Collection

• alternate - blocs d'avantages narratifs (chaque élément : titre + paragraphe, côtés alternés) → Par exemple, Avantages, Propositions de valeur, Solutions, « Pourquoi nous choisir », Exemples d'études de cas et Témoignages clients
• boxes - grille de fonctionnalités avec images par élément → Par exemple, Services, Fonctionnalités, Intégrations, Capacités techniques
• boxes-text - grille de fonctionnalités textuelles uniquement, pas d'images → Par exemple, Cas d'utilisation, Listes de capacités, Résumés de fonctionnalités courts
• boxes-icons - grille d'icônes (icône traitée séparément du contenu textuel) → Souvent des points forts de fonctionnalités/service en un coup d'œil ou un fonctionnement en quelques étapes (nombres comme icônes)

Lorsque vous utilisez boxes-icons, n'ajoutez PAS d'[eyebrow]: ... au-dessus de l'icône sauf si cela est clairement demandé dans le texte prévu. Pour chaque [icon]:, utilisez UN mot descriptif (par exemple [icon]: rocket), un nom de composant exact en CamelCase qui contient de préférence un ou deux mots sémantiques (par exemple [icon]: IconRocket ou [icon]: IconArrowRight), ou laissez-le vide ([icon]:) pour que l'utilisateur le choisisse dans l'interface. Les noms exacts et les correspondances fiables d'un seul mot sont résolus en icônes réelles. Si une phrase est fournie, seul son premier mot est recherché ; les valeurs non correspondantes reviennent à vide.

Sur demande de l'utilisateur, vous pouvez également définir des configurations de mise en page optionnelles :

• style: <nom du style enregistré> — appliquer un style de section nommé
• imageFit: fill | free-ratio — comment le média de l'élément remplit son emplacement (mises en page alternate et boxes uniquement)
• sectionHeaderPosition: above | left — placement de l'en-tête de section (mises en page boxes uniquement)
• dividers: on | off — séparateurs entre les boîtes (mises en page boxes uniquement)

---

Testimonials

• carousel (par défaut) - défilement horizontal, idéal pour 3 témoignages ou plus
• grid - tous les témoignages visibles en même temps, idéal pour 2 à 4

Sur demande de l'utilisateur, vous pouvez également définir des configurations de mise en page optionnelles :

• style: <nom du style enregistré> — appliquer un style de section nommé
• sectionHeaderPosition: above | left | right — placement de l'en-tête de section
• imageFit: fill | free-ratio — comment le média du témoignage remplit son emplacement
• carouselAutoplay: on | off — avance automatique du carrousel (mise en page carousel uniquement)
• carouselAutoplayDuration: 2-30 — secondes par diapositive (décimales autorisées ; uniquement avec l'avance automatique activée)

---

Comparison

• boxes-text (par défaut) - comparaison textuelle côte à côte
• boxes - côtés avec une image par côté
• boxes-icons - côtés avec une icône par côté (fournie via [icon]: ... dans chaque côté)

Icônes de lignes de puces : un marqueur de début choisit l'icône de cette ligne et est supprimé du texte — ✅ → succès, ✓ → coche, ❌/✗ → destructif, ⭐ → étoile, → → flèche. Les lignes non marquées utilisent les valeurs par défaut du côté (avant : destructif, après : succès). Un marqueur par ligne ; n'utilisez pas d'autres emoji comme marqueurs de ligne.

imageFit: fill | free-ratio contrôle comment les images latérales remplissent leurs emplacements (mise en page boxes uniquement).

---

CTA

• default (par défaut) - titre, description et boutons centrés
• embed - titre et boutons avec image ou intégration à côté

Sur demande de l'utilisateur, vous pouvez également définir des configurations de mise en page optionnelles :

• style: <nom du style enregistré> — appliquer un style de section nommé
• mediaVisibility: all | desktop | mobile | none — afficher ou masquer le média par appareil (mise en page embed uniquement)
• imageFit: fill | free-ratio — comment le média remplit son emplacement (mise en page embed uniquement)

---

Custom

• left (par défaut) - aligné à gauche, style article ou blog
• middle - centré, style page d'atterrissage

Sur demande de l'utilisateur, vous pouvez également définir des configurations de mise en page optionnelles :

• style: <nom du style enregistré> — appliquer un style de section nommé

---

Pricing

Pricing n'a pas d'options de mise en page.

Sur demande de l'utilisateur, vous pouvez également définir des configurations de mise en page optionnelles :

• style: <nom du style enregistré> — appliquer un style de section nommé
• pricingSwitch: billing-period=toggle, currency=tabs — style de sélecteur par interrupteur (toggle ou tabs nu s'applique à l'interrupteur de facturation ; toggle nécessite exactement deux options)

---

FAQ

FAQ n'a pas d'options de mise en page.

Sur demande de l'utilisateur, vous pouvez également définir des configurations de mise en page optionnelles :

• style: <nom du style enregistré> — appliquer un style de section nommé
• sectionHeaderPosition: above | left — placement de l'en-tête de section

---

TrustedBy

TrustedBy n'a pas d'options de mise en page.

Sur demande de l'utilisateur, vous pouvez également définir des configurations de mise en page optionnelles :

• style: <nom du style enregistré> — appliquer un style de section nommé
• logosScroll: off | right-to-left | left-to-right — défilement automatique de la rangée de logos (désactivé par défaut)
• logosScrollSpeed: 5-120 — secondes par boucle de défilement (uniquement lorsque le défilement est activé)

---

Feed

• boxes (par défaut) - grille de publications avec images par publication
• boxes-text - grille de publications textuelles uniquement, pas d'images
• alternate - blocs de publications narratifs, côtés alternés

La configuration de Feed se fait sur ses propres lignes après Section type: feed :

• suggestedLayout: boxes | boxes-text | alternate
• style: <nom du style de section>
• collection: <titre ou slug exact de la collection>