Drawbridge

Drawbridge is an open-source Chrome extension that turns visual feedback on your running app into prompts your AI coding tools can act on, with 970 stars on GitHub.

Overview

Drawbridge closes the loop between what you see in the browser and what your AI coding assistant changes in the code. You click on elements of your running web app, leave Figma-style comments, draw freeform rectangles over layout problems and capture screenshots — and those notes are sent directly to tools like Claude Code and Cursor as actionable prompts. Each annotation captures selector data, element context and bounding boxes, so the agent knows exactly which part of the page you mean. Tasks sync into your project as readable markdown and structured JSON files, with a simple to do / doing / done status flow, making design review feedback a first-class input to AI-assisted development.

Key Features

• Annotate visible UI elements directly in the browser with comment threads
• Freeform rectangle drawing for layout, spacing and visual bugs not tied to one element
• Captures selector data, element context, bounding boxes and screenshots with every note
• Sends feedback to Claude Code, Cursor, Codex and Windsurf as prompts
• Syncs tasks into your project as markdown and structured JSON
• Task status tracking through to do, doing and done
• Ships a /bridge workflow for Claude Code, Codex and Windsurf

💳 Pricing

Drawbridge is free and open source on GitHub. You clone or download the repository, load the extension into Chrome and use it with the coding tools you already have — there is no subscription or hosted service.

Who Is It For

Drawbridge is for developers, designers and product folks who review web UIs and are tired of describing visual issues in words. If your workflow already pairs a browser with an AI coding assistant, it turns vague feedback like “move that button” into precise, located tasks the agent can execute.