Precision DOM Element Picker for AI Coding Agents

Precision Token Compression in Action

Zero Hallucinations • 98% Token Reduction

Traditional Raw DOM (F12 Copy)

~1,450 Tokens • Hallucination Prone

<div class="pricing-card flex flex-col p-6 rounded-2xl bg-slate-900 border border-indigo-500/20 shadow-2xl hover:border-indigo-500/40 transition-all duration-300 relative overflow-hidden group">
  <div class="absolute inset-0 bg-gradient-to-b from-indigo-500/5 to-transparent pointer-events-none"></div>
  <div class="flex items-center justify-between mb-4">
    <span class="text-xs font-semibold px-2.5 py-1 rounded-full bg-indigo-500/10 text-indigo-400 border border-indigo-500/20">Popular</span>
  </div>
  <button id="pro-cta" data-action="checkout" class="w-full py-3 px-6 rounded-xl bg-gradient-to-r from-indigo-500 to-indigo-600 hover:from-indigo-600 hover:to-indigo-700 text-white font-medium shadow-lg shadow-indigo-500/25 active:scale-[0.98] transition-all flex items-center justify-center gap-2 cursor-pointer">
    <svg class="w-4 h-4 text-indigo-200 animate-pulse" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
    </svg>
    <span>Upgrade to Pro</span>
  </button>
</div>

Vibe Inspect Prompt (1-Click Copy)

~20 Tokens • Exact Component & Selector

`[BUTTON] "Upgrade to Pro" (Component: PricingCTA) Selector: div.pricing-grid > button#pro-cta`

Copy PromptFeed this directly into Cursor Composer, Claude Code CLI, or Windsurf Cascade.

DevTools-Grade Box Model HUD

Pixel-perfect visual overlay separating Margin (Amber), Border (Yellow), Padding (Green), and Content (Blue). Automatically handles CSS zoom, iframe coordinates, and transforms.

margin: 16px 0

border: 1px solid

padding: 12px 24px

content: 240 × 48 px

[BUTTON] "Upgrade to Pro"

Keyboard DOM Navigation

Drill into nested elements or ascend to parent containers without misclicking tiny icons. Backed by smart WeakMap memory.

Climb Parent↑ Up Arrow

Drill Child↓ Down Arrow

Cycle Siblings← / → Arrows

DismissEsc

Framework Heuristic Perception

Auto-detects React Fiber, Vue 3, Svelte, and Next.js component names. Automatically strips away noisy Tailwind utility classes.

React FiberVue 3SvelteNext.js

100% Local Privacy & Whitelist Guard

Zero external network requests. Zero telemetry. Activated only on localhost by default, with custom wildcard domain rules.

0 Remote Calls•localhost only•*.dev.local supported

Engineered for Modern AI Coding Workflows

Seamlessly compatible with all major AI coding IDEs, terminals, and autonomous agents.

Cursor (Composer)

Paste in Chat / Composer

Directly target components and generate surgical inline code diffs.

Claude Code (CLI)

Terminal CLI Prompt

Pinpoint exact selectors in terminal workflows without manual typing.

Windsurf (Cascade)

Cascade Chat Prompt

Resolve component file locations directly from the extracted name.

GitHub Copilot

Sidebar Chat Input

Instantly bind events and apply styled patches with exact element scope.

Cline / Roo Code

Autonomous Task Loop

Feeds surgical element coordinates and exact selectors to autonomous coding agents.

Aider / Continue

Terminal Pair Programming

Injects box-model tokens directly into commit-driven pair programming workflows.

VIBE CODING WORKFLOW

The Modern Vibe Coding Workflow

From live browser elements to surgical AI code refactoring in 3 core steps and 5 fluid gestures.

Ultra-Fast 3-Stage Pipeline

01. Hover & Inspect

Hover Any Element

[Button Card (240x48)]

Real-time box-model HUD overlay (240×48)

02. 1-Click Capture

Click to Extract Prompt

Prompt Copied to Clipboard (~20 Tokens)

Compressed structural prompt (~20 Tokens)

03. Zero Hallucination

Paste into AI Agent

Cursor / Claude Surgical Code Refactor!

Cursor / Claude / Windsurf edits exact code

5-Step Fluid Interaction

01Activate

Instant Global Hotkey

Activate the inspector overlay anywhere on localhost or staging web apps with a single global keystroke.

Ctrl + Shift + X (macOS: Cmd + Shift + X)

02Inspect HUD

DevTools-Grade Box Model

Inspect Margin (orange), Border (yellow), Padding (green), and Content (blue) with automatic transform & zoom handling.

Margin · Border · Padding · Content

03DOM Cruise

Arrow Key Navigation

Never struggle clicking small buttons or deep wrappers. Press ↑ to climb parents and ↓ to drill into child nodes.

↑ Climb Parent · ↓ Drill Child · Esc Dismiss

04Extract

1-Click Prompt Extraction

Click any element to strip thousands of lines of DOM noise, capturing only identity and dimensions (saving 98% tokens).

~20 Tokens · Copied to clipboard automatically

05Execute

Zero-Hallucination AI Editing

Paste directly into Cursor Composer or Claude Code. AI locks directly onto the matching component file without guesswork.

Zero Hallucinations · Surgical Code Diff