Mon site web

Ce site web devait me prendre quelques heures à faire. J’ai mis plusieurs jours.

Avec tout ce que je lis sur l’IA, je me suis dit que faire un site web, c’était l’histoire de quelques heures au maximum. Après tout, d’après les experts en IA des réseaux sociaux, il suffit de taper quelques lignes d’instruction à l’IA et hop, ça fait des Chocapic ! (Faut avoir la ref).

La vérité, c’est que j’ai mis plusieurs jours à faire le mien. Pas parce que je suis lent. Pas parce que l’IA est nulle. Mais c’est juste qu’on oublie trop souvent que l’IA n’est qu’un nouvel outil et, comme tout outil, la finalité de ce qui est produit dépend encore de l’humain qui le manie. Entendons-nous, ça révolutionne pas mal de choses (et les progrès ne sont pas finis), mais comme tout outil : il faut apprendre à s’en servir et découvrir ses limites. Pas évident comme exercice, surtout à la vitesse à laquelle ça avance.

Je pensais que si j’étais lent, c’était juste parce que j’apprenais à utiliser l’IA. Eh bien non : j’ai découvert que l’IA, c’est un peu comme une voiture de sport sans freins. Ça accélère très fort, très vite… et ça t’emmène droit dans le mur si tu ne sais pas piloter. Spoiler : je n’ai pas trouvé de cheat code…

Acte 1 : Choisir ses armes (Le Setup)

J’avais déjà en tête que l’IA, c’est une galaxie d’outils et de configurations possibles, mais c’est vraiment en mettant les mains dedans que j’ai compris à quel point ça pouvait être une prise de tête. Soyons succincts sur cette partie… de toute façon, ça change régulièrement. J’utilise 3 types d’outils :

• Les interfaces « classiques » (ChatGPT, Gemini, Mistral, etc.) pour les questions qui ne concernent pas ma base de code (stack technique, architecture, design, tutos, etc.).
• Le combo VSCode + OpenRouter + Continue : avec des modèles pas chers ou gratuits pour m’expliquer le fonctionnement du code. Par contre, pour « Vibecoder » sur plusieurs fichiers en même temps, on repassera.
• Cursor, Claude Code : pour développer… ou plutôt faire travailler ces feignasses d’IA ! Je n’ai pas encore testé CodeX…

Bon, maintenant que j’ai mon setup, y’a plus qu’à ?

Acte 2 : Le mirage du « Vibe Coding » et le drame cyberpunk

Globalement, c’est grisant l’IA : tu tapes des instructions et tu vois ton projet prendre vie en peu de temps. Une nouvelle fonctionnalité ? Pas de souci, y’a qu’à demander (et payer !). Puis, pour un site web, y’a pas grand-chose à architecturer, non ? Pas d’API, pas de traitement asynchrone, pas de schéma de données à gérer.

Et pourtant, même pour un projet aussi simple, au premier problème non résolu par l’IA : t’es dans la merde. Un exemple tout con : j’ai eu une idée très originale pour un site web dédié à l’informatique : un design cyberpunk (mon originalité m’impressionne parfois). Quoi de plus disruptif que du néon rose et du glitch bleu pour parler d’IT ? Enfin bref, je fais mon prompt, je modifie deux ou trois trucs, puis je montre ça à mes proches qui me font comprendre rapidement, et subtilement (leur réaction oscillait entre « Ah… » et « Euh… »), que c’est quand même très moche.

Le problème quand tu ne maîtrises ni ton code ni ton design ? C’est qu’à part prier très fort (ce qui s’apparente ici à tenter différents prompts dans une IA) et espérer une version que j’aime bien, je n’avais pas la moindre idée de comment m’y prendre. Oui, j’ai codé en C, en Java, en Python, j’ai pensé des architectures IT complexes (en tout cas plus qu’un site web), mais alors, je n’avais jamais pensé/développé de front.

Acte 3 : Reprendre le contrôle (Astro & Design)

On commence par quoi du coup, le code ou le design ? Je t’ai déjà dit que j’aimais la tech ? J’ai donc commencé par suivre le tutoriel d’Astro (le framework que j’utilise). C’est un peu laborieux et beaucoup moins satisfaisant que de coder avec de l’IA. Par contre, ça fait une vraie différence et…

bullshit activé — j’ai pu élaborer des instructions sur mesure afin de fournir les meilleures pratiques de développement du framework Astro à Cursor. N’hésite pas à commenter « Astro » et je t’envoie ce prompt en DM ! — bullshit désactivé…

Plus sérieusement, j’ai juste demandé à une IA de me faire un résumé des bonnes pratiques du tuto que j’avais suivi, j’ai incorporé ça dans Cursor et la structure de mon code était beaucoup plus lisible. En tout cas suffisamment pour que je maîtrise complètement l’architecture de mon code. Qu’est-ce que ça change concrètement ?

• Compréhension des changements faits par l’IA
• Correction des approximations
• Prompts beaucoup plus précis

Attention au changement de contexte : les bonnes pratiques sont vite oubliées par l’IA !

Il ne manque plus que le design, et là, je suis complètement novice. Donc je me renseigne (tutos vidéo, livres, IA, etc.) et j’apprends l’existence d’un outil magique : Claude Design. Tout comme pour le développement, cet outil signifie la fin des designers d’après les experts du net ! (Spoiler : pas tout de suite en tout cas.) Bon, devant tant de suspense, je vous la fais courte : j’ai fait exactement comme pour le code : j’ai fait des prompts à Claude Design et j’ai prié pour avoir un design system digne de ce nom. Résultat ? Catastrophique.

Finalement, j’ai compilé toutes les bonnes pratiques que j’ai trouvées pour faire un bon design, j’ai donné ça à une IA et, comme par magie, j’arrive à un résultat qui me satisfait ! Un designer de métier aura sans doute des choses à redire, mais j’ai un design system que je comprends, que je suis capable d’utiliser et de modifier.

Les leçons de l’histoire

Le plus frustrant avec les leçons que je tire de cet exercice, c’est que je les avais déjà entendues, mais c’est en les expérimentant que je les ai vraiment comprises :

1. Garbage in, garbage out — Le résultat de l’utilisation d’une IA dépend grandement de ce qu’on lui donne comme instructions. Si vous donnez à l’IA un contexte qui n’a rien à voir avec votre question, vous risquez d’être déçu du résultat. C’est un peu comme essayer de percer un trou avec une tronçonneuse… Bon courage !
2. Être augmenté vs être dépendant — La limite est très fine entre être augmenté par l’IA et être complètement dépendant de l’IA. Dans le deuxième cas, vous irez super vite, mais si jamais l’IA n’est pas capable de résoudre votre problème, revenir en arrière vous coûtera alors très cher en temps et en frustration.

Ce qui est un peu frustrant avec ces leçons, c’est que ce n’est pas parce qu’on en a conscience qu’on peut rectifier le tir facilement. C’est un exercice d’équilibriste incessant entre laisser décider l’IA et avoir une direction claire et définie, entre aller vite et maîtriser (un besoin qui peut varier selon les projets) ce qui est produit.