Snip

Claude Code를 위한 시각적 모드입니다. Cursor, Windsurf, Cline 및 기타 모든 AI 코딩 CLI와도 작동합니다.

Snip을 설치하고 snip setup을 실행하면, AI 코딩 에이전트가 텍스트로 설명하는 대신 다이어그램과 미리보기를 렌더링하기 시작합니다. 아키텍처는 시퀀스 다이어그램으로, 데이터 모델은 ER 다이어그램으로, UI 컴포넌트는 렌더링된 미리보기로 보여줍니다. 모든 것이 시각적이고 자동으로 이루어집니다.

Claude가 렌더링한 내용을 검토하고 승인하거나 화면에 직접 주석을 달 수 있습니다. 잘못된 부분을 원으로 표시하고, 화살표를 추가하고, 메모를 작성하세요. Claude는 사용자의 주석을 확인하고 반복 수정합니다.

작동 방식

Snip은 메뉴 막대/시스템 트레이 앱으로 실행되며, 모든 AI 코딩 에이전트가 직접 호출할 수 있는 CLI를 제공합니다:

# Claude writes a Mermaid diagram to a file, then renders it for your review
snip render --format mermaid < architecture.mmd

# Claude renders an HTML component preview
snip render --format html < preview.html

# Open any image for annotated review
snip open screenshot.png --message "Is the layout correct?"

# Search your screenshot library
snip search "login page error"

에이전트는 { status: "approved" | "changes_requested", edited, path, text }와 같은 구조화된 JSON을 반환받습니다. 공간적으로 주석을 달거나, 텍스트 피드백을 입력하거나, 단순히 승인할 수 있습니다.

Claude Code를 위해 제작되었습니다. 또한 Cursor, Windsurf, Cline 및 셸 명령을 실행할 수 있는 모든 도구와 호환됩니다. 셸 접근 권한이 없는 에이전트를 위한 MCP 서버를 제공합니다.

Related MCP server: Screenshot MCP Server

설치

macOS (Homebrew)

brew install --cask rixinhahaha/snip/snip

또는 Releases에서 DMG 파일을 다운로드하세요 (Apple Silicon).

Linux

Releases에서 다운로드하세요:

• AppImage (포터블, 모든 배포판) — Snip-x.y.z-x86_64.AppImage

• deb (Ubuntu/Debian) — Snip-x.y.z-amd64.deb

Claude Code와 함께 사용하기

snip setup

이것으로 끝입니다. snip setup은 Claude Code가 시각적 출력(규칙, /diagram 스킬 및 권한)을 자동으로 사용하도록 구성합니다. 다음에 아키텍처, 데이터 모델 또는 흐름에 대해 Claude에게 물어보면 텍스트로 설명하는 대신 다이어그램을 렌더링합니다.

Claude Code 대화에서 /diagram을 사용하여 논의 중인 내용을 시각화해 보세요.

CLI 참조

모든 검토 명령어(render, open)는 사용자가 작업을 마칠 때까지 차단되며 구조화된 JSON을 반환합니다.

MCP 서버

셸 접근 권한이 없는 에이전트(Claude Desktop, 호스팅 환경)를 위해 Snip은 MCP 서버도 제공합니다:

{
  "mcpServers": {
    "snip": {
      "command": "node",
      "args": ["/path/to/snip/src/mcp/server.js"]
    }
  }
}

MCP 서버는 render_diagram, open_in_snip, search_screenshots, list_screenshots, get_screenshot, transcribe_screenshot, organize_screenshot, get_categories, install_extension과 동일한 기능을 노출합니다.

스크린샷 도구 기능

Snip은 그 자체로 완벽한 스크린샷 및 주석 앱입니다:

• Cmd+Shift+2 (macOS) / Ctrl+Shift+2 (Linux) — 영역 선택 또는 창 캡처

• Cmd+Shift+1 / Ctrl+Shift+1 — 빠른 Snip (클립보드로 바로 캡처)

• 주석 — 사각형, 화살표, 텍스트, 태그, 블러 브러시, AI 세그먼트

• Esc — 클립보드에 복사 후 닫기

• Cmd+S — 디스크에 저장 + AI가 백그라운드에서 정리

AI 정리는 로컬 비전 LLM(Ollama 사용)을 사용하여 저장된 모든 스크린샷의 이름을 지정하고, 분류하고, 태그를 지정합니다. 의미론적 검색을 통해 스크린샷의 내용을 설명하여 찾을 수 있습니다.

주요 단축키

Linux에서는 Cmd를 Ctrl로 대체하세요.

개발

npm install
npm run rebuild   # compile native modules (macOS)
npm start         # launch (tray icon appears)

macOS 14+ 또는 Linux (Wayland), **Node.js 18+**가 필요합니다.

문서

기술 스택

Electron 33 / Fabric.js 7 / Mermaid.js 11 / Ollama (로컬 LLM) / HuggingFace Transformers.js / SlimSAM (ONNX)

모든 AI는 로컬에서 실행되므로 핵심 기능을 위해 클라우드 API가 필요하지 않습니다.

후원

Snip은 무료 오픈 소스이며 두 명의 개발자가 만들었습니다. 워크플로우에 도움이 된다면 프로젝트 후원을 고려해 주세요.

후원금은 다음 비용을 충당하는 데 사용됩니다:

• Apple Developer Program — macOS가 앱을 차단하지 않도록 코드 서명 및 공증에 필요

• CI/CD 비용 — macOS 및 Linux용 자동화된 빌드, 테스트 및 릴리스 파이프라인

• 지속적인 개발 — 새로운 주석 도구, 더 나은 AI 통합, Linux 개선 및 버그 수정

모든 기여는 Snip을 유지하고 개선하는 데 도움이 됩니다. 감사합니다!

라이선스

MIT