Drawbridge — Design skill for Claude Code

Drawbridge

Visual annotations for AI coding assistants.

Drawbridge is a Chrome extension that lets you click on your running app, leave Figma-style comments, capture screenshots, and turn those notes into local task files your AI coding tools can act on.

It is built for browser-to-code feedback loops with Cursor, Claude Code, Codex, and Windsurf.

What It Does

• Annotate visible UI elements directly in the browser.
• Draw freeform rectangles for layout, spacing, and visual bugs that are not tied to a single DOM node.
• Capture selector data, element context, bounding boxes, and screenshots with each note.
• Sync tasks into your project as readable markdown and structured JSON.
• Track task status through to do, doing, and done.
• Deploy the /bridge workflow for Claude Code, Codex, and Windsurf, plus Drawbridge workflow rules for AI agents.
• Recover cleanly after extension reloads: the toolbar icon can inject missing scripts into existing tabs and toggles the existing drawer instead of stacking duplicates.

Setup

1. Install The Extension

1. Clone or download this repo.
2. Open Chrome and go to chrome://extensions.
3. Turn on Developer mode.
4. Click Load unpacked.
5. Select this folder: drawbridge/chrome-extension/.
6. Pin Drawbridge from Chrome's Extensions menu.

For local `file://` pages, open the Drawbridge extension details in Chrome and enable Allow access to file URLs.


2. Connect Your Project

1. Open the app or page you want to annotate.
2. Click the Drawbridge toolbar icon.
3. Click Connect Project in the drawer.
4. Select the local project root for that app.
5. Approve Chrome's file access prompt.

Drawbridge creates and maintains files in your project so your AI tool can read the work queue.

3. Process The Queue

After adding annotations, open your project in Cursor, Claude Code, Codex, or Windsurf and ru