Il y a une semaine, le site que vous lisez n'existait pas. J'ai refait yauhenm.com avec Claude Opus en quatre heures environ. Claude m'a proposé trois versions, je les ai toutes rejetées, et la quatrième est en ligne.
Plus exactement, il y avait déjà un site à cette adresse, mais c'était le deuxième. Je l'avais fait sous Next.js, à l'époque où je pensais qu'un site perso devait être un portfolio. Il était correct. Il ressemblait aussi à tous les sites d'« athlète passé au code » que vous avez déjà ouverts.
Voici ce qui l'a remplacé, et comment je l'ai construit avec Claude un mercredi matin, entre l'entraînement et la séance vidéo de l'après-midi.
Le brief que j'ai donné à Claude
« Athlète pro et créateur de projets IA, à parts égales. Un point d'entrée perso, pas un tunnel de vente. Pensé d'abord pour le mobile, parce que 80 % des visites viennent d'un téléphone. »
C'est tout le brief. Pas de présentation. Pas de planche d'inspiration.
Ensuite, j'ai fait ce que la plupart des gens oublient de faire : j'ai demandé à Claude de me cuisiner sur les détails avant d'écrire la moindre ligne de HTML. Huit questions. Par exemple : qu'est-ce que la première image montre, concrètement ?, est-ce que tu vends quelque chose sur ce site, oui ou non ?, ou encore si un inconnu arrive ici depuis le lien de ta bio TikTok, quelle est la seule chose que tu veux qu'il ressente ?
Cette conversation a pris 20 minutes. À la fin, l'essentiel du site était déjà fait.
V1, V2, V3 : toutes rejetées
Claude m'a livré trois versions en parallèle. Un style magazine. Un style tactique, façon commando. Un style affiche d'athlète.
Je les ai ouvertes sur mon téléphone. J'ai éliminé les deux premières en 30 secondes.
« L'option 3 est la meilleure, il manque une photo au début. Le reste, ça fait boutique Shopify basique à la con. »
Ce que j'en retiens : Claude pouvait se tromper deux fois, peu importe, car me montrer trois options d'un coup était le bon choix. Je n'aurais pas su vous dire à l'avance ce que je voulais. En revanche, une fois la version sous les yeux, je savais en deux secondes ce que je ne voulais pas.
Si vous utilisez l'IA pour créer quoi que ce soit de visuel, n'acceptez jamais le premier rendu. Demandez-en toujours deux ou trois. Et choisissez par élimination.
La V4, refaite de zéro
La V3 avait le bon esprit, mais le contenu, lui, était faux. Claude m'avait interrogé sur ce que le site devait faire, mais il avait inventé le contenu : fausses dates dans la chronologie, faux intitulés de poste, faux noms de projets. Je m'en suis rendu compte parce que la date de mon passage en Lituanie était fausse.
La solution : j'ai demandé à Claude de lire le code source de mon ancien site.
Toute ma vraie chronologie se trouvait dans un fichier TimelineSection.tsx que j'avais écrit six mois plus tôt. Vraies dates, vraies équipes, vrais numéros de maillot. Une fois que Claude s'est servi de ce fichier, la version inventée a été remplacée par la vraie en une dizaine de minutes.
La règle que je garde : si vous refaites quelque chose qui existe déjà, ne demandez pas le contenu à l'IA. Donnez-lui le code source de l'ancienne version. La vérité y est déjà.
Ce que la V4 a de plus que les V1 à V3
- Une vraie photo de moi en haut de page, pas une image générée par l'IA
- Le logo « Y. » de ma chaîne YouTube, pas un monogramme passe-partout
- La vraie histoire (trois opérations du genou, pas « un retour en force »)
- Des logos de marques posés sur un fond crème pour qu'ils ne disparaissent pas sur le fond sombre. J'ai dû sortir les V4 R2, R3, R4 et R5 avant de remarquer qu'ils étaient invisibles
- Une barre de navigation flottante qui apparaît en fondu 1,2 seconde après l'affichage de la page, au lieu d'un code trop malin, branché sur le défilement, qui plantait dans trois navigateurs
Ce dernier point m'a pris un temps ridicule. La première version réagissait au défilement de la page. Ça marchait sur mon Mac, ça plantait sur Safari iPhone, et ça marchait à moitié sur Chrome. La solution a été de ne plus écouter le défilement du tout. Juste setTimeout(showBar, 1200).
Parfois, la bonne réponse est la réponse bête. Ça fait assez longtemps que j'écris du code pour le savoir, et pourtant je dois le réapprendre à chaque fois.
Combien coûte un site web fait avec l'IA ?
Une matinée de mon temps, contrôle qualité sur trois tailles d'écran compris. J'utilise Claude avec un abonnement Max, donc les allers-retours ne sont pas facturés au token. La photo du haut de page était déjà sur mon disque. Les logos des marques venaient gratuitement des sites des entreprises. Les polices sont celles de Google. L'hébergement, c'est l'offre gratuite de Vercel.
Le site entier, de A à Z, a été fait avec des outils que je payais déjà.
Ce que je ferais autrement
Partir du code existant, pas d'un brief. J'ai perdu à peu près 90 minutes à poser à Claude des questions auxquelles il aurait pu répondre seul en lisant mon ancien code. L'interrogatoire a servi à fixer la direction, mais les faits étaient depuis le début dans le dépôt.
Vérifier d'abord les choses ennuyeuses. Le contraste des logos sur fond sombre, ça se vérifie en cinq secondes, pas à la cinquième version.
Créer le blog avant d'en avoir besoin. Je le lance maintenant : ce que vous lisez est le premier article. J'aurais dû le faire dès le premier jour.
Si vous voulez la structure de fichiers que j'ai utilisée, le script de build ou le prompt que j'ai donné à Claude pour l'interrogatoire, ce sera dans le prochain article. Je publierai le modèle complet pour que vous puissiez le lancer sur votre propre site.
La vidéo qui accompagne cet article est intégrée plus haut. Même histoire, autre format, et chacun a des choses que l'autre n'a pas. Regardez l'une, lisez l'autre, ou faites les deux.
← Tous les articles