When you ask an AI coding agent to change a page, the instruction has two parts: what should change, and exactly where. A screenshot can help explain appearance; page context can help identify the element.
I’m building VibeQuill, a Chrome extension that connects that visual selection to a local coding agent through MCP. Here’s the workflow it supports.
From the preview to the agent
- Select or annotate an element in your website preview.
- Describe the change you want.
- Send the request together with the element’s selector, text and position, plus the page URL and viewport, through a local MCP service.
The intent is to give the agent both the requested change and a reference to the part of the page it concerns. It supports workflows with Cursor, Claude Code, Codex and Antigravity.
The handoff still needs an active agent
Connecting an MCP service isn’t the same as starting a coding conversation. In the watching-agent workflow, the coding chat must be actively watching for requests. That distinction matters when explaining the setup: the browser selection supplies context, while the coding agent handles the source-code work.
Where does your workflow break?
I’m looking for concrete developer experiences, not just positive feedback. When you use an AI coding agent for visual UI changes, is the main difficulty identifying the element, describing the change, or checking the result? Do screenshots and file paths already solve this well enough for you?
Replies with your current workflow are welcome. If you prefer a short form, there’s an optional 1-minute survey. Please answer only from your own experience.
This post was drafted with AI assistance.
