Page d'Attente - Preuve de Demande Avant de Construire

Page d'Attente — Preuve de Demande Avant de Construire

L'erreur coûteuse est de construire pendant trois mois pour découvrir que personne n'en voulait. La version bon marché est une page, mise en ligne ce soir, qui dit ce qu'est l'objet et demande un e-mail. Vingt personnes qui ont tapé leur adresse e-mail sont une information réelle. Douze amis disant « bonne idée » n'en sont pas une. Cette compétence construit cette page, la met en ligne et vous dit exactement où les e-mails arrivent.

Personnalisation

Cette compétence fonctionne avec votre voix de marque. Avant de l'exécuter, chargez le profil de marque dans ~/.claude/brand-profile.md.

• S'il n'existe pas, exécutez d'abord la compétence personnaliser (ou dites-moi simplement votre nom, votre niche, votre offre et votre public — je le créerai).
• Si un champ nécessaire à cette compétence est vide, je poserai une ou deux questions rapides et enregistrerai les réponses dans le profil pour que vous ne répondiez qu'une fois.
• N'inventez jamais de faits ou de résultats concernant l'utilisateur — utilisez uniquement ce qui figure dans le profil, ou demandez.

Étapes

1. Obtenez la promesse, et rendez-la spécifique

Lisez le profil de marque pour savoir qui ils servent et ce qu'ils font. Posez ensuite exactement quatre questions en un seul message :

1. « Quelle est la chose, en une phrase qu'un inconnu comprendrait ? »
2. « À qui s'adresse-t-elle, spécifiquement ? Pas « petites entreprises » — « femmes de ménage indépendantes avec 10 à 40 clients ». »
3. « Quel est l'unique avantage qu'elle procure à ses clients qu'ils ne peuvent pas obtenir facilement aujourd'hui ? »
4. « Quand pensez-vous honnêtement qu'elle sera prête ? Un mois approximatif suffit. Un mensonge, non. »

Écrivez ensuite la promesse. C'est toute la page. Règles :

• Nommez la personne et le résultat. « Une page de réservation pour les femmes de ménage indépendantes qui supprime les allers-retours par SMS » bat « l'avenir de la planification ».
• Moins de 15 mots si possible.
• Pas d'adjectifs de battage médiatique. Si la promesse a besoin d'un adjectif pour paraître bonne, la promesse est faible.
• Testez-la : une personne ayant ce problème précis cesserait-elle de défiler ? Sinon, réécrivez-la avec une personne plus spécifique.

Donnez-leur trois versions de la promesse et faites-leur en choisir une. Choisir est plus rapide qu'écrire.

2. Décidez où les e-mails atterrissent réellement — avant de construire la page

C'est l'étape que les gens sautent, et ensuite les e-mails ne vont nulle part. Proposez-leur ces trois options gratuites, dites ce que chacune leur coûte en effort, et faites-les choisir :

• Google Form (aucune inscription s'il a un compte Gmail, meilleur défaut). Il crée un Google Form avec un seul champ e-mail, puis le bouton de la page renvoie directement vers lui, ou la page envoie vers l'URL du formulaire. Les e-mails arrivent dans un Google Sheet qu'il possède déjà. Gratuit à vie, aucune limite à surveiller. Inconvénient : si le bouton fait simplement un lien externe, le visiteur quitte la page.
• Formspree gratuit (inscription en un clic, le formulaire reste sur la page). Il s'inscrit gratuitement, obtient une URL de point de terminaison du formulaire ressemblant à https://formspree.io/f/xxxxxxx, et la colle. Le formulaire se soumet sans quitter la page et les e-mails vont dans sa boîte de réception. Le niveau gratuit couvre environ 50 soumissions par mois, ce qui est suffisant pour savoir si une idée a du potentiel. Inconvénient : une inscription.
• Simple mailto: (rien à configurer, le plus faible). Le bouton ouvre l'application de messagerie du visiteur avec un message pré-rempli. Aucune inscription, aucun compte, fonctionne immédiatement. Inconvénient : beaucoup de gens ne le termineront pas, donc considérez le nombre comme un minimum, pas un chiffre réel.

S'il ne veut pas décider maintenant, construisez-le avec la version mailto: et laissez un emplacement clairement commenté d'une ligne en haut du code du formulaire où l'URL de Formspree ou du Google Form pourra être collée plus tard. Dites-lui la ligne exacte à échanger.

Quoi qu'il choisisse, la page enregistre également chaque e-mail soumis dans localStorage comme sauvegarde afin que rien ne soit perdu pendant qu'il teste.

3. Écrivez les cinq éléments du texte

Une page d'attente comporte cinq éléments et rien d'autre. Écrivez les cinq dans sa voix, d'après le profil.

1. La promesse. Celle qu'il a choisie. C'est le titre.
2. Une phrase clarifiante en dessous. Dit à qui elle s'adresse et ce qu'elle remplace. Une phrase. Pas un paragraphe.
3. Le champ unique. E-mail. Étiquetez-le simplement : « E-mail ». Espace réservé : [email protected]. Ne demandez jamais le nom, l'entreprise, le téléphone ou « quel est votre plus grand défi ». Chaque champ supplémentaire réduit les inscriptions, et aucune de ces réponses ne change ce qu'il construit.
4. Le bouton. Dit ce qui se passe, pas « Envoyer ». Bien : « Dites-moi quand ce sera prêt. » « Ajoutez-moi à la liste. » Mal : « S'inscrire. » « Commencer. »
5. Ce qui se passe ensuite, honnêtement. Une courte ligne directement sous le bouton. Quelque chose comme : « Je vous enverrai un e-mail une fois quand ce sera prêt — autour de mars. Pas d'autres e-mails. C'est tout. » Cette ligne augmente les inscriptions plus que tout autre élément sur la page, car la vraie crainte est d'être spammé.

Optionnellement, un court bloc de trois ou quatre lignes décrivant ce que la chose fera — mais seulement si la promesse en a vraiment besoin. La plupart n'en ont pas besoin.

N'inventez jamais de chiffres. Pas de « rejoignez 500 autres personnes » à moins que 500 autres ne l'aient réellement rejoint. Un compteur factice sur une page avec quatre inscriptions est le moyen le plus rapide de perdre les quatre.

4. Construisez la page

Créez un seul fichier. Intégrez chacun de ces éléments :

• Un seul index.html autonome. Pas d'outils de construction, pas de bibliothèques JS externes, pas de frameworks.
• Google Fonts est la seule ressource externe. Une police d'affichage pour la promesse, une police de corps pour tout le reste.
• Palette restreinte : une couleur d'accent plus des neutres. Jamais le dégradé violet-bleu générique d'IA. Si ~/.claude/design.md existe, lisez-le et utilisez cette palette, cette association de polices et cet espacement.
• Mobile-first. Construisez pour un téléphone de 375 px de large et laissez-le grandir. La promesse doit tenir sans barre de défilement horizontale. Le champ e-mail et le bouton sont en pleine largeur sur mobile et d'au moins 48 px de hauteur.
• Entièrement lisible et utilisable sans JavaScript. Le titre, la promesse et le formulaire fonctionnent sans scripts. S'il a choisi Formspree ou Google Form, le simple <form action=... method="post"> HTML s'en charge sans script du tout. JavaScript n'ajoute que les petites touches agréables par-dessus.
• Animez avec uniquement des transformations et de l'opacité. Au maximum une entrée discrète sur la promesse. Pas de flou animé, pas de filtres de bruit, pas de bandeaux défilants automatiques, rien qui boucle indéfiniment.
• Texte d'espace réservé réel — les phrases réelles de l'étape 3. Jamais de lorem ipsum.
• Les icônes sont des SVG en ligne.
• Un seul emploi, une seule page : un seul appel à l'action, pas de barre de navigation, pas de liens de pied de page, pas d'icônes de réseaux sociaux qui détournent l'attention. Chaque lien qui n'est pas le bouton coûte des inscriptions.
• Après une soumission réussie, remplacez le formulaire par une courte ligne de remerciement sur place — pas de rechargement de page, pas de popup. Avec JavaScript désactivé, l'action propre du formulaire gère cela.
• Incluez la balise <meta name="viewport" content="width=device-width, initial-scale=1">.
• Définissez un vrai <title> et une méta-description d'une ligne, pour que le lien ait une belle apparence quand quelqu'un l'envoie par SMS.

5. Mettez-le devant un inconnu

Une page non livrée ne prouve rien. Laide mais en ligne bat jolie mais locale. Dites-lui :

• Ouvrez d'abord le fichier dans son navigateur et vérifiez-le sur une fenêtre de taille téléphone.
• Pour le mettre en ligne gratuitement : faites glisser le dossier sur le niveau gratuit de Vercel, ou poussez le dossier vers un dépôt GitHub et activez GitHub Pages. Les deux donnent une vraie URL qu'il peut envoyer par SMS à quelqu'un.
• Ensuite, envoyez-la à cinq personnes qui ont réellement le problème. Pas cinq amis. Cinq personnes avec le problème.
• Que surveiller : s'inscrivent-elles sans poser de question de clarification ? Si elles doivent demander « attends, c'est quoi ? », c'est la promesse qu'il faut corriger, pas le design.

Fixez la barre honnête à voix haute : si 20 des bonnes personnes la voient et que moins de 3 s'inscrivent, c'est une vraie réponse et cela leur a fait économiser trois mois. Réécrivez la promesse et renvoyez-la avant d'écrire une ligne du produit.

Sortie — sauvegardez-la

Écrivez la page dans ~/sites/<slug>-waitlist/index.html où <slug> est un nom court pour l'idée.

Écrivez également ~/sites/<slug>-waitlist/notes.md avec : la promesse choisie et les deux non choisies, à qui elle s'adresse, où les e-mails atterrissent plus la ligne exacte à échanger s'il change d'avis plus tard, la date honnête, les cinq personnes auxquelles il prévoit d'envoyer la page, et la règle de décision (combien d'inscriptions signifient « construis-la »).

Dites-lui les deux chemins, puis :

« Ouvrez ~/sites/<slug>-waitlist/index.html dans votre navigateur. Si ça a l'air bien, mettez-le en ligne gratuitement et envoyez le lien à cinq personnes qui ont réellement ce problème — aujourd'hui, pas après d'autres modifications. »

Exemple (entrée → sortie)

Entrée : « Je veux construire une application qui aide les toiletteurs canins à gérer leurs rendez-vous. J'y pense depuis des mois. Je ne suis pas sûr que quelqu'un en ait besoin. »

Sortie (sauvegardée dans ~/sites/toiletteur-waitlist/index.html) :

• Promesse : « Arrêtez de perdre les rendez-vous de toilettage dans vos messages texte. »
• Phrase clarifiante : « Une simple page de réservation conçue pour les toiletteurs canins indépendants. Les clients choisissent un créneau, vous arrêtez le téléphone arabe. »
• Champ : une entrée e-mail, étiquetée « E-mail ».
• Bouton : « Dites-moi quand ce sera prêt. »
• Ce qui se passe ensuite : « Je vous enverrai un e-mail une fois quand ce sera en ligne — je vise mars. Rien d'autre, jamais. »
• Les e-mails atterrissent : niveau gratuit de Formspree, point de terminaison collé dans l'action du formulaire. Copie de sauvegarde sauvegardée dans localStorage.
• Apparence : fond crème, texte presque noir, un accent vert foncé uniquement sur le bouton. Titre Fraunces sur corps Inter. Bouton pleine largeur de 52 px de haut sur mobile. Fonctionne avec JavaScript désactivé.
• notes.md enregistre la règle de décision : « 20 toiletteurs voient la page. Moins de 3 inscriptions signifie que la promesse est erronée — réécrivez et renvoyez avant de construire quoi que ce soit. »

Remarques / cas particuliers

• L'échec de débutant que cela évite : trois mois à construire quelque chose que personne n'a demandé. La page prend une soirée. Faites la page d'abord.
• S'il insiste pour collecter un nom, un numéro de téléphone ou une question d'enquête, insistez une fois : chaque champ coûte des inscriptions, et aucune de ces réponses ne change ce qu'il construit. S'il la veut quand même, ajoutez uniquement le nom.
• S'il n'a pas de date honnête, écrivez « Je n'ai pas encore de date — je vous enverrai un e-mail dès que j'en aurai une. » Honnête et vague bat un mois inventé.
• Si la promesse prend plus d'une phrase à expliquer, l'idée n'est pas encore assez claire. Passez à positionnement-filtre avant de construire la page.
• Après la mise en ligne, exécutez contrôle-mobile dessus — la plupart des personnes à qui il enverra le lien l'ouvriront sur un téléphone.