Visual QA for designers & AI coders

POKE! the UI.
Tell AI what to fix.

Inspect any component, leave a QA note,and copy the full context to your AI coding agent.No npm, no terminal, no project setup. Just install the extension.

Add to Chrome — FreeSee how it works
localhost:3000
ProfileCard
★ ProfileCardsrc/components/ProfileCard.tsx:24
flex items-center gap-4 rounded-xl p-6
Notes (1)
×
ProfileCard
Change border-radius to 16px and increase font size to 16px
Notes(1)
POKEIT
×

How it works

Three steps. Zero config.

No npm install, no project setup. Works on any React site — localhost or production.

Button
01

Poke

Press ⌥P to activate inspect mode. Hover to see the 3-layer highlight, click to select. Use ↑↓ arrow keys to navigate parent/child elements. POKEIT reads the React fiber tree, computed styles, and source file path.

★ Button src/ui/Button.tsx:12
flex items-center gap-2 px-4 py-2
Change border-radius to 16px
02

Annotate

Type what you want changed — 'Change border-radius to 16px', 'Align to grid'. Stack multiple notes across different components on the same page.

ButtonChange border-radius to 16px
✓ Copied!
[POKEIT] QA Notes
## 1. Button (src/ui/Button.tsx:12)
- Change border-radius to 16px
Component tree: App > ★ Button
03

Copy & Paste

Hit 'Copy all notes for AI agent'. The full context — component tree, styles, source paths, and your notes — lands in your clipboard. Paste into Claude, Cursor, or any AI agent.

Features

Everything AI needs to fix your UI

│Appapp/layout.tsx
│Layout
★ProfileCardcomponents/ProfileCard.tsx:24
├─Avatar
├─UserInfo

React Fiber Tree

Walks the React fiber to extract component names, source file paths, and line numbers — so AI knows exactly where to look and what to edit.

padding16px 24px
border-radius12px
gap8px
⚠padding-overlap: Card + ProfileCard = 40px

Styles & Spacing Warnings

Shows computed CSS values and detects padding/margin overlaps between parent and child — the #1 spacing bug vibe coders make.

[POKEIT] QA Notes
URL: localhost:3000
## 1. ProfileCard
- Change border-radius to 16px and increase font size to 16px
Classes: flex items-center gap-4
Component tree:
App > Layout > ★ ProfileCard
Fix all the above QA notes.

AI-Ready Output

One click copies a structured format with tree, styles, source paths, and your notes. AI agents parse it instantly — no screenshots needed.

1
Button
Change border-radius to 16px
2
Header
Font size 16px
3
Avatar
Border radius 50%

Stack Multiple Notes

Poke as many elements as you want on one page. Each note pins to its component with a numbered marker. Copy everything at once.

Two ways to inspect

Pick your style

POKEIT Inspector ActiveESC to exit
Header
Button
Footer
P!Inspecting...
×
⌥+P

Inspect Mode

Toggle with ⌥P. Cursor changes to crosshair. Hover any element to see the 3-layer highlight + component name in real time. Click to select. Best for exploring a page.

Explore first, annotate later
★ Button src/ui/Button.tsx:12
flex items-center gap-2 px-4 py-2
Type your note...
⌥+Click

Option-Click

Already know which element? ⌥Click it directly. No mode switching — the input popup with full component context opens instantly. Fastest path from bug to note.

Know the target, annotate immediately

Start inspecting in seconds

Add the Chrome extension and Option-click any element. That's the whole setup.

Add to Chrome — Free
No account required Works instantly