POKEIT — Visual QA Inspector

Poke the UI, tell AI what to fix. Inspect any element, leave QA notes, and send context to your AI coding agent.

POKEIT — Poke the UI, tell AI what to fix. The visual QA inspector built for AI-powered development workflows. Click any element on your page, leave a note like "Make this 16px" or "Align to grid," and copy the full component context — tree structure, computed styles, and source paths — straight to your AI coding agent. ━━━━━━━━━━━━━━━━━━━━ 🔍 INSPECT Press ⌥P (Option+P) or click the POKEIT icon to activate inspect mode. Hover over any element to see a 3-layer highlight showing margin, padding, and content boundaries. Click to select it. POKEIT reads: • React component tree — names, nesting, and hierarchy • Computed CSS styles — resolved values, not just class names • Source file paths and line numbers (via React fiber debug info) • Spacing overlap warnings between parent and child elements 🗒️ ANNOTATE Leave QA notes directly on any selected element. Describe what needs to change in plain language — "Font size should be 16px," "Remove this margin," "Match the height of the sibling card." Stack as many notes as you need across different components. 📋 COPY & SEND TO AI One click copies everything — component tree, styles, spacing warnings, and all your notes — formatted and ready to paste into ChatGPT, Claude, Cursor, Windsurf, or any AI coding agent. The AI gets full context to make precise code changes. ━━━━━━━━━━━━━━━━━━━━ WHY POKEIT? → For vibe coders & non-developers You see a UI bug but can't describe it precisely enough for the AI to fix. POKEIT bridges that gap — click the problem, describe the fix, and let the AI handle the code. → For designers who vibe code "The padding is wrong" is vague. "ProfileCard (src/components/ProfileCard.tsx:24) has padding 12px, should be 24px" is actionable. POKEIT generates the latter automatically. → For frontend developers Skip the back-and-forth. Get structured, copy-pasteable QA feedback with exact component paths and computed values instead of vague Slack messages. → Zero config Works on any website — production or localhost. No project setup, no dependencies, no build step. Just install and start inspecting. ━━━━━━━━━━━━━━━━━━━━ HOW IT WORKS 1. Install POKEIT from Chrome Web Store 2. Visit any React website (production or localhost) 3. Press ⌥P or click the extension icon 4. Click any element to inspect it 5. Leave a note describing what to change 6. Click "Copy" — paste into your AI agent 7. AI makes the fix with full context ━━━━━━━━━━━━━━━━━━━━ FEATURES ✓ 3-layer box model highlight (margin / padding / content) ✓ React component tree with source file paths ✓ Computed CSS property inspector ✓ Spacing overlap detection (parent ↔ child) ✓ Multiple QA notes per page ✓ One-click copy formatted for AI agents ✓ Works on localhost and production ✓ Keyboard shortcut (⌥P) for quick activation ✓ No sign-up required — completely free ━━━━━━━━━━━━━━━━━━━━ PRIVACY POKEIT runs entirely in your browser. No data is sent to any server. Your page content, styles, and notes stay local. The only network request is Chrome's built-in extension update check. ━━━━━━━━━━━━━━━━━━━━ Made for the vibe coding era. Poke it. Fix it. Ship it.