Drawbridge - Visual editor for AI coding assistants

Visual feedback tool: Annotate browser pages and send UI feedback to Cursor/Claude Code as AI prompts

Drawbridge is a visual editor for AI-assisted coding. Make comments directly in your browser like you would in Figma, then send them to Claude Code or Cursor as prompts for instant implementation. KEY FEATURES: • Visual Annotations: Press 'C' to enter comment mode and annotate any element on the page • Freeform Rectangles: Press 'R' to draw rectangles and highlight specific areas • AI Processing: Automatically processes your annotations through Claude or Cursor • Smart Dependency Detection: Intelligently orders related tasks for optimal execution • Multiple Processing Modes: Choose between step-by-step, batch, or autonomous processing • Screenshot Integration: Captures visual context with each annotation • Task Management: Tracks task status from creation through completion HOW IT WORKS: 1. Install Drawbridge and connect it to your local project folder 2. Press 'C' or 'R' in your browser to annotate the current page 3. Type your feedback or design request 4. Open your editor (Cursor or Claude Code) and run the 'bridge' command 5. Watch as AI makes the changes based on your visual feedback 6. Review changes in real-time and iterate PERFECT FOR: • Frontend developers who want faster UI iteration • Designers collaborating with developers • Anyone using Claude Code or Cursor for development • Teams building React, Next.js, or vanilla web projects This extension bridges the gap between visual design and code implementation, letting you describe changes visually and have AI handle the implementation automatically.