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"

エージェントは構造化されたJSONを受け取ります：{ status: "approved" | "changes_requested", edited, path, text }。空間的な注釈付け、テキストフィードバックの入力、または単なる承認が可能です。

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 — クイックスニップ（クリップボードに直接キャプチャ）

• 注釈 — 長方形、矢印、テキスト、タグ、ぼかしブラシ、AIセグメント

• Esc — クリップボードにコピーして閉じる

• Cmd+S — ディスクに保存 + バックグラウンドでAIが整理

AIによる整理にはローカルのVision 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は無料のオープンソースであり、2人の開発者によって構築されています。ワーク