logo
ia

Refonte de site web avec l'IA : retour d'expérience avec Claude Code

4 min de lecture
Refonte de site web avec l'IA : retour d'expérience avec Claude Code

Le point de départ

AsuOs.ch, c'est le site de mon agence digitale suisse. Il tourne sur Next.js (App Router), Contentlayer pour le contenu MDX, et Tailwind CSS pour le design. Techniquement, le site fonctionnait. Mais quand je prenais du recul, la liste de ce qui manquait était longue.

Le site était 100% en français, alors que mes clients et mon réseau sont aussi anglophones et lusophones. J'avais accumulé 13 épisodes de podcast (Tech Culture Network) sans aucun article de blog associé. La navigation entre les pages était brute, sans aucune transition ni animation. Le SEO n'avait jamais été audité sérieusement. Et des pages de service essentielles comme le SaaS et le Sprint n'existaient tout simplement pas.

Le genre de backlog qu'on repousse de semaine en semaine parce que "ça prend trop de temps".


Le déclic

Un soir, j'ai ouvert mon terminal et lancé Claude Code, l'outil CLI d'Anthropic. Pas un chatbot dans un navigateur, mais un agent qui tourne directement dans ton terminal, qui lit ton code, qui comprend ton architecture, et qui écrit dans tes fichiers.

Je me suis dit : "Et si on attaquait cette liste ?"

8 heures plus tard, voilà ce que le git log affichait :

MétriqueValeur
Commits40
Fichiers modifiés185
Lignes ajoutées~14 500
Lignes supprimées~3 300
Nouveaux articles de blog50 fichiers MDX
Langues ajoutées3 (FR, EN, PT)
Temps de travail effectif~8 heures

Je ne vais pas vous mentir : en voyant ces chiffres, j'ai moi-même eu du mal à y croire. Alors plutôt que de tout résumer dans un seul article, j'ai décidé de vous raconter cette aventure étape par étape, une par jour, cette semaine.


Comment ça fonctionne, concrètement ?

Avant de plonger dans le détail des réalisations, laissez-moi vous expliquer le workflow. Parce que non, je n'ai pas appuyé sur un bouton magique.

Le principe

Tout commence par une description en langage naturel. Je tape quelque chose comme "ajoute l'internationalisation avec next-intl" ou "crée les articles de blog à partir des transcripts du podcast". Claude Code analyse alors le codebase : il lit les fichiers existants, comprend l'architecture, identifie les dépendances. Puis il propose et implémente : écriture du code, création des fichiers, modification des configurations. De mon côté, je review et j'ajuste, parfois un détail à corriger, un style à adapter, une logique à affiner. Et on itère, chaque correction est immédiate, pas besoin de relancer un cycle complet.

C'est un pair programming avec un coéquipier qui connaît ton projet, tape à une vitesse surhumaine, et ne se fatigue jamais.

Ce qui change tout

La différence avec un simple générateur de code, c'est le contexte. Claude Code ne génère pas du code générique. Il sait que mon projet utilise Contentlayer, que mes routes suivent le pattern App Router, que ma couleur primaire est orange, que mes articles de blog sont en MDX avec un frontmatter spécifique. Il adapte tout à mon projet.


Ce qui vous attend cette semaine

Chaque jour, je vais détailler un chantier majeur de cette refonte.

Demain, on attaque le plus gros morceau : comment on est passé d'un site 100% français à un site trilingue. Le chantier le plus massif, celui qui a touché chaque fichier du projet. Mercredi, je vous montre comment 50 articles de blog ont été générés à partir de transcripts de podcast. Jeudi, les nouvelles pages de service qui n'existaient pas. Vendredi, les animations et transitions qui donnent vie au site. Samedi, l'audit SEO complet qui a tout resserré. Et dimanche, le bilan final.

On commence demain avec l'internationalisation. Et croyez-moi, ce n'est pas juste "traduire des textes"...

Toni Dias

Toni Dias

Développeur Full-Stack chez AsuOs

Prêt à transformer votre business digital ?

AsuOs vous accompagne dans votre stratégie digitale avec des solutions sur mesure.