Une IA qui navigue sur ton site et retape le design quand t'as la flemme

C'est fini de se prendre la tête pendant des heures à chercher coomment refaire les styles CSS de son site. Maintenant l'IA a des yeux (moyennant un ptit billet bien-sûr....)

(Ce tuto fonctionne avec VsCode / Windsurf / Cursor et Trae et tous les forks de Vscode, si vous avez netbeans ou un éditeur exotique c'est mort)

## première étape : aller chercher l'extension Roo code ou Kilo code dans votre éditeur :

1. Ouvrir VSCode
Lance Visual Studio Code sur ton ordinateur.

2. Installer l’extension Roo Code ou Kilo code
- Clique sur l’icône Extensions (ou `Ctrl+Shift+X`).
- Cherche "Roo Code" ou "kilo-code".
- Clique sur "Installer.

3. Ouvrir le panneau Roo Code/Kilo code
Clique sur l’icône Roo Code dans la barre latérale pour accéder à l’interface.

4. Configurer la clé API
- Clique sur le bouton pour ajouter une clé API (ex : OpenRouter)
- Bref il faut une clé API qui supporte Claude ou GPT 4.1 (c'est les seuls LLM pour l'instant qui supportent le mode "computer use" (mode navigateur)

5. Assure-toi d’avoir Google Chrome installé.
- Active le mode "remote debugging" de Chrome (ex : lance Chrome avec `--remote-debugging-port=9222`)

6. Ouvrir le dossier du site web
Dans VSCode, ouvre le dossier contenant le code source du site à corriger.

7. Active le mode browser
Dans Roo Code/Kilo code sélectionne le mode "browser" et teste la connexion au navigateur dans les paramètres en entrant http://127.0.0.1:9222 puis tester.
(il faut que ton navigateur écoute sur le port 9222 pendant ce temps-là) tu peux vérifier si ton port 9222 est en écoute avec la commande netstat (DYOR)

8. Demande une correction de code
Dans Roo Code ou kilo code, indique la tâche à effectuer (ex : "Corrige les erreurs JavaScript sur la page d’accueil").

Et là, si bien-sûr il te reste quelques shekels dans ton API, l'IA va ouvrir ton navigateur et retaper ton CSS pourri (faut compter environ 50 centimes par page analysée mais tu gagnes un temps ouf).
Tu peux retaper la gueule de ton site pour 10 balles plutôt que de galérer pendant 2 mois.

- Sinon go Cursor

Cursor n'est pas magique.
Si t'as pas une IA qui sait ouvrir un navigateur c'est mort

Sinon tu C/C le code source à un LLM et tu lui demandes de te corriger les erreurs et d'améliorer le design, non?

Non justement, une IA ne sait pas ce qu'est un beau fichier css et un mauvais. D'ailleurs nous aussi, il faut qu'on voit dans le navigateur pour tester le rendu.....

Par contre quand l'IA a le screenshot et que tu lui dit "j'ai cette zone qu'est moche" tout de suite ça fonctionne.

Après si tu sais coder , je préfère v0 ou bolt pour faire des interfaces correctes