Cursor et claude code : flux de travail pour sites web

Cursor est un éditeur de code construit sur la même base que Visual Studio Code, avec des fonctionnalités d’AI pour le chat, les modifications en ligne et un mode agent capable de modifier plusieurs fichiers à la fois. Il peut utiliser des modèles provenant de plusieurs fournisseurs.

Claude Code est l’outil de codage en ligne de commande d’Anthropic. Il s’exécute dans un terminal ou à l’intérieur d’éditeurs, lit le projet, exécute des commandes et modifie des fichiers avec l’approbation du développeur. Les équipes ajoutent souvent un fichier de notes de projet, tel que CLAUDE.md, qui indique à l’outil les conventions et les parties fragiles de la base de code.

D’autres outils dans le même domaine incluent GitHub Copilot, Windsurf et Codex d’OpenAI. Les flux de travail ci-dessous s’appliquent à la plupart d’entre eux.

La correction de bugs est le domaine où ces outils sont souvent les plus rentables, car la tâche a une fin claire : le bug a disparu et rien d’autre n’a été cassé.

• Décrivez le bug sous forme de rapport court : page, étapes de reproduction, résultat attendu et réel
• Donnez le rapport à l’outil et demandez-lui de trouver la cause avant de changer quoi que ce soit
• Examinez son explication ; si elle est fausse, corrigez-la rapidement
• Laissez-le proposer une correction limitée aux fichiers concernés
• Exécutez le site localement et vérifiez la page sur les largeurs mobiles et de bureau
• Validez avec un message expliquant la cause, pas seulement la correction

Demander d’abord la cause empêche l’outil de corriger les symptômes. Une mauvaise théorie détectée à la troisième étape permet d’économiser une heure de retour en arrière plus tard.

L’ajout d’un tableau de prix, d’un curseur de témoignages ou d’un bloc FAQ est un travail de routine avec de nombreuses petites décisions concernant le nommage, le style et la structure.

Étapes

• Pointez l’outil vers un composant existant qui suit le style de la maison
• Décrivez le nouveau composant : champs de contenu, mise en page sur mobile et bureau, besoins en accessibilité
• Demandez-lui de suivre la même structure de fichiers et le même nommage CSS
• Examinez le balisage pour l’ordre des titres, les étiquettes et la prise en charge du clavier
• Testez avec du contenu réel, y compris du texte long et des images manquantes

Dans un thème de bloc WordPress, par exemple, cela pourrait signifier un nouveau modèle de bloc plus un fichier CSS enregistré dans la liste des actifs du thème. Indiquer à l’outil où se trouve cette liste évite un oubli courant : des styles écrits mais jamais chargés.

Les outils de codage par AI peuvent écrire de petits scripts qui vérifient plusieurs pages à la fois. C’est utile pour les audits qui seraient fastidieux à faire à la main.

• Demandez un script qui récupère une liste d’URL et vérifie la longueur du titre, la méta-description, le nombre de H1 et le texte alternatif de l’image
• Exécutez-le d’abord sur une copie de staging
• Examinez le résultat sous forme de feuille de calcul
• Demandez à l’outil de regrouper les problèmes par modèle, car une correction de modèle couvre souvent des centaines de pages
• Corrigez le modèle, relancez le script et comparez

Déplacer du contenu d’un ancien site, nettoyer du HTML ou mettre à jour des articles en masse est risqué. Un script écrit par un outil d’AI peut être rapide à produire et dangereux à exécuter.

• Sauvegardez la base de données avant toute exécution
• Demandez un mode de simulation qui signale les changements sans les enregistrer
• Testez sur dix enregistrements, puis cent, puis tous
• Rendez le script sûr à exécuter deux fois, afin qu’une réexécution ne crée pas de doublons
• Tenez un journal des ID d’enregistrement modifiés

Ces outils agissent rapidement et peuvent se tromper avec assurance. Les règles empêchent les petites erreurs d’atteindre les visiteurs.

• Travaillez avec le contrôle de version et examinez chaque diff avant la validation
• Ne donnez jamais à l’outil d’identifiants de production ou de clés API en direct
• Exécutez des tests et des linters après chaque changement, par exemple php -l pour les fichiers PHP
• Gardez un fichier de notes de projet à jour avec les conventions et les pièges connus
• Demandez à l’outil d’expliquer tout changement que vous ne comprenez pas
• Limitez les autorisations : approuvez les commandes qui suppriment des fichiers ou touchent à la base de données

Un fichier de notes de projet est rapidement rentabilisé. Lorsque l’outil sait qu’un certain modèle ne doit pas être supprimé ou que les styles se trouvent dans des fichiers séparés, il cesse de répéter les mêmes erreurs.

L’intuition est un mauvais guide ici. Les développeurs se sentent souvent plus rapides avec les outils d’AI, même sur des tâches où la révision et le retravail annulent le gain. Suivez plutôt quelques chiffres pendant un mois.

• Temps écoulé entre le début de la tâche et le changement fusionné, par type de tâche
• Nombre de cycles de révision avant approbation
• Bugs trouvés dans la semaine suivant la publication
• Commits annulés

Comparez les chiffres avec un mois similaire avant les outils. Certains types de tâches montreront des gains clairs, d’autres aucun ; déplacez l’utilisation de l’AI vers le premier groupe.