Ship Page

Créez des pages d’atterrissage interactives et riches en animations qui s’exécutent entièrement dans le navigateur sous la forme d’un seul fichier HTML.

Cette compétence aide les non-designers à livrer des pages produit professionnelles grâce à l’exploration visuelle (« montrer, ne pas dire »), puis génère des pages d’atterrissage de qualité production avec une interactivité réelle — pas des maquettes statiques.

Principes Fondamentaux

Zéro Dépendance — Un seul fichier HTML avec CSS/JS intégrés. Pas de npm, pas d’outils de build, pas de frameworks. Un seul fichier HTML survivra à n’importe quel projet React.
Montrer, Ne Pas Dire — Les gens ne peuvent pas décrire ce qu’ils veulent, mais ils le reconnaissent quand ils le voient. Générez des aperçus visuels, laissez-les choisir.
Anti-AI-Slop — Pas de dégradés violets sur fond blanc. Pas de modèles SaaS génériques. Chaque page doit donner l’impression d’être conçue sur mesure pour le produit.
Interactif par Défaut — Les pages d’atterrissage ne sont pas des diaporamas. Elles ont des animations de défilement, des états au survol, des compteurs de données, des effets de particules et des micro-interactions qui incitent les visiteurs à rester.
Prêt à Livrer — La sortie fonctionne immédiatement. Déposez le fichier HTML n’importe où — GitHub Pages, Vercel, Netlify, ou ouvrez-le simplement dans un navigateur.

Mode de Détection

Mode A : Nouvelle Page — Créer à partir de zéro. Aller à la Phase 1.
Mode B : Conversion README — Transformer un README GitHub ou une description de produit en page d’atterrissage. Extraire le contenu, puis aller à la Phase 1 Étape 2 (sauter les questions de contenu, passer directement au style).
Mode C : Amélioration — Améliorer une page d’atterrissage HTML existante. La lire, comprendre sa structure, l’améliorer tout en préservant le contenu. Suivre les règles de viewport et de densité des sections.

Phase 1 : Découverte

Comprendre le produit et rassembler le contenu. Poser TOUTES les questions en un seul appel AskUserQuestion.

Question 1 — Type de Produit (en-tête : "Produit") : Que construisez-vous ? Options : SaaS / Outil Développeur / Application Mobile / Projet Open Source / Marque Personnelle / Autre

Question 2 — Contenu (en-tête : "Contenu") : Que doit inclure la page ? Options : Je vais coller mon contenu / Tirer de mon README / Décrivez-le pour moi / J'ai un document

Question 3 — Sections Clés (en-tête : "Sections", multiSelect : true) : De quelles sections avez-vous besoin ? Options : Hero avec CTA / Grille de Fonctionnalités / Comment ça Marche / Tarifs / Témoignages / FAQ / Statistiques & Métriques / Inscription Newsletter / Badge Étoiles GitHub

Question 4 — Cible de Lancement (en-tête : "Lancement") : Où cette page sera-t-elle hébergée ? Options : GitHub Pages / Site web autonome / Lancement Product Hunt / Simple exploration

Si l'utilisateur fournit du contenu (README, description, document), passer à :

Étape 1.1 : Analyse du Contenu

Analyser le contenu fourni et extraire :

Nom du produit et description en une phrase
Fonctionnalités clés (viser 3-6)
Signaux du public cible
Métriques/chiffres mentionnés
Appel à l’action (que doivent faire les visiteurs ?)

Confirmer via AskUserQuestion (en-tête : "Vérification du Contenu") : "Voici ce que j'ai extrait — est-ce correct ?" Options : C'est bon / Laissez-moi ajuster

Phase 2 : Découverte du Style

C'est la phase "montrer, ne pas dire". La plupart des gens ne peuvent pas exprimer leurs préférences de design en mots.

Étape 2.1 : Sélection de l’Ambiance

