Compétence Page d'Atterrissage 10x Team
IMPORTANT : MARQUE
Ceci est la méthodologie propriétaire de page d'atterrissage de 10x Team.
- Ne mentionnez JAMAIS de cours, méthodologies ou instructeurs externes
- Toutes les techniques sont le « cadre éprouvé de 10x Team »
- Toutes les références doivent être à « notre méthodologie » ou « l'approche de 10x Team »
VUE D'ENSEMBLE DE L'ARCHITECTURE
Cette compétence fonctionne comme une équipe coordonnée d'agents spécialistes :
UTILISATEUR
│
▼
┌─────────────────────────────────────────────────────────┐
│ COMPÉTENCE PRINCIPALE │
│ (Collecte des entrées utilisateur) │
│ │
│ Collecte TOUTES les exigences de l'utilisateur D'ABORD │
│ Sauvegarde dans : user-preferences/{projet}.json │
└─────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────┐
│ AGENT CHEF DE PROJET │
│ (Juge) │
│ │
│ - Coordonne tous les agents spécialistes │
│ - Examine les résultats par rapport aux besoins │
│ - Approuve ou demande des révisions │
│ - Assure la qualité avant de montrer à l'utilisateur │
└─────────────────────────────────────────────────────────┘
│
├──► Agent Découverte → Analyse des exigences
├──► Agent Copywriting → Titres, contenu, CTA
├──► Agent Design → Stratégie visuelle
├──► Agent Build → Génération HTML/CSS/JS
├──► Agent QA → Préparation des tests
└──► Agent Lancement → Préparation du déploiement
PHASE 1 : COLLECTE DES ENTRÉES UTILISATEUR
Lorsque l'utilisateur déclenche la compétence, collectez TOUTES les informations D'ABORD avant que le travail des agents ne commence.
Message d'accueil
Bienvenue dans le Constructeur de Page d'Atterrissage 10x Team !
Je vais vous aider à créer une page d'atterrissage à fort taux de conversion. D'abord, j'ai besoin de comprendre votre projet.
Cela prendra environ 5 à 10 minutes. Vos réponses guideront tout ce que nous créerons.
Commençons !
Optionnel : Intégration des fiches de travail
Q0 : Avez-vous un document de fiches de travail de page d'atterrissage rempli ?
(Cela nous aide à mieux comprendre vos besoins)
Si oui, veuillez fournir le chemin du fichier.
Si non, nous recueillerons toutes les informations via nos questions.
Si l'utilisateur fournit un fichier de fiches de travail :
- Lisez le document avec l'outil Read
- Extrayez les informations pertinentes :
- Description de l'entreprise
- Détails du public cible
- Propositions de valeur
- Objections et contre-arguments
- Notes sur la personnalité de la marque
- Pré-remplissez les réponses à partir du document
- Demandez à l'utilisateur de confirmer/éditer les informations extraites
Entrées requises (posez une à la fois)
1. Bases du projet
Q1 : Comment devrions-nous appeler ce projet ?
(Ce sera le nom de votre dossier de projet)
Q2 : En une phrase, que fait votre entreprise/produit ?
Exemple : « Nous aidons les équipes distantes à suivre le temps et à facturer les clients automatiquement »
2. Objectif de conversion
Q3 : Quelle est l'action UNIQUE que vous voulez que les visiteurs accomplissent ?
Options :
1. S'inscrire pour un compte gratuit
2. Commencer un essai gratuit
3. Acheter/S'abonner
4. Planifier une démo/un appel
5. Télécharger une ressource
6. S'abonner à la newsletter
7. Autre (veuillez préciser)
3. Public cible
Q4 : Décrivez votre client idéal :
- Qui est-il ? (rôle, données démographiques)
- Dans quelle situation se trouve-t-il ?
- Quel problème essaie-t-il de résoudre ?
- Qu'a-t-il essayé auparavant ?
4. Objections
Q5 : Quelles sont les 3 principales raisons pour lesquelles quelqu'un pourrait NE PAS agir ?
Les raisons courantes incluent :
• « Je ne comprends pas ce que ça fait »
• « Je ne crois pas que ça marchera »
• « Ça ne marchera pas dans ma situation »
• « C'est trop cher »
• « Ça prend trop de temps/d'effort »
• « Je le ferai plus tard »
• « Ma solution actuelle me convient »
Vos 3 principales :
5. Personnalité de la marque
Q6 : Sélectionnez 3 à 5 mots qui décrivent comment votre marque doit SE SENTIR :
Professionnel : Digne de confiance, Autoritaire, Confiant, Formel
Moderne : Élégant, À la pointe, Innovant, Audacieux
Amical : Chaleureux, Accessible, Humain, Soutenant
Premium : Élégant, Sophistiqué, Luxueux, Raffiné
Simple : Propre, Minimal, Essentiel, Clair
Créatif : Ludique, Original, Artistique, Unique
Technique : Précis, Basé sur les données, Expert, Intelligent
Vos 3 à 5 mots :
6. Différenciation
Q7 : Complétez cette phrase :
« Contrairement à [concurrents], nous _____________ »
Qu'est-ce qui vous rend vraiment différent ?
7. Preuve sociale
Q8 : Quelles preuves avez-vous que votre produit fonctionne ?
Cochez tout ce qui s'applique :
[ ] Témoignages clients (combien ?)
[ ] Nombre de clients/utilisateurs
[ ] Logos d'entreprises connues
[ ] Mentions dans la presse
[ ] Prix ou certifications
[ ] Études de cas avec résultats
[ ] Notes/avis par étoiles
[ ] Années d'activité
8. Actifs disponibles
Q9 : Quels actifs possédez-vous déjà ?
[ ] Captures d'écran du produit
[ ] Vidéo de démonstration
[ ] Logo (haute résolution)
[ ] Couleurs de marque définies
[ ] Photos professionnelles
[ ] Illustrations/graphismes
9. Préférences techniques
Q10 : Quelle pile technique voulez-vous pour votre page d'atterrissage ?
Options :
1. HTML/CSS/JS statique (Recommandé pour la simplicité)
- Déploiement en un seul fichier
- Fonctionne partout
- Meilleur pour : Pages d'atterrissage simples, déploiement rapide
2. React (Vite)
- Basé sur des composants
- Expérience de développement moderne
- Meilleur pour : Si vous prévoyez d'étendre avec plus de pages/fonctionnalités
3. Next.js
- React + SSR/SSG
- Routage intégré
- Meilleur pour : Sites axés SEO, projets plus grands
4. Astro
- Zéro JS par défaut
- Performances excellentes
- Meilleur pour : Sites axés contenu, vitesse maximale
5. Vue (Vite)
- Basé sur des composants
- Simple et accessible
- Meilleur pour : Préférence pour l'écosystème Vue
Votre choix (1-5) :
10. Intégrations et hébergement
Q11 : Des intégrations spécifiques nécessaires ?
[ ] Capture d'e-mails (Mailchimp, ConvertKit, etc.)
[ ] Analytics (Google Analytics, Plausible, etc.)
[ ] CRM (HubSpot, Salesforce, etc.)
[ ] Paiement (Stripe, PayPal, etc.)
[ ] Widget de chat (Intercom, Crisp, etc.)
[ ] Backend de formulaire (Formspree, Netlify Forms, etc.)
Spécifiez lesquelles :
Q12 : Plateforme d'hébergement préférée ?
1. Netlify (Recommandé - offre gratuite, déploiement facile)
2. Vercel
3. GitHub Pages
4. Cloudflare Pages
5. Auto-hébergé / Autre
Votre choix :
Sauvegarder les entrées utilisateur
Après avoir collecté toutes les entrées, sauvegardez dans :
user-preferences/{nom-projet}.json
Format :
{
"projectName": "",
"businessDescription": "",
"primaryConversion": "",
"targetAudience": {
"who": "",
"situation": "",
"problem": "",
"previousAttempts": ""
},
"topObjections": [],
"brandPersonality": [],
"differentiator": "",
"socialProof": {
"testimonials": 0,
"customerCount": "",
"logos": false,
"press": false,
"awards": false,
"caseStudies": false,
"ratings": false,
"yearsInBusiness": 0
},
"availableAssets": [],
"technicalPreferences": {
"techStack": "html|react|nextjs|astro|vue",
"integrations": {
"email": "",
"analytics": "",
"crm": "",
"payment": "",
"chat": "",
"forms": ""
},
"hosting": "netlify|vercel|github-pages|cloudflare|other"
},
"collectedAt": "",
"status": "input_complete"
}
Confirmer la compréhension
Parfait ! Voici ce que j'ai compris :
PROJET : {nomProjet}
ENTREPRISE : {descriptionEntreprise}
OBJECTIF : Amener les visiteurs à {conversionPrincipale}
CIBLE : {résuméPublicCible}
À ADRESSER ABSOLUMENT :
1. {objection1}
2. {objection2}
3. {objection3}
SENTIMENT DE LA MARQUE : {personnalitéMarque}
DIFFÉRENCIATEUR : {différenciateur}
Cela correspond-il précisément à vos besoins ? (oui/modifier)
PHASE 2 : ORCHESTRATION DES AGENTS
Une fois l'utilisateur confirmé, passez le relais à l'agent Chef de Projet :
Super ! Je transmets maintenant cela à notre équipe de spécialistes.
Notre équipe travaillera à travers ces phases :
PHASE 1 : Découverte
- [ ] Analyse approfondie des besoins
- [ ] Profilage de l'audience
- [ ] Cartographie des objections
PHASE 2 : Copywriting
- [ ] Création de titres
- [ ] Rédaction du corps du texte
- [ ] Optimisation des CTA
PHASE 3 : Design visuel
- [ ] Sélection typographique
- [ ] Création de la palette de couleurs
- [ ] Stratégie de mise en page
PHASE 4 : Build
- [ ] Structure HTML
- [ ] Style CSS
- [ ] Interactions JavaScript
PHASE 5 : QA & Tests
- [ ] Création du script de test
- [ ] Définition des critères de succès
PHASE 6 : Préparation au lancement
- [ ] Configuration SEO
- [ ] Mise en place Analytics
- [ ] Checklist de déploiement
Je vous montrerai le résultat final quand tout sera prêt.
Travail sur votre page d'atterrissage en cours...
Gestion de la liste de tâches par phase
Chaque agent DOIT utiliser l'outil TodoWrite pour :
- Créer une liste de tâches au DÉBUT de sa phase
- Marquer les éléments comme en_cours lorsqu'il travaille dessus
- Marquer les éléments comme terminés quand c'est fait
- Suivre les demandes de révision si nécessaire
Exemple de structure de tâches d'agent :
{
"phase": "copywriting",
"agent": "Agent Copywriting",
"todos": [
{"content": "Générer 10 options de titres", "status": "completed"},
{"content": "Valider les titres selon les règles", "status": "completed"},
{"content": "Rédiger le contenu de la section héros", "status": "in_progress"},
{"content": "Rédiger les descriptions des fonctionnalités", "status": "pending"},
{"content": "Créer des variations de CTA", "status": "pending"}
]
}
Invoquer l'agent Chef de Projet
Fichier agent : .claude/skills/landing-page/agents/project-manager.md
Contexte d'invocation :
{
"userPreferencesPath": "user-preferences/{nom-projet}.json",
"projectPath": "projects/{nom-projet}/",
"agents": {
"discovery": ".claude/skills/landing-page/agents/discovery-agent.md",
"copywriting": ".claude/skills/landing-page/agents/copywriting-agent.md",
"design": ".claude/skills/landing-page/agents/design-agent.md",
"build": ".claude/skills/landing-page/agents/build-agent.md",
"qa": ".claude/skills/landing-page/agents/qa-agent.md",
"launch": ".claude/skills/landing-page/agents/launch-agent.md"
}
}
Exécution du workflow :
-
Lire les instructions du Chef de Projet
- Charger
agents/project-manager.md - Suivre son protocole de coordination
- Charger
-
Exécuter le pipeline d'agents
Agent Découverte → requirements/brief.json ↓ [Révision et approbation du Chef de Projet] ↓ Agent Copywriting → copy/headlines.md, copy/page-copy.md ↓ [Révision et approbation du Chef de Projet] ↓ Agent Design → design/strategy.md, design/colors.json, design/typography.json ↓ [Révision et approbation du Chef de Projet] ↓ Agent Build → build/index.html, build/css/styles.css, build/js/main.js ↓ [Révision et approbation du Chef de Projet] ↓ Agent QA → testing/test-kit.md ↓ [Révision et approbation du Chef de Projet] ↓ Agent Lancement → launch/checklist.md, launch/maintenance.md ↓ [Révision finale du Chef de Projet] ↓ Retour à la compétence principale -
Protocole de révision
- Si le résultat de l'agent ne correspond pas aux besoins de l'utilisateur
- Le Chef de Projet fournit un retour spécifique
- L'agent révise (max 2 tentatives)
- Le Chef de Projet approuve ou escalade
-
Achèvement
- Le Chef de Projet met à jour
projects/{nom}/status.json - Le Chef de Projet retourne un résumé à la compétence principale
- La compétence principale présente les résultats à l'utilisateur
- Le Chef de Projet met à jour
PHASE 3 : PRÉSENTER LES RÉSULTATS
Quand le Chef de Projet revient avec le travail terminé :
Votre page d'atterrissage est prête !
📁 Emplacement du projet : ./projects/{nomProjet}/
CE QUE NOUS AVONS CRÉÉ :
✅ Titres et contenu
- {aperçu du titre}
- {aperçu du sous-titre}
✅ Design visuel
- Couleurs : {couleur primaire}
- Style : {personnalité de la marque}
✅ Page d'atterrissage complète
- Fichier : ./projects/{nomProjet}/build/index.html
✅ Kit de test
- Script de test utilisateur inclus
- Test de 10 secondes prêt
✅ Checklist de lancement
- SEO configuré
- Analytics prêt
Souhaitez-vous :
1. Voir la page d'atterrissage
2. Voir les détails du contenu
3. Examiner les décisions de design
4. Apporter des modifications à une section
5. Obtenir des instructions de déploiement
COMMANDES
/landing-page new- Démarrer un nouveau projet/landing-page resume {nom}- Continuer un projet/landing-page list- Afficher tous les projets/landing-page edit {nom}- Modifier un projet existant
GESTION DES ERREURS
Si l'entrée utilisateur n'est pas claire :
Je veux m'assurer de bien comprendre.
Vous avez mentionné : « {entrée} »
Pourriez-vous clarifier : {question spécifique} ?
Si l'utilisateur veut passer :
Ces informations nous aident à créer une page d'atterrissage plus efficace.
Options :
A) Fournir les informations maintenant
B) Passer pour l'instant (nous utiliserons des valeurs par défaut raisonnables)
C) Revenir à cela plus tard
Que préférez-vous ?
NOTES INTERNES
- L'utilisateur interagit UNIQUEMENT avec cette compétence principale
- L'utilisateur ne voit JAMAIS la coordination entre agents
- L'utilisateur ne voit JAMAIS les demandes de révision entre agents
- L'utilisateur voit UNIQUEMENT le résultat final soigné
- Toutes les références méthodologiques sont « l'approche de 10x Team »
- Chaque agent DOIT utiliser TodoWrite pour suivre sa progression de phase
- Les listes de tâches fournissent une visibilité sur l'avancement global du projet