Landing - Génération guidée de pages de vente

Un outil de génération guidée de pages de vente. Ce skill gère la structure, la logique de compte à rebours et le flux de questions guidées. Le système de design est délégué à UUPM, avec un chemin de repli si UUPM n'est pas installé.

Exigence d'exécution : Nécessite un environnement capable d'exécuter Bash. Claude Code le supporte nativement ; Claude Desktop nécessite un shell MCP.

Aperçu du workflow

Étape 1 : Questions-réponses guidées, 3 étapes
   |
Étape 2 : Gestion du système de design, UUPM ou repli
   |
Étape 3 : Présentation de 2-3 options de style
   |
Étape 4 : Génération du HTML
   |
Étape 5 : Sortie dans generated-pages/{slug}/

Étape 1 : Questions-réponses guidées

Règle fondamentale : N'utilisez pas le contexte en dehors de ce flux

Dans le workflow /landing, utilisez uniquement les réponses que l'utilisateur fournit à ce moment. Ne référencez pas :

L'historique de la conversation, comme les sujets ou projets antérieurs
Les systèmes de mémoire, tels que MEMORY.md ou les fichiers de persona
Tout contenu provenant de dossiers de projet existants

Pourquoi : Chaque utilisateur a un contexte différent, et le comportement du skill doit rester cohérent. Même si vous connaissez bien le domaine, agissez comme si vous remplissiez tout à partir de zéro. La page finale doit être dictée par les réponses de l'utilisateur, pas par des suppositions de l'IA.

Mauvais exemple : « Cela ressemble au cours Super Individual Work Method, n'est-ce pas ? » Cela fait référence à la mémoire.

Bon exemple : Déduisez le secteur uniquement à partir de A1 et A2. Ne demandez pas : « Est-ce le cours X ? »

Banque de questions détaillée : references/question-bank.md

Trois étapes :

A. Positionnement du produit, 4 questions - Type de produit, secteur, ton de la marque, slug
B. Remplissage du contenu, 10 questions - Hero / Accroche / À propos / Apprentissage / Témoignages optionnels / Audience / Infos / Tarification / FAQ / Intervenant
C. Compte à rebours et CTA, 3-4 questions - Demandez d'abord si un compte à rebours est nécessaire, puis demandez les détails et le texte du CTA

Règles de présentation des questions

Chaque question doit afficher :

La question elle-même
Des bons et mauvais exemples comme garde-fous
Le champ de réponse
Des commandes spéciales : skip pour les questions facultatives, et generate 3 for me pour des options générées par IA

Demandez Oui/Non avant les sections facultatives

B5a - Demandez s'il faut inclure des témoignages étudiants. Si N, passez B5b.
C0 - Demandez s'il faut inclure une minuterie de compte à rebours. Si N, passez C1-C2.

Mode expert, chemin rapide

Si l'utilisateur dit : « Je vais tout coller d'un coup », ignorez l'affichage des garde-fous, recevez le contenu complet et classez tout en une seule passe.

Collecte des réponses

Enregistrez toutes les réponses finales dans generated-pages/{slug}/answers.json au format suivant :

{
  "product": { "type": "...", "industry": "...", "tone": ["...", "..."], "slug": "..." },
  "content": {
    "hero": { "title": "...", "subtitle": "..." },
    "hook": "...",
    "about": "...",
    "learn": ["...", "..."],
    "testimonials": [{ "name": "...", "quote": "...", "role": "..." }],
    "audience": { "fit": ["..."], "unfit": ["..."] },
    "info": [{ "label": "...", "value": "..." }],
    "pricing": [{ "plan": "...", "price": "...", "note": "..." }],
    "faq": [{ "q": "...", "a": "..." }],
    "speaker": { "name": "...", "bio": ["..."], "photo": "..." }
  },
  "countdown": {
    "enabled": true,
    "deadline": "2026-04-30T23:59:00+08:00",
    "onZero": "ended-state"
  },
  "cta": { "text": "Register Now", "href": "#" }
}

Étape 1.5 : Détection de DESIGN.md

Avant d'entrer dans l'étape du système de design, vérifiez si l'utilisateur possède déjà des directives de design de marque :

