Drawbridge
Visual annotations for AI-assisted coding — making UI iteration 10x faster.
How it works
Select elements, leave comments, run bridge in your editor. The AI handles the rest.
The Problem
2-3 minutes per UI tweak
Describing visual changes to AI took forever. Identify the element, explain what to change, wait for response, check result, repeat.
Annotated screenshots helped, but added their own overhead. And the AI was still guessing which element you meant.
"The AI needed structural context, not just visual context."
A screenshot shows you a button. The DOM tells you it'sdiv.hero-section > button.cta-primary
The Solution
Annotate → Queue → Execute
- Select DOM elements directly in the browser
- Leave comments describing the change
- Queue into a "moat" that syncs to your project
- Run
bridgeto process the entire queue
In Action
Full workflow demo
From annotation to executed changes in under a minute.
Technical Decisions
Key implementation details
- Native screenshot API — Chrome's
captureVisibleTabover html2canvas - Freeform rectangles — For annotations that don't map to a single element
- Dependency detection — Same-element annotations process in order
Results
10x faster iteration
What took 2-3 minutes per change now takes 2-3 minutes for 10 changes.
406
GitHub stars
115
Unique cloners
5
Releases shipped
Featured
AI LABS tutorial
10-minute deep dive on a 107K-subscriber channel.
17K
Views
561
Likes
What I Learned
Key takeaways
- "Go deeper." Visual annotation wasn't enough — you need the image and the selector.
- Build for yourself first. I knew the problem because I lived it daily.
- Open source until proven valuable. Stars and organic coverage validate the problem exists.