Frontend Landings

Générez des pages d'atterrissage HTML époustouflantes, sans build, en un seul fichier, avec des presets de style soigneusement sélectionnés, des animations fluides, un design responsive et un mode sombre/clair — le tout dans un fichier autonome.

Avant de commencer

Lisez le fichier de référence des presets de style pour connaître les esthétiques disponibles :

references/STYLE_PRESETS.md

Deux modes de fonctionnement

Mode 1 : À partir de zéro

L'utilisateur fournit les détails du produit → générez une page d'atterrissage complète.

Recueillez ces informations (demandez si non fournies) :

Nom du produit / de la marque (obligatoire)
Slogan / titre principal (obligatoire)
3 à 6 fonctionnalités ou avantages clés (obligatoire)
Public cible (utile)
Appel à l'action principal (ex. « Essai gratuit », « Rejoindre la liste d'attente ») — par défaut : « Commencer »
Préférences de couleur (optionnel — le preset s'en chargera)
Preset de style (affichez le menu des presets si non spécifié)

Mode 2 : Améliorer / Convertir

L'utilisateur fournit du HTML existant, une description, une capture d'écran ou une URL → améliorez avec un meilleur design, des animations et une meilleure réactivité.

Déroulement :

Analysez le design existant (structure, couleurs, typographie, mise en page)
Identifiez les améliorations (animations, réactivité, accessibilité, hiérarchie visuelle)
Demandez quel preset de style appliquer (ou conservez l'esthétique existante)
Régénérez sous forme de fichier HTML unique avec toutes les améliorations

Système de presets de style

Proposez TOUJOURS le menu des presets au début de toute tâche de page d'atterrissage, sauf si l'utilisateur en a déjà choisi un ou a explicitement décrit une esthétique spécifique.

Présentez les presets comme ceci :

Choisissez un style visuel pour votre page d'atterrissage (tapez le numéro ou le nom) :

 1. ☁️  SaaS Minimaliste & Propre     — Blancs éclatants, ombres subtiles, aspect natif du système
 2. 🔮  Moderne Glassmorphique         — Panneaux en verre dépoli, dégradés, translucidité
 3. 🏗️  Brutaliste Audacieux           — Textures béton brut, police monospace, contraste marqué
 4. 🌆  Néon Cyberpunk                 — Arrière-plans sombres, lueurs électriques, effets de lignes de balayage
 5. ✒️  Sérif Élégant Premium          — Luxe éditorial, titres sérif, accents dorés
 6. 🎨  Dégradés Ludiques              — Animations rebondissantes, dégradés en mesh, tout arrondi
 7. 🌙  Mode Sombre en Priorité        — Noirs profonds, accents néon, optimisé OLED
 8. 📻  Vintage Rétro                   — Tons sépia chauds, typographie rétro, textures nostalgiques
 9. 🌿  Naturel & Organique            — Tons terreux, formes organiques, illustrations botaniques
10. 🏢  Corporate Professionnel        — Palette marine/ardoise, grille structurée, inspire confiance

Ou décrivez votre propre esthétique personnalisée !

Après le choix de l'utilisateur, lisez references/STYLE_PRESETS.md pour les variables CSS détaillées, les combinaisons de polices, les styles d'animation et les tokens de design de ce preset.

Exigences de sortie

Architecture du fichier HTML unique

Chaque sortie DOIT être un fichier HTML complet et autonome. Structure :

<!DOCTYPE html>
<html lang="fr" class="scroll-smooth">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- Balises SEO -->
  <title>{Nom du produit} — {Slogan}</title>
  <meta name="description" content="{Description concise du produit}">
  <meta property="og:title" content="{Nom du produit}">
  <meta property="og:description" content="{Description}">
  <meta property="og:type" content="website">
  <meta name="twitter:card" content="summary_large_image">
  
  <!-- CDN Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  
  <!-- Anime.js pour les animations -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.2/anime.min.js"></script>
  
  <!-- Google Fonts (spécifique au preset) -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family={Police+du+preset}&display=swap" rel="stylesheet">
  
  <!-- Configuration Tailwind + Thème personnalisé -->
  <script>
    tailwind.config = {
      darkMode: 'class',
      theme: {
        extend: {
          // Extensions spécifiques au preset
          fontFamily: { /* depuis le preset */ },
          colors: { /* depuis le preset */ },
        }
      }
    }
  </script>
  
  <style>
    /* Propriétés CSS personnalisées depuis le preset */
    :root { /* variables thème clair */ }
    .dark { /* variables thème sombre */ }
    
    /* Classes de base pour animations au défilement */
    .reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
    .reveal.active { opacity: 1; transform: translateY(0); }
    
    /* Styles personnalisés spécifiques au preset */
  </style>
</head>
<body>
  <!-- Tout le contenu ici -->
  
  <script>
    // Bascule mode sombre
    // Observateur de révélation au défilement
    // Animations d'entrée Anime.js
    // Composants interactifs (accordéon FAQ, basculement tarifs, etc.)
  </script>
</body>
</html>

Pile CDN (aucune autre autorisée)

Tailwind CSS : https://cdn.tailwindcss.com (avec configuration intégrée)
Anime.js : https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.2/anime.min.js
Google Fonts : Uniquement les polices spécifiques au preset
Icônes : SVG inline uniquement (style Heroicons). N'utilisez JAMAIS de CDN d'icônes de police.

Fonctionnalités obligatoires dans chaque sortie

Design responsive — Mobile-first. Testez mentalement à 375px, 768px, 1280px.
Mode sombre/clair — Détection automatique prefers-color-scheme + bouton de bascule dans la navigation.
Animations au défilement — Animations de révélation basées sur IntersectionObserver sur toutes les sections.
Défilement fluide — scroll-smooth sur html + JS pour les ancres de navigation.
Accessibilité — HTML5 sémantique, labels ARIA sur les éléments interactifs, styles focus-visible, lien d'évitement, contraste de couleurs suffisant.
Balises SEO — title, description, og:title, og:description, og:type, twitter:card.
Performances — Chargement différé des images, CSS efficace, JS minimal.

Génération des sections

En fonction des entrées de l'utilisateur, incluez intelligemment ces sections. Toutes ne sont pas obligatoires — adaptez-les au contexte du produit :

Inclure toujours :

Navigation — Barre de navigation collante/fixe avec logo, liens, bouton de bascule mode sombre et bouton CTA principal
Héros — Grand titre + sous-titre + bouton(s) CTA + élément visuel (dégradé, forme abstraite ou espace réservé pour image)
Fonctionnalités — 3 à 6 cartes/grilles de fonctionnalités avec icônes SVG inline
CTA final — Bannière d'appel à l'action pleine largeur avec titre + bouton
Pied de page — Liens, copyright, icônes sociales (SVG inline)

Inclure si pertinent :

Preuve sociale / Logos — Barre de logos « Approuvé par » (utilisez des boîtes d'espace réservé avec des noms de sociétés)
Témoignages — 2 à 3 cartes de citation avec espaces réservés pour les avatars
Tarifs — 3 niveaux avec basculement mensuel/annuel (propulsé par JS)
FAQ — Accordéon avec animations d'ouverture/fermeture fluides
Comment ça marche — Processus en 3 étapes avec étapes numérotées
Statistiques / Métriques — Compteurs animés (ex. « 10k+ utilisateurs », « Uptime 99,9 % »)

Guide d'animation

Utilisez ces motifs d'animation de manière cohérente :

Révélation au défilement (IntersectionObserver)

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('active');
    }
  });
}, { threshold: 0.1, rootMargin: '0px 0px -50px 0px' });

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

