Snapmark for VS Code

¿Qué es Snapmark for VS Code?

Snapmark for VS Code es una extensión de VS Code diseñada para ayudarte a anotar capturas de pantalla antes de pegarlas en herramientas de chat de IA. El flujo de trabajo principal es enfocado: copias una captura, la anotas en la extensión y luego pegas la imagen anotada en cualquier chat de IA que acepte imágenes pegadas.

Según la descripción de la extensión, Snapmark mantiene intacta la ventana del agente al trabajar a través de tu portapapeles. Esto te permite difuminar regiones sensibles, añadir indicadores de pasos numerados para flujos de UI y redimensionar capturas grandes a un tamaño más adecuado para el modelo antes de compartirlas en el chat.

Características principales

• Flujo de trabajo basado en portapapeles: Snapmark se integra en tu portapapeles: copia una captura y usa el atajo de la extensión para abrir el anotador y preparar la imagen para pegar.
• Difuminar regiones sensibles: Permite difuminar áreas de la captura para ocultar valores como claves API, tokens y PII antes de pegar la imagen en un chat de IA.
• Indicadores de pasos numerados: Puedes añadir marcadores ordenados (p. ej., 1, 2, 3) para describir un flujo de UI en secuencia, reduciendo idas y venidas al explicar pantallas de varios pasos.
• Auto-compresión al copiar: Las capturas Retina se redimensionan en el borde largo a 1920px al copiar, para evitar que los modelos de visión procesen píxeles innecesarios.
• Pegar en “cualquier herramienta que acepte imágenes pegadas”: La extensión es agnóstica a herramientas: usable con chats de IA que acepten imágenes pegadas (menciona ejemplos como Claude Code, GitHub Copilot Chat y Cursor).
• Sin telemetría / open source (según se indica): La página afirma que el proyecto es gratuito, open source y sin telemetría.

Cómo usar Snapmark for VS Code

1. Instala la extensión: Instala Snapmark desde el Marketplace de VS Code (o usa el enlace de GitHub mostrado en la página).
2. Copia una captura: Usa la herramienta de capturas de tu SO (ejemplos: macOS Ctrl+Shift+⌘4, Windows Win+Shift+S o cualquier snipper de Linux).
3. Abre el anotador: Tras copiar, Snapmark detecta la imagen del portapapeles y activa su botón en la barra de estado. Presiona ⌘⇧A (o Ctrl+Shift+A) para abrir el anotador.
4. Anota y prepara la imagen: Usa las herramientas disponibles para difuminar áreas sensibles y añadir indicadores de pasos numerados según necesites. La extensión también aplica el redimensionado descrito al copiar.
5. Pega en un chat de IA: Usa la acción “Copiar” de la extensión y pega la imagen anotada en un chat de IA que acepte imágenes pegadas (ejemplos en la página: Claude Code, Copilot Chat y Cursor).

Casos de uso

• Ocultar credenciales antes de compartir UI: Al documentar una pantalla de aplicación con claves API, tokens o datos personales, difumina esas regiones para que la captura pegada no exponga información sensible.
• Explicar interfaces de varios pasos: Para un flujo como “configurar ajustes → enviar → confirmar resultados”, añade marcadores numerados (1, 2, 3) para indicar al modelo qué áreas de la pantalla corresponden a cada paso.
• Preparar capturas para modelos de visión sin costo extra de píxeles: Si copias una captura de alta resolución (p. ej., Retina), confía en el auto-redimensionado de Snapmark para reducir el tamaño y que el modelo procese un borde largo de 1920px en lugar de capturas extremadamente grandes.
• Usar múltiples herramientas de chat de IA con el mismo flujo: Cambia entre clientes de chat de IA (la página lista Claude Code, Copilot, Cursor y otros) sin alterar tu proceso de anotación de capturas: pega la imagen anotada donde sea aceptada.

Preguntas frecuentes

¿Snapmark se integra con agentes de IA específicos?

Snapmark funciona con “cualquier otra herramienta que acepte imágenes pegadas”. La página lista ejemplos como Claude Code, GitHub Copilot y Cursor, pero el requisito clave es que el cliente de chat de IA acepte imágenes pegadas.

¿Qué pasa con la captura durante la anotación?

La página indica que Snapmark vive en tu portapapeles y no toca ninguna ventana del agente. Anotas la imagen del portapapeles en VS Code y luego pegas la imagen anotada en el chat de IA.

¿Puedo ocultar información sensible como claves API y PII?

Sí. Snapmark incluye una función de difuminado para regiones sensibles, mencionando explícitamente claves API, tokens y PII.

¿Snapmark redimensiona capturas grandes?

Sí. La página indica que las capturas Retina se redimensionan a 1920px en el borde largo al copiar.

Alternativas

• Herramientas manuales de edición de capturas: Usa un editor de imágenes (o las herramientas de anotación del SO) para difuminar y etiquetar capturas antes de pegarlas. Es más flexible para editar, pero requiere cambiar de herramientas y no ofrece el mismo flujo de portapapeles a anotador dentro de VS Code.
• Herramientas dedicadas de anotación de UI/pasos: Herramientas que ayudan a marcar capturas para documentación pueden servir para un propósito similar, pero no están adaptadas al flujo centrado en portapapeles y al paso de “pegar en chat de IA”.
• Otras utilidades de imágenes/portapapeles para VS Code: Alternativas en el espacio de herramientas para desarrolladores pueden ofrecer manejo de portapapeles o manipulación de imágenes, pero no incluyen el mismo flujo integrado de difuminado y pasos numerados descrito para Snapmark.
• Depender solo del manejo de imágenes del cliente de chat de IA: Si tu chat de IA acepta capturas pegadas directamente, puedes omitir la anotación. Esto puede ser menos fiable para ocultar contenido sensible y para guiar modelos a través de flujos de UI multi-paso.