<br>
<p align="center">
<picture>
<source media="(prefers-color-scheme: dark)" srcset="docs/public/brand/spotnote-logo-dark.svg">
<img src="https://raw.githubusercontent.com/harukikuri/spotnote/HEAD/docs/public/brand/spotnote-logo-light.svg" alt="Spotnote" width="180">
</picture>
</p>
<br>
<p align="center">
<a href="https://www.npmjs.com/package/spotnote"><img src="https://img.shields.io/npm/v/spotnote" alt="npm version"></a>
<a href="https://github.com/harukikuri/spotnote/actions/workflows/e2e.yml?query=branch%3Amain"><img src="https://github.com/harukikuri/spotnote/actions/workflows/e2e.yml/badge.svg?branch=main" alt="E2E tests"></a>
</p>
**Spotnote**는 코딩 에이전트를 위한 UI 피드백을 제공하는 Vite 플러그인입니다. 실행 중인 앱의 아무 요소를 클릭하고, 무엇이 변경되어야 하는지 작성한 후, 해당 요소의 정확한 파일, 줄, 열 정보를 에이전트에게 전달할 수 있습니다.
기능 (Features)
- 정확한 위치 지정 (Exact spot). UI 피드백이 소스 코드의 정확한 파일, 줄, 열을 가리키므로, 에이전트가 검색할 필요가 없습니다.
- 모든 Vite 프레임워크 지원. React, Vue, Svelte, Solid, Astro 등 무엇이든 가능합니다.
- 임포트 불필요 (Zero imports). 앱 코드에 임포트할 것이 전혀 없습니다.
- 프로덕션 환경 유지 (Production stays clean). Spotnote는
vite dev에서만 실행되며, 스테이징 빌드에서는 사용자가 켜야 합니다.
- 모든 것이 로컬에 저장됩니다. 계정이나 클라우드가 필요 없습니다.
요구 사항 (Requirements)
설치 (Install)
사용법 (Usage)
import spotnote from "spotnote";
...
개발 서버를 시작하고 왼쪽 하단 모니터를 클릭하세요. 요소를 클릭하고 변경되어야 할 내용을 입력한 후 Enter 키를 누릅니다. 생성된 프롬프트는 클립보드에 복사되므로, Claude Code, Cursor, Codex 또는 다른 채팅 도구에 붙여넣기만 하면 됩니다.
출력 (Output)
Spotnote가 에이전트에 붙여넣을 준비가 된 노트용으로 복사하는 프롬프트입니다:
## Request
Make the padding bigger
...
모든 필드는 Prompt Format에서 설명됩니다.
MCP (로컬 에이전트)
복사 및 붙여넣기는 건너뛰세요: 사용자가 작성하는 대로 에이전트가 메모를 가져갑니다.
claude mcp add --scope user spotnote -- npx -y spotnote-mcp
그런 다음 에이전트에게 요청하세요: Watch my Spotnote notes. Codex, Cursor 및 Gemini CLI.
_ MCP가 연결된 상태에서: 버튼을 클릭하고 '알약 모양(pill shape)'을 요청하면 Claude Code가 메모를 가져와 변경 사항을 적용하고 그에 대해 답변합니다. 브라우저를 벗어날 필요가 없습니다._
스테이징 빌드 (Staging builds)
디자이너나 검토자가 스테이징 또는 미리 보기 배포(preview deploy)에 메모를 작성하고 팀에 붙여넣을 수 있습니다:
spotnote({ build: ["staging"] })
vite build --mode staging은 Spotnote를 포함하지만, vite build는 여전히 포함하지 않습니다. 각 프롬프트에는 빌드가 이루어진 커밋(commit) 이름도 명시됩니다. 자세한 내용은 Staging Builds를 참조하세요.
_ 스테이징 빌드의 경우: 디자이너가 메모를 작성하여 팀 채팅에 붙여넣으면, 개발자의 에이전트가 파일과 라인으로 바로 이동합니다._
웹훅 (Webhook)
메모가 작성될 때마다 사용자가 지정한 URL로 전송할 수 있습니다. 복사 및 붙여넣기 없이 팀 채팅이나 이슈 트래커에 게시할 수 있습니다.
spotnote({ build: ["staging"], webhook: "https://feedback.example.com/spotnote" })
각 메모는 텍스트, 페이지, 파일 및 라인, 커밋, 프롬프트를 포함하는 JSON 형식으로 도착합니다. 자세한 내용은 Webhook을 참조하세요.
웹훅이 연결된 스테이징 빌드의 경우: Enter 키를 누르면 메모가 파일과 라인 정보와 함께 팀 채팅에 게시됩니다.
문서 (Docs)
전체 문서는 여기에서 확인할 수 있습니다.
라이선스 (License)
MIT