Constructeur de Page d'Atterrissage Premium Guidée par les Références
Style de sortie coréen : pour tout texte destiné à l'utilisateur coréen (questions HITL, rapports d'état, réponses), appliquez
$CLAUDE_PLUGIN_ROOT/docs/development/korean-style.md— §"Règles de rédaction des questions HITL" et §"Principes de réponse et de rapport". Les fichiers coréens écrits sur le disque sont automatiquement vérifiés par le hook PostToolUse korean-style.
Produit une page d'atterrissage autonome de qualité production en combinant trois pratiques qui distinguent le travail professionnel des sorties génériques de l'IA :
- Les références visuelles d'abord — des références réelles d'animations et de mises en page sont collectées depuis Pinterest (et galeries similaires) avec un vrai navigateur avant toute décision de design, puis distillées en un brief de design ancré sur les références (jamais copiées).
- La vidéo IA comme matériau de design — l'arrière-plan héro est une vidéo en boucle transparente générée avec Google Veo 3.1, dirigée artistiquement selon les tokens de design, post-traitée pour le web, et lue via un script de boucle infinie qui masque la jointure.
- La convergence, pas un one-shot — la page terminée passe par la boucle adversariale
screen-quality-loopavant d'être déclarée comme achevée.
Principes fondamentaux :
- Ancré sur les références, jamais copié — les références contribuent des motifs (archétype de mise en page, vocabulaire de mouvement, direction de palette) ; aucun design spécifique n'est reproduit et aucun actif tiers n'est livré.
- DESIGN.md fait loi — lorsque
docs/design-system/DESIGN.mdexiste, ses tokens etaesthetic_rulesremplacent les tons par défaut dérivés à l'Étape 0. - Dégradation gracieuse pour chaque dépendance externe — pas d'accès à Pinterest, pas d'outils Veo, pas de ffmpeg, et pas de navigateur sont tous survivables ; chaque repli est indiqué dans le rapport final, jamais substitué silencieusement.
- Discipline des coûts — le budget de génération par défaut est exactement 1 image fixe + 1 clip Veo (8 s,
veo-3.1-lite) ; tout dépassement nécessite une demande explicite de l'utilisateur (la régénération Seam-QA unique et limitée dansreferences/veo-loop-video.md§6 fait partie du budget par défaut, pas un dépassement). - L'accessibilité du mouvement est non-négociable — fallback
prefers-reduced-motion, un contrôle de pause visible (WCAG 2.2.2), et une stratégie LCP poster-first sont obligatoires, pas du polissage.
Emplacement de sortie : landing/{slug}/ (livrable) + landing/{slug}/.work/ (clips bruts, images fixes, preuves QA — jamais référencés par la page).
🌐 RÈGLE DE LANGUE : Avant d'exécuter cette compétence, lisez le
CLAUDE.mddu projet et vérifiez la section## Languagepour détecter la langue du projet. Si la langue du projet n'est PAS le coréen (ko), traduisez TOUT le texte destiné à l'utilisateur (copie de page et sortie du rapport) dans la langue du projet. Les identifiants techniques (chemins de fichiers, variables CSS, noms de classes) restent non traduits. Si aucunCLAUDE.mdou section## Languagen'existe, la valeur par défaut est le coréen.
Procédure d'Exécution
Étape 0 : Réception & Ton de Design
A. Analyse des Arguments
| Argument | Action |
|---|---|
Brief textuel (ex. Logiciel SaaS de comptabilité pour freelances) | Utiliser comme brief produit/marque |
| URL | WebFetch la page — extraire le produit, l'audience, les indices de marque existants |
Chemin docs/planner/{NNN}-*/ | Lire les livrables du planificateur (personas, KPI, maquettes) comme brief |
--refs=<dossier> | Utiliser les propres images de référence de l'utilisateur depuis <dossier> ; sauter l'Étape 1 de capture (l'analyse est toujours effectuée) |
--slug=<nom> | Nom du répertoire livrable ; sinon, dériver en kebab-case de la marque/fonctionnalité |
--no-video | Ignorer Veo complètement — le héro utilise le fallback animé CSS (Chemin C) |
--auto | Zéro HITL — procéder avec les hypothèses énoncées (pour utilisation en pipeline) |
| (vide) | Scanner docs/planner/ pour le dernier package ; si aucun, demander un brief d'une ligne |
B. Vérification d'Ambiguïté (Réfléchir Avant de Coder — max 1 HITL)
Si le brief ne précise pas (1) l'audience cible et (2) l'action de conversion principale unique (inscription / achat / contact / téléchargement), demander une fois avec des options d'interprétation. Sous --auto, choisir l'interprétation la plus probable et l'enregistrer sous "Hypothèses" dans le rapport final. Ne jamais poser plus d'une question de réception.
C. Chargement du SSoT de Design
docs/design-system/DESIGN.mdexiste → charger les tokens +aesthetic_rules; le tableau de tons ci-dessous ne comble que les lacunes.- Sinon → dériver le ton de design du brief :
| Signal marque/produit | Ton de design | Direction du mouvement héro |
|---|---|---|
| SaaS / outils dev / produit IA | Tech Gradient Sombre | aurore lente / dérive de gradient, champ de particules clairsemé |
| Luxe / biens haut de gamme | Luxe Éditorial | dérive macro de matière (soie, métal liquide), faible profondeur de champ |
| Application grand public / style de vie / bien-être | Ambiance Douce | scène floue, fuites de lumière douces, parallaxe subtile |
| Finance / B2B / entreprise | Minimal Confiant | géométrie abstraite, mouvement lent de lignes & maillage, palette sobre |
| Studio créatif / événement / portfolio | Cinétique Audacieux | formes à fort contraste, champs de couleur amples |
- Charger les deux guides UX — ils régissent toutes les décisions esthétiques et de mouvement dans les Étapes 2–4 :
$CLAUDE_PLUGIN_ROOT/docs/ux/vibe-coding-design-guide.md(§4 techniques de prompting, §4.1 anti-AI esthétiques, §4.2 prompts ancrés sur les références)$CLAUDE_PLUGIN_ROOT/docs/ux/vibe-coding-animation-guide.md(§15 accessibilité du mouvement, §18 arrière-plans vidéo générés par IA)
D. Garde du Worktree Principal & Synchronisation Dev
Les pages d'atterrissage sont des livrables de phase de planification — exécutées dans le worktree principal sur dev, comme les autres compétences dev-sync :
PLUGIN_ROOT="${CLAUDE_PLUGIN_ROOT:-$(find ~/.claude/plugins/cache -maxdepth 3 -type d -path '*/astra-methodology/*' 2>/dev/null | sort -V | tail -1)}"
if [ -z "$PLUGIN_ROOT" ] || [ ! -f "$PLUGIN_ROOT/scripts/worktree-helpers.sh" ]; then
echo "ERREUR : CLAUDE_PLUGIN_ROOT introuvable. Vérifiez le chemin du cache du plugin." >&2; exit 1
fi
source "$PLUGIN_ROOT/scripts/worktree-helpers.sh"
astra_ensure_main_worktree || exit 1
Puis synchroniser dev exactement comme le fait /catalog-generator Étape 0.G (vérifier la branche → stash si modifié → git fetch origin dev && git checkout dev && git pull origin dev → pop stash ; revenir à main/master quand dev est absent).
Étape 1 : Collecte de Références (Pinterest)
Collecter 6 à 12 références d'animations/mises en page avant de concevoir quoi que ce soit. Procédure complète, recettes de requêtes, gestion des popups et modèle de tableau de bord : lire $CLAUDE_PLUGIN_ROOT/skills/landing-page/references/reference-collection.md AVANT de commencer cette étape.
A. Résolution du Backend du Navigateur
Selon l'ordre à l'échelle du plugin (ego par défaut → chrome MCP en fallback ; SSoT : $CLAUDE_PLUGIN_ROOT/docs/development/browser-backend-policy.md) :
command -v ego-browser >/dev/null 2>&1 && echo ego || echo ""
Sortie vide → chrome-mcp lorsque les outils mcp__chrome-devtools__* sont présents. Aucun des deux disponible → fallback de capture : WebSearch pour des descriptions actuelles de présentations de pages d'atterrissage/d'animations (galeries de prix, présentations de mouvement) et construire un tableau de bord textuel ; indiquer "tableau de bord : dérivé de recherche (pas de navigateur)" dans le rapport final.
B. Recherche & Capture
- Construire 4 à 5 requêtes de recherche Pinterest à partir de
{ton} + {industrie} + support(recettes dans le fichier de référence). - Par requête : ouvrir
https://www.pinterest.com/search/pins/?q={query}, fermer les modales superposées,window.scrollTo(0, 0)(garde de cadre vide ego), capturer la grille de résultats, puis ouvrir les 1 à 2 épingles principales et capturer leurs vues détaillées. - Mode ego : un heredoc = un tour, et une capture prend trois tours ou plus (naviguer → sonde de disponibilité → balayer+capturer ; jamais compressé en un seul, sinon la capture sort vide — voir le fichier de référence) ; Espace de Tâche
astra landing {slug};captureScreenshotavec des chemins absolus ; fermer aveccompleteTaskSpace('astra landing {slug}', { keep: false })une fois terminé. - Enregistrer les captures dans
landing/{slug}/design/references/ref-{NN}.png. Pinterest inaccessible (mur de connexion persistant / blocage réseau) → réessayer les mêmes requêtes sur les galeries similaires listées dans le fichier de référence ; toujours rien → fallback de capture de l'Étape 1.A.
C. Analyse Visuelle → Tableau de Bord de Références
Pour chaque capture, extraire un enregistrement structuré (invite d'analyse dans le fichier de référence) : archétype de mise en page, traitement du héro, vocabulaire de mouvement (ce qui bouge, à quelle vitesse, quelle easing), direction de palette, caractère typographique, densité, un détail distinctif qui mérite d'être adapté. Utiliser mcp__fect-mcp__vision_analyze lorsque disponible ; sinon Read chaque PNG directement (lecture multimodale).
Écrire landing/{slug}/design/reference-board.md — enregistrements par image + une section de synthèse ("ce sur quoi ces références s'accordent"). Vérifier avec [ -f ] avant de prétendre que le tableau de bord existe.
Garde d'originalité : le tableau de bord enregistre des motifs, jamais des instructions pour reproduire une épingle spécifique. Les captures de référence restent dans design/references/ comme matériau de travail interne — elles ne sont jamais liées depuis index.html et jamais livrées comme actifs de la page.
Étape 2 : Synthèse de la Direction de Design
Distiller le tableau de bord de références + le ton de design + DESIGN.md en un brief de design engagé dans landing/{slug}/design/direction.md, contenant exactement ces décisions :
- Archétype de mise en page — ex. vidéo héro plein écran + bandes de fonctionnalités alternées + CTA de clôture.
- Vocabulaire de mouvement — les règles de mouvement à l'échelle de la page (durées, easings, style de dévoilement au défilement) tirées du tableau de bord de références, mappées aux techniques de
vibe-coding-animation-guide.md. - Plan du support héro — décision de Chemin A/B/C (tableau de l'Étape 3), ainsi que le sujet, l'ambiance et le comportement de la caméra de la vidéo.
- Palette + typographie — depuis les tokens DESIGN.md lorsqu'ils sont présents ; sinon dérivés du ton + références (valeurs OKLCH, une famille d'affichage + une famille de corps).
- Éléments distinctifs anti-IA — au moins 2 choix distinctifs concrets (selon design-guide §4.1 / DESIGN.md
aesthetic_rules) : par exemple, grille asymétrique, association éditoriale serif, texture de grain/bruit, indicateur de défilement personnalisé, chiffres surdimensionnés. Une sortie générique centrée-héro + trois-cartes + dégradé-violet est un défaut, pas une base de référence.
HITL (sauter sous --auto) : présenter les 5 décisions sous forme de résumé compact et poser une seule question de confirmation/ajustement. C'est la dernière porte de décision — tout ce qui suit s'exécute sans surveillance.
Étape 3 : Production de la Vidéo Héro en Boucle (Veo 3.1)
Lire $CLAUDE_PLUGIN_ROOT/skills/landing-page/references/veo-loop-video.md AVANT cette étape — elle contient les recettes de prompts, les modèles d'appels d'outils et toutes les commandes ffmpeg.
A. Décision de Chemin
| Condition | Chemin |
|---|---|
mcp__fect-mcp__veo_* présent et mcp__fect-image__nanobanana_text2img présent | A — Boucle bookend (par défaut) |
mcp__fect-mcp__veo_* présent, fect-image absent | B — text2video + boucle crossfade |
Outils Veo absents, ou --no-video | C — Héro animé CSS (pas de vidéo ; modèle dans references/video-integration.md) |
La présence des outils est déterminée à partir des outils disponibles de la session (le serveur fect-mcp est au niveau utilisateur et non groupé — l'absence est normale, pas une erreur). Enregistrer le chemin choisi ; le rapport final doit l'indiquer et, pour B/C, pourquoi.
B. Chemin A — Boucle Bookend (première image == dernière image)
L'astuce de la boucle transparente : générer une image fixe dirigée artistiquement, puis demander à Veo de l'animer depuis cette image jusqu'à cette image — veo_img2video avec lastImagePath défini sur le même fichier que sourceImagePath. Les premières et dernières images du clip sont identiques pixel par pixel, donc il boucle sans jointure visible, et l'image fixe sert également d'affiche LCP.
- Image fixe :
mcp__fect-image__nanobanana_text2img→landing/{slug}/.work/hero-frame.png— 16:9, palette assortie aux tokens, espace négatif calme où le titre se trouvera, pas de texte, pas de logos, pas de visages (modèle de prompt par ton dans le fichier de référence). - Clip :
mcp__fect-mcp__veo_img2video—sourceImagePath=lastImagePath=hero-frame.png,durationSeconds: 8,resolution: "1080p"(1080p nécessite 8 s),aspectRatio: "16:9", modèle par défaut (veo-3.1-lite— passer àfast/complet seulement si la sortie lite échoue deux fois au Seam QA). Prompt = mouvement ambiant cyclique qui retourne visiblement à son point de départ (recettes par ton dans le fichier de référence ; pas de coupes, pas de nouveaux sujets, pas de texte). - Vérifier (ne jamais prétendre sans cela) :
[ -f ]le mp4 +ffprobedurée ≥ 7 s. Manquant/trop court → régénérer une fois ; toujours en échec → Chemin B ; Veo en erreur complète → Chemin C. - Seam QA : extraire la première + dernière image, comparer avec
mcp__fect-mcp__vision_compare(ouReadles deux). Un saut visible → appliquer le crossfade ffmpeg du fichier de référence par-dessus.
C. Chemin B — text2video + Boucle Crossfade
mcp__fect-mcp__veo_text2video avec la recette de prompt adaptée à la boucle, puis la rendre transparente avec le self-crossfade ffmpeg (fondre la dernière seconde dans la première seconde ; commande dans le fichier de référence). Affiche = première image extraite.
D. Post-Production (tous les chemins vidéo)
Avec ffmpeg (command -v ffmpeg) : supprimer l'audio (-an — la vidéo d'arrière-plan est toujours muette ; la piste audio native de Veo est du poids mort), encoder l'échelle hero-desktop.mp4 (1920 w, H.264 CRF 24, +faststart) + hero-mobile.mp4 (720 w, CRF 26), et produire hero-poster.jpg (Chemin A : converti depuis hero-frame.png ; Chemin B : première image). Les sorties atterrissent dans landing/{slug}/assets/video/.
Pas de ffmpeg → utiliser le mp4 Veo brut pour les deux variantes ; le lecteur JS crossfade (Étape 4) masque toute jointure résiduelle. Indiquer la compression manquante dans le rapport final — ne pas présenter la page comme optimisée en taille.
Porte budgétaire : hero-desktop.mp4 ≤ 4 Mo, hero-mobile.mp4 ≤ 1.5 Mo, affiche ≤ 200 Ko (vérifier avec stat -f%z / du -k). Hors budget → augmenter le CRF et ré-encoder avant de continuer.
Une variante portrait 9:16 (deuxième génération Veo) n'est générée que sur demande explicite de l'utilisateur — la stratégie mobile par défaut est le downscale 720 w + chargement en premier de l'affiche.
Étape 4 : Implémentation de la Page
Lire $CLAUDE_PLUGIN_ROOT/skills/landing-page/references/video-integration.md AVANT cette étape — elle contient le balisage du héro, le lecteur complet loop-video.js de boucle infinie, le C...