Prompt Formats & Token Compression

You can switch the default prompt output format at any time from the extension popup window.

Output Formats Compared

Format A: Compact Inline (Default & Recommended)

This format is optimized for natural conversation flow and minimum token consumption (~20 tokens).

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

Fields Breakdown:

• [TAG]: The semantic HTML element tag in uppercase (BUTTON, INPUT, DIV, A, SECTION).
• "Text Content": Visible inner text or accessible label, truncated intelligently to avoid bloat.
• (Component: Name): Heuristically extracted component name from React Fiber, Vue internal instances, or Svelte component scopes.
• Selector: Unique, clean CSS selector hierarchy excluding utility noise.

Format B: Detailed Mode

Recommended when debugging complex CSS box-model misalignments, flex/grid issues, or guiding autonomous coding agents that require exact geometric bounds.

【UI Target Element Localization (Detailed)】
• Tag: BUTTON
• Text: "Upgrade to Pro"
• Component: PricingCTA
• Selector: div.pricing-grid > button#pro-cta
• Box Model: 240px × 48px | Margin: 16px 0 0 0 | Padding: 12px 24px
• Styles: Display: inline-flex | Position: relative | Color: rgb(255, 255, 255)
• DOM Hierarchy: Parent: div.pricing-grid | Sibling Count: 3 (Index: 2)

Token Usage Comparison

Input Method	Average Context Tokens	Accuracy / Hallucination Risk
Raw F12 HTML Copy	1,200 ~ 3,500 tokens	High (AI gets distracted by noise)
Vague Natural Language	30 ~ 60 tokens	Very High (Agent edits wrong element)
Vibe Inspect Detailed	80 ~ 120 tokens	Extremely Low
Vibe Inspect Compact	~20 tokens	Zero (Surgical Precision)

Framework Perception Heuristics

Vibe Inspect inspects framework-internal DOM markers in real time:

1. React / Next.js: Traverses __reactFiber$ or __reactInternalInstance$ keys on the DOM node to locate the nearest React Functional / Class component boundary.
2. Vue 2 / Vue 3: Reads __vue__ and __vueParentComponent to extract the component name from options or setup definition.
3. Svelte: Analyzes __svelte_meta attributes.
4. Tailwind Noise Filter: Strips atomic CSS utility classes like p-4 m-2 text-sm flex items-center from the primary selector, prioritizing semantic IDs, custom data attributes (data-testid), and structural hierarchy.