Directeur de Page d'Atterrissage

Que fait Directeur de Page d'Atterrissage ?

Créez des pages d'atterrissage grâce à des décisions de conception explicites plutôt qu'à un style libre. La qualité provient du séquencement : comprendre le brief, affiner la direction visuelle, verrouiller un système, créer des références, les traduire fidèlement et inspecter le résultat rendu.

Cette compétence possède le flux de travail de la page d'atterrissage. Les compétences de support pour l'image, la traduction, les tests, la marque, le texte ou les frameworks peuvent contribuer à un travail spécialisé, mais ne doivent pas remplacer ce flux de travail ni introduire une seconde direction artistique concurrente.

Exécution par défaut

Utilisez ce directeur pour la direction artistique et la boucle complète de construction/révision. Si design-harness est installé et configuré, chargez-le pour une implémentation isolée, un contexte sauvegardé, des preuves de navigateur et une révision limitée. Sinon, effectuez et enregistrez ces étapes directement ; ne prétendez pas que des vérifications d'exécution de la harpe ont eu lieu. L'utilisateur n'a pas besoin d'invoquer une deuxième compétence. Un enfant assigné à une seule étape doit retourner à son parent sans démarrer une autre boucle d'orchestration.

Compatibilité

Utilisez la génération d'images intégrée pour les références visuelles et un outil d'inspection compatible navigateur pour le contrôle qualité visuel final. Coordonnez imagegen-frontend-web, image-to-code, brand-consistency et playwright-visual-testing quand ils sont disponibles. Par défaut, utilisez la chorégraphie GSAP pour les constructions complètes de pages d'atterrissage et les refontes substantielles, avec du CSS pour les retours d'interaction locaux. Respectez les demandes statiques explicites, les contraintes de préservation et les systèmes de mouvement requis existants.

Contrat de base

• Traitez le texte approuvé, les affirmations factuelles, les logos, les actifs de marque, l'ordre des pages et les exigences du modèle source comme verrouillés.
• Demandez le site web du client, la source de contenu, le guide de marque, les logos, les polices, les médias fournis, les visuels de produit et les références pertinentes lorsqu'ils ne sont pas déjà disponibles ; ne présumez jamais qu'aucun matériel source n'existe simplement parce qu'aucun n'était joint au premier message.
• Lisez et inventoriez chaque document, URL, image, fichier de marque et source de dépôt fourni avant de proposer une direction artistique.
• N'inventez jamais de statistiques, témoignages, récompenses, clients, certifications, lieux, coordonnées, captures d'écran de produits ou preuves.
• Rendez les informations manquantes visibles avec [À CONFIRMER] lorsqu'elles ne peuvent pas être omises en toute sécurité.
• Établissez un langage visuel cohérent avant l'implémentation.
• Prenez en charge les décisions courantes de direction artistique et de sélection de références, sauf si l'utilisateur demande des points de contrôle d'approbation visuelle. Enregistrez honnêtement les références sélectionnées par l'agent ; ne les appelez jamais approuvées par l'utilisateur. Faites remonter l'incertitude sur le contenu et les conflits avec les exigences verrouillées, pas les choix de conception ordinaires.
• Privilégiez une hiérarchie contrôlée et lisible au spectaculaire : un résultat premium ne doit pas dépendre de polices géantes, de héros surchargés, de marques ornementales ou d'une image de marque excessive.
• Traitez le mouvement comme faisant partie de ce langage visuel : donnez-lui un but, une personnalité, un système de timing et un équivalent pour les mouvements réduits.
• Utilisez exactement une direction de goût primaire. Ne mélangez pas plusieurs compétences de style ou moodboards.
• Générez et examinez de manière critique les références visuelles avant de coder lorsque la qualité visuelle est centrale.
• Construisez une page fonctionnelle, pas une maquette à l'apparence statique avec des contrôles inertes.
• Inspectez la page rendue réelle aux largeurs de bureau et mobile avant de signaler la finition.

Machine à états du flux de travail

