문제 발견부터
해결까지 — 단 몇 초
VibeWebHelper는 AI가 UI 변경을 이해하는 데 필요한 모든 것을 캡처합니다 — 요소 맥락, 선택자, HTML 구조 및 사용자 지시사항.
Shift+클릭 캡처
Shift를 누른 채 요소를 클릭하세요. CSS 선택자, XPath, HTML 스니펫 및 주변 맥락을 즉시 캡처합니다.
페이지 내 대화상자
클릭한 요소 바로 옆에 가벼운 대화상자가 나타납니다. 자연어로 수정 지시를 입력하세요 — 맥락 전환이 필요 없습니다.
AI 준비 프롬프트
URL, 프레임워크 정보, 선택자, HTML, 지시사항이 포함된 완전한 Markdown 프롬프트를 원클릭 생성. Claude, ChatGPT 등에 바로 붙여넣으세요.
사이드 패널 관리
캡처된 모든 수정사항은 Chrome 사이드 패널에 보관됩니다. 내보내기 전에 검토, 편집 또는 삭제할 수 있습니다.
Markdown & JSON 내보내기
수정 초안을 사람이 읽기 쉬운 Markdown 또는 구조화된 JSON으로 내보내 팀과 공유하거나 개발 파이프라인에 입력하세요.
개인정보 보호 우선 권한
기본적으로 localhost에서만 동작합니다. 외부 사이트는 사이트별로 권한을 부여합니다. 데이터가 브라우저 외부로 나가지 않습니다.
3단계로 더 나은 UI 프롬프트 생성
캡처
로컬 개발 사이트를 평소처럼 탐색하다가 변경할 부분을 발견하면 Shift를 누르고 클릭하세요. 요소가 강조되고 대화상자가 열립니다.
설명
변경하고 싶은 내용을 자연어로 입력하세요. 구체적이든 대략적이든 좋습니다. 페이지 전체에서 여러 수정을 캡처하세요.
내보내기
생성된 프롬프트를 클립보드에 복사하거나 Markdown/JSON으로 다운로드하세요. AI 어시스턴트에 붙여넣으면 완료됩니다.
생각의 속도로
UI 변경사항 배포
설치를 클릭해 GitHub에서 VibeWebHelper를 받아보세요. 무료, 오픈소스, 개인정보 우선. localhost에서 즉시 사용 가능합니다.