Ingénierie 80/20 : Comment j’ai Reconstruit Mon Site en un Week-end

Laissez-moi vous confier un secret : je n’ai pas réécrit mon site personnel en un week-end parce que je suis particulièrement rapide pour coder. Je l’ai fait parce que je n’ai presque pas codé du tout.

À la place, j’ai passé la majeure partie de mon temps à faire ce que la plupart des développeurs évitent comme la peste : préparer. Documenter. Noter les choses. Et quand j’ai finalement ouvert mon éditeur et commencé à travailler avec Codex d’OpenAI, la mise en œuvre proprement dite s’est déroulée comme un tour de magie parfaitement répété.

Voici l’histoire de faire 80 % du travail avant d’écrire une seule ligne de code, et comment cela a tout changé.

Pourquoi Réécrire le Site ?

Mon site tournait sur Qwik v3. Une techno solide, une bonne ambiance, mais je voulais plus de flexibilité — surtout au niveau de la gestion des routes. J’ai donc basculé vers React Router en mode framework. Une reconstruction complète, pas une refonte. Nouvelle architecture, structure de fichiers propre, styles mis à jour (bonjour Tailwind v4), et une feuille blanche.

Mais ce qui m’a surpris, c’est que le codage proprement dit a pris environ 2 à 3 heures. Du début à la fin. Et ça a fonctionné du premier coup.

Alors, que s’est-il passé durant les 5 autres heures ?

Les 80 % : Préparer Codex Comme un Consultant Prépare un Pitch Deck

La majeure partie de l’effort a été consacrée à construire un « méga système de prompt » — pas dans une interface élégante, mais directement dans le dossier de mon projet. Voilà ce que j’ai fait avant de demander à Codex d’écrire un seul composant :

• J’ai téléchargé toute la documentation de React Router et l’ai sauvegardée dans un répertoire /guides.

• J’ai fait de même pour Tailwind CSS v4, en convertissant les pages les plus pertinentes en Markdown grâce à Firecrawl.

• J’ai écrit un fichier PROMPT.md contenant un aperçu du projet :

  • « Le code legacy se trouve à /, le nouveau code va dans /app. »
  • « Interface utilisateur minimale, focus sur la logique métier. »
  • « Utiliser Tailwind v4. Respecter le mode framework dans React Router. »
  • Et ainsi de suite.

Ce n’était pas du superflu. C’était un contexte opérationnel — le genre de brief détaillé que l’on donne à un nouveau membre d’équipe dès le premier jour. Codex ne faisait pas que deviner ce que je voulais. Il avait la documentation dans le repo. Il connaissait les règles exactes en anglais clair. Il avait des contraintes.

Quand j’ai finalement tapé :

« Lis PROMPT.md. Première étape : migrer toutes les routes vers la nouvelle app. »

Codex a répondu comme s’il attendait cette mission depuis toujours.

Méga Prompts, Hallucinations Minimales

Les résultats étaient étonnants. Codex a suivi les instructions à la lettre. Il n’a pas halluciné. Il n’a pas essayé d’inventer des choses. Il a respecté la directive de « ne pas se concentrer sur l’UI ». La logique serveur a été migrée avec précision. La configuration des routes ressemblait à ce que j’aurais écrit moi-même — si j’avais la patience d’un compilateur.

Il ne s’agissait pas seulement de « prompt engineering ». Il s’agissait de donner à Codex un cadre ancré dans les spécifications réelles et actuelles. Pas une liste vague de tâches. Pas une liste de souhaits. Mais des données structurées, des exemples clairs, et un accès local aux docs dont il avait besoin.

Ce qui a Pris du Temps ? Pas le Code

Une fois les bases posées, le travail s’est divisé en deux phases distinctes :

1. Mode Codex – Exécution rapide, structurée, et répétable. Il a traité la migration, la logique, et même une ébauche de mise en page avec une précision quasi parfaite.
2. Mode exploration design – Lent, manuel, et ouvert. C’était la partie humaine : choisir un style, tester des mises en page, expérimenter des composants. Une fois que j’avais un style visuel fonctionnel, Codex est reparti pour diffuser les patterns graphiques.

Le seul vrai ralentissement est venu de mon hésitation à savoir à quoi devait ressembler quelque chose — pas comment ça devait fonctionner.

L’Insight Clé : Codex est à la Hauteur de Votre Préparation

Ce week-end a renforcé un changement que je remarque dans mon travail :

Coder devient la partie facile. Planifier est la partie difficile — et la plus importante.

Pour des projets petits à moyens, je considère maintenant la mise en œuvre comme une tâche à 20 %. Les 80 % sont réalisés en amont : collecte de documentation, rédaction de tâches ciblées, construction de prompts contextuels.

Codex excelle avec ce type de structure. Si vous lui donnez de l’ambiguïté, il vous rendra de l’ambiguïté. Mais si vous bâtissez votre environnement avec intention — docs, contraintes, descriptions claires — il se comporte comme un développeur senior avec une mémoire parfaite et sans ego.

Aller Plus Loin : Traiter l’IA Comme un Collègue, Pas un Génie

La leçon est simple : traitez vos outils de codage IA comme des collaborateurs. Donnez-leur les mêmes matériaux que vous donneriez à un ingénieur réel. Préparez le contexte. Soyez précis. Soyez exhaustif.

La prochaine fois, pour un plus gros projet, j’irai encore plus loin :

• Un document plan maître pour définir tout le périmètre du projet.
• Des spécifications de tâches individuelles par sous-système ou composant.
• Un ensemble fonctionnel de docs markdown et fichiers exemples comme base locale de référence.

Codex n’a pas besoin de mots magiques — il a besoin de structure.

Vous voulez construire plus vite ? Commencez par ne pas construire. Planifiez d’abord. Puis promptes-le comme vous le pensez.

L’Évolution du Design : Un Voyage Visuel

Au fil du temps, mon site a connu plusieurs transformations — chacune reflétant de nouvelles idées, outils, et apprentissages. Voici un rapide tour visuel de cette évolution :

Version 1 : Le Point de Départ

Version 2 : Une Voix Plus Définie

Version 2.1 : Ajustements et Raffinement

Version 3 : L’Ère Qwik

Version 4 : Simplicité Ciblée avec Remix

Chaque version a apporté de nouvelles idées sur ce qui rend un site efficace — pas seulement en esthétique, mais aussi en clarté, utilisabilité, et maintenabilité. Le parcours design a reflété celui du développement : délibéré, itératif, et toujours tourné vers l’avenir.