AI-First
Claude Code + Nano Banana 2 + FireCrawl : le trio pour créer des sites animés vendus des milliers d'euros
- 🔑 Le trio Claude Code + Nano Banana 2 + FireCrawl permet de produire des sites animés vendus plusieurs milliers d'euros sans coder.
- 🎯 FireCrawl scrape 5 concurrents et génère un rapport stratégique complet : palettes, structure, mots-clés SEO, signaux de confiance.
- 💡 Nano Banana 2 crée des animations scroll avant/après photo-réalistes, comme une piscine sale qui devient propre en 5 secondes.
- 🚀 Skill audit UI/UX Pro applique automatiquement 15 correctifs accessibilité WCAG et 8 améliorations SEO sans intervention manuelle.
- ⚠️ La vraie valeur n'est pas le site lui-même mais le système Notion de gestion des retours clients qui fidélise durablement.
FireCrawl analyse les 5 meilleurs concurrents de n'importe quel secteur et génère un rapport complet en quelques secondes
Nano Banana 2 génère des animations 3D photo-réalistes directement intégrables dans le code du site
Le scroll animé (pool sale → pool propre) : un effet qu'on facture 2 000 à 5 000 euros et qui se construit en 20 minutes
Notion + Claude Code = système de gestion des retours clients entièrement automatisé
Tout le workflow ne nécessite aucune expérience en code, Claude gère la totalité du développement
Créer des sites web animés qui se vendent à plusieurs milliers d'euros : c'est exactement ce que permet maintenant la combinaison Claude Code + Nano Banana 2 + FireCrawl. J'ai suivi cette méthode de A à Z. Voici ce que j'ai trouvé, ce qui m'a surpris, et comment reproduire le résultat en partant de zéro.
Le principe : au lieu de coder manuellement des animations, on pilote Claude Code avec des skills pré-construites. Claude fait le développement. Nano Banana 2 génère les visuels 3D. FireCrawl donne l'intelligence marché. Résultat : un site professionnel, SEO-optimisé, avec une animation scroll qui coûte normalement une fortune à faire sur mesure.
FireCrawl : l'intelligence de marché en 30 secondes
Avant de construire un seul fichier HTML, la méthode commence par la recherche. FireCrawl est une API qui scrape les meilleurs sites d'un secteur donné et synthétise ce qui fonctionne.
Concrètement : on donne à Claude Code un secteur (exemple : nettoyage de piscines au Texas) et une URL de référence (diamondpools.com dans le tutoriel). FireCrawl identifie les 5 concurrents les mieux placés sur Google, scrape leur contenu, et génère un rapport structuré qui inclut :
les palettes de couleurs de chaque concurrent
leur structure de pages et leurs signaux de confiance
les mots-clés SEO qu'ils ciblent et les gaps à exploiter
ce que les leaders du marché ont tous en commun
une recommandation de structure de site basée sur ce qui convertit
Ce rapport, vous pouvez l'envoyer à un client avant même de commencer à construire. C'est du conseil stratégique offert automatiquement, et ça justifie immédiatement le prix.
FireCrawl est gratuit au démarrage. L'API key se récupère en quelques secondes sur leur site. Une fois donnée à Claude, le tout tourne sans aucune intervention supplémentaire.
Le site de base : SEO-first, structure intelligence
Une fois le rapport généré, Claude Code construit le site. Pas un template générique, un site structuré autour des données récoltées : les sections qui convertissent dans ce marché, les mots-clés qui rankent, les signaux de confiance qui réduisent la friction.
Le prompt est simple : construire le site en laissant un espace pour l'animation scroll. Claude gère le HTML, le CSS, le JavaScript. Le résultat après la première génération est déjà présentable : hero, services, galerie, témoignages, formulaire de contact.
Ce qui est frappant : Claude tire les avis directement du site de référence scrappé. Les reviews qui apparaissent dans le site sont réelles, tirées des données Google récupérées par FireCrawl. Ce n'est pas du contenu inventé.
Nano Banana 2 : l'animation qui change tout
C'est là que le projet devient vraiment intéressant. Nano Banana 2, le modèle de génération d'images de Google (gemini-3.1-flash-image-preview), permet de créer des assets visuels 3D avec une cohérence photographique. Couplé à un générateur de vidéo comme Kling, on obtient une animation transition entre deux états.
Dans l'exemple du tutoriel : une piscine sale qui se transforme en piscine impeccable au fur et à mesure qu'on scrolle vers le bas de la page. L'animation dure 5 secondes. L'effet est immédiat et mémorable.
Le workflow pour créer cette animation :
La skill 3D Website Asset Generator génère 3 prompts optimisés : état initial (piscine sale), état final (piscine propre), transition vidéo
On génère les deux images sur Kling (ou Higgsfield) avec Nano Banana 2 en modèle, fond blanc pour une intégration propre dans le site
On génère la vidéo de transition avec le prompt fourni, 5 secondes, 1080p suffit
On donne la vidéo à Claude Code avec la skill 3D Website Builder : il intègre l'animation scroll automatiquement
L'effet scroll : le fond du hero devient blanc, et la vidéo se lit au rythme du défilement. Plus on scrolle, plus la piscine devient propre. C'est le genre d'interaction qu'on voit sur les sites Awwwards à 100 000 euros.
Ce qui est possible avec cette technique va bien au-delà des piscines. N'importe quelle transformation avant/après est une opportunité : rénovation d'intérieur, transformation physique, évolution d'un produit, état d'un chantier. Le principe est toujours le même.
Secteur | Animation possible | Valeur perçue |
|---|---|---|
Piscines / jardinage | Avant traitement → après traitement | Très haute |
Rénovation intérieure | Pièce dégradée → pièce rénovée | Très haute |
Fitness / coaching | Silhouette avant → après programme | Haute |
Immobilier | Bien vide → bien meublé/aménagé | Haute |
Automobile | Voiture accidentée → restaurée | Haute |
E-commerce produit | Produit brut → produit fini/emballé | Moyenne |
L'audit SEO et accessibilité automatique
Une fois le site construit et l'animation intégrée, Claude Code passe par une troisième skill : l'audit UI/UX Pro. Cet outil teste le site sur des centaines de critères : accessibilité WCAG, balises meta, attributs alt, contraste, touch targets sur mobile, structure des headers.
Le résultat sur le site de test : 15 correctifs d'accessibilité appliqués automatiquement, 8 améliorations SEO, optimisations du formulaire et des interactions tactiles. Tout ça sans une seule ligne écrite manuellement.
Ce que ça signifie concrètement : le site produit est techniquement correct dès le départ. Pas besoin de passer par un audit externe pour le valider avant livraison.
Gérer les retours clients sans email, sans Slack
La dernière brique du système est souvent la plus sous-estimée : comment le client communique ses modifications après livraison. La solution proposée dans cette méthode : un formulaire de demande de changement intégré directement dans le site, connecté à une base Notion.
Le client a une interface claire : type de demande (correction de bug, ajustement de texte, nouvelle fonctionnalité), description, priorité. Tout atterrit dans un tableau Notion que vous ou Claude consultez quotidiennement.
Claude Code peut alors être configuré pour traiter automatiquement les demandes simples (corrections texte) et vous alerter uniquement sur les modifications structurelles. C'est un système de ticketing déguisé en interface client premium.
La valeur n'est pas dans le site. Elle est dans le système autour du site. Un client qui peut signaler un bug sans envoyer de WhatsApp à 23h, c'est une relation qui dure.
Ce que ça coûte vraiment
FireCrawl : gratuit en démarrage (plan Free disponible). Nano Banana 2 via Kling ou Higgsfield : quelques crédits, moins de 5 euros pour une vidéo en 1080p. Claude Code : abonnement Max ou Pro. Anti-Gravity (l'IDE utilisé dans le tutoriel) : gratuit.
Coût total pour produire un site avec animation scroll, rapport concurrentiel, et portail client : moins de 10 euros de coûts variables. Le site peut se vendre entre 2 000 et 8 000 euros selon le secteur et le client. La marge est structurellement très haute.
Ce workflow ne remplace pas un studio de design qui fait du sur-mesure à 50 000 euros. Il permet de livrer des sites qui ressemblent à ceux qui coûtent 8 000 euros pour un coût marginal proche de zéro. C'est un repositionnement, pas une guerre de prix.
Ce qu'il reste à faire
Ce tutoriel couvre la création. L'hébergement, le déploiement, la mise en production sur un domaine client : c'est la prochaine étape. Vercel, Netlify, ou un VPS simple selon les besoins. Claude Code gère aussi ce volet avec les bons prompts.
La vraie compétence ici n'est pas technique. C'est la capacité à choisir les bons secteurs, à identifier les clients qui comprennent la valeur d'un site animé, et à packager le tout dans une offre claire. Le reste, le workflow le fait.
Nano Banana 2 + Claude Code + FireCrawl : ce n'est pas un raccourci pour faire des sites moyens plus vite. C'est un nouveau niveau de qualité accessible sans formation en développement.