DOM Inspector Plus

See a UI component you love on any website? Extract it in one click and get an AI-ready prompt you can paste into Claude, v0, Cursor, or ChatGPT to recreate it perfectly. DOM Inspector Plus is the missing link between browsing and building. Instead of screenshotting, manually inspecting, or describing layouts in words — just hover, click, and copy. HOW IT WORKS: 1. Click the extension icon or press Cmd+Shift+X to start inspecting 2. Hover over any element to see it highlighted with its box model 3. Click to extract the full component — not just one element, but the entire logical component boundary with all children 4. Pick your export format and send it to your AI tool of choice WHAT MAKES IT DIFFERENT: - Component-level extraction: Click a button inside a card, and it intelligently selects the whole card. Use [ and ] keys to adjust the boundary. - 90% less noise: Styles are diffed against browser defaults. You only see what matters — no more wading through 300 inherited CSS properties. - CSS to Tailwind mapping: Every style is automatically converted to Tailwind classes. - 5 export formats: AI Prompt (natural language), React JSX with Tailwind, HTML + CSS, Tailwind-only class strings, or structured JSON. - Interaction states: Capture hover, focus, and active states so AI knows exactly what changes on interaction. - Design system extraction: Scan an entire page for its color palette, typography scale, spacing patterns, and more. - Inspection history: Every extraction is auto-saved. Search, favorite, and organize past inspections. AI INTEGRATIONS: - Claude — opens claude.ai with your prompt ready - v0 — optimized for shadcn/ui + Tailwind - Cursor — copies prompt for Cursor chat KEYBOARD SHORTCUTS: - Cmd+Shift+X: Toggle inspector - Cmd+Shift+C: Quick copy - [ / ]: Expand/contract component boundary - Esc: Stop inspecting Free, open source (MIT), and privacy-friendly. No data leaves your browser. No tracking. No accounts. GitHub: https://github.com/Sreelal727/dom-inspector-plus