Suivez les étapes dans l'ordre. Sautez une étape uniquement lorsque l'utilisateur a déjà fourni tout ce que cette étape établirait. Ne demandez pas à l'utilisateur de répéter des informations déjà présentes dans le brief, les fichiers, la conversation, le kit de marque ou l'URL de référence.

1. Lire et classer le brief

Inventoriez tout ce qui est déjà présent dans la conversation et l'espace de travail avant de demander quoi que ce soit à l'utilisateur. Lisez guided-intake.md et exécutez sa pré-vérification du matériel source lorsque l'ensemble source est manquant ou incomplet.

L'inventaire des sources couvre :

• Nom du client, site web actuel ou URL de la page source, et si la tâche est une nouvelle page, une refonte, un clone ou une extension
• Document de contenu approuvé, état du texte, ordre requis des pages/sections, réclamations, texte légal et conversion principale
• Guide de marque, logos, marques, spécifications de couleur, fichiers de polices et licences, systèmes d'icônes et documents précédents
• Photographie, vidéo, illustration, diagrammes, captures d'écran de produits, captures d'interface utilisateur, témoignages, preuves et documents de conformité fournis
• Références de concurrents ou d'inspiration, y compris ce que le client aime et n'aime pas
• Dépôt existant, framework, système de composants, contraintes techniques, destinations d'analyse/formulaire et attentes de déploiement

S'il n'y a rien, enregistrez que le projet est vierge et continuez sans prétendre que des actifs ont été fournis. Si l'utilisateur indique qu'un site web, document, dossier ou ensemble d'actifs existe mais est inaccessible, demandez l'URL, la pièce jointe, le chemin ou l'autorisation avant de prendre des décisions qui en dépendent.

Classez la tâche :

• Nouveau et visuellement non défini : exécutez l'intake guidée et la sélection de direction.
• Nouveau avec un brief visuel explicite : confirmez le brief compilé et passez aux références.
• Basé sur une référence ou clone : analysez la référence et préservez la structure, le contenu et le modèle d'interaction demandés.
• Refonte : auditez la page actuelle avant de proposer une direction ; préservez la fonctionnalité opérationnelle et le texte verrouillé.

Inspectez le dépôt et ses fichiers d'instructions avant de modifier le code. Préservez le framework existant, le gestionnaire de paquets, les conventions de composants et l'environnement d'exécution, sauf si l'utilisateur demande explicitement une migration.

2. Exécuter l'intake guidée si nécessaire

Lorsque les décisions de conception sont déléguées, choisissez les préférences visuelles non résolues à partir du contexte client et enregistrez votre raisonnement au lieu de mener un entretien. Utilisez les questions ci-dessous uniquement lorsque l'utilisateur souhaite une sélection de direction collaborative ou qu'une exigence matérielle ne peut pas être déduite en toute sécurité.

La pré-vérification du matériel source a lieu avant le questionnement sur la conception et ne compte pas dans la limite des questions de conception. Ne demandez pas de matériel déjà trouvé dans la conversation, l'espace de travail, le site web actuel ou la source connectée.

Posez une décision à la fois. Chaque question doit contenir deux ou trois choix mutuellement exclusifs, placer le choix recommandé en premier, expliquer son effet visuel ou commercial en une phrase et permettre une alternative libre. Gardez un sens visible du progrès comme « Direction 1 sur 4 ».

Priorisez uniquement les décisions non résolues. Un brief vague typique a besoin de quatre décisions :

1. Direction visuelle
2. Ambiance de couleur
3. Caractère typographique
4. Structure du héros/mise en page

Demandez des informations sur l'imagerie, le mouvement ou l'architecture de conversion uniquement lorsque le brief ne les rend pas déductibles. Lorsque le mouvement est important commercialement ou narrativement, demandez si l'expérience doit sembler retenue, expressive ou dirigée par le défilement et expliquez le compromis de performance. Limitez l'entretien à six questions ou moins, sauf si l'utilisateur demande un atelier plus approfondi.