Entrée échelonnée (Anime.js)

anime({
  targets: '.feature-card',
  opacity: [0, 1],
  translateY: [40, 0],
  delay: anime.stagger(100, { start: 300 }),
  easing: 'easeOutCubic',
  duration: 800
});

Animation du texte du héros

anime({
  targets: '.hero-title .word',
  opacity: [0, 1],
  translateY: [20, 0],
  delay: anime.stagger(80),
  easing: 'easeOutExpo',
  duration: 1200
});

Micro-interactions au survol

Utilisez les transitions CSS pour les survols — Anime.js uniquement pour les séquences complexes :

.card { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease; }
.card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -12px rgba(0,0,0,0.15); }

Animation de compteur

function animateCounter(el) {
  const target = parseInt(el.dataset.target);
  anime({
    targets: el,
    innerHTML: [0, target],
    round: 1,
    easing: 'easeInOutExpo',
    duration: 2000
  });
}

Implémentation du mode sombre

// Vérification de la préférence système et de la préférence enregistrée
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
const saved = localStorage.getItem('theme');
if (saved === 'dark' || (!saved && prefersDark)) {
  document.documentElement.classList.add('dark');
}

// Fonction de bascule (lier au bouton)
function toggleDark() {
  document.documentElement.classList.toggle('dark');
  localStorage.setItem('theme',
    document.documentElement.classList.contains('dark') ? 'dark' : 'light'
  );
}

