Le Dubliners, un pub irlandais de Strasbourg, a un site qui fonctionne. Et qui est ennuyeux. Cet ennui, c'est justement la porte d'entrée. J'ai refait le site en un après-midi autour d'une Guinness qui se sert toute seule pendant que vous faites défiler la page : une image générée, une vidéo à 3 $, une récupération gratuite du contenu du site, puis Claude Code. Les cinq étapes sont ci-dessous, et tous les prompts sont dans la description de la vidéo.
Je n'étais pas aux États-Unis. J'étais en France, je suis passé devant un pub qui avait l'air sympa, et je suis allé voir son site. Il était correct.
On y trouvait les infos. Mais rien ne donnait envie de rester sur la page, et c'est exactement ce qu'on cherche quand on veut décrocher un client.
Un site qui ne marche pas est difficile à vendre, parce que le patron en a honte. Un site correct mais ennuyeux, c'est facile à vendre, parce qu'on peut lui montrer la différence en dix secondes sur un téléphone.
Étape 1 : l'image principale
Ouvrez le modèle d'image de votre choix : Nano Banana, celui de ChatGPT, peu importe. Le prompt compte plus que l'outil. Le mien décrivait une pinte de Guinness Stout parfaite dans un verre tulipe, avec la lumière, la mousse et l'arrière-plan décrits en détail.
Ce prompt, je ne l'ai pas écrit. C'est Claude qui l'a écrit. Je lui ai décrit le pub, l'ambiance et l'objet unique autour duquel tout le site devait tourner, et Claude a rédigé le prompt de l'image. Il est dans la description de la vidéo, vous pouvez le copier-coller.
Cette image unique sert ensuite de base à tout le reste.
Étape 2 : la vidéo, pour 3 $
Envoyez l'image sur fal.ai. Je l'utilise parce que ce n'est pas cher et que ça fait ce que ça annonce. Personne ne me sponsorise. La vidéo où la Guinness coule, puis où la mousse se stabilise, m'a coûté 3 $. Trois dollars pour la pièce maîtresse d'un site web.
Vous lui donnez l'image et un second prompt qui décrit le mouvement. Celui-là aussi, c'est Claude qui l'a écrit. Lancez quelques générations, gardez celle où la Guinness coule de façon crédible, et téléchargez-la.
Étape 3 : récupérer les vraies informations
C'est l'étape que les gens sautent, et c'est elle qui rend le site vendable. Une jolie page avec du texte de remplissage, c'est une démo. Une jolie page avec les vrais horaires, la vraie carte et la vraie adresse du pub, c'est un site que le patron peut mettre en ligne demain.
Firecrawl s'occupe de l'extraction (le scraping). C'est open source, donc vous pouvez le faire tourner vous-même gratuitement, et la version hébergée a une offre gratuite qui suffit pour le site d'un pub. L'outil transforme le site actuel en texte propre que votre IA peut lire. Donnez-lui l'adresse de l'ancien site et enregistrez le résultat dans le dossier du projet. Le nouveau site sera construit sur les vraies informations du pub.
Étape 4 : découper la vidéo en images
L'astuce qui fait couler la Guinness au rythme du défilement : la vidéo devient une pile d'images fixes, et la page affiche l'image suivante à mesure que vous descendez.
Allez sur ezgif.com, outil « Video to PNG ». Importez le clip, téléchargez le zip, et vous avez toutes les images, de la première à la dernière. Regardez-les. Choisissez la série où l'animation fait ce que vous voulez, dans mon cas la Guinness qui coule, du verre vide jusqu'à la mousse stabilisée. Mettez ces images dans le dossier du projet.
Une règle qui vous fera gagner des heures : un dossier par projet. Ne mélangez pas le projet du pub avec autre chose. Vous satureriez le contexte de l'IA, et le résultat serait pire, pas meilleur.
Étape 5 : Claude Code assemble le tout
Ouvrez Claude Code dans le dossier Dubliners. Dedans : l'image principale, les images PNG, le résultat de Firecrawl avec les vrais horaires et la vraie carte. Ensuite, le prompt pour créer le site. Là encore, c'est Claude qui l'a écrit et moi qui l'ai collé, avec le nom du projet et le chemin du dossier.
Le premier résultat, c'est le site que vous voyez dans la vidéo. Sur ordinateur comme sur mobile. Vous descendez, la Guinness coule. Vous continuez : la carte, les horaires, l'adresse, tout vient du vrai site. Dans la vidéo, je l'ai ouvert sur mon téléphone, parce que c'est là que les clients du pub vont l'ouvrir.
C'est tout. Cinq étapes, un après-midi, trois dollars.
Pourquoi c'est un à-côté, et pas une simple démo
Je dirige une agence. Quand on refait à la main le site d'une petite entreprise, ça fait une vraie facture. Ce site-là m'a coûté 3 $ et quelques heures.
Le résultat, vous pouvez le mettre sous les yeux d'un patron et lui dire : c'est le vôtre, avec vos horaires et votre carte. Puis lui tendre le téléphone.
Pas besoin d'être designer. Il vous faut un bon objet, un bon mouvement, les vraies informations, et la discipline de garder le dossier propre. Comme un plan d'entraînement : une seule chose, bien faite, puis la suivante.
Si vous êtes à Strasbourg, passez au Dubliners. L'endroit a l'air sympa, et il y a de la Guinness. Tous les prompts de ce projet sont sous la vidéo (en anglais) : Can a Professional basketball player use a pint of Guinness to build a website?
Combien a coûté la création du site ?
3 $ pour la génération de la vidéo sur fal.ai. L'image, l'extraction avec Firecrawl et le découpage en images sur ezgif n'ont rien coûté. Claude Code tournait sur l'abonnement que j'avais déjà.
Faut-il savoir coder ?
Non. Tous les prompts de ce projet ont été écrits par Claude, et c'est moi qui les ai collés. Vous décrivez le pub, l'objet et l'ambiance. Les outils et le modèle font le reste.
Pourquoi découper la vidéo en images PNG au lieu de l'intégrer telle quelle ?
Parce que des images peuvent suivre le défilement. Une vidéo avance à son propre rythme. Une pile d'images avance au rythme du pouce du lecteur : la Guinness coule exactement aussi vite qu'il fait défiler.
Peut-on utiliser cette méthode pour un commerce qui n'est pas un pub ?
Oui. Remplacez la pinte par l'objet qui dit ce que fait l'entreprise. Un café qui coule, une clé qui tourne, une portière de voiture qui se ferme. Les mêmes cinq étapes, la même règle du dossier.
À lire ensuite → Publier sur plusieurs réseaux sociaux en une fois : ma méthode
La preuve en vidéo → La chaîne Y. Le projet, le coût, les chiffres à l'appui. Deux vidéos par semaine.
← Tous les articles