Notre test : adapter un template gratuit pour un client
Le 6 novembre 2026, nous avons demandé à Claude Code d’adapter Agency, un template gratuit de Start Bootstrap (licence MIT), pour un client fictif : Maison Brune, studio d’architecture d’intérieur à Lyon. Quatre demandes, rédigées comme le ferait un webdesigner, mêlant charte graphique et technique.
| Étape | Notre demande (résumée) | Durée | Fichiers modifiés | Résultat |
|---|---|---|---|---|
| 1. Comprendre | « Explique-moi comment ce template est construit et où intervenir pour l’adapter à un client. Ne modifie aucun fichier. » | 29 s | Aucun | Description exacte, formulaire factice signalé |
| 2. Charte du client | « Adapte ce template pour Maison Brune : vert sapin #1f4d3a, Playfair Display et Inter, logo texte, haut de page en français. Ne touche pas aux images. » | 1 min 46 s | 2 (125 lignes ajoutées, 113 supprimées) | Réussi, mais logo illisible et annoncé à tort « en blanc » |
| 3. Nouvelle section | « Ajoute entre Portfolio et À propos une section « Notre méthode » en 4 étapes, dans le style du site. » | 42 s, puis 21 s | 1 (44 lignes ajoutées) | Réussi à la deuxième demande |
| 4. Contrastes et survol | « Vérifie les contrastes AA, puis ajoute un effet discret au survol, désactivé si le visiteur réduit les animations. Ne change pas la charte. » | 1 min 20 s | 1 (61 lignes ajoutées) | 4 contrastes corrigés, logo compris |
Durées mesurées par Claude Code, version 2.1.318, le 6 novembre 2026. Template Agency 7.0.12 : une page, 610 lignes de HTML et 11 315 lignes de CSS.
Étape 1 : comprendre le template avant d’y toucher
En mode « Plan », Claude Code lit les fichiers sans rien modifier. Sa description était exacte, nous l’avons vérifiée ligne par ligne : 610 lignes de HTML, le jaune #ffc800 défini en haut d’un CSS de 11 315 lignes, un menu géré par un petit script. Il a aussi signalé un piège qu’un débutant découvrirait trop tard : le formulaire de contact ne fonctionne pas en l’état, car il dépend d’un jeton factice. Seule entorse : nous voulions 8 lignes, il en a écrit plus du double.
Étape 2 : la charte du client en 1 min 46 s, avec une erreur
Le jaune disparaît des 48 endroits où il figurait dans le CSS, Playfair Display et Inter s’appliquent partout, le haut de page passe en français. Le plus utile est ailleurs : Claude Code a relevé de lui-même que les services du template (e-commerce, sécurité web) n’avaient aucun sens pour un architecte d’intérieur, et a proposé de les remplacer.
Mais son compte rendu affirmait que le logo était « en blanc ». Il était en vert sapin sur la barre de navigation sombre : un contraste de 1,6:1, presque illisible. Sans ouvrir la page, impossible de le voir.
Étape 3 : une première tentative bloquée, puis la section
Pour insérer la section, Claude Code a d’abord écrit un petit programme, que le mode de permission choisi a bloqué. Il l’a dit clairement, sans rien casser. Une seconde consigne, « modifie directement index.html », a suffi : 4 étapes avec icônes, dans le style de la section Services, sur 1 colonne sur mobile, 2 sur tablette, 4 sur ordinateur. Il a pensé seul au lien dans le menu.
Étape 4 : les contrastes, et le logo enfin rattrapé
Claude Code a trouvé 4 contrastes insuffisants, dont le logo de l’étape 2, et les a corrigés dans un bloc ajouté en fin de CSS, sans toucher au reste. Nous avons recalculé chaque ratio avec la formule WCAG : toutes les corrections dépassent le seuil de 4,5:1, mais ses chiffres étaient approximatifs, par exemple « environ 6,5:1 » annoncé pour le texte des champs, 6,09 mesuré. Pour le survol : un zoom de 4 % sur les vignettes, des boutons qui montent de 2 pixels, et aucun mouvement si le visiteur a demandé de réduire les animations.
Au passage, le template d’origine avait lui-même un défaut : un texte blanc sur des boutons jaunes, soit un contraste de 1,55:1. Le changement de charte l’a réglé.
À retenir : Claude Code fait en quelques minutes le travail d’adaptation d’un template, mais son compte rendu ne remplace pas un coup d’œil à la page : le logo « blanc » était vert.
