Item logo image for Element Picker for AI

Element Picker for AI

Item media 1 (screenshot) for Element Picker for AI

Overview

Helpful element picker for your AI prompts. Press Shift+Ctrl and click to select an element.

Element Picker for AI is a lightweight developer tool that lets you quickly select any element on a webpage and copy structured selector data to your clipboard — perfect for AI prompts, debugging, and frontend work. ✨ How it works Open your website (on localhost) Press Shift + Ctrl to activate picker mode Click on any HTML element A JSON payload is instantly copied to your clipboard Picker mode exits and the page returns to normal 📦 What gets copied When you click an element, the extension generates a clean JSON object including: A robust primary CSS selector Alternative selector candidates (ID, classes, attributes) Tag name, id, class list Text content (trimmed) Outer HTML snippet (trimmed) Key computed styles (background, color, border, padding, font, etc.) Page URL and timestamp This data is ideal for: Writing precise AI / Codex / Claude prompts Refactoring UI components Debugging CSS or layout issues Communicating exact UI targets to teammates or tools 🧠 Designed for developers & AI workflows No popup UI No page reloads No configuration Zero external libraries Minimal permissions 🔐 Privacy & security No data is collected No data is stored No data is sent anywhere All processing happens locally in your browser Clipboard access is used only to copy the generated JSON when you pick an element 🛠 Typical use cases “Change this exact button color” (AI prompt) “Refactor this component” (AI + selector) “Which CSS rule affects this element?” “Give me the selector for this element” ⌨️ Keyboard shortcuts Shift + Ctrl → activate picker mode Click → pick element & copy JSON Esc → cancel picker mode

Details

  • Version
    1.0.0
  • Updated
    February 22, 2026
  • Size
    18.88KiB
  • Languages
    English
  • Developer
    Email
    oualid.moussaid1@gmail.com
  • Non-trader
    This developer has not identified itself as a trader. For consumers in the European Union, please note that consumer rights do not apply to contracts between you and this developer.

Privacy

Manage extensions and learn how they're being used in your organization
The developer has disclosed that it will not collect or use your data.

This developer declares that your data is

  • Not being sold to third parties, outside of the approved use cases
  • Not being used or transferred for purposes that are unrelated to the item's core functionality
  • Not being used or transferred to determine creditworthiness or for lending purposes

Related

Element to LLM - DOM Capture for AI

5.0

Capture DOM elements with full context for AI debugging and analysis

UISelector2AI

4.7

UISelector2AI extracts CSS selectors and HTML and converts them into AI-ready prompts for updating UI code or tests.

Smart Element Picker

0.0

Pick an element on the current page, copy selector details, and exit with Esc.

Browser Annotations

4.0

A Chrome DevTools extension to send feedback to your coding agent

DOM Extractor

0.0

Select elements or areas and copy their DOM structure and CSS to ask AI models for help.

Web Element Selector

5.0

Advanced element locator with AI-powered xpath and css selector generation. Supports ChatGPT, Gemini, DeepSeek, and Claude.

Quick Copy DOM

5.0

Visually select any element on the page and instantly copy its HTML to clipboard. Like DevTools element inspector, but faster.

Pluck

1.0

Select any DOM element and copy it as a structured LLM prompt or Figma component

UIAnnotator — Annotate any website for AI agents

5.0

Annotate any webpage for AI agents. Capture CSS selectors, styles & screenshots. Paste into Claude or Cursor for instant fixes.

HTMLPicker - HTML Color Picker

0.0

Pick any element to extract colors (HEX, RGB, HSL), CSS, fonts and layout. Generate AI prompts for vibe coding.

Element Select - AI Agent Annotation Tool

5.0

Annotate web elements and generate structured feedback for AI coding agents

Prompt Picker - Pick element, annotate and get prompt

5.0

Pick and annotate elements on any web page, then copy as structured prompts for AI coding agents like Claude Code, Codex & Cursor.

Element to LLM - DOM Capture for AI

5.0

Capture DOM elements with full context for AI debugging and analysis

UISelector2AI

4.7

UISelector2AI extracts CSS selectors and HTML and converts them into AI-ready prompts for updating UI code or tests.

Smart Element Picker

0.0

Pick an element on the current page, copy selector details, and exit with Esc.

Browser Annotations

4.0

A Chrome DevTools extension to send feedback to your coding agent

DOM Extractor

0.0

Select elements or areas and copy their DOM structure and CSS to ask AI models for help.

Web Element Selector

5.0

Advanced element locator with AI-powered xpath and css selector generation. Supports ChatGPT, Gemini, DeepSeek, and Claude.

Quick Copy DOM

5.0

Visually select any element on the page and instantly copy its HTML to clipboard. Like DevTools element inspector, but faster.

Pluck

1.0

Select any DOM element and copy it as a structured LLM prompt or Figma component

Google apps