J'ai Réalisé ma Plus Grande Refonte de Site en Des Années. Pendant le Petit-Déjeuner.

Il est 8h47 un samedi. Je mange un banh mi au porc rôti (Bánh Mì Heo Quay). Et je viens de déployer la dernière pièce de la refonte la plus complète que mon site personnel ait connue depuis 2021.

Cinq ans. C'est combien de temps ça faisait que je n'avais rien fait de substantiel sur mon site. Bien sûr, j'avais retouché un texte par-ci, ajouté un article de blog par-là. Mais le design ? L'architecture ? L'expérience globale ? Intouchés depuis avant que la pandémie ne soit vraiment terminée.

Ce matin, j'ai terminé le design system TRANSMISSION — une refonte visuelle complète avec une nouvelle typographie, une palette de couleurs, des animations, et une page produits premium. Mais ce n'est que le final d'un sprint de 3 jours qui a tout transformé.

Les chiffres :

- 40 commits en 3 jours

- 28 129 lignes de code ajoutées

- 4 950 lignes de nouveau CSS

- 11 fichiers CSS (contre 1 auparavant)

- Système dark mode complet

- Mobile-first responsive partout

- Page produits personnalisée avec de vraies captures d'écran

Temps total pour toute la refonte : quelques heures sur 3 jours. 36 commits le Jour 1 seulement. La poussée finale d'aujourd'hui : 30 minutes pendant le petit-déjeuner.

Pas d'agence de design. Pas de maquettes Figma. Pas de chronologie sur plusieurs mois. Juste moi et Claude Code. :D

Voici ce que je dois clarifier : Je n'ai pas écrit une seule ligne de CSS. Je n'ai pas écrit le PHP. Je n'ai pas lancé les commandes de déploiement manuellement. Claude Code a fait 100 % de l'implémentation — le design, le code, les commits git, le déploiement. Je prenais juste les décisions. "Plus de glow." "Cette police ne convient pas." "Rends les cartes premium."

Voilà à quoi ressemble vraiment le développement assisté par IA en 2026.

---

Le Point de Départ : Abandonné Depuis 2021

Soyons honnêtes sur où j'en étais.

Mon site le 1er janvier 2026 :

- Un seul fichier CSS avec 700 lignes de spaghetti

- Police Poppins pour tout (le choix "je n'ai pas vraiment réfléchi à la typographie")

- Pas de design system — couleurs codées en dur partout

- Dark mode basique qui cassait sur la moitié des pages

- Page produits : Pas de page produits, le site entier n'est que le blog.

- Expérience mobile qui était "responsive" de la même façon qu'un costume bon marché "convient"

J'avais tellement été concentré sur mon travail principal, l'apprentissage de l'IA générative, puis la construction de STRAŦUM et DIALØGUE — mes deux applications IA — que mon site personnel était devenu le cordonnier le plus mal chaussé.

Chaque fois qu'un client potentiel ou un collaborateur visitait, il voyait un site qui criait "2021 a appelé, ils veulent récupérer leur thème WordPress."

---

Pourquoi Maintenant ? Et Pourquoi de Cette Façon ?

Deux choses se sont produites fin 2025 :

Premièrement, j'ai lancé STRAŦUM et DIALØGUE. Deux applications IA en production, construites en solo tout en gardant mon travail à plein temps de VP dans une agence de publicité mondiale. De vrais utilisateurs, de vraies discussions sur les revenus, une véritable crédibilité en jeu.

Mon site personnel était maintenant la porte d'entrée de produits réels. Il devait être à la hauteur.

Deuxièmement, j'ai commencé à utiliser Claude Code sérieusement. Pas comme un chatbot. Comme un environnement de développement. Et j'ai découvert quelque chose qui a tout changé : le plugin `frontend-design`.

Ce plugin ne se contente pas d'écrire du CSS. Il pense au design. Les associations typographiques. La théorie des couleurs. La composition spatiale. C'est ce qui empêche le code généré par IA de ressembler à du "slop IA."

J'ai pensé : et si je... reconstruisais tout ? Pas en un hack de weekend. Mais correctement. Avec un vrai design system. Avec Claude Code faisant le gros du travail pendant que je prends les décisions.

---

Le Sprint de 3 Jours : Ce qui S'est Vraiment Passé

Jour 1 : Le Big Bang — 36 Commits

Je n'avais pas prévu de faire 36 commits en une journée. Mais une fois que j'ai commencé, je n'ai pas pu m'arrêter.

Configuration initiale, sauvegarde du thème existant, début de la modularisation CSS.

Reconstruction de toute l'architecture CSS. Ce seul fichier de 700 lignes est devenu :

```
css/
├── style.css          # Tokens de design uniquement
├── components.css     # Boutons, cartes, navigation
├── homepage.css       # Hero, produits, sections posts
├── about.css          # Spécifique à la page À propos
├── blog.css           # Archive du blog
├── dark-mode.css      # Système dark mode complet
├── mobile-nav.css     # Barre de navigation bottom
├── search.css         # Overlay de recherche
├── single-post.css    # Typographie des articles de blog
└── products.css       # Page produits premium
```

Chaque fichier a un seul rôle. Chaque fichier utilise des variables CSS depuis la racine. Plus besoin de chercher dans 700 lignes pour trouver pourquoi un bouton est de la mauvaise couleur. :P

Refonte du dark mode. Mon ancien dark mode était embarrassant — du texte qui disparaissait, des boutons sans contraste. Je l'ai reconstruit de zéro :

- 658 lignes de CSS dark mode dédié

- Ratios de contraste corrects (conformes WCAG)

- Suppression de toutes les 89 déclarations `!important` (oui, 89)

- Tokens de couleur sémantiques qui basculent automatiquement

À la fin de la journée : Page d'accueil redesignée, page À propos reconstruite, nav bottom mobile ajoutée, intégration newsletter faite. 36 commits.

Jour 2 : Architecture et Infrastructure — 9 Commits

Le Jour 2 portait sur la maintenabilité de tout.

Le grand refactor : `functions.php` est passé de 724 lignes de chaos à 25 lignes d'includes propres :

```php
require_once get_stylesheet_directory() . '/inc/enqueue.php';
require_once get_stylesheet_directory() . '/inc/homepage-sections.php';
require_once get_stylesheet_directory() . '/inc/navigation.php';
require_once get_stylesheet_directory() . '/inc/search.php';
require_once get_stylesheet_directory() . '/inc/blog.php';
```

J'ai aussi configuré Docker pour le développement local, fait un audit de sécurité GCP, et écrit de la documentation.

Jour 3 : Le Final TRANSMISSION — Le Sprint du Petit-Déjeuner

C'est là que le plugin `frontend-design` a mérité sa place.

J'ai décrit ce que je voulais : "Rétro-futuriste. Le passé analogique rencontre le futur numérique. Premium sans être corporate. Technique mais chaleureux." Puis je suis allé prendre le petit-déjeuner.

Quand je suis revenu avec mon bánh mì, Claude Code avait généré le design system TRANSMISSION complet :

Typographie :

- Playfair Display — Titres (élégant, éditorial)

- DM Sans — Texte de corps (propre, lisible)

- JetBrains Mono — Code et données (crédibilité technique)

Couleurs :

```css
--color-cream: #fffbeb;    /* Fond chaud */
--color-navy: #0f172a;     /* Primaire profond */
--color-cyan: #22d3ee;     /* Accent énergie */
--color-amber: #f59e0b;    /* Accent chaud */
```

Typographie Fluide :

```css
--text-5xl: clamp(3rem, 2rem + 5vw, 5rem);
```

Les titres s'adaptent automatiquement du mobile au desktop. Pas de media queries nécessaires.

Ensuite j'ai attaqué la page produits. La page qui n'était que du texte est devenue :

Section Hero :

- Texte eyebrow style terminal

- Titre Playfair : "Ce que je Construis"

- Barre de stats : 2 Plateformes Live | 99,7 % de Gain de Performance | 92 % de Réduction des Coûts

- Formes géométriques flottantes avec des animations subtiles

Cartes Produits :

- Arrière-plans dégradés navy premium

- Vraies captures d'écran des sites en production (pas des maquettes)

- Conteneurs cadre de navigateur avec points de contrôle de fenêtre

- États hover avec des glow cyan/amber

- Listes de fonctionnalités avec marqueurs flèches

- CTAs pleine largeur

Les captures d'écran seules étaient tout un voyage. Claude Code a navigué vers mes sites en production, capturé les pages, les a optimisées de 1,8 Mo à 229 Ko (86 % plus petites), et les a intégrées dans des conteneurs stylés.

---

La Stack : Étonnamment Simple

Voici tout ce que j'ai utilisé :

Claude Code — L'IA qui écrit du code, lance des commandes, et maintient le contexte. C'est une IA qui a accès à mon système de fichiers, peut lancer des commandes git, et se souvient de ce qu'on a construit hier.

Plugin frontend-design — La différence entre "CSS généré par IA" et "CSS qui a l'air designé." Théorie typographique, relations de couleurs, composition spatiale intégrées.

Docker — Développement WordPress local. Un `docker-compose up` et j'ai un miroir de production.

Chrome DevTools MCP — Claude Code peut contrôler un navigateur. "Vérifie le dark mode mobile" → vraie capture d'écran de la page rendue. Plus besoin de changer d'onglet.

gcloud CLI : que Claude contrôle

---

Les Parties Honnêtes

Ce n'était pas magique. Des choses ont mal tourné :

Chaos de dossiers imbriqués : La copie Docker a créé une structure `gambit-child/gambit-child/`. Ça a pris 10 minutes à déboguer.

Texte dark mode qui disparaît : Certains titres héritaient de mauvaises couleurs. Corrigé en étant plus spécifique avec les sélecteurs.

Optimisation des images : Les captures d'écran brutes étaient énormes. J'ai dû apprendre que `sips -Z 800` sur macOS redimensionne les images sans outils externes.

Attribution de template WordPress : J'avais oublié que la nouvelle page produits devait être assignée dans l'admin WP. Classique.

La différence, c'est que le débogage a pris des minutes, pas des heures. Claude Code pouvait voir la page rendue, identifier le problème, et proposer des corrections dans la même conversation.

---

Avant et Après : Les Chiffres

Métrique	1er janvier 2026	10 janvier 2026
Fichiers CSS	1	11
Lignes de CSS	~700	4 950
Architecture PHP	Monolithique	Modulaire (6 fichiers)
Typographie	1 police	Système 3 polices
Tokens de couleur	~5 codés en dur	15+ sémantiques
Dark Mode	Cassé	658 lignes, conforme WCAG
Page Produits	Texte simple	Premium avec captures d'écran
Nav Mobile	Aucune	Barre bottom avec 6 actions
Animations	0	7 (fadeInUp, float, glow, etc.)
Dernière Mise à Jour Majeure	2021	Aujourd'hui

Transformation totale : 28 129 lignes ajoutées dans 123 fichiers en 40 commits sur 3 jours. Toutes écrites par Claude Code.

---

Ce Que Ça a Coûté

Argent : 0 € pour le design. Abonnement Claude Code. Hébergement GCP que j'avais déjà.

Temps : 3 jours écoulés. Mais mon temps actif réel ? Peut-être 2 à 3 heures au total. Je décrivais ce que je voulais, Claude Code le construisait, et je revenais plus tard pour passer en revue. Ce matin j'ai lancé la refonte finale, suis allé prendre le petit-déjeuner, et suis revenu pour confirmer — 30 minutes d'attention réelle.

Ma contribution réelle : Zéro ligne de code. J'ai décrit ce que je voulais, examiné ce que Claude Code avait construit, et dit des trucs comme "l'état hover a besoin de plus de glow" ou "cet espacement est bizarre."

Comparaison : Une agence de design aurait demandé 8 à 12 semaines et 10 000 €+ pour cette envergure. Et j'aurais quand même dû implémenter leurs fichiers Figma moi-même.

---

Ce que j'ai Appris

1. Je ne suis plus développeur — je suis directeur créatif. Claude Code a écrit chaque ligne de code. J'ai pris des décisions de goût. "Cette animation est trop lente." "Le cyan a besoin de plus de glow en dark mode." "Rends les stats du hero plus proéminentes." C'est une compétence fondamentalement différente du codage.

2. Modulariser en premier. Le premier instinct de Claude Code était de diviser la base de code en fichiers logiques avant d'apporter des changements visuels. Chaque changement ultérieur était plus facile grâce à cette fondation.

3. Les design systems se composent. Une fois que les tokens TRANSMISSION existaient, chaque nouveau composant n'était que la combinaison de variables existantes. La page produits a pris 45 minutes parce que le système était déjà là.

4. Le plugin frontend-design fait la différence. Le CSS ordinaire généré par IA ressemble à du "slop IA" — générique, sûr, oubliable. Le plugin frontend-design pense aux associations typographiques, à la théorie des couleurs, à la composition spatiale. C'est pour ça que ça n'a pas l'air généré par IA.

5. Livrer de façon incrémentale. 40 commits, pas 1. Chaque pièce était mise en ligne dès qu'elle était prête. Claude Code gérait le workflow git — staging, commit, push, création de PRs.

---

Essaie toi-même

Si ton site personnel est "assez bien" depuis 2021 :

1. Installe Claude Code avec le plugin `frontend-design`

2. Décris l'ambiance que tu veux (la mienne : "rétro-futuriste, analogique rencontre numérique")

3. Commence par l'architecture — modulariser avant d'embellir

4. Construis le design system — tokens, typographie, couleurs

5. Ensuite construis les pages — chacune utilise le système que tu as créé

6. Déploie souvent — n'attends pas d'"être prêt"

La partie la plus difficile, ce n'est pas la technologie. C'est de décider ce que tu veux que ton site ressente.

Une fois que tu sais ça, le reste n'est que conversation.

Mise à jour : Cette leçon sur le goût plutôt que l'implémentation est devenue encore plus claire quand j'ai commencé à construire une app iOS native sans connaître Swift. Claude a mis en place 7 568 lignes de code en une soirée — mais le travail de "directeur créatif" pour que ça se sente juste ? Ça reste entièrement humain.

Quand as-tu reconstruit quelque chose que tu repoussais depuis des années ? Qu'est-ce qui t'a finalement poussé à commencer — et comment tu t'es senti quand c'était terminé ?

Cordialement,

Chandler

---

*Encore en train de construire, encore en train de livrer, encore en train de savourer ce bánh mì.*

---