Claude Can Now Code Websites “By Sight” Here’s How It Works
TL;DR
The free Chrome extension 'Drawbridge' lets users annotate browser elements directly in screenshots and pass those visual instructions to Claude. It supports screenshots, HTML snippets, and comments as combined input, removing the need for purely text-based commands. Tasks can be stored and organized in a markdown file called mo_tasks.md. This means no more describing UI elements in words – Claude effectively 'sees' what needs to change.
Nauti's Take
Drawbridge is not a quantum leap, but it is a sensible small tool that targets a real workflow pain point. The combination of screenshot annotation, HTML, and free-text comments sounds exactly like the kind of structured context that models like Claude need to work precisely.
Being a free Chrome extension makes it a no-brainer for anyone already using Claude Code. The interesting moment will come when these visual input methods move directly into IDEs or native Claude interfaces – the browser detour is a crutch in the long run.
Briefingshow
Visual context handoff is one of the biggest bottlenecks in AI-assisted web development: anyone who has tried to explain a specific UI element to a model purely in text knows how frustrating that gets. Drawbridge addresses this pragmatically by turning the browser itself into the input interface. That significantly lowers the barrier – including for non-developers who want to communicate design changes directly.
Video
Sources