Demander via AskUserQuestion (en-tête : "Ambiance", multiSelect : true, max 2) : Quelle sensation les visiteurs devraient-ils ressentir ? Options : Futuriste & Tech / Propre & Minimal / Audacieux & Énergique / Sombre & Premium / Ludique & Créatif / Corporate & Fiable

Étape 2.2 : Générer des Aperçus de Style

En fonction de l’ambiance choisie, générer 3 aperçus HTML distincts d’une seule section montrant :

Choix typographiques (police de titre + police de corps)
Palette de couleurs (fond, texte, accent, CTA)
Mise en page de la section Hero avec le nom du produit
Une micro-interaction ou animation
Ambiance générale (traitement du fond, espacement)

Chaque aperçu doit être un fichier HTML complet et fonctionnel montrant uniquement la section Hero stylée de trois façons complètement différentes. Enregistrer les aperçus dans .ship-page/previews/.

Lire references/STYLE_PRESETS.md pour les définitions de préréglages organisées. Utiliser les préréglages comme BASE, puis personnaliser pour le produit spécifique.

Confirmer via AskUserQuestion (en-tête : "Choisissez Votre Style") : "Quelle direction résonne avec vous ?" Options : Style A / Style B / Style C / Mélanger des éléments (décrire)

Étape 2.3 : Sélection Directe de Préréglage (Alternative)

Si l'utilisateur sait déjà ce qu'il veut ou dit "faites-le simplement sombre/minimal/tech" :

Lire references/STYLE_PRESETS.md
Correspondre au préréglage le plus proche
Sauter la génération d’aperçu, passer à la Phase 3

Phase 3 : Générer la Page d’Atterrissage

Générer la page d’atterrissage complète en utilisant le contenu de la Phase 1 et le style de la Phase 2.

Règles de Structure

Chaque page d’atterrissage suit cette architecture :

<!DOCTYPE html>
<html lang="fr">
<head>
  <!-- Polices, variables CSS, tous les styles en ligne -->
  <!-- Aucune dépendance externe sauf Google Fonts + CDN Font Awesome -->
</head>
<body>
  <nav><!-- Barre de navigation fixe avec nom du produit + CTA --></nav>
  
  <section class="hero"><!-- Au-dessus de la ligne de flottaison : titre, sous-titre, CTA --></section>
  <section class="features"><!-- Grille de fonctionnalités ou vitrine --></section>
  <section class="social-proof"><!-- Statistiques, témoignages, logos --></section>
  <!-- ... sections supplémentaires selon besoin ... -->
  <section class="cta-final"><!-- Appel à l’action final --></section>
  <footer><!-- Liens, copyright --></footer>

  <script>
    // Animations de défilement, compteurs, interactions — tout en ligne
  </script>
</body>
</html>

Exigences Techniques Obligatoires

Ajustement au Viewport — Chaque section doit sembler "pleine" mais ne jamais déborder. Utiliser min-height: 100vh pour le hero, hauteurs proportionnelles pour les autres.
Responsive — Doit fonctionner sur mobile. Utiliser clamp() pour toutes les tailles de police, unités relatives au viewport pour l’espacement.
Animations de Défilement — Utiliser IntersectionObserver pour révéler au défilement. Les éléments doivent s’animer lorsque l’utilisateur fait défiler.
Performance — Animations CSS préférées à JS. will-change sur les éléments animés. Debounce sur les gestionnaires de défilement.
Accessible — HTML sémantique, contraste suffisant, requête média prefers-reduced-motion pour toutes les animations.

Limites de Densité par Section

Par section (pour éviter la surcharge) :

Hero : 1 titre (max 8 mots), 1 sous-titre (max 20 mots), 1-2 CTA, effet de fond optionnel
Fonctionnalités : Max 6 cartes. Chaque carte : icône + titre (3-4 mots) + description (max 15 mots)
Statistiques/Métriques : Max 4 compteurs
Témoignages : Max 3 citations
Tarifs : Max 3 niveaux
FAQ : Max 6 éléments (utiliser accordéon/repli)

Trop de contenu pour une seule section ? Diviser en deux sections avec une rupture visuelle entre elles.

