[FEATURE] Design Mode: click-to-select an element in the Browser pane and attach it to the prompt
Status Open
Maintainer reply None cached
Workaround ✓ Mentioned in description ↑
Activity 0 comments · opened Sep 2, 2026
Feature description
Add a "Design Mode" to the desktop app's Browser pane: let the user click any element of the running page (dev server preview) and have that element attached as context to their next prompt — similar to Cursor's Design Mode (https://cursor.com/docs/agent/design-mode).
When the user clicks an element, capture and attach:
- selector/xpath, component name, attributes, props
- computed styles
- a screenshot cropped to the element / its layout context
The user then types a change request ("make this button smaller", "change this copy") and the agent edits only the code behind that element, instead of the user having to describe it in words ("the gold button in the third section...").
Why
- Closes the gap between spotting a visual issue and fixing it — pointing is faster and less ambiguous than describing.
- Claude Code already has the two halves: the Browser pane can read/click/screenshot the page, and Artifacts already support element-anchored comments with "Send to Claude". What's missing is the same point-and-ask gesture for a local dev server rendered in the Browser pane.
- Designers/non-developers on a team can request precise UI tweaks without knowing the codebase.
Current workarounds
- Publish the UI as an Artifact and use element-anchored comments + "Send to Claude" (works, but not for a live local app).
- Describe the element verbally and let the agent locate it via read_page/find (slow, error-prone).
Environment
- Claude Code desktop app (macOS), Browser pane enabled