Snip

Modo visual para Claude Code. También funciona con Cursor, Windsurf, Cline y cualquier CLI de programación con IA.

Instala Snip, ejecuta snip setup y tu agente de programación con IA comenzará a renderizar diagramas y vistas previas en lugar de describirlos en texto. ¿Arquitectura? Diagrama de secuencia. ¿Modelo de datos? Diagrama ER. ¿Componente de interfaz de usuario? Vista previa renderizada. Todo visual, todo automático.

Revisas lo que renderiza Claude: lo apruebas o lo anotas directamente en pantalla. Rodea lo que esté mal, añade una flecha, escribe una nota. Claude ve tus anotaciones e itera.

Cómo funciona

Snip se ejecuta como una aplicación de barra de menús / bandeja del sistema con una CLI que cualquier agente de programación con IA puede llamar directamente:

# 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"

El agente recibe un JSON estructurado de vuelta: { status: "approved" | "changes_requested", edited, path, text }. Puedes anotar espacialmente, escribir comentarios de texto o simplemente aprobar.

Creado para Claude Code. También funciona con Cursor, Windsurf, Cline y cualquier cosa que pueda ejecutar un comando de shell. Incluye un servidor MCP para agentes sin acceso a shell.

Related MCP server: Screenshot MCP Server

Instalación

macOS (Homebrew)

brew install --cask rixinhahaha/snip/snip

O descarga el DMG desde Releases (Apple Silicon).

Linux

Descárgalo desde Releases:

• AppImage (portátil, cualquier distribución) — Snip-x.y.z-x86_64.AppImage

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

Uso con Claude Code

snip setup

Eso es todo. snip setup configura Claude Code para usar la salida visual automáticamente: reglas, la habilidad /diagram y permisos. La próxima vez que le preguntes a Claude sobre arquitectura, modelos de datos o flujos, renderizará un diagrama en lugar de describirlo en texto.

Prueba /diagram en cualquier conversación de Claude Code para visualizar lo que estás discutiendo.

Referencia de CLI

Todos los comandos de revisión (render, open) se bloquean hasta que el usuario termina y devuelven un JSON estructurado.

Servidor MCP

Para agentes sin acceso a shell (Claude Desktop, entornos alojados), Snip también incluye un servidor MCP:

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

El servidor MCP expone las mismas capacidades: render_diagram, open_in_snip, search_screenshots, list_screenshots, get_screenshot, transcribe_screenshot, organize_screenshot, get_categories, install_extension.

También es una herramienta de captura de pantalla

Snip es una aplicación completa de captura de pantalla y anotación por sí misma:

• Cmd+Shift+2 (macOS) / Ctrl+Shift+2 (Linux) — Captura con selección de región o ajuste de ventana

• Cmd+Shift+1 / Ctrl+Shift+1 — Quick Snip (captura directamente al portapapeles)

• Anotar — Rectángulo, flecha, texto, etiqueta, pincel de desenfoque, segmento de IA

• Esc — Copiar al portapapeles y cerrar

• Cmd+S — Guardar en disco + IA organiza en segundo plano

La organización por IA utiliza un LLM de visión local (a través de Ollama) para nombrar, categorizar y etiquetar cada captura de pantalla guardada. La búsqueda semántica encuentra cualquier captura de pantalla describiendo lo que había en ella.

Atajos de teclado clave

En Linux, reemplaza Cmd por Ctrl.

Desarrollo

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

Requiere macOS 14+ o Linux (Wayland), Node.js 18+.

Documentación

Stack tecnológico

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

Toda la IA se ejecuta localmente: no se necesitan APIs en la nube para las funciones principales.

Patrocinio

Snip es gratuito, de código abierto y creado por dos desarrolladores. Si es útil para tu flujo de trabajo, considera patrocinar el proyecto.

Los patrocinios ayudan a cubrir:

• Apple Developer Program — necesario para la firma de código y notarización para que macOS no bloquee la aplicación

• Costos de CI/CD — compilaciones automatizadas, pruebas y pipelines de lanzamiento para macOS y Linux

• Desarrollo continuo — nuevas herramientas de anotación, mejor integración de IA, mejoras en Linux y correcciones de errores

Cada contribución ayuda a mantener Snip y a mejorarlo. ¡Gracias!

Licencia

MIT