VibeInspect: Pick Element, Copy AI Prompt

One-click copy compact AI prompts from web elements. Locate UI instantly—the efficient Vibe Coding tool.

VibeInspect is an open-source, token-optimized DOM inspector extension designed for modern frontend engineering and Vibe Coding. Instantly extract precise component names, box-model metrics, computed CSS, and DOM hierarchy into clean, concise AI prompts for modern AI coding assistants and LLM-powered development workflows—eliminating manual screenshots and vague explanations. ━━━━━━━━━━━━━━━━━━━━━━━━ 【Copied Prompt Example (Pinpoint Mode)】 `UserProfileCard > div#avatar.rounded-full "John Doe"` Feed it directly to your AI: "Add 4px padding and fix the mobile alignment." Or switch to Detailed Mode for layout bugs: - Box Model: 240px × 48px | m: 16px 0 0 0 | p: 12px 24px | b: 1px - Styles: inline-flex | relative | color: #fff | font: 14px Inter - Hierarchy: Parent: <div.card-grid> | Siblings: 2/5 | Children: 2 ━━━━━━━━━━━━━━━━━━━━━━━━ 【Why Choose VibeInspect?】 🚀 Zero-Hallucination AI Coding Feed your AI assistant exact CSS selector paths, semantic test IDs, and component stacks. AI agents locate and edit target components accurately on the first attempt without guessing. 💎 3 Configurable Output Formats (Token-Optimized) Preserve your context window with precision formatting: • Pinpoint Mode (Default & AI-Native): Ultra-compact (~10 tokens). Clean component identity + unique selector. Built to embed directly into conversation prompts. • Compact Mode: Balanced single-line code chip with clean DOM path and key attributes (`data-testid`, `name`, `role`). • Detailed Mode: Full architectural diagnostic with DevTools-grade box model, computed styles, and DOM hierarchy for complex layout refactoring. ⚛️ Deep Framework Perception Automatically identifies React Fiber components, Vue 2/3 instances, Svelte scope hashes, and Angular directives while intelligently stripping utility-class clutter (such as verbose Tailwind CSS chains). 📦 DevTools-Grade Box Model Accurately visualizes and measures Margins, Borders, Paddings, and coordinates with real-time CSS transform, viewport scale, and zoom compensation. ⚡ Pure Keyboard Flow & Hierarchy Traversal Climb and navigate DOM trees without touching the mouse: • Navigate parent (↑), child (↓, with smart WeakMap focus memory), and sibling (← / →) elements. • Built-in navigation presets: Default (Arrows), WASD Style (left hand on keyboard, right hand on mouse), and Vim Style (H/J/K/L). • Interactive in-popup keybinding recorder for 100% custom workflows. • 🖱️ Middle-Click Pick: Click mouse wheel to instantly copy and exit (ideal for Linux Primary Selection). 🔄 Continuous vs. Single-Shot Modes Choose between Continuous Inspection (batch-inspect and copy multiple UI elements in one flow) or Single-Shot Mode (instant click, copy, and auto-exit). 🛡️ Domain Whitelist & Privacy-First Keep your browsing clean. Configure wildcard domain whitelists (`localhost`, `*.dev.local`) or toggle "Allow on All Websites" with one switch. Runs 100% locally with zero analytics, zero network requests, and auto-masked password fields. 🎨 Ergonomics & Global Ready • Fully customizable wake shortcuts (via chrome://extensions/shortcuts). • System-adaptive Dual Themes (Dark & Light mode). • Localized into 15 languages out of the box. ━━━━━━━━━━━━━━━━━━━━━━━━ 【Default Keyboard Shortcuts】 • Ctrl + Shift + X (Mac: Cmd + Shift + X): Toggle continuous picking mode • Alt + Shift + X: Single-shot element pick & copy • Middle Click (Configurable): Instant pick element & exit • ↑ (or W / K): Jump to parent element • ↓ (or S / J): Drill into child element (with memory) • ← / → (or A / D / H / L): Switch between sibling elements • Esc: Exit inspector ━━━━━━━━━━━━━━━━━━━━━━━━ 【Perfect For】 • AI Coding Workflows: Supercharge prompts for any modern AI coding assistant, LLM chat, or autonomous agent. • Frontend & Full-Stack Devs: Instantly track down component boundaries, layout regressions, and CSS bugs. • QA & Product Designers: Grab exact element selectors, test IDs, and spacing metadata for bug tickets in seconds. Open-source and distributed under the permissive MIT license.