# Recherche de DESIGN.md par ordre de priorité
DESIGN_FILE=""
for f in \
  "$PROJECT_ROOT/DESIGN.md" \
  "$PROJECT_ROOT/design.md" \
  "$PROJECT_ROOT/.claude/DESIGN.md" \
  "$HOME/.claude/DESIGN.md"; do
  if [ -f "$f" ]; then
    DESIGN_FILE="$f"
    break
  fi
done

Si DESIGN.md existe, appliquez-le directement

Si DESIGN.md est trouvé, lisez ses couleurs de marque, sa typographie et ses règles de style, puis utilisez-les directement comme système de design :

Analysez les sections couleurs, typographie et style dans DESIGN.md.
Confirmez avec l'utilisateur : « J'ai trouvé votre DESIGN.md. La couleur de la marque est #XXX et la police est XXX. Dois-je utiliser cette configuration ? »
Si l'utilisateur confirme, sautez l'étape 2 et l'étape 3, puis allez directement à l'étape 4 pour générer le HTML.
Si l'utilisateur dit non, procédez normalement à l'étape 2.

Si DESIGN.md n'existe pas, passez à l'étape 2

Utilisez soit le flux UUPM, soit le flux de repli.

Pourquoi cette étape existe : La leçon 3-2 apprend aux étudiants à créer DESIGN.md. Si /landing ne le lit pas, l'étudiant a créé des directives de marque inutilisables, ce qui brise l'expérience. Un seul DESIGN.md doit piloter les sorties visuelles telles que les cartes sociales, les présentations et les pages de vente.

Étape 2 : Gestion du système de design, uniquement quand DESIGN.md n'existe pas

Flux détaillé : references/uupm-integration.md

Détection d'UUPM

test -d ~/.claude/skills/ui-ux-pro-max || \
test -d "$PROJECT_ROOT/.claude/skills/ui-ux-pro-max" || \
command -v uipro

Si l'une des vérifications réussit, UUPM est installé et le flux entre en mode UUPM.

Si toutes les vérifications échouent, affichez le message de persuasion depuis references/uupm-integration.md.

Ramifications quand UUPM n'est pas installé

Réponse de l'utilisateur	Gestion
`y` / `yes` / `ok`	Exécutez `npm install -g uipro-cli && uipro init --ai claude --global`, puis passez à l'étape 3 après l'installation
`n` / `no` / `later`	Utilisez le mode de repli, voir `references/fallback-design-rules.md`
L'installation échoue	Affichez l'erreur et demandez s'il faut continuer avec le repli

Mode UUPM : Générer le système de design

Construisez la requête à partir des réponses de l'étape A :

query="<A2 industry> <A3 tone keywords>"
slug="<A4>"

python3 ~/.claude/skills/ui-ux-pro-max/scripts/search.py \
  "$query" \
  --design-system \
  --persist \
  -p "$slug" \
  -f markdown

Le résultat est écrit dans design-system/MASTER.md. Lisez-le et analysez les couleurs, la typographie, les motifs et les anti-motifs.

Étape 3 : Présenter les options de style

Mode UUPM

Utilisez le motif recommandé par UUPM comme option principale. Choisissez ensuite 2 options compatibles mais distinctes parmi les 7 autres styles de page d'atterrissage, créant ainsi 3 options au total.

Par exemple, si UUPM recommande « Hero-Centric + Social Proof », ajoutez « Conversion-Optimized » et « Trust & Authority » comme options de comparaison.

Rendez chaque style sous forme de carte d'aperçu miniature en utilisant <div class="cards">, en référençant l'interface utilisateur visuelle compagnon, afin que l'utilisateur puisse choisir.

Mode de repli

Claude génère 2 directions, par exemple minimaliste vs. ludique. Chaque direction comprend ses propres règles de couleur, typographie et espacement. L'utilisateur en choisit une.

Étape 4 : Générer le HTML

Lire le squelette : templates/base.html

Lire le JS du compte à rebours : templates/countdown.js

Logique d'assemblage

