Element Picker for AI

About

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