Ne commencez pas à coder tant qu'un choix de direction matérielle reste non résolu.

3. Présenter trois directions nommées

Pour une direction de marque non définie, proposez trois routes vraiment différentes—pas trois variations de couleur de la même mise en page. Chaque direction doit spécifier :

• Un nom mémorable
• L'idée stratégique et l'impression sur le public
• L'association de polices ou la catégorie typographique
• L'ambiance de palette avec des rôles de couleur représentatifs
• La composition du héros
• La densité du héros, la plage d'échelle du titre, le budget de contenu de la première fenêtre et ce qui est délibérément reporté sous la ligne de flottaison
• Le traitement de l'imagerie
• Le traitement du logo dans la navigation et le pied de page, y compris la gestion de l'arrière-plan et l'empreinte visuelle maximale
• Le caractère des surfaces, bordures, rayons et ombres
• Le traitement du CTA et comment la conversion primaire devient visuellement dominante sans encombrement décoratif
• Le caractère du mouvement
• Le principal compromis

Lorsque la conception est déléguée, comparez brièvement les routes, choisissez la plus forte et générez sa référence de héros. Sinon, recommandez une route et présentez les alternatives pour le point de contrôle collaboratif demandé. Évitez de générer trois directions complètes lorsqu'une route sélectionnée résoudra la tâche.

4. Compiler et verrouiller le brief de conception

Lisez design-brief-schema.md. Écrivez DESIGN-BRIEF.md dans le projet en utilisant cette structure.

Lisez visual-calibration.md pour établir une cible visuelle concrète et la boucle de correction. Ceci est particulièrement important lorsque le brief dit seulement « premium », « moderne » ou « améliorez-le ».

Traduisez les choix en règles prêtes à l'implémentation : polices nommées, graisses, échelle typographique, jetons de couleur, grille, largeurs maximales, rythme d'espacement, rayons, bordures, ombres, règles d'imagerie, rythme des sections, interactions, jetons de mouvement, réduction de mouvement et transformations de points de rupture.

Verrouillez également les contraintes de composition pratiques qui causent souvent un rejet tardif :

• Largeur et taille maximales du titre du héros au bureau et au mobile
• Ordre de priorité de la première fenêtre et budget de densité pour le texte, les médias, les preuves et les actions
• Hauteur de l'en-tête plus hauteur et largeur maximales du logo ; utilisez un actif véritablement transparent lorsque la marque doit être placée sans fond
• Prominence du CTA primaire via l'échelle, le contraste, le placement et le contexte de support
• Dégagement minimum entre les index, les séparateurs, les bordures, les icônes et le texte
• Règles de composition spécifiques aux sections afin que les preuves, le succès, le processus et les sections de conversion ne deviennent pas des variations de la même grille de cartes
• Traitements approuvés explicites, traitements détestés et motifs rejetés qui ne doivent pas réapparaître plus tard sur la page

Séparez trois types d'informations :

• Verrouillé : texte approuvé, faits de marque, actifs fournis, direction sélectionnée.
• Dérivé : jetons de conception, comportement réactif, règles de composition.
• Non résolu : informations encore en attente de confirmation.

Exécutez node scripts/validate_design_brief.mjs <project>/DESIGN-BRIEF.md lorsque le script fourni de cette compétence est accessible. Corrigez les sections manquantes ou de remplissage avant de continuer.

5. Créer des références de sections axées sur l'image

Chargez imagegen-frontend-web, puis utilisez la capacité de génération d'images intégrée.

Planifiez la narration de la page. Générez et examinez de manière critique la référence du héros en premier, en corrigeant la composition faible avant de l'étendre aux autres sections. Générez une image de référence distincte, grande et horizontale pour chaque section prévue. Une page avec sept sections reçoit sept images de section. Générez de nouvelles références de détail au lieu de recadrer de petits fragments d'un composite pleine page.

Gardez ces éléments constants pour chaque référence :

• Palette et rôles de couleur
• Association de polices et personnalité typographique
• Logique de grille et rythme d'espacement
• Langage des bordures, rayons, icônes et surfaces
• Traitement de l'image et direction artistique

Variez délibérément la composition des sections. Évitez par défaut de répéter texte à gauche/image à droite, grilles de cartes, conteneurs bento et titres centrés surdimensionnés.

Enregistrez les références liées au projet sous design-references/ avec des noms ordonnés tels que 01-hero.png, 02-proof.png et 03-product.png. Traitez les références approuvées comme la source de vérité visuelle.

Examinez les références à un cadrage de fenêtre réaliste, pas seulement en tant que planches isolées. Avant l'implémentation, confirmez que :

• Le héros a un message dominant, une action dominante et aucun groupe concurrent de preuves, d'images, d'étiquettes ou de dispositifs décoratifs.
• La police d'affichage semble confiante à une taille de visualisation normale plutôt que surdimensionnée pour le canevas.
• Le logo de l'en-tête est optiquement subordonné à la navigation et n'introduit pas accidentellement un rectangle blanc ou un fond non correspondant.
• La section de conversion finale est un moment conçu avec suffisamment de contraste et de poids visuel, pas simplement un texte centré et un bouton.
• Les lignes numérotées, les étapes de chronologie et les listes à règles ont de l'espace des deux côtés de leurs lignes.
• Aucun symbole décoratif n'est utilisé comme substitut à la composition ou au sens.

La sélection de direction et l'examen des références sont des points de contrôle distincts. Une route nommée n'établit pas que son exécution est bonne. Si l'utilisateur rejette une référence, révisez-la ; ne commencez pas à coder à partir de la composition rejetée.

Les images fixes ne peuvent pas spécifier complètement le timing. Ajoutez des annotations de mouvement concises au brief de conception pour chaque section qui bouge : déclencheur, séquence, changement spatial, durée, easing, répétition, adaptation mobile et résultat de mouvement réduit. N'inventez pas d'animation simplement parce qu'une référence contient de la profondeur ou des images en couches.

Si l'utilisateur a demandé une approbation visuelle, montrez les références et attendez à ce point de contrôle. Sinon, sélectionnez les références après un examen critique et continuez de manière autonome. Dans ce flux de travail, les références acceptées par l'agent peuvent servir de source de vérité pour l'implémentation, mais ne doivent pas être décrites comme approuvées par l'utilisateur.

6. Traduire les références en code

Chargez image-to-code et analysez chaque référence approuvée pour la typographie, l'espacement, la couleur, la composition, l'imagerie, les composants, l'intention réactive et les indices d'interaction.

Avant de composer les sections, implémentez des jetons sémantiques pour :

• Couleurs d'arrière-plan, de premier plan, de texte atténué, d'accent, de bordure et de surface
• Familles de polices d'affichage et de corps
• Échelle typographique et relations de hauteur de ligne
• Rythme d'espacement et largeurs de contenu
• Niveaux de rayon, de bordure et d'ombre
• Durée et easing du mouvement

Implémentez l'en-tête et le héros comme la première tranche visuelle et inspectez-les à 1440 et 390 pixels avant de traduire les sections restantes. Corrigez l'échelle et le fond du logo, la densité du héros, le retour à la ligne du titre, le poids du CTA et la composition du pli à ce stade afin qu'un premier écran faible ne se propage pas dans la page.

Utilisez des actifs d'image transparents intrinsèques pour les logos lorsqu'ils sont disponibles. Le mélange CSS, les conteneurs blancs, le clipping ou les filtres ne sont pas des substituts pour supprimer un fond intégré indésirable. Dimensionnez les logos par leur marque visible, pas simplement par les dimensions du bitmap source.

Dans les composants numérotés ou à règles, réservez un espacement explicite entre le numéro et le séparateur ou le bord du contenu. Vérifiez le dégagement optique dans le résultat rendu ; un rembourrage mathématiquement égal peut encore sembler serré près des règles fines.

Construisez des composants sémantiques et accessibles.