bg-szy/TOP-SKILLS

Conception de page d'atterrissage

Aperçu

Créez des pages d'atterrissage qui convertissent ET captivent. Cette compétence combine une structure axée sur la conversion avec un design visuel distinctif pour créer des pages qui se démarquent dans un monde saturé d'IA. L'objectif : des pages d'une valeur de 50 à 100 $ que vous seriez fier de vendre.

OBLIGATOIRE : Découverte de l'ambiance (À faire en premier)

AVANT d'écrire du code, vous DEVEZ exécuter le processus de Découverte de l'ambiance. Ce n'est pas une table de correspondance - c'est une invite créative qui génère une direction esthétique UNIQUE à chaque fois.

L'objectif : Aucune page d'atterrissage ne devrait se ressembler, même pour des produits similaires.

---

Le processus de Découverte de l'ambiance

Posez ces questions à l'utilisateur, puis SYNTHÉTISEZ une direction unique. Ne vous contentez pas de faire correspondre les réponses à des préréglages.

Étape 1 : Recueillir le contexte (Posez ces questions)

Q1 : Quel est un lieu ou un objet du monde réel que cette marque représenterait ?

Pas "quel secteur d'activité" - une chose réelle et spécifique. Un konbini à Tokyo à 2h du matin. La cuisine d'une grand-mère. Un parking brutaliste. Un récif corallien. Le cockpit d'un 747. Un marché aux puces à Marrakech. Un studio d'enregistrement des années 1970.

Q2 : Quelle est l'UNIQUE émotion que quelqu'un devrait ressentir dans les 3 premières secondes ?

Choisissez UNE : Calme. Énergisé. Curieux. En confiance. Ravi. Impressionné. Rebelle. Nostalgique. Inspiré. Amusé. Sophistiqué. Accueilli. Intrigué. Confiant.

Q3 : Choisissez DEUX influences inattendues à faire entrer en collision :

Exemples : "emballage médical + graphismes de skateboard", "tableurs + art de rue", "hôtel de luxe + fanzine punk", "centre de contrôle de la NASA + jardin d'enfants", "konbini japonais + bibliothèque victorienne"

Q4 : Avec quoi cette page ne devrait-elle JAMAIS être confondue ?

Nommez 2 à 3 choses spécifiques à éviter activement. "Un projet crypto", "Une application de bien-être", "Quelque chose fait par une banque", "Tout ce qui a des dégradés violets"

Étape 2 : Inventez l'esthétique (Ne cherchez pas - Créez)

Sur la base des réponses, CRÉEZ une ambiance unique en décidant :

INVENTION DES COULEURS (N'utilisez pas de palettes mémorisées - dérivez du lieu/objet)

• Quelles couleurs existent dans ce lieu/objet du monde réel de la Q1 ?
• Extrayez 3 à 4 couleurs qui semblent authentiques par rapport à cette référence
• Inventez des codes hexadécimaux spécifiques à neuf - ne réutilisez pas les codes de projets précédents
• Nommez votre palette de manière évocatrice (pas "bleu et orange" mais "Bodega de minuit" ou "Matin de la ceinture de rouille")

INVENTION DE LA TYPOGRAPHIE (Faites correspondre la voix à la collision)

• À quoi ressemblerait le texte dans cet endroit ?
• Trouvez une police d'affichage qui incarne la collision de la Q3
• Ne vous tournez pas par défaut vers vos choix habituels - parcourez Google Fonts avec un œil neuf
• Considérez : le poids, la largeur, le contraste, les particularités

INVENTION DE LA MISE EN PAGE (Dérivez de l'espace physique)

• Comment l'espace est-il organisé dans ce lieu de la Q1 ?
• Est-il exigu ou spacieux ? En forme de grille ou organique ? Vertical ou horizontal ?
• Quel choix de mise en page inattendu incarnerait la collision de la Q3 ?

INVENTION DU MOUVEMENT (Faites correspondre l'émotion)

• Comment l'émotion de la Q2 se déplace-t-elle ?
• Calme = à peine perceptible. Énergisé = cinétique. Sophistiqué = lent et délibéré.
• Quel est le mouvement signature qui définit cette page ?

Étape 3 : Rédigez votre spécification d'ambiance

Avant de coder, écrivez ceci explicitement :

NOM DE L'AMBIANCE : [Inventez un nom de 2-3 mots]
RÉFÉRENCE : [Le lieu/objet de la Q1]
ÉMOTION : [De la Q2]
COLLISION : [De la Q3]
ANTI-MODÈLES : [De la Q4]

COULEURS :
- Primaire : [hex] - [pourquoi cette couleur]
- Secondaire : [hex] - [pourquoi]
- Arrière-plan : [hex] - [pourquoi]
- Accent : [hex] - [pourquoi]
- Nom de la palette : [nom évocateur]

TYPOGRAPHIE :
- Affichage : [nom de police spécifique] - [pourquoi elle convient]
- Corps : [nom de police spécifique] - [pourquoi]
- Caractère : [décrivez la voix]

MISE EN PAGE :
- Densité : [clairsemée/équilibrée/dense]
- Formes : [angulaires/arrondies/organiques/mélangées]
- Élément signature : [un choix de mise en page inhabituel]

MOUVEMENT :
- Niveau : [statique/subtil/modéré/dynamique/chaotique]
- Animation signature : [une animation spécifique qui définit cette page]

JOKER :
- Un détail inattendu qui ne "correspond" pas mais qui le rend mémorable

Étape 4 : Le contrôle de fraîcheur

Avant de continuer, vérifiez :

• Je n'ai PAS réutilisé les codes hexadécimaux de mes 3 derniers projets
• Je n'ai PAS opté par défaut pour mes polices "confortables" (vérifiez : est-ce que j'utilise Inter ? Nunito ? Space Grotesk ? Si oui, trouvez autre chose)
• La collision de la Q3 est réellement visible dans mes choix
• Quelqu'un ne pourrait PAS confondre ceci avec mes pages d'atterrissage précédentes
• J'ai inclus un joker qui me surprend même moi

---

Exemple de Découverte de l'ambiance

Q1 - Lieu/Objet : "Une gare japonaise à l'heure de pointe"

Q2 - Émotion : "Confiant"

Q3 - Collision : "Signalétique de transport + haute couture"

Q4 - Jamais confondu avec : "Une application de méditation, quoi que ce soit de fantaisiste, la tech startup"

Spécification d'ambiance générée :

NOM DE L'AMBIANCE : Shinjuku Runway
RÉFÉRENCE : Gare japonaise à l'heure de pointe
ÉMOTION : Confiant
COLLISION : Signalétique de transport + haute couture
ANTI-MODÈLES : Pas de dégradés doux, pas d'illustrations ludiques, pas de formes arrondies et amicales

COULEURS :
- Primaire : #1a1a1a - le noir des portes de train
- Secondaire : #f5f5f0 - le béton du quai, usé et lisse
- Arrière-plan : #fafaf8 - blanc sous lumière fluorescente
- Accent : #e60012 - le rouge de la ligne JR, qui commande l'attention
- Nom de la palette : "Bord du quai"

TYPOGRAPHIE :
- Affichage : Darker Grotesque - confiant, légèrement condensé, touche européenne
- Corps : Noto Sans JP - utilitaire propre, inspiré du transport
- Caractère : Autoritaire mais pas froid. Clair. Directionnel.

MISE EN PAGE :
- Densité : Riche mais organisée - comme un plan de gare
- Formes : Angulaires avec des exceptions intentionnellement arrondies (comme les fenêtres de train)
- Élément signature : De fortes bandes horizontales qui divisent les sections comme les horaires de train

MOUVEMENT :
- Niveau : Subtil mais précis
- Animation signature : Les éléments glissent depuis le côté comme des trains qui arrivent - horizontal, fluide, avec un timing exact

JOKER :
- Un élément utilise une superposition de texture semblable à du tissu - la collision haute couture

---

Amorces d'inspiration (Quand on est bloqué sur la Q1)

Espaces : Marché de nuit à Bangkok | Musée vide à la fermeture | Salon d'aéroport à 4h du matin | Magasin de disques vintage | Salle d'attente d'hôpital | Sol de casino | Serre en hiver | Quai de métro | Coupole d'observatoire | Usine abandonnée | Intérieur de yacht de luxe | Laverie automatique 24h/24 | Salle des livres rares de bibliothèque | Carrosserie | Module de station spatiale

Objets : Synthétiseur des années 1980 | Instruments chirurgicaux | Bagages vintage | Moto de course | Boussole antique | Métier à tisser industriel | Enseigne au néon | Machine à écrire | Verrerie scientifique | Livre relié cuir | Carte de circuit imprimé | Vaisselle en porcelaine

Époques/Mouvements : Constructivisme soviétique | Design Memphis | Style international suisse | Art nouveau | Bauhaus | De Stijl | Architecture Googie | Streamline Moderne | Brutalisme | Métabolisme japonais | Modernisme scandinave | Futurisme italien

---

Les règles anti-convergence

1. Pas de mémoire de code hexadécimal - Générez des couleurs fraîches à partir de la référence, ne vous souvenez pas de "mon bleu habituel"
2. Rotation de police requise - Ne peut pas utiliser la même police d'affichage dans des projets consécutifs
3. La collision doit se voir - Si quelqu'un ne peut pas voir les DEUX influences de la Q3, forcez davantage
4. Le joker est obligatoire - Chaque ambiance a besoin d'un élément qui ne "correspond" pas mais qui la rend unique
5. Nommez-la - Une ambiance sans nom devient générique. Une ambiance nommée a une identité.

---

Questions de contexte rapides (Version minimale)

Si l'utilisateur dit simplement "fais-moi une page d'atterrissage" sans contexte, demandez :

1. "Quel est un lieu ou un objet qui capture l'énergie de cette marque ?"
2. "Quelle émotion devrait dominer ?"
3. "À quoi cela ne devrait-il JAMAIS ressembler ?"

Synthétisez ensuite une ambiance à partir de ces trois réponses.

---

La règle des 50 %

Consacrez 50 % de votre temps à la section héros. C'est l'image de couverture pour les réseaux sociaux, la première impression, l'accroche. Tout le reste découle de la réussite du héros.

Composition de la section (De haut en bas)

1. Section Héros (Objectif principal)

L'élément qui fait ou défait tout. Doit contenir :

• Titre : Accroche percutante, axée sur les avantages (référencez la H1 Gallery pour l'inspiration)
• Sous-titre : Contexte de soutien, 1 à 2 phrases maximum
• Bouton(s) d'appel à l'action : Action principale + secondaire facultative
• Preuve sociale : Bandeau de logos, témoignages ou badges de confiance
• Élément visuel : Photo du produit, illustration ou arrière-plan animé

Variations du héros :

• Mise en page fractionnée (texte à gauche, visuel à droite)
• Centré avec éléments flottants
• Arrière-plan à fond perdu avec texte superposé
• Asymétrique avec éléments décoratifs

2. Section Fonctionnalités/Avantages

Montrez ce que le produit fait. Options :

• Grille Bento : Cartes dans une mise en page asymétrique (popularisée par Apple)
• Lignes alternées : Image + texte, en alternant les côtés
• Grille d'icônes : Icônes simples avec de courtes descriptions
• Cartes interactives : États de survol, micro-animations

3. Section de preuve sociale

Construisez la confiance grâce à :

• Carrousel de logos (animation de bandeau défilant)
• Cartes de témoignages avec photos
• Statistiques/métriques avec compteurs animés
• Extraits d'études de cas

4. Section Comment ça marche

Explication étape par étape :

• Étapes numérotées (motif 01, 02, 03 ajoute de la sophistication)
• Défilement collant avec dévoilement progressif
• Visualisation de chronologie ou d'organigramme

5. Section Tarification (le cas échéant)

• Comparaison de 2 à 3 niveaux
• Niveau "recommandé" mis en évidence
• Tableau de comparaison des fonctionnalités
• Accordéon FAQ en dessous

6. Section Appel à l'action (CTA)

Poussée finale vers la conversion :

• Répétez la proposition de valeur
• Titre fort
• Action unique et ciblée
• Éléments d'urgence (si authentiques)

7. Pied de page

• Liens de navigation
• Icônes sociales
• Liens juridiques
• Inscription à la newsletter facultative

Principes anti-AI-Slop

Icônes : Évitez Lucide (Trop utilisé)

Utilisez plutôt :

• Iconify Solar : Styles multiples (contour, brisé, duotone)
• Heroicons : Quand vous avez besoin de la simplicité d'Apple
• Phosphor : Système de poids flexible
• SVG personnalisés : Pour la différenciation de la marque

Polices : Supprimez Inter/Roboto

Alternatives distinctives :

• Affichage : Newsreader, Playfair Display, Space Grotesk, Clash Display
• Corps : Outfit, Plus Jakarta Sans, Manrope, Satoshi
• Mono : JetBrains Mono, IBM Plex Mono, Fira Code

Couleurs : Pas de dégradés violets

Alternatives audacieuses :

• Bleu marine profond + accent électrique
• Neutres chauds + une seule couleur d'accent
• Monochromatique avec profondeur tonale
• Mode sombre avec accents néon
• Palettes terreuses/organiques

Mises en page : Brisez la grille

• Éléments qui se chevauchent
• Sections diagonales
• Espacement asymétrique
• Éléments du héros qui brisent le conteneur
• Espace négatif comme élément de conception

Vocabulaire d'animation

Animations d'entrée

• fade-in : Transition d'opacité simple
• blur-in : Commence flou, se nettoie
• slide-in : Entrée basée sur la direction
• scale-in : Passe de petit à taille réelle
• stagger : Dévoilement séquentiel des éléments enfants

Animations continues

• marquee : Défilement horizontal infini (logos, témoignages)
• beam : Lumière voyageant le long d'un chemin/chemin de fer
• pulse : Respiration subtile d'échelle/d'opacité
• float : Mouvement doux de haut en bas
• rotate : Rotation continue (icônes, décorations)

Animations interactives

• hover-lift : Translation Y subtile + ombre
• hover-glow : Changement de couleur de la bordure/de l'ombre
• hover-reveal : Élément caché apparaît
• click-ripple : Retour de style Material

Éléments décoratifs

• Lignes de grille verticales (basées sur la taille du conteneur)
• Nouilles/connecteurs courbes entre les éléments
• Orbes/flous de dégradé en arrière-plan
• Superposition de texture de grain/bruit
• Formes géométriques (cercles, rectangles aux coins arrondis)

Ressources de conception

Inspiration pour le héros

• Superhero (superhero.design) : Sections héros organisées
• Dribbble : Recherchez "hero section", "landing page"
• Awwwards : Designs primés

Modèles de sections

• Mobin : Sites Web réels avec décomposition de sections
• Bento Grids : Inspiration pour la mise en page des cartes
• CTA Gallery : Modèles d'appels à l'action

Typographie

• Google Fonts : Polices gratuites, accessibles par IA
• Fontshare : Polices gratuites de qualité
• H1 Gallery : Inspiration pour les titres

Icônes et logos

• Iconify : API d'icônes unifiée (Solar, Heroicons, etc.)
• Simple Icons : Logos de marques (SVG)
• Heroicons : Jeu d'icônes de Tailwind

Flux de travail de mise en œuvre

Phase 1 : Recherche et collecte

1. Rassemblez 5 à 10 captures d'écran de héros comme maquettes
2. Identifiez les modèles de sections nécessaires
3. Choisissez le jeu d'icônes et la paire de polices
4. Définissez la palette de couleurs

Phase 2 : Développement du héros

1. Générez le héros à partir de la meilleure capture d'écran de référence
2. Itérez : modifiez les couleurs, les polices, les mises en page
3. Ajoutez des animations (beam, fade-in, etc.)
4. Ajoutez des éléments décoratifs (nouilles, grilles, chiffres)
5. Affinez jusqu'à ce qu'il soit distinctif

Phase 3 : Développement des sections

1. Ajoutez les sections une par une (pas toutes à la fois)
2. Référencez des composants/captures d'écran spécifiques par section
3. Maintenez la cohérence des couleurs/polices du héros
4. Ajoutez des animations spécifiques à la section

Phase 4 : Polissage

1. Corrigez les points de rupture réactifs (mobile, tablette, bureau)
2. Remplacez les images d'espace réservé par des actifs réels/de qualité
3. Optimisez les animations pour les performances
4. Testez tous les éléments interactifs

Phase 5 : Présentation

1. Créez une capture d'écran de couverture avec une mise en page de canevas infini
2. Montrez le héros bien en évidence
3. Incluez les vues mobile et bureau
4. Ajoutez un arrière-plan subtil (dégradé flou, motif)

Modèles d'invite

Génération du héros

Créez une section héros pour [TYPE DE PRODUIT].
Modifiez le texte, les noms et les chiffres pour correspondre à [MARQUE].
Utilisez les icônes Iconify Solar (style duotone).
Utilisez [POLICE] pour les titres.
Ajoutez des lignes de grille verticales de la taille du conteneur.
Ajoutez des indicateurs d'étape 01, 02, 03 pour la sophistication.
Utilisez [COULEUR] comme couleur primaire, mode sombre.

Ajout de section

Adaptez une nouvelle section [TYPE DE SECTION].
Faites correspondre la palette de couleurs et la typographie du héros.
Utilisez une animation de bandeau défilant pour les logos.
Ajoutez une animation d'entrée fondu enchaîné avec flou.
Laissez le héros exactement tel quel.

Amélioration de l'animation

Ajoutez une animation de faisceau à la bordure du bouton principal.
Le faisceau doit être de 1px, voyageant en continu autour de la forme de pilule.
Ajoutez un effet de survol subtil avec soulèvement sur les cartes de fonctionnalités.

Invites négatives (Ce qu'il ne faut PAS changer)

Ne modifiez pas la section héros.
Laissez la barre de navigation exactement telle quelle.
Ne modifiez pas les animations existantes.

Liste de contrôle qualité

Distinction visuelle

• Pas de dégradés violets génériques
• Jeu d'icônes non par défaut (pas Lucide)
• Paire de polices distinctive
• Au moins un élément "mémorable"
• Système de couleurs cohérent via des variables CSS

Qualité technique