Les outils de codage par AI comme Cursor et Claude Code accélèrent le travail sur les sites web, mais les erreurs les plus courantes viennent du fait de traiter leur sortie comme du code fini. Les équipes sautent la révision, laissent l’agent toucher trop de fichiers à la fois, ignorent les effets secondaires sur la performance et le SEO, et travaillent sans contrôle de version. Chacune de ces erreurs est évitable avec quelques habitudes de travail.
Cursor est un éditeur de code axé sur l’AI construit sur la base de code de VS Code, avec chat, modifications en ligne et un mode agent qui peut modifier plusieurs fichiers. Claude Code est l’outil de codage agentique d’Anthropic qui s’exécute dans le terminal, lit un dépôt, exécute des commandes et propose des modifications. Les deux sont capables. Les deux produiront aussi avec confiance du code qui semble correct et cassera silencieusement quelque chose que vous n’avez pas demandé.
Pourquoi les sites web construits par AI cassent-ils en production ?
La plupart des échecs ne sont pas des erreurs de syntaxe. Le code fonctionne. Le problème est ce que le changement a fait sur les bords : un modèle qui a perdu sa balise canonique, une image principale qui se charge maintenant sans dimensions, un formulaire qui a cessé d’envoyer son événement de suivi. Un agent optimise pour la tâche que vous avez décrite, donc tout ce que vous n’avez pas décrit est non protégé.
La deuxième cause est la portée. Une demande comme “nettoyer l’en-tête” peut se transformer en modifications dans douze fichiers. Quand le diff est aussi grand, personne ne le lit correctement, et de petites régressions se glissent.
Erreur 1 : travailler sans filet de sécurité
L’erreur la plus coûteuse est de laisser un agent modifier un projet qui n’est pas sous Git, ou de tout valider dans un commit géant à la fin de la journée. Si le changement casse la page de paiement, vous devez savoir exactement quelle modification l’a fait.
- Validez avant chaque session d’agent, pour avoir toujours un point propre où revenir.
- Demandez un changement par session ou par commit, avec un court message le décrivant.
- Gardez une copie de staging du site ; ne pointez jamais un agent vers le serveur en direct.
- Dans Claude Code, gardez les invites d’autorisation activées pour les commandes shell qui écrivent en dehors du projet ou touchent au déploiement.
Erreur 2 : accepter de grands diffs sans les lire
Cursor montre les modifications proposées en ligne, et Claude Code montre les diffs avant de les appliquer. La tentation est d’accepter parce que le résumé semble correct. Les résumés décrivent l’intention, pas le changement réel. Lisez le diff, surtout les suppressions.
Une règle pratique que nous utilisons : si un diff est trop long à lire en cinq minutes, il est trop long. Demandez à l’outil de diviser le travail en étapes plus petites. Il le fera, et la révision deviendra réaliste.
Erreur 3 : oublier les budgets de performance
Les agents ajoutent facilement des bibliothèques. Demandez un carrousel et vous pourriez obtenir une dépendance de 90 Ko là où vingt lignes de CSS suffiraient. Ils ont aussi tendance à écrire des images sans attributs de largeur et de hauteur et à charger des polices sans penser au blocage du rendu.
Les Core Web Vitals de Google donnent un objectif clair : Largest Contentful Paint sous 2,5 secondes, Interaction to Next Paint sous 200 millisecondes et Cumulative Layout Shift sous 0,1. Mettez ces chiffres dans votre fichier d’instructions de projet (règles Cursor ou un fichier CLAUDE.md pour Claude Code) pour que l’outil les voie à chaque tâche, et exécutez Lighthouse ou PageSpeed Insights avant de fusionner.
Erreur 4 : casser le SEO sans s’en apercevoir
Les problèmes de recherche apparaissent rarement lors d’une vérification visuelle. La page semble identique ; la section head ne l’est pas. Les régressions courantes après une modification par AI incluent :
- Une balise meta noindex copiée d’un modèle de staging vers la production.
- Des URLs canoniques pointant vers le mauvais chemin après un changement de routage.
- Des titres réorganisés pour qu’une page ait deux éléments H1 ou aucun.
- Des données structurées supprimées lorsqu’un composant a été réécrit.
- Des liens internes changés d’ancres réelles en gestionnaires de clic JavaScript que les robots d’indexation ne peuvent pas suivre.
La solution est une courte vérification automatisée. Un script qui récupère les modèles clés et affirme que le titre, le canonical, la balise robots et le JSON-LD sont présents attrape la plupart de ces erreurs en quelques secondes.
Erreur 5 : faire confiance à des API inventées et à une syntaxe obsolète
Les modèles de langage appellent parfois des fonctions qui n’existent pas, ou utilisent une API de framework qui a changé il y a deux versions. Dans WordPress, cela peut ressembler à un nom de hook qui est presque correct ; dans Shopify, cela peut être du Liquid obsolète. Le code peut même échouer silencieusement.
Demandez à l’outil de citer la documentation sur laquelle il s’appuie, exécutez le linter ou le vérificateur de thème, et testez sur un vrai navigateur. Si une réponse inclut une fonction que vous ne reconnaissez pas, cherchez-la avant de l’accepter.
Erreur 6 : coller des secrets et des données clients dans les invites
Les clés API, les dumps de base de données et les exportations de clients n’ont pas leur place dans une fenêtre de chat. Gardez les secrets dans des fichiers d’environnement exclus du contexte que l’outil lit, utilisez des données de test pour le débogage, et révisez les paramètres de données de l’outil. Cursor et Anthropic publient tous deux des options de confidentialité et de rétention au moment de l’écriture ; lisez-les pour votre plan plutôt que de supposer.
Comment Alien Road applique les outils de codage par AI sur les sites web des clients
Dans une construction web typique, nous commençons par une découverte qui ne concerne pas du tout l’outil : inventaire des pages, Core Web Vitals actuels à partir des données de terrain dans Search Console, événements de suivi qui doivent survivre, et éléments SEO par modèle. Cette liste devient le fichier d’instructions de projet que l’agent lit à chaque tâche.
La configuration vient ensuite. Le dépôt est mis sous Git avec un environnement de staging, un linter et un petit script de vérification pour les titres, les canonicals, les balises robots et le schéma. Les sessions d’agent sont limitées à un ticket. Un développeur révise chaque diff et exécute les vérifications avant que quoi que ce soit ne soit fusionné.
La mesure est la partie que les clients voient. Nous comparons les scores Lighthouse et les données de terrain avant et après, confirmons que les événements analytiques se déclenchent toujours dans la vue de débogage, et explorons le staging avec Screaming Frog pour comparer les pages indexables. Les rapports listent ce qui a changé, ce qui a été testé et ce qui a été laissé seul intentionnellement. L’outil écrit le code plus rapidement ; le processus est ce qui maintient le site stable.
Une courte liste de contrôle avant fusion
- Diff lu en entier, y compris les lignes supprimées.
- Lighthouse exécuté sur les modèles modifiés, sans régressions des Core Web Vitals.
- Titre, meta description, canonical, robots et données structurées présents.
- Formulaires soumis sur le staging et événements de suivi visibles dans le mode débogage analytique.
- Aucune nouvelle dépendance ajoutée sans raison déclarée.
- Bases de l’accessibilité vérifiées : texte alternatif, états de focus, contraste des couleurs.
Par où commencer cette semaine
Choisissez un petit ticket réel, comme la correction du décalage de mise en page sur le modèle de blog. Validez d’abord, écrivez un court fichier d’instructions avec vos règles de performance et de SEO, et exécutez la tâche dans Cursor ou Claude Code avec la révision de diff activée. Chronométrez le tout, y compris la révision et les vérifications. Cette seule exécution mesurée vous en dit plus sur la façon dont ces outils s’intègrent dans votre équipe que n’importe quelle démo.
Continuer la lecture : Conception et développement web · Conception web