Retour au blog

Drawbridge : du feedback visuel au code en 3 clics

18 décembre 2025Context Collective

Drawbridge : du feedback visuel au code en 3 clics

Quand pointer du doigt suffit à modifier le code

Le problème qu'on connaît tous

Tu regardes ton app dans le navigateur. Tu vois un truc qui cloche. Un bouton mal aligné, une couleur à changer, un texte à modifier.
Et là commence le parcours du combattant :
  1. Ouvrir le code
  2. Trouver le bon fichier (parmi des dizaines)
  3. Trouver le bon composant
  4. Ouvrir Claude Code
  5. Expliquer le contexte
  6. Espérer qu'il comprenne de quel élément tu parles
Et si tu pouvais juste cliquer sur l'élément et décrire ce que tu veux ?

Drawbridge : le pont entre ton navigateur et ton code

Drawbridge est une extension Chrome qui fait exactement ça.

Le workflow en 3 étapes

1. Tu pointes
Appuie sur F dans ton navigateur. Clique sur n'importe quel élément de ton interface.
2. Tu décris
Une sidebar s'ouvre. Tu écris ce que tu veux : "Rends ce bouton vert", "Augmente la taille du texte", "Centre ce bloc".
3. Tu exécutes
Dans Claude Code, tape /bridge. Claude voit ta demande, le screenshot de l'élément, et sait exactement où intervenir dans le code.
Avant : 10 minutes à expliquer le contexte
Après : 30 secondes, screenshot inclus

Pourquoi c'est puissant

Le contexte est capturé automatiquement

Quand tu cliques sur un élément, Drawbridge capture :
  • Un screenshot de ce que tu vois
  • Le sélecteur CSS de l'élément (pour le retrouver dans le code)
  • Ta description du changement souhaité
Claude Code reçoit tout ça. Il n'a plus besoin de deviner de quel bouton tu parles.

Ça marche sur n'importe quelle stack

  • React, Vue, Svelte, vanilla JS
  • localhost, fichiers locaux, domaines custom
  • N'importe quelle URL dans ton navigateur
L'extension ne se soucie pas de ta stack. Elle capture juste ce que tu vois.

Les tâches sont persistées

Tes annotations sont sauvegardées dans un dossier .moat/ de ton projet :
.moat/
├── moat-tasks.md          ← Liste lisible de tes tâches
├── moat-tasks-detail.json ← Données structurées
└── screenshots/           ← Captures d'écran
Tu peux créer 10 annotations, fermer ton navigateur, et les traiter plus tard.

Démonstration concrète

Situation

Tu as une landing page. Le bouton "S'inscrire" est orange, mais le client veut du vert.

Sans Drawbridge

Toi: "Claude, dans ma landing page, il y a un bouton S'inscrire
      dans la section newsletter, il est orange, je voudrais
      qu'il soit vert. Le fichier c'est... attends je cherche...
      src/components/sections/join.tsx je crois, ou peut-être
      dans le CSS global ?"

Claude: "Je vais chercher le bouton..."
        [lit 5 fichiers]
        "Tu parles de celui-ci ?"

Toi: "Non l'autre, celui en bas"

[5 minutes plus tard...]

Avec Drawbridge

1. F → clic sur le bouton → "Passe ce bouton en vert"
2. /bridge dans Claude Code
3. Claude voit le screenshot, trouve le fichier, fait le changement

[30 secondes]

Les trois modes de traitement

Quand tu tapes /bridge, Claude te demande comment tu veux procéder :

Mode Step (recommandé pour commencer)

Une tâche à la fois. Claude te montre ce qu'il va faire, tu valides.
→ Pour les changements sensibles ou quand tu veux garder le contrôle.

Mode Batch

Claude regroupe les tâches liées et les traite ensemble.
→ Pour plusieurs petits changements sur le même composant.

Mode YOLO

Claude traite tout automatiquement sans demander.
→ Pour les changements simples quand tu fais confiance.

Installation en 2 minutes

1. Installer l'extension

git clone https://github.com/breschio/drawbridge.git
Dans Chrome :
  • Ouvre chrome://extensions
  • Active "Mode développeur"
  • "Charger l'extension non empaquetée"
  • Sélectionne le dossier chrome-extension/

2. Connecter ton projet

  • Ouvre ton app dans le navigateur (localhost ou autre)
  • Appuie sur Cmd+Shift+P (Mac) ou Ctrl+Shift+P (Windows)
  • Sélectionne le dossier de ton projet
C'est tout. L'extension crée automatiquement :
  • Le dossier .moat/ pour les tâches
  • La commande /bridge pour Claude Code

Cas d'usage parfaits

Design review

Le designer pointe directement les éléments à ajuster. Plus de "le truc en haut à droite, tu vois ?".

QA visuelle

Le testeur capture les bugs visuels avec contexte. Plus de descriptions approximatives.

Itération rapide

Tu navigues dans ton app, tu notes les ajustements au fil de l'eau, tu traites tout d'un coup.

Onboarding

Un nouveau dev peut voir exactement ce qui doit changer, screenshot à l'appui.

Ce que Drawbridge n'est pas

Ce n'est pas un outil no-code

Tu as toujours besoin de Claude Code et d'un projet de code. Drawbridge facilite la communication, il ne remplace pas le dev.

Ce n'est pas magique

Claude doit toujours trouver le bon fichier et faire le bon changement. Mais avec le screenshot et le sélecteur, il se trompe beaucoup moins.

Ce n'est pas pour les grosses features

C'est optimisé pour les ajustements UI : couleurs, tailles, positions, textes. Pour une nouvelle feature complète, le workflow classique reste plus adapté.

Raccourcis clavier

RaccourciAction
FActiver le mode annotation
EscapeQuitter le mode annotation
Cmd+Shift+PConnecter/déconnecter le projet

Le futur du feedback visuel

Drawbridge illustre une tendance : rapprocher le feedback de l'implémentation.
Aujourd'hui c'est une extension Chrome. Demain, ce type d'outil pourrait être intégré directement dans :
  • Les outils de design (Figma → code)
  • Les plateformes de staging (preview → fix)
  • Les outils de support (user report → fix)
Le principe reste le même : pointer, décrire, exécuter.

Essaie-le

  1. Clone le repo : git clone https://github.com/breschio/drawbridge.git
  2. Installe l'extension dans Chrome
  3. Connecte ton projet
  4. Appuie sur F, clique, décris
  5. /bridge dans Claude Code
En 5 minutes, tu auras fait ta première modification visuelle → code.

Ressources

Drawbridge est open source et activement développé. N'hésite pas à contribuer ou remonter des issues.