Web Element Selector
Latest Release GitHub
For AI-assisted UI editing

Select page regions. Write a task. Copy for AI.

Launch on any page, point at the exact UI block you want to change, and export a structured prompt for Codex, Claude Code, Cursor, JSON workflows, or selector-only handoff.

Install Extension Use Bookmarklet Download Zip
Safe mode by default Popup + settings included Works on localhost, staging, and production pages
Web Element Selector interface preview
Workflow

Launch, select, copy

Keep UI feedback precise instead of describing “that card near the top”.

Why this exists

Web Element Selector closes the gap between what you see in the browser and what your coding assistant needs to change in source. It scopes feedback to the exact element, preserves nearby structure, and turns visual direction into a prompt your editor can act on.

Exact targeting

Point at the right region

Click one element or many, navigate with the keyboard, and keep the requested change scoped to the exact UI block.

Prompt-ready

Copy for Codex and beyond

Export prompts for Codex, Claude Code, Cursor, JSON, or selector-only workflows with task text and implementation context.

Privacy-aware

Safe mode first

Text, HTML, and `data-*` stay out of copied output unless you intentionally switch to Full mode.

How it works

The flow is intentionally short: launch Selector, choose the area, describe the change, and paste the result into your AI coding tool.

01

Launch

Open the popup and launch Selector on the current tab.

02

Select

Click the exact part of the page you want to improve, refine, or rebuild.

03

Copy

Write a task, choose your output mode, and copy a prompt formatted for your coding workflow.

See the product

These are the actual current UI surfaces shipped in the project: popup launcher, page overlay, prompt copy panel, and settings.

Popup screenshot
Overlay screenshot
Copy panel screenshot
Options screenshot

Install the extension

The extension path is the most stable way to use Web Element Selector. The bookmarklet is still available if you prefer it.

Chrome / Edge

  1. Open chrome://extensions or edge://extensions
  2. Turn on Developer mode
  3. Click Load unpacked
  4. Select the web-element-selector folder
  5. Pin the extension and press Launch Selector

Bookmarklet

Preparing bookmarklet…
Drag this button into your bookmarks bar, then click it on any page to inject the selector.

What you can control

Selector supports output targeting, export detail level, nearby context, per-element notes, and saved defaults from the settings page.

Target AI

Codex, Claude, Cursor, JSON

Switch the output shape to match the tool you plan to paste into.

Context

Focused or nearby

Choose whether the export should stay tight on the selected node or include more layout context.

Defaults

Saved launch settings

Set default target AI, export mode, context mode, and task text once from the options page.