Lisez templates/base.html.
Rendez conditionnellement :
- {{#if countdown.enabled}} - Conservez le grand compte à rebours du hero et la barre collante en bas ; sinon, supprimez les deux sections.
- {{#if testimonials}} - Conservez la section des témoignages ; sinon, supprimez-la.
Remplissez le contenu à partir de answers.json.
Injectez les jetons de design dans <style>. En mode UUPM, lisez MASTER.md. En mode de repli, générez-les à partir des trois règles de repli.
Injectez countdown.js uniquement lorsque le compte à rebours est activé.

Nav, obligatoire et collant en haut

La nav est une exigence fixe et doit être incluse dans chaque page générée :

Marque : Côté gauche. Un nom court dérivé du slug A4, ou une abréviation anglaise courte basée sur le type de produit.
Liens de section : Milieu. Lien vers À propos / Apprentissage / Audience / Tarification / Intervenant / FAQ. N'incluez pas de liens pour les sections facultatives qui ne sont pas présentes.
CTA d'inscription : Côté droit. Libellé court, comme « Register » ou « Buy ».
Collant au défilement. Ajoutez une ombre lors du défilement via JS toggle .scrolled.
Masquez les liens sur mobile, en dessous de 860px.

Données requises, déduites de answers.json :

"nav": {
  "brandText": "AI Solo Workshop",
  "linkAbout": "Workshop",
  "linkLearn": "What You Will Learn",
  "linkAudience": "Who It Is For",
  "linkPricing": "Plans",
  "linkSpeaker": "Instructor",
  "linkFaq": "FAQ",
  "ctaShort": "Register"
}

Le style de la nav doit suivre le système de design sélectionné, y compris la typographie, les couleurs et le style de séparation. La structure et les liens restent les mêmes.

Stratégie de fichier HTML unique

Utilisez Tailwind via CDN : <script src="https://cdn.tailwindcss.com"></script>
CSS en ligne dans <style>
JS en ligne dans <script>
Utilisez les URL d'images fournies par l'étudiant

Cela permet aux étudiants de copier-coller facilement dans Framer, Notion ou un CMS.

Étape 5 : Sortie

Écrivez dans generated-pages/{slug}/ :

generated-pages/
└── {slug}/
    ├── index.html
    ├── design-system.md    # Mode UUPM uniquement
    └── answers.json

Ouvrir le fichier pour l'utilisateur après l'avoir écrit

Ne dites pas à l'utilisateur d'ouvrir le fichier manuellement. Ouvrez-le pour lui :

open "generated-pages/{slug}/index.html"

Sous macOS, cela ouvre le fichier dans le navigateur par défaut. Si cela échoue, par exemple dans un environnement Linux sans open, alors dites à l'utilisateur comment l'ouvrir manuellement.

Message final à l'étudiant :

Page de vente générée et ouverte dans le navigateur.

Emplacement du fichier :
   generated-pages/{slug}/index.html

Vous souhaitez modifier le contenu ? Modifiez le HTML directement, ou exécutez à nouveau /landing pour remplir les réponses. Le fichier answers.json existant sera lu.

Gestion des erreurs

Situation	Comportement
Erreur de permission npm	Suggérez `! sudo npm install -g uipro-cli`, puis laissez l'étudiant l'exécuter manuellement
npm n'existe pas	Suggérez d'installer Node.js via Homebrew ou nvm
Python3 n'existe pas	Suggérez `brew install python3`
UUPM search.py échoue	Enregistrez l'erreur et basculez automatiquement en mode de repli
Outils Bash indisponibles	Attrapez l'erreur et basculez vers l'affichage de commandes manuelles
Un dossier avec le même slug existe déjà	Demandez s'il faut écraser, ajouter un horodatage ou choisir un autre nom

Hors de la portée

Pages d'abonnement ou d'adhésion, pages de consultation de services
Sections de garantie ou de remboursement
Pages multilingues, actuellement anglais uniquement
Intégration de formulaire comme le paiement ou l'abonnement ; le CTA est uniquement un lien
Déploiement réel
Comportement on-zero: new-price

Phrases déclencheurs

/landing, "make a sales page", "help me make a landing page", "sales page"

aaagbasm1991/landing-page-skill

Qu'est-ce que landing-page-skill ?

Demander à votre IA préférée

Documentation