Bouton de bascule dans la navigation :

<button onclick="toggleDark()" aria-label="Activer/désactiver le mode sombre" class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
  <!-- Icône soleil (affichée en mode sombre) -->
  <svg class="hidden dark:block w-5 h-5" ...>...</svg>
  <!-- Icône lune (affichée en mode clair) -->
  <svg class="block dark:hidden w-5 h-5" ...>...</svg>
</button>

Typographie et règles anti-générique

N'utilisez JAMAIS ces polices : Inter, Roboto, Arial, Helvetica, Open Sans, valeurs par défaut du système.

Chaque preset spécifie sa propre combinaison de polices distinctive. Chargez toujours depuis le CDN Google Fonts.

N'utilisez JAMAIS les couleurs par défaut de Tailwind sans personnalisation. Chaque preset définit une palette personnalisée via les variables CSS ET l'extension de tailwind.config.

Ne produisez JAMAIS une page qui ressemble à toutes les autres pages d'atterrissage générées par IA. Chaque preset a ses propres éléments différenciateurs — respectez-les.

Icônes SVG inline

Utilisez des SVG inline de style Heroicons. Voici le modèle :

<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
  <path stroke-linecap="round" stroke-linejoin="round" d="..." />
</svg>

Incluez 6 à 8 icônes couramment nécessaires directement dans le HTML. Choisissez des icônes contextuellement pertinentes pour les fonctionnalités du produit.

Implémentation de l'accordéon FAQ

document.querySelectorAll('.faq-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    const content = btn.nextElementSibling;
    const icon = btn.querySelector('.faq-icon');
    const isOpen = content.style.maxHeight && content.style.maxHeight !== '0px';
    
    // Fermer tous les autres
    document.querySelectorAll('.faq-content').forEach(c => { c.style.maxHeight = '0px'; });
    document.querySelectorAll('.faq-icon').forEach(i => { i.style.transform = 'rotate(0deg)'; });
    
    if (!isOpen) {
      content.style.maxHeight = content.scrollHeight + 'px';
      icon.style.transform = 'rotate(45deg)';
    }
  });
});

Implémentation du basculement des tarifs

const toggle = document.getElementById('pricing-toggle');
const monthlyPrices = document.querySelectorAll('.price-monthly');
const annualPrices = document.querySelectorAll('.price-annual');

toggle.addEventListener('change', () => {
  const isAnnual = toggle.checked;
  monthlyPrices.forEach(el => el.classList.toggle('hidden', isAnnual));
  annualPrices.forEach(el => el.classList.toggle('hidden', !isAnnual));
});

Instructions finales de sortie

Après avoir généré le HTML, ajoutez TOUJOURS ces conseils :

✅ Votre page d'atterrissage est prête !

Pour l'utiliser :
1. Copiez tout le code ci-dessus dans un fichier nommé `index.html`
2. Ouvrez-le dans n'importe quel navigateur — il fonctionne de manière autonome, sans étape de build

Pour la déployer gratuitement :
• Vercel : vercel.com → Nouveau projet → glissez-déposez votre index.html
• Netlify : app.netlify.com → glissez-déposez votre index.html
• GitHub Pages : Poussez vers un dépôt → Paramètres → Pages → Déployer depuis main

Pour la personnaliser davantage :
• Couleurs : Modifiez les variables CSS dans :root { } et .dark { }
• Contenu : Tout le texte est directement dans le HTML — recherchez et remplacez
• Polices : Remplacez le lien Google Fonts et les valeurs font-family
• Animations : Ajustez les temporisations dans les appels Anime.js et les transitions CSS

Liste de contrôle qualité

Avant de livrer, vérifiez mentalement :

hemsurendranath/frontend-landings-claude-skill

Qu'est-ce que frontend-landings-claude-skill ?

Demander à votre IA préférée

Documentation