Installez le skill CLI belt : npx skills add belt-sh/cli
Conception de Pages d'Atterrissage
Concevez des pages d'atterrissage à fort taux de conversion avec des visuels générés par IA via l'interface CLI inference.sh.
Démarrage Rapide
Nécessite l'interface CLI inference.sh (belt). Instructions d'installation
belt login
belt app run falai/flux-dev-lora --input '{
"prompt": "professional person smiling while using a laptop showing a clean dashboard interface, bright modern office, natural lighting, warm and productive atmosphere, lifestyle marketing photography",
"width": 1248,
"height": 832
}'
belt app run tavily/search-assistant --input '{
"query": "best SaaS landing page examples 2024 conversion rate"
}'
Formule Above-the-Fold
Tout ce qui est visible avant le défilement doit communiquer la valeur en 5 secondes.
┌─────────────────────────────────────────────────┐
│ [Logo] [Nav] [Bouton CTA] │
│ │
│ Titre (6-12 mots) │
│ ───────────────────────── │
│ Sous-titre (15-25 mots) [Image Hero] │
│ montrant le │
│ [Bouton CTA Principal] RÉSULTAT, pas │
│ "Essai Gratuit" le produit │
│ │
│ Preuve sociale : "Adopté par +10 000 équipes" |
│ [logo] [logo] [logo] [logo] [logo] │
└─────────────────────────────────────────────────┘
Les 5 Éléments
| Élément | Règle | Exemple |
|---|
| Titre | 6-12 mots, énonce le résultat | "Publiez votre doc en minutes, pas en jours" |
| Sous-titre | 15-25 mots, développe le comment | "Documentation alimentée par l'IA qui s'écrit depuis votre codebase. Aucun modèle requis." |
| Image hero | Montre le RÉSULTAT, pas le produit | Personne satisfaite des résultats, pas une capture d'écran de votre interface |
| CTA principal | Verbe d'action + valeur | "Commencez l'essai gratuit" pas "Soumettre" ou "En savoir plus" |
| Preuve sociale | Logos, chiffres ou micro-témoignage | "Adopté par +10 000 équipes chez [logos]" |
Titres
Formules qui Convertissent
| Formule | Exemple |
|---|
| [Résultat] sans [difficulté] | "Une belle doc sans compétences en design" |
| [Résultat] en [délai] | "Lancez votre site en 5 minutes" |
| Le [meilleur moyen] de [tâche courante] | "Le moyen le plus rapide de construire des API" |
| Arrêtez [difficulté]. Commencez [résultat]. | "Arrêtez de deviner. Commencez à savoir." |
| [Nombre] [choses] pour [résultat] | "Un seul outil pour gérer toutes vos données" |
Qu'est-ce qui Fait Échouer les Titres
❌ "Bienvenue sur notre plateforme" (ne dit rien sur la valeur)
❌ "La solution alimentée par IA la plus avancée au monde" (buzzwords, pas de spécificité)
❌ "Nous aidons les entreprises à grandir" (vague, générique)
❌ "Logiciel d'entreprise de nouvelle génération" (qu'est-ce que ça FAIT ?)
✅ "Transformez les retours clients en fonctionnalités produit, automatiquement"
✅ "Le tableur qui pense comme une base de données"
✅ "Trouvez et corrigez les bugs avant vos utilisateurs"
Images Hero
Montrez le Résultat, Pas le Produit
❌ Capture d'écran de votre tableau de bord (ennuyeux, difficile à comprendre d'un coup d'œil)
❌ Fond géométrique abstrait (ne dit rien)
❌ Photo de poignée de main (cliché)
✅ Personne satisfaite regardant des résultats clairs sur son écran
✅ Transformation avant/après
✅ Le résultat final de l'utilisation de votre produit
belt app run falai/flux-dev-lora --input '{
"prompt": "happy professional team celebrating around a laptop showing positive growth charts, bright modern office, natural sunlight, authentic candid moment, marketing photography style, warm tones",
"width": 1248,
"height": 832
}'
belt app run bytedance/seedream-4-5 --input '{
"prompt": "clean modern laptop on a minimalist desk showing a beautiful analytics dashboard, floating UI elements emerging from the screen, soft gradient background, product marketing style, professional",
"size": "2K"
}'
Boutons CTA
Texte
| Bons CTA | Mauvais CTA |
|---|
| "Commencez l'essai gratuit" | "Soumettre" |
| "Démarrez gratuitement" | "Cliquez ici" |
| "Voyez-le en action" | "En savoir plus" (faible engagement) |
| "Créez votre premier rapport" | "S'inscrire" (vague) |
| "Essayez gratuitement 14 jours" | "S'enregistrer" |
Formule : Verbe d'action + valeur/résultat + (facultatif : réduisez le risque)
Design
| Élément | Règle |
|---|
| Couleur | Contraste élevé avec l'arrière-plan — doit être l'élément le plus visible |
| Taille | Hauteur minimale de 44px (cible tactile), assez large pour le texte + l'espacement |
| Position | Au-dessus de la ligne de flottaison, répété après chaque section majeure |
| Espace blanc | Rembourrage généreux autour du bouton, ne l'encombrez pas |
| CTA secondaire | Si nécessaire, utilisez un lien textuel en dessous ("ou regardez une démo") |
Ordre des Sections
La séquence éprouvée pour les pages d'atterrissage :
| Section | Objectif | Élément Clé |
|---|
| 1. Hero | Valeur fondamentale, CTA principal | Titre + image + CTA |
| 2. Preuve sociale | Instaurer la confiance | Logos, chiffres, badges |
| 3. Problème | Créer de l'empathie | Point de douleur qu'ils reconnaissent |
| 4. Solution/Fonctionnalités | Montrer comment vous résolvez | 3 fonctionnalités clés avec visuels |
| 5. Comment ça marche | Réduire la complexité | 3 étapes : inscription, configuration, bénéfice |
| 6. Témoignages | Prouver que ça marche | 2-3 citations clients spécifiques |
| 7. Tarifs | Permettre la décision | Niveaux clairs, mettre en avant le recommandé |
| 8. FAQ | Gérer les objections | 5-7 questions fréquentes |
| 9. CTA final | Capturer les retardataires | Répéter le CTA principal avec urgence |
Types de Preuve Sociale
| Type | Impact | Placement |
|---|
| Logos d'entreprises | Plus rapide à traiter, confiance élevée | En dessous du hero |
| Nombre d'utilisateurs | Signal d'échelle | Hero ou barre de preuve sociale |
| Note par étoiles | Qualité du produit | Près du CTA |
| Témoignages | Crédibilité détaillée | Section dédiée |
| Statistiques d'études de cas | Preuve spécifique | Sections de fonctionnalités |
| Badges de confiance | Sécurité/conformité | Près des formulaires, tarifs, pied de page |
belt app run exa/answer --input '{
"question": "What is the average conversion rate for SaaS landing pages with social proof vs without?"
}'
Conception de Formulaire
| Règle | Impact |
|---|
| Chaque champ réduit la conversion d'environ 11% | Minimisez les champs |
| Nom + Email = maximum pour les inscriptions | Ne demandez pas téléphone, entreprise, rôle |
| Mise en page à colonne unique | N'utilisez pas de formulaires multi-colonnes |
| Validation en ligne | Montrez les erreurs immédiatement, pas à la soumission |
| Messages d'erreur clairs | "L'email est requis" pas "Erreur dans le champ 3" |
| Texte du bouton Soumettre = action | "Créer un compte" pas "Soumettre" |
Optimisation Mobile
| Règle | Pourquoi |
|---|
| Bouton CTA pleine largeur | Facile à taper avec les pouces |
| CTA collant lors du défilement | Toujours accessible |
| Pas de défilement horizontal | Casse la mise en page mobile |
| Police minimum 16px | iOS zoome les entrées en dessous de 16px |
| Cibles tactiles minimum 48x48px | Apple HIG, Google Material |
| Images responsives | Ne débordez pas du viewport |
| Priorisez titre + CTA | Simplifiez l'above-the-fold |
Image OG pour le Partage
belt app run falai/flux-dev-lora --input '{
"prompt": "clean professional social sharing card, product name and tagline on modern gradient background, minimal design, corporate tech aesthetic, 1200x630 aspect ratio equivalent",
"width": 1200,
"height": 630
}'
belt app run infsh/html-to-image --input '{
"html": "<div style=\\