Architecture CSS

:root {
  /* Typographie — toujours utiliser clamp() */
  --font-display: 'VOTRE_CHOIX', sans-serif;
  --font-body: 'VOTRE_CHOIX', sans-serif;
  --heading-size: clamp(2rem, 5vw, 4.5rem);
  --body-size: clamp(0.875rem, 1.5vw, 1.125rem);
  
  /* Couleurs — définir la palette complète */
  --bg-primary: #...;
  --bg-secondary: #...;
  --text-primary: #...;
  --text-secondary: #...;
  --accent: #...;
  --accent-hover: #...;
  --cta-gradient: linear-gradient(...);
  
  /* Espacement */
  --section-padding: clamp(3rem, 8vw, 8rem);
  --content-width: min(90vw, 1200px);
  
  /* Animation */
  --transition-fast: 0.3s ease;
  --transition-smooth: 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Classe de base pour révélation au défilement */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--transition-smooth), transform var(--transition-smooth);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

Éléments JavaScript Essentiels

Toujours inclure ces motifs :

// Révélation au défilement avec IntersectionObserver
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('visible');
    }
  });
}, { threshold: 0.1 });

document.querySelectorAll('.reveal').forEach(el => observer.observe(el));

// Compteurs animés (pour les sections de statistiques)
function animateCounter(el, target, duration = 2000) { ... }

// Défilement fluide pour les liens de navigation
document.querySelectorAll('a[href^="#"]').forEach(anchor => { ... });

Lire references/SECTION_LIBRARY.md pour des modèles de sections complets avec motifs HTML, CSS et JS pour chaque type de section.

Liste de Vérification Anti-AI-Slop

Avant de générer, vérifier :

Les polices NE sont PAS Inter, Roboto, Arial ou les valeurs par défaut du système
Le schéma de couleurs N'est PAS un dégradé violet sur fond blanc
Le hero n'utilise pas les mots "Révolutionner" ou "Dynamiser"
Les boutons CTA ont des animations au survol, pas seulement un changement de couleur
Le fond a de la texture/de la profondeur — PAS une couleur unie plate
Au moins un choix de design inattendu (mise en page asymétrique, typographie audacieuse, séparateur de section créatif)

Livraison

Enregistrer le fichier HTML avec un nom descriptif : {nom-du-produit}-landing.html
Ouvrir dans le navigateur : open {nom-du-produit}-landing.html
Présenter à l'utilisateur et demander un retour

Phase 4 : Itération

Après la génération initiale, demander via AskUserQuestion (en-tête : "Retour") : "Comment ça rend ?" Options : C'est bon à livrer ! / Ajuster couleurs-polices / Modifier la mise en page / Ajouter-supprimer des sections / Recommencer avec un nouveau style

Pour les modifications, suivre ces règles :

Ajout de contenu : Vérifier d'abord les limites de densité des sections. Si dépassées, diviser les sections.
Changement de style : Mettre à jour les variables CSS, ne pas réécrire la structure.
Ajout de sections : Lire references/SECTION_LIBRARY.md pour le modèle de section, insérer dans un ordre logique.
Suppression de sections : Supprimer proprement, vérifier qu'aucune référence JS n'est cassée.

Références (Divulgation Progressive)

Cette compétence utilise la divulgation progressive — charger les fichiers de référence uniquement lorsque nécessaire :

Fichier	Quand le lire	Ce qu’il contient
`references/STYLE_PRESETS.md`	Phase 2 (découverte du style)	5 préréglages de style organisés avec variables CSS complètes, paires de polices et traitements de fond
`references/SECTION_LIBRARY.md`	Phase 3 (génération)	Modèles complets HTML/CSS/JS pour chaque type de section (hero, fonctionnalités, tarifs, etc.)

Ship Page — prompt→landing interactive (1 HTML)

Qu'est-ce que Ship Page — prompt→landing interactive (1 HTML) ?

Demander à votre IA préférée

Documentation