Que fait Constructeur de Pages d'Atterrissage ?

Créez des pages d'atterrissage de haute qualité, prêtes pour le déploiement, en extrayant la marque et le contenu des sites web et des documents clients, puis en produisant une page HTML/CSS réactive avec des images vérifiées et une structure propre.

Cette compétence existe parce que les pages d'atterrissage nécessitent une coordination minutieuse de la marque, du contenu, des images et du design réactif — et le mode d'échec le plus courant est de traiter les documents sources comme uniquement textuels, en manquant les images qui portent la moitié du message marketing.

Les Règles d'Or

1. Les images sont du contenu, pas de la décoration. Lorsqu'un PDF marketing montre une photo de classe à côté d'un paragraphe sur le bien-être des élèves, cette photo EST le message. Une page d'atterrissage sans ces images est incomplète, quelle que soit la qualité du texte. Extrayez et intégrez les images dès le premier passage, à chaque fois.

2. Gardez le style maintenable dans la pile choisie. Pour une page statique, mettez le CSS dans styles.css, pas en ligne dans le HTML. Pour un projet framework existant, préservez ses modules CSS, styles de composants, classes utilitaires ou système de tokens établis. Ne migrez pas l'architecture de style sans raison.

3. N'inventez jamais de contenu. Utilisez uniquement ce que le document source fournit. N'inventez pas de légendes d'images, de directions visuelles, de citations de témoignages, de statistiques ou de noms de clients. Si du contenu manque, signalez-le et demandez — ne comblez pas les lacunes avec du texte factice généré par l'IA.

4. Utilisez la pile frontend délibérément. Avant de coder, chargez les compétences de support disponibles nommées ci-dessous. Ce sont des rôles complémentaires, pas des instructions en double à assembler aveuglément. Si une compétence nommée est indisponible, continuez avec la pile disponible et enregistrez l'écart ; ne faites jamais comme si elle avait fonctionné.

Pile de Compétences Frontend (Acheminement Requis)

Les outils frontend fournis par capture d'écran correspondent à ce workflow de page d'atterrissage comme suit. Lisez references/frontend-skill-stack.md pour les règles d'acheminement et de conflit complètes.

frontend-design — établissez la thèse visuelle spécifique au sujet, la typographie, la palette, le concept de mise en page, l'élément signature et l'intention de mouvement. À utiliser pour les nouvelles constructions et les remodelages visuels significatifs.
design-taste-frontend — appliquez la discipline d'implémentation anti-slop, les mécanismes de mise en page réactive, les états d'interaction accessibles, les choix de composants, les vérifications de performance et la pré-validation de conception finale.
imagegen-frontend-web — à utiliser lorsque des références visuelles générées réduiraient matériellement l'ambiguïté : direction visuelle inconnue, campagnes axées sur l'image, illustration/direction artistique personnalisée, ou un utilisateur demandant des maquettes. Il génère des références ; il ne remplace pas les véritables actifs de marque ou l'implémentation.
design-taste-frontend-v1 — solution de repli héritée uniquement. Utilisez-la lorsqu'un projet existant dépend explicitement du comportement v1 ; ne chargez pas v1 et Design Taste actuel ensemble.
imagegen-frontend-mobile — ne fait pas partie de la construction d'une page d'atterrissage web. Utilisez-le uniquement pour un livrable d'écran d'application mobile séparé, jamais comme étape de conception web réactive de la page.
Aidesigner Frontend — si cette compétence exacte est installée et détectable, utilisez-la comme une seconde critique optionnelle de la direction artistique approuvée. Elle n'est actuellement pas considérée comme disponible et ne doit jamais bloquer le workflow.

N'exécutez pas chaque outil pour la cérémonie. La pile minimale pour une nouvelle page d'atterrissage est frontend-design + actuel design-taste-frontend + landing-page. Ajoutez imagegen-frontend-web lorsque la génération de références visuelles est justifiée. Le web mobile réactif reste une partie de l'implémentation et du QA ; il n'est pas délégué à la compétence d'image d'application mobile.

Porte de conception pré-code requise

Avant l'implémentation, produisez un brief de construction interne contenant :

le public de la page, un seul objectif de conversion et le contenu source de vérité ;
une thèse visuelle cohérente liée au sujet réel, pas une esthétique SaaS générique ;
palette et rôles typographiques avec vérification des licences/disponibilité ;
ordre des sections et le rôle de chaque section ;
carte des actifs : préserver, obtenir, générer ou omettre ;
une idée visuelle signature et un plan de mouvement retenu ;
comportement desktop, tablette et mobile pour le premier pli et les sections complexes ;
liste d'évitement explicite basée sur l'audit de la marque et des références.

Si l'utilisateur a fourni une référence, extrayez les principes sans cloner son identité. Si la source est un site client existant ou un modèle approuvé, préservez le texte approuvé, les actifs de marque, la grammaire des composants et l'ordre des sections, sauf si l'utilisateur autorise explicitement une refonte.

Règles Anti-Slop (OBLIGATOIRES)

Ces motifs rendent les pages générées par IA bon marché et génériques. Ne les utilisez JAMAIS :

Motifs de Texte Interdits

« Révolutionnez », « Transformez votre », « Libérez la puissance de », « Tirez parti de », « Autonomisez »
« De pointe », « Nouvelle génération », « À la fine pointe de la technologie », « Meilleur de sa catégorie »
« En toute transparence », « Sans effort », « Surpuissant »
« Dans le monde rapide d'aujourd'hui », « À une époque de »
Commencer les paragraphes par « Imaginez... » ou « Imaginez ceci... »
CTA génériques comme « En savoir plus » ou « Commencer » sans contexte — utilisez des CTA spécifiques : « Obtenez un devis instantané », « Réservez une démo », « Voir les tarifs »

Motifs Visuels Interdits

Formes de dégradé mesh ou arrière-plans aurora (le signe numéro 1 des pages générées par IA)
Dégradés violet-bleu comme langage de design principal
Objets 3D flottants sans lien avec le produit
Motifs géométriques abstraits génériques comme arrière-plans de héros
Cartes aux coins trop arrondis (border-radius > 1.5rem) avec ombres portées lourdes
Mises en page de cartes identiques répétées 3 fois ou plus avec seulement des changements d'icônes
Images de héros de stock photo qui ne correspondent pas à l'entreprise (par exemple, photos de poignée de main génériques)

Motifs de Code Interdits

Styles en ligne dans les éléments HTML
Utilisation de !important en CSS (sauf pour les remplacements utilitaires)
Valeurs de pixels codées en dur pour les tailles de police — utilisez clamp() ou rem
Attributs alt manquants sur les images
Utilisation de <div> alors que des éléments sémantiques existent (<section>, <article>, <nav>, <header>, <footer>)

Aperçu du Workflow

La construction suit sept phases. Résolvez les faits évidents à partir des sources fournies au lieu de demander à l'utilisateur de les répéter. Ne demandez que lorsqu'une décision manquante modifie matériellement le résultat.

Contexte & Recherche — Lisez les instructions du projet/client, les décisions de réunion, le brief, l'état d'approbation, la marque en direct, les références, le texte et la grammaire de conception
Extraction de Contenu — Extrayez tout le texte et les images approuvés des sources fournies
Vérification des Actifs — Construisez un inventaire des médias utilisables conscient de la provenance
Direction Frontend & Plan — Appliquez Frontend Design et Design Taste ; verrouillez le flux de conversion, les tokens, le comportement réactif, les actifs et les vérifications d'acceptation ; générez des références web uniquement lorsque justifié
Construction — Utilisez la pile la plus simple qui satisfait le brief et implémentez le code de production complet
QA Navigateur — Construisez/testez, inspectez les captures d'écran en desktop/tablette/mobile, corrigez les défauts et répétez
Déployer & Vérifier en Direct — Déployez uniquement lorsque demandé, puis inspectez l'URL réelle et signalez l'alias vérifié

Phase 1 : Contexte & Recherche

Avant d'écrire du code, lisez les instructions les plus proches du projet/client, le brief approuvé, les décisions de réunion et les liens sources. Comprenez ensuite la marque existante du client et collectez tous les actifs dont vous aurez besoin.

Extraction de Marque

Récupérez le site web du client et extrayez :

Couleurs : Inspectez les propriétés personnalisées CSS, les styles calculés sur les éléments clés (titres, boutons, arrière-plans, accents). Enregistrez en valeurs hexadécimales.
Polices : Vérifiez les liens Google Fonts, les déclarations font-family et les règles @font-face. Ne présumez pas — de nombreux sites utilisent des polices qui ressemblent à des polices courantes mais ne le sont pas.
Logo : Trouvez l'URL de l'image du logo (généralement dans l'en-tête ou le pied de page). Obtenez la version la plus haute résolution disponible.
Langage de design : Notez les motifs d'espacement, l'utilisation du border-radius, les styles d'ombre, les traitements d'arrière-plan des sections.

Collecte d'Actifs

Ceci est critique. Parcourez les répertoires d'images du site pour construire un catalogue complet :

Récupérez la page d'accueil et les pages clés, extrayez tous les attributs <img> src et les URLs CSS background-image
Cherchez des motifs dans les chemins d'images (par exemple, /wp-content/uploads/YYYY/MM/ pour les sites WordPress)
Pour chaque image, enregistrez :
- URL complète
- Nom descriptif (que montre l'image ?)
- Dimensions (à partir du nom de fichier ou en récupérant les en-têtes)
- Catégorie (photo, illustration, icône, logo, sticker)

Sauvegardez ce catalogue — vous y ferez référence tout au long de la construction.

Exemple d'entrée de catalogue :

URL: https://example.com/wp-content/uploads/2023/08/image-13-1024x768.jpeg
Description: Élèves travaillant ensemble en classe
Dimensions: 1024x768
Catégorie: photo
Utilisation pour: Section Problème, Galerie

Phase 2 : Extraction de Contenu

Lorsque l'utilisateur fournit un PDF, un document Word ou un autre document de contenu :

Contenu Textuel

Extrayez tous les titres, le corps du texte, les statistiques, les citations et les CTA
Préservez la structure des sections du document — elle correspond généralement aux sections de la page
Notez toute formulation spécifique qui doit être conservée textuellement (slogans, affirmations approuvées, citations de témoignages)

Contenu d'Image (NE PAS IGNORER CECI)

Identifiez chaque image dans le document
Pour chaque image, déterminez ce qu'elle montre et à quelle section elle appartient
Faites correspondre les images du document aux URLs hébergées réelles du site web du client (à partir de votre catalogue de la Phase 1)
Si une image du document ne correspond à aucune URL cataloguée, notez-la comme « besoin de source » et demandez à l'utilisateur

La raison pour laquelle cela compte : les documents marketing utilisent les images de manière stratégique. Un PDF qui montre des illustrations de personnages à côté d'un contenu sur les sciences du cerveau vous dit que ces illustrations appartiennent à la section Sciences du Cerveau de la page d'atterrissage. Les ignorer produit une page lourde en texte qui manque le sujet.

Phase 3 : Catalogue d'Images et Vérification

Avant de construire quoi que ce soit, vérifiez chaque URL d'image que vous prévoyez d'utiliser.

Processus de Vérification

Pour chaque URL d'image :

Récupérez l'URL et vérifiez le code d'état HTTP
Une réponse 200 avec un type de contenu correct signifie qu'elle est bonne
Une erreur 404 ou autre signifie que l'URL est erronée

Correction des URLs Cassées

Lorsqu'une URL d'image renvoie 404 :

Revenez au site en direct et recherchez l'image par nom de fichier partiel
Récupérez le code source de la page qui contenait initialement l'image
Cherchez le chemin correct — les noms de fichiers ont souvent de légères variations (par exemple, GYM_Kid-at-Desk-300x295.png vs GYM_Kid_AtDesk-222x300.png)
Ne devinez jamais les noms de fichiers. Vérifiez toujours par rapport au serveur réel.

Catalogue Final

Produisez une liste vérifiée mappant chaque section de contenu à ses images :

Hero: logo.png (vérifié), character-teaching.png (vérifié), sticker-owl.png (vérifié)
Problème: classroom-photo.jpeg (vérifié)
Sciences du Cerveau: character-1.png (vérifié), character-2.png (vérifié), character-3.png (vérifié), character-4.png (vérifié)
Shift: school-kits.jpg (vérifié), home-products.jpeg (vérifié)
Galerie: classroom.jpeg, confidence.png, founders.jpeg (tous vérifiés)

Phase 4 : Direction Frontend et Plan

Chargez la pile de compétences frontend requise et complétez la porte de conception pré-code en haut de ce fichier. Décidez si les images de référence web générées sont utiles. Verrouillez le flux de conversion, les jobs de section, les tokens visuels, le plan média, l'intention de mouvement, le comportement réactif et les vérifications d'acceptation avant l'implémentation.

Auto-rejetez la direction si elle pourrait être réutilisée inchangée pour un client non lié. Une direction artistique cohérente vaut mieux que la moyenne de plusieurs esthétiques de compétences.

Phase 5 : Construction

Choisissez la pile d'implémentation

Ne forcez pas chaque page d'atterrissage dans une seule technologie. Choisissez en fonction du projet réel :

Dépôt ou modèle existant : préservez son framework, son runtime, ses composants, son routage et son pipeline d'actifs, sauf si la migration est explicitement demandée.
Page de campagne statique : HTML sémantique, CSS externe et JavaScript minimal sont privilégiés lorsqu'aucune architecture de composants ou comportement d'application n'est nécessaire.
Page axée sur les composants ou interactive : React/Vite, Next.js ou la pile existante du dépôt est valide lorsque des composants réutilisables, des intégrations, de l'état ou des mouvements complexes le justifient.
Vérifiez les dépendances avant de les importer. Préférez les bibliothèques existantes du projet plutôt que d'ajouter des packages à la mode.

L'ancien défaut ci-dessous s'applique uniquement à une page statique véritablement nouvelle.

Structure de fichiers de page statique

Gardez-la simple — un seul répertoire avec deux fichiers :

nom-projet/
├── index.html
└── styles.css

Pour une page statique simple, évitez les outils de construction inutiles et les dépendances de framework. C'est une valeur par défaut, pas une interdiction d'utiliser la pile réelle du projet.

Configuration du Système de Design (styles.css)

Commencez la feuille de style avec le système de marque extrait :

:root {
  /* Couleurs de marque — extraites du site client */
  --primary: #0f4661;
  --primary-dark: #0a3347;
  --accent: #f37b78;
  --accent-hover: #e06560;
  /* ... toutes les couleurs de marque comme propriétés personnalisées */

  /* Échelle neutre — toujours définir celles-ci */
  --gray-50: #f8f9fa;
  --gray-100: #f0f2f5;
  --gray-200: #e2e5ea;
  --gray-300: #c8cdd5;
  --gray-400: #9ca3b0;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;

  /* Tokens utilitaires */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.12);
  --shadow-xl: 0 20px 60px rgba(0,0,0,0.16);
  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;

  /* Transitions */
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

body {
  font-family: 'ExtractedFont', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--gray-700);
  background: var(--white, #ffffff);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

Règles Typographiques (CRITIQUES)

La mauvaise typographie est la raison numéro 1 pour laquelle les pages IA semblent amateurs. Suivez strictement celles-ci :

/* Tailles minimales — NE JAMAIS descendre en dessous de celles-ci */
body { font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); } /* 16-18px */
h1 { font-size: clamp(2.25rem, 1.5rem + 3vw, 4rem); }       /* 36-64px */

... [tronqué pour la traduction]

Constructeur de Pages d'Atterrissage

Qu'est-ce que Constructeur de Pages d'Atterrissage ?

Demander à votre IA préférée

Documentation