POKE! the UI. Tell AI what to fix.
고치고 싶은 UI를 폭! 찍고 AI에게 수정 요청하세요.
POKEIT is a free Chrome extension that turns your browser into a visual QA tool for AI-powered development. Inspect any element, leave a QA note in plain language, and copy the full component context — tree, computed styles, source paths — straight to your AI coding agent. No npm packages, no project config — just install the extension and go.
POKEIT은 브라우저를 AI 개발용 비주얼 QA 도구로 바꿔주는 크롬 익스텐션입니다. 고치고 싶은 UI를 폭! 찍으면 React 트리·스타일·소스 경로가 통째로 복사되고, 그대로 AI 에이전트한테 넘기면 됩니다. npm 설치 없이, 프로젝트 세팅 없이, 어떤 React 사이트에서든 익스텐션만 깔면 바로 동작합니다.
Press ⌥P or Option-click any element. POKEIT reads the React component tree, computed styles, and source file location. Use ↑ ↓ arrow keys to navigate to parent or child elements.
⌥P 누르거나 Option-클릭하면 끝. 컴포넌트 트리, 스타일, 소스 위치를 알아서 읽어옵니다. ↑ ↓ 화살표 키로 부모/자식 요소를 탐색할 수 있습니다.
Leave a note — "Make this 16px" or "Align to grid". Stack as many notes as you need. "이 컴포넌트 사이 갭을 24px로 줄여줘" — 이런 식으로 메모 남기면 됩니다. 여러 개 쌓아도 OK.
One click copies all notes with full component context. Paste into Claude Code, Cursor, or any AI agent. 복사 한 번이면 노트 + 컴포넌트 컨텍스트가 통째로 클립보드에. Claude Code, Cursor 등 아무데나 붙여넣으면 됩니다.
| Feature | Description |
|---|---|
| Component Tree | Reads React fiber — component names, source file paths, and line numbers. React fiber를 읽어서 컴포넌트 이름, 소스 파일 경로, 라인 번호까지 잡아줍니다. |
| Parent Component | Clicking a plain HTML element (div, span) resolves the nearest React component — shows "ProfileCard > div" instead of just "div". 일반 HTML 요소를 클릭하면 가장 가까운 React 컴포넌트를 찾아서 "ProfileCard > div"처럼 보여줍니다. |
| Computed Styles | Shows resolved CSS values and detects spacing overlaps between parent and child. 계산된 CSS 값을 보여주고, 부모-자식 간 간격 겹침도 감지합니다. |
| Keyboard Navigation | Use ↑ ↓ to traverse parent/child elements without re-clicking. ↑ ↓ 키로 부모/자식 요소를 마우스 없이 탐색할 수 있습니다. |
| Smart Class Filter | Filters out hashed class names (CSS Modules, styled-components, Emotion, StyleX) and shows clean Tailwind utilities. 해시된 클래스명은 자동 필터링하고, Tailwind 유틸리티는 깔끔하게 보여줍니다. |
| QA Notes | Leave plain-language notes on any element. Notes are scoped per pathname + query state + hash so ?tab=weekly and ?tab=monthly keep separate buckets, while tracking parameters (utm_*, gclid, fbclid, …) are auto-stripped. SPA route changes via pushState are detected, so the panel always reflects the current view. 아무 요소에나 메모를 남길 수 있고, pathname + 쿼리스트링 + hash 단위로 분리되어 저장됩니다 — ?tab=weekly와 ?tab=monthly는 서로 다른 버킷이고, utm_* 같은 트래킹 파라미터는 자동으로 무시됩니다. SPA 라우트 변경(pushState)도 감지해서 패널이 항상 현재 화면 컨텍스트를 보여줍니다. |
| One-Click Copy | Copies the URL, full component tree, computed styles, inner text (auto-extracted even for wrapper divs), saved notes, AND whatever you're still typing in the input — formatted for AI agents. The output header is a natural-language phrase so the AI reads it as feedback context rather than as a project label. URL, 컴포넌트 트리, 스타일, 내부 텍스트(래퍼 div여도 자동 추출), 저장된 노트, 그리고 아직 Enter 안 누른 입력 중인 메모까지 한 번에 복사됩니다. AI 에이전트가 정확히 "QA 피드백"으로 인식하도록 자연어 헤더로 출력합니다. |
| Disabled buttons inspectable | Elements with disabled, aria-disabled, or pointer-events: none are skipped by the browser's hit-testing, so most inspectors grab the parent instead. POKEIT walks inside the parent to select the actual hit-blocked element — without affecting normal selection. disabled · aria-disabled · pointer-events: none 요소는 보통의 인스펙터가 부모만 잡지만, POKEIT은 부모 안쪽을 직접 훑어서 그 요소를 정확히 선택합니다. 일반 선택 동작에는 영향 없습니다. |
| Style-isolated UI | The extension's panel and popups always render in system font, immune to the host page's global * { font-family } or letter-spacing rules. 페이지의 글로벌 CSS(* 셀렉터, letter-spacing 등)가 익스텐션 UI로 새어들어오지 못하도록 격리해서, 어떤 사이트에서도 일관된 시스템 폰트로 표시됩니다. |
| Screenshot | Download a screenshot of the current page with one click from the QA panel. QA 패널에서 클릭 한 번으로 현재 페이지 스크린샷을 저장할 수 있습니다. |
| Zero Config | Works on any React site — production or localhost. No project setup required. 어떤 React 사이트든 바로 동작합니다. 프로젝트별 설정이 필요 없습니다. |
Chrome Web Store — 클릭 한 번이면 끝!
수동 설치를 원하시면 pokeit-extension.zip을 다운로드해서 chrome://extensions → 개발자 모드 → 압축해제된 확장 프로그램 로드로 설치할 수 있습니다.
I bought the domain for 5 years — POKEIT is here to stay. Actively developing new features and improvements. pokeit.app 도메인을 5년 샀습니다... — POKEIT 포킷은 모두가 더 예쁜 디자인을 할 수 있도록 계속해서 디벨롭하겠습니다!
Got feedback, ideas, or bugs to report? Reach out:
의견이나 버그 제보 언제든 환영합니다:
- KR: @0x3den
- EN: @sejinxjung
- LinkedIn: sejinxjung