Make comments in the browser (like in Figma) and send them to Claude Code and Cursor. This chrome plugin + cursor ruleset connects your browser to your local development project. Comments made on the front end are batched into a markdown file. Run the command "bridge" to process them in Cursor. Simplify your workflow by adding more context to visual edits with Cursor.

1. Download or clone the Drawbridge to your desktop or location of choice

2. Go to chrome extensions, switch to dev mode, and unpack the extension drawbridge/chrome-extension

3. Activate the plugin

4. Pin it for easy access

1. Click the icon to open Drawbridge

2. Click "Connect" to open your file browser

3. Select the local project folder you want to work in

4. Grant acess to Drawbridge to edit your file

5. Drawbridge can now write to its moat-tasks.mdc and moat-task-detail.json files

1. Press C in your browser (or click the Tools dropdown → Comment), to turn your cursor into a pointer

2. Hover over your page to see selectable DOM elements you can leave comments on

3. Click an element to leave a comment, type your comment, hit Submit or press Enter

4. Tasks will be shown in the Moat area on the bottom of the page

5. Tasks will also be synced to Cursor

1. Press R in your browser (or click the Tools dropdown → Rectangle), to enter rectangle drawing mode

2. Your cursor will change to a crosshair, indicating you're in drawing mode

3. Click and drag on the page to draw a rectangle around the area you want to annotate

4. Release the mouse button to finalize the rectangle - a comment box will appear at your cursor

5. Type your comment and hit Submit or press Enter

6. The rectangle coordinates and screenshot will be saved with your task

Keyboard Shortcuts:

• Press C to switch to Comment mode (pointer cursor)
• Press R to switch to Rectangle mode (crosshair cursor)
• Press Esc to exit either mode
• You can toggle between modes with C and R before starting an interaction

Drawbridge works with Cursor and Claude Code:

1. Run Drawbridge: In your editor, simply run the command:

   bridge
   

2. Drawbridge will analyze your tasks, understand dependencies, and begin making edits.

3. Approve: By default, drawbridge processes tasks in Step mode - one at a time. You may be asked for approval:

   1. To begin the task

   2. To finish the task (updates the status in moat-tasks.md and moat-tasks-detail.json)

4. Wait: You can watch your tasks get updated in the moat-tasks.md

5. IF you run into trouble with "bridge" simply be more explicit by saying "use @drawbridge-workflow.mdc to process @moat-tasks.mdc"

1. Run the slash command (works in terminal or Cursor with Claude Code):

   /bridge
   

2. Choose mode: Claude will ask for your preferred processing mode:

   • step: One task at a time with approval
   • batch: Group related tasks together
   • yolo: Process all tasks autonomously

3. Automatic Setup: The /bridge command is automatically deployed to .claude/commands/ when you connect your project

Claude Code Features:

• ✅ Smart error messages - Helpful guidance if tasks aren't found
• ✅ File references - Tasks include file paths for easy navigation
• ✅ Screenshot support - Visual context from browser annotations
• ✅ Git-safe - Automatically adds .claude/ and .moat/ to .gitignore
• ✅ Status tracking - Follows "to do" → "doing" → "done" lifecycle

1. Go back to your browser to see your changes

   1. Should be automatic if you're using react / next.js

   2. Refresh the page if you're using html / css / js

2. Continue making edits to refine your work!

• drawbridge-workflow.mdc: The main ruleset for the AI. This is where Drawbridge's "brain" is defined.

• moat-tasks.md: A human-readable list of your pending tasks.

• moat-tasks-detail.json: The raw, detailed data for each task, including selectors and screenshot paths.

• /screenshots: Visual context for each annotation, used by the AI to understand your intent.

1. Annotate:

   • Click a button → "make this green".

   • Click the same button → "add more padding".

2. Process: In your editor, run bridge.

3. AI Analyzes:

   🤖 Dependency detected. Processing "make this green" before "add more padding".
   
   

4. Review: The AI reviews your moat-tasks-detail.json for details of your comment.

5. Approve: You reply yes.

6. Repeat: The AI proceeds to the next dependent task.

You can control how Drawbridge processes tasks by specifying a mode.

• step bridge (Default: Safe & Incremental)

  • Processes tasks one by one, asking for approval at each step. Perfect for complex changes.

• batch bridge (Efficient & Grouped)

  • Intelligently groups related tasks (e.g., all button styles) and processes them together, asking for a single approval per batch.

• yolo bridge (Autonomous & Fast)

  • Use with caution. Processes all pending tasks in the correct dependency order without stopping for approvals. A full summary is provided at the end.

• Be Specific: "change font to sans-serif" is better than "change font".

• Chain Your Thoughts: For multi-step changes, create separate but related annotations. The AI is smart enough to understand the order.

  • Good: 1. "make button blue" → 2. "add shadow to the blue button"

  • Bad: 1. "make button blue and add a shadow"

• Focus on One Thing: One annotation should represent one distinct change.

• "Dependency Error": This means tasks might be out of order. Check the AI's analysis to see the required sequence.

• Task failed Status: If a task fails (especially in yolo mode), check moat-tasks.md. You can reset its status to pending in the .json file to retry.

• Connection Issues: If Drawbridge can't find tasks, press Cmd/Ctrl+Shift+P in your browser and re-select your project directory to reconnect.

Happy building with Drawbridge! 🎯

This project is licensed under a custom license. See the LICENSE file for details.

Key points:

• ✅ Free to use, copy, and modify for any lawful purpose
• ❌ No redistribution, sublicensing, or selling
• ❌ Cannot be offered as a commercial service

For commercial licensing inquiries: [email protected]