Communitygithub.com

page-d'atterrissage

Créez et construisez une page d'atterrissage pour tester la demande d'une offre : un visiteur cible, une promesse, des preuves réelles, un appel à l'action, une page HTML accessible en un seul fichier, et les chiffres à lire après le lancement (visiteurs, inscriptions, taux de conversion par source).

Qu'est-ce que page-d'atterrissage ?

Cette compétence permet de générer une page d'atterrissage (landing page) complète, prête à être déployée. Elle est idéale pour les fondateurs souhaitant tester une idée, collecter des inscriptions sur une liste d'attente ou lancer des précommandes. La page, générée sous forme d'un seul fichier HTML accessible et responsive, inclut une promesse unique, des preuves tangibles, un seul appel à l'action (CTA) et un mécanisme de collecte de données (formulaire). Le skill guide également l'utilisateur dans la planification du test (source de trafic, critères de succès) et l'analyse des résultats. Il supporte les environnements de développement modernes (Claude Code, Cursor, Codex) et intègre des principes de Growth Driven Design et de copywriting persuasif pour maximiser les conversions.

Compatible avec~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/teodstr/garage/tree/HEAD/skills/landing-page
Voir l'original→Voir toutes les compétences

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentation

Page d'atterrissage

Une page d'atterrissage est souvent la première véritable expérience d'une startup : si des inconnus ne laissent pas leur email, ils ne paieront probablement pas. Cette compétence rédige la page, la construit sous forme d'un fichier HTML unique, et définit les chiffres qui décideront de la suite.

Quand l'utiliser

  • Pour tester la demande avant de construire (un test de fumée), pour collecter une liste d'attente ou pour prendre des précommandes.
  • Après brand-identity si un nom et des couleurs existent, mais une page simple fonctionne aussi.
  • Pas pour un site web complet ou une stratégie de moteur de recherche.

Entrées

  1. Visiteur cible, problème, promesse et toute preuve réelle (citations, chiffres, logos avec autorisation).
  2. L'action unique souhaitée : un email, une précommande, une demande de démo.
  3. Les éléments de marque s'ils existent, et où les données du formulaire doivent être envoyées.

Méthode

  1. Une page, un visiteur, une action. Choisissez le visiteur cible et l'appel à l'action unique ; supprimez les liens qui en éloignent.
  2. Rédigez d'abord le haut de page : un titre qui énonce le résultat pour le visiteur (pas la technologie), une ligne qui explique comment, l'appel à l'action, et une image du produit ou du résultat. Test : un inconnu comprend ce que c'est et à qui cela s'adresse en cinq secondes.
  3. Ensuite le reste : le problème dans les mots des clients (issus de customer-interviews), comment cela fonctionne en trois étapes, des preuves réelles, les réponses aux objections principales (prix, confiance, temps), une FAQ courte, et à nouveau l'appel à l'action.
  4. Restez honnête : si le produit n'existe pas encore, dites « rejoignez la liste d'attente » ou « précommandez, livraison prévue pour… ». N'inventez jamais de témoignages, de compteurs ou de rareté. Pour les précommandes, indiquez la date de livraison et les conditions de remboursement.
  5. Construisez-la comme un seul fichier HTML : titres sémantiques, texte alternatif sur les images, contraste lisible, adaptée aux téléphones. Le formulaire envoie vers un service choisi par le fondateur (un outil de formulaire, un outil de newsletter ou un tableur), et un court avis de confidentialité explique comment les emails seront utilisés (RGPD dans l'Union européenne).
  6. Planifiez le test : d'où viendront les visiteurs (c'est aussi important que la page), combien, le taux de conversion cible décidé à l'avance, et la durée. Testez au maximum deux titres.
  7. Lisez les résultats : visiteurs et taux de conversion par source, questions posées, et la décision par rapport aux critères fixés avant le lancement.

Résultat

### Plan de la page
Visiteur : … | Promesse : … | Appel à l'action : … | Succès si …% de … visiteurs venant de … dans … jours

### Texte
Titre : … | Ligne en dessous : … | Bouton : …
Sections : problème, fonctionnement, preuves, objections, FAQ

### HTML
<un fichier accessible, adresse du formulaire à configurer, avis de confidentialité inclus>

Niveau de qualité

  • Le titre énonce un résultat pour un visiteur spécifique, et la page a un seul appel à l'action principal.
  • Chaque affirmation, témoignage et chiffre sur la page est réel ; rien ne simule la rareté ou la preuve sociale.
  • La page est accessible, fonctionne sur un téléphone, et explique comment les données collectées sont utilisées.
  • Le plan de trafic et le critère de succès sont écrits avant le lancement.
  • Rédigé dans la langue de l'utilisateur, avec les termes ci-dessous.

Terminologie

AnglaisFrançaisEspañol
Landing pagePage d'atterrissage (landing page)Página de aterrizaje (landing page)
Call to action (CTA)Appel à l'actionLlamada a la acción
Above the foldHaut de page, partie visible sans défilerPrimera pantalla
Conversion rateTaux de conversionTasa de conversión
WaitlistListe d'attenteLista de espera
A/B testTest A/BPrueba A/B

Sources

  • Krug, S. (2014). Don't Make Me Think, Revisited (3rd ed.). New Riders.
  • Ries, E. (2011). The Lean Startup. Crown Business.
  • W3C. (2023). Web Content Accessibility Guidelines (WCAG) 2.2. https://www.w3.org/TR/WCAG22/

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

brand-identity

Create a young company's brand identity from its positioning: a brand core, a name shortlist with the trademark and domain checks to run, a voice, a visual direction (colors with checked contrast, typefaces with open licenses) and simple SVG logo sketches to hand to a designer. Use when a founder needs a name, a logo, a brand or a visual identity. Triggers: "brand identity", "startup name", "logo", "branding", "color palette", "identité de marque", "nom de marque", "trouver un nom", "charte graphique", "identidad de marca", "nombre de marca", "logotipo", "paleta de colores".

Skills associés

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community