Landing Page
Cette compétence construit des pages d'atterrissage qui convertissent — pas seulement des pages qui ont belle apparence. Elle combine un ordre de sections éprouvé avec un vrai copywriting et du code prêt pour la production.
Analogie : une page d'atterrissage est un vendeur qui ne dort jamais. Un bon vendeur suit un ordre — capter l'attention, nommer la douleur, montrer le remède, prouver que ça marche, demander la vente. La structure des sections ci-dessous est ce script.
Flux de travail
Étape 1 — Poser jusqu'à 3 questions (pas plus)
- Que vendez-vous ou proposez-vous ? (produit, service, SaaS, conseil)
- Quel est le client idéal ? (l'avatar — soyez précis)
- Quelle est l'action principale unique que vous souhaitez que le visiteur accomplisse ? (acheter, réserver un appel, s'inscrire, rejoindre une liste d'attente)
Si le message répond déjà à ces questions, passez à l'étape suivante.
Étape 2 — Construire la structure des sections (ordre psychologique éprouvé)
- Hero — proposition de valeur claire + CTA principal. Le visiteur doit comprendre ce que c'est et pourquoi c'est important en 5 secondes.
- Problème — agiter la douleur du client. Faites-lui ressentir le coût de ne pas résoudre le problème.
- Solution — comment le produit/service résout cette douleur.
- Fonctionnalités — 3 à 6 éléments clés, rédigés comme des avantages, pas des spécifications (« livrer en un week-end », pas « construit avec le framework X »).
- Preuve sociale — témoignages, logos, chiffres, résultats.
- Tarification — le cas échéant ; paliers clairs, un mis en évidence.
- FAQ — tuer les principales objections avant qu'elles n'arrêtent la vente.
- CTA final — reformuler la valeur et répéter l'action principale.
Étape 3 — Activer ui-design pour le système visuel
Passer le relais à la compétence ui-design pour générer le système de design (style, palette, typographie, espacement, mode sombre) avant d'écrire les composants. N'inventez pas de choix visuels ici.
Délégation : le système de design lui-même est sourcé selon la disponibilité — si ui-ux-pro-max est installé, laissez-le générer le système (éventuellement affiné par taste-skill) ; si aucun des deux n'est installé, revenez aux principes intégrés dans ui-design. La page d'atterrissage fonctionne dans les deux cas ; les originaux ne font que la rendre plus précise. Ne bloquez jamais sur une dépendance manquante.
Étape 4 — Générer le copywriting, pas seulement le code
Cette compétence rédige le copywriting de base pour chaque section — titre, sous-titre, corps, libellés des CTA — adapté à l'offre et à l'avatar. Du code sans copywriting, c'est une demi-page d'atterrissage.
Étape 5 — Stack et modules complémentaires optionnels
Stack par défaut : React + Vite + Tailwind. Avant de construire, demandez si la page a besoin de :
- Animations → Framer Motion
- Un formulaire → React Hook Form
- Analytiques → quel fournisseur (par ex. Plausible, GA, PostHog)
N'ajoutez ces éléments que si l'utilisateur les souhaite ; ne gonflez pas par défaut.
Étape 6 — Résultat
Livrez des composants prêts à l'emploi, pas des prototypes — chaque section sous forme de composant réel, câblé aux tokens de design, avec le copywriting généré en place et les états vides/chargement/erreur gérés le cas échéant (par ex. le formulaire).