Changer le design d'un site avec l'IA : prototyper, appliquer avec un agent IA

J'avais deux sites web qui ne sont pas assortis : une landing page de services professionnels (proactitech.com) et ce blog (blog.proactitech.com). Le site pro était bloqué en thème clair, le blog en thème sombre. J'avais envie de les unifier avec un design plus personnel — mais sans y passer des heures.

Refaire un thème à la main, c'est possible. Mais c'est long et répétitif, et il existe maintenant une méthode bien plus rapide : un thème défini en amont, un prototype visuel généré en quelques secondes avec Gemini, puis l'application du thème sur tout le code par un agent IA — en l'occurrence Podlet, mon agent IA open source. En bonus, l'agent a ajouté au passage un mode sombre automatique via prefers-color-scheme sur les deux sites.

Le problème : deux sites, deux designs, zéro cohérence

Le premier site est une landing page de proposition de services aux entreprises. Un site simple : chaque service mène à une page conçue pour pousser le visiteur à réserver un appel.

Le deuxième, c'est ce blog : une page principale avec une carte par article, puis des pages d'articles — du texte et des images. Un article, quoi.

Le problème : à la création, je n'avais pas fait de switch de thème. Les pages du site pro étaient tout le temps claires, le blog tout le temps sombre. Deux sites, deux identités visuelles. Objectif : unifier le tout en un temps raisonnable.

Ce qu'il faut préparer avant de toucher au code

Première règle, non négociable : avant de demander à une IA d'appliquer un thème, il faut un thème défini, et qui vous plaît. Si vous partez de « fais-moi un truc joli », vous allez itérer dans le vide pendant des heures.

Les deux fichiers à préparer

Je vous conseille au minimum deux fichiers :

1. Un fichier CSS avec un exemple complet de feuilles de style : couleurs, typographies, bordures, ombres, états des composants. La référence technique.
2. Un fichier texte, markdown ou JSON décrivant l'esprit du thème : comment utiliser les éléments et les couleurs, ce qui est permis et ce qui ne l'est pas. La référence d'intention.

Vous pouvez générer ces fichiers avec l'IA aussi — c'est ce que j'avais fait et décrit dans mon article sur le webdesign. L'important est d'avoir une référence stable avant de commencer.

À quoi ressemble Lichen (mon thème choisi), concrètement

Pour donner un goût concret d'un thème bien défini, voici les grandes lignes :

• Une seule couleur d'accent : un vert #3e6b26. Toute autre teinte est une couleur de statut, jamais décorative.
• Deux typographies à rôles fixes : IBM Plex Mono en principale (~85 % du texte), Fraunces, une serif, pour titres ou pour décorer.
• Un seul phénomène ambiant : des particules qui dérivent lentement en arrière-plan.

Et quatre règles dures :

1. Un seul accent. Une deuxième teinte est toujours un statut.
2. Deux polices, jamais sur le même élément.
3. Un élément remarquable par page, pas dix.
4. les assets doivent avoir un effet posés, jamais bien placé.

Vous n'avez pas besoin d'un thème aussi formalisé pour utiliser la méthode. Mais à ce niveau de définition, il devient très facile de dire à une IA ce qu'elle doit faire — et de vérifier ce qu'elle a fait.

Prototyper un design rapidement : l'astuce Firefox + Gemini

Avant de modifier une seule ligne de code, on va voir à quoi ressemblerait le site avec le nouveau thème.

Étape 1 : capturer les pages avec Firefox

Sur Firefox, allez sur votre site, puis n'importe où sur la page :

1. Clic droit → « Prendre une capture d'écran ».
2. Choisissez un élément précis, ce qui est visible, ou toute la page (menu en haut à droite).
3. Sauvegardez.

Faites-le pour la page principale du site.

Étape 2 : générer l'aperçu avec Gemini

Direction gemini.google.com. Pourquoi Gemini ? Parce que Google propose, de mon avis, le meilleur modèle de génération et d'analyse d'images du moment. On veut générer une image fidèle au thème.

Dans le chat :

1. Fournissez les deux fichiers de thème et un screenshot.
2. Choisissez bien l'option « Images ».
3. Écrivez votre prompt. Le mien, en substance :

Je te passe le screenshot d'un site web ainsi que les fichiers d'un thème. Génère une image qui montre à quoi ressemblerait ce site avec le thème fourni appliqué.

Quelques secondes plus tard, Gemini renvoie le site avec le thème appliqué — et ça fonctionne vraiment bien : la mise en page d'origine est respectée, le thème fidèlement rendu.

Le résultat : un avant/après convaincant en quelques secondes, sans génération longue ni manipulation de code. C'est exactement le but — tester un thème sur un site réel sans l'implémenter.

Deux issues à ce stade : ça vous plaît, et vous savez déjà à quoi ressemblera le résultat final ; ou ça ne vous plaît pas, et vous modifiez les fichiers de thème et régénérez. Tant que le thème n'est pas bon, ne passez pas à l'implémentation. De mon côté, le rendu était là, j'ai gardé le thème tel quel.

Appliquer le thème avec un agent IA : Podlet

Le prototype valide l'intention. Reste le vrai travail : appliquer le thème sur tout le code des deux sites. C'est le travail d'un agent IA. J'utilise Podlet, mon agent IA open source — un chat multi-agent qui tourne en local, capable d'exécuter des commandes et d'éditer des fichiers (présenté en détail ici).

Fournir le code du site à l'agent

Deux cas de figure :

Le dépôt GitHub est public. Le plus simple : demandez à l'agent de cloner le dépôt en lui donnant l'URL.

Le dépôt est privé — c'était mon cas. L'astuce :

1. Créez un nouveau chat dans Podlet.
2. Regardez l'URL : après « chat/ », il y a un ID — une chaîne de caractères qui identifie la session.
3. Dans votre dossier de configuration .podlet → Artifacts, créez un dossier nommé exactement avec cette chaîne de caractères.
4. Déposez-y le dossier complet de votre code. Il devient directement accessible à l'agent.

De retour sur l'interface, actualisez : dans le menu en haut à droite, vos fichiers apparaissent dans les Artifacts. C'est la façon la plus simple de fournir un gros dossier de code à Podlet sans dépôt public. Vous pouvez aussi ajouter le mcp github avec un token d'accès pour qu'il puisse directement intéragir avec votre dépôt

La discipline de prompt : plan d'abord, une section ensuite

Voici la une astuce qui peut vous faire gagner pas mal de temps. Au lieu de demander directement d'appliquer le thème , demandez un plan d'implémentation. Celà vous permettra de vérifier et d'ajuster si besoin.

Via le bouton « + », je fournis mes deux fichiers de thème, si le modèle supporte la lecture d'images vous pouvez fournir l'image produite par Gemini.

**1 : demander un plan.**J'écris un prompt prudent : fais un plan d'application du thème sur tout le projet — tous les sites, toutes les pages. Ne modifie rien pour l'instant. Je check la réponse. L'agent m'a d'ailleurs posé des questions de clarification avant de commencer — sur la police, les emojis, etc. Répondez en fonction de ce que vous voulez : c'est là que se joue la fidélité au thème.

2 : tester sur une seule section. L'agent a appliqué les modifications uniquement à la section /home dans mon cas, puis m'a dit de tester avant d'appliquer partout. Une section, ça se vérifie en dix minutes ; des dizaines de pages, non. Si le rendu est bon à petite échelle, il y a de bonnes chances qu'il le soit à grande échelle. Sinon, vous venez d'éviter une refonte bâclée sur tout le projet.

3 : itérer en conversation. Une fois la section validée, l'agent applique partout. Les corrections suivantes se font en discutant, sans toucher au code vous-même.

Ce trio — plan d'abord, test sur une section, itération conversationnelle — est à mon sens le pattern sûr pour tout restyling de site piloté par un agent IA. Un agent modifie très vite ; le rôle de l'humain, c'est de cadrer avant et de vérifier par petits lots.

Pour tester en local : téléchargez le dossier en zip depuis l'interface de Podlet (menu « Files » → « Artifacts » → icône de téléchargement sur le dossier), dézippez, lancez le serveur dev. Ou alors vous pouvez pousser les modifications sur votre dépôt avant de mettre à jour votre version local.

Résultat : deux sites unifiés, avec mode sombre en bonus

Première surprise au lancement : le site chargeait en mode sombre. Pas un bug — c'est mon paramètre de navigateur par défaut, et l'agent avait ajouté un mode sombre branché sur la préférence du navigateur sans que je lui demande. En changeant le réglage dans les paramètres, le thème clair apparaît — celui pour lequel le thème a été conçu, et ça se voit.

Pourquoi prefers-color-scheme compte

prefers-color-scheme est une media query CSS qui permet au site de suivre automatiquement la préférence clair/sombre du navigateur ou du système d'exploitation. L'utilisateur configuré en sombre obtient votre site en sombre, sans rien cliquer — et inversement.

C'est un vrai gain de confort et d'accessibilité : moins d'éblouissement le soir, moins de fatigue visuelle, une expérience cohérente avec le reste de l'écosystème de l'utilisateur. Auparavant, mes deux sites étaient figés. Maintenant, chacun a une version claire et une version sombre, choisies automatiquement selon les préférences du visiteur.

Les ajustements, en deux rounds de conversation

Le premier passage n'était pas parfait, et c'est normal. J'ai signalé trois choses : le vert trop présent, les particules peu visibles, l'effet de halo manquant. L'agent a codé les ajustements directement.

Deuxième constat, plus intéressant : en réduisant le vert, l'agent était passé à du blanc sur le thème sombre et des cartes noires — trop loin du thème d'origine. Le vert léger sur les traits et les cartes, c'était bien, en fait. Je lui ai demandé d'y revenir, il l'a fait.

C'est exactement le genre de dérive que le pattern « plan + petite échelle + itération » sert à attraper : un agent applique vite , mais sa fidélité au thème dépend de vos retours. Le résultat final — pages du site pro, landing pages de services, articles du blog, dans les deux modes — est vraiment réussi, avec quelques détails que je continue d'ajuster par-ci par-là.

Les limites, honnêtement

• Le thème sombre est un peu moins bon que le clair. Mon thème a été pensé « light-first » ; la version sombre est une déclinaison, pas une conception. C'est assumé — d'où l'idée, peut-être, de ne garder à terme qu'un seul thème.
• Les itérations restent nécessaires. Aucun agent n'applique un thème parfaitement du premier coup. La méthode ne supprime pas la relecture ; elle la rend courte.
• Tout dépend de la qualité des fichiers de thème. La partie la plus importante du travail se joue avant l'IA.

Résumé de la méthode

Pour changer le design d'un site avec l'IA, de façon rapide et sûre :

1. Définissez le thème avant tout : un fichier CSS complet + un fichier d'intention.
2. Prototypez avec Firefox + Gemini : capture pleine page, fichiers de thème + screenshot dans Gemini, option Images, un prompt, quelques secondes.
3. Demandez un plan à l'agent : aucun code modifié avant validation du plan.
4. Testez sur une seule section (/home ici) avant l'application globale.
5. Itérez en conversation, lot par lot.

Prérequis : un accès à Gemini, Podlet installé en local, et Firefox. C'est tout.

Conclusion

Vous savez maintenant comment appliquer au mieux un nouveau thème à un site web : l'astuce de prototypage rapide avec Gemini, et l'implémentation avec un agent IA comme Podlet — cadrée par un plan, validée par petites sections, corrigée en conversation.

• Le résultat final est en ligne : jetez un œil à proactitech.com et au blog que vous lisez — clair ou sombre selon votre préférence navigateur.
• Envie d'essayer Podlet ? Le projet est open source : github.com/HellKaiser45/Podlet.
• Et si vous préférez confier ce genre de refonte plutôt que de la faire vous-même, c'est le type de prestation que Proactitech propose aux entreprises tech. On en discute sur proactitech.com.