Snapmark for VS Code

Was ist Snapmark for VS Code?

Snapmark for VS Code ist eine VS-Code-Erweiterung, die Ihnen hilft, Screenshots vor dem Einfügen in AI-Chat-Tools zu annotieren. Der Kern-Workflow ist fokussiert: Sie kopieren einen Screenshot, annotieren ihn in der Erweiterung und fügen das annotierte Bild dann in jeden AI-Chat ein, der eingefügte Bilder akzeptiert.

Laut der Erweiterungsbeschreibung arbeitet Snapmark über Ihre Zwischenablage und berührt das Agenten-Fenster nicht. So können Sie sensible Bereiche verpixeln, nummerierte Schritt-Markierungen für UI-Flows hinzufügen und große Screenshots vor dem Teilen im Chat auf eine modellfreundliche Größe skalieren.

Wichtige Funktionen

• Clipboard-basierter Workflow: Snapmark sitzt in Ihrer Zwischenablage – kopieren Sie einen Screenshot, dann nutzen Sie die Erweiterungs-Verknüpfung, um den Annotator zu öffnen und das Bild fürs Einfügen vorzubereiten.
• Sensible Bereiche verpixeln: Es unterstützt das Verpixeln von Screenshot-Bereichen, damit Werte wie API-Keys, Tokens und PII vor dem Einfügen in einen AI-Chat verborgen sind.
• Nummerierte Schritt-Markierungen: Sie können geordnete Marker (z. B. 1, 2, 3) hinzufügen, um einen UI-Flow schrittweise zu beschreiben und Hin-und-Her beim Erklären mehrstufiger Bildschirme zu reduzieren.
• Automatische Komprimierung beim Kopieren: Retina-Screenshots werden auf der Längsseite auf 1920px skaliert, wenn sie kopiert werden, um Vision-Modellen unnötige Pixel zu ersparen.
• Einfügen in „alles, was eingefügte Bilder akzeptiert“: Die Erweiterung ist tool-agnostisch – nutzbar mit AI-Chats, die eingefügte Bilder akzeptieren (es werden Beispiele wie Claude Code, GitHub Copilot Chat und Cursor genannt).
• Keine Telemetrie / Open Source (wie angegeben): Die Seite betont, dass das Projekt kostenlos, open source und ohne Telemetrie ist.

So verwenden Sie Snapmark for VS Code

1. Erweiterung installieren: Installieren Sie Snapmark aus dem VS-Code-Marketplace (oder über den GitHub-Link auf der Seite).
2. Screenshot kopieren: Nutzen Sie das Screenshot-Tool Ihres Betriebssystems (Beispiele: macOS Ctrl+Shift+⌘4, Windows Win+Shift+S oder jedes Linux-Snipping-Tool).
3. Annotator öffnen: Nach dem Kopieren erkennt Snapmark das Clipboard-Bild und aktiviert die Statusleisten-Schaltfläche. Drücken Sie ⌘⇧A (oder Ctrl+Shift+A), um den Annotator zu öffnen.
4. Bild annotieren und vorbereiten: Verwenden Sie die Tools, um sensible Bereiche zu verpixeln und nummerierte Schritt-Markierungen hinzuzufügen. Die Erweiterung wendet die beschriebene Skalierungsfunktion beim Kopieren an.
5. In einen AI-Chat einfügen: Nutzen Sie die „Kopieren“-Aktion der Erweiterung und fügen Sie das annotierte Bild in einen AI-Chat ein, der eingefügte Bilder akzeptiert (Seiten-Beispiele: Claude Code, Copilot Chat und Cursor).

Anwendungsfälle

• Anmeldedaten vor UI-Teilen schwärzen: Bei der Dokumentation eines App-Bildschirms mit API-Keys, Tokens oder personenbezogenen Daten verpixeln Sie diese Bereiche zuerst, damit das eingefügte Screenshot sensible Infos nicht preisgibt.
• Mehrstufige Interfaces erklären: Für einen Ablauf wie „Einstellungen konfigurieren → absenden → Ergebnisse bestätigen“ fügen Sie nummerierte Marker (1, 2, 3) hinzu, um dem Modell zuzuordnen, welche Bildschirmbereiche zu welchem Schritt gehören.
• Screenshots für Vision-Modelle ohne Extrapixel vorbereiten: Bei hochauflösenden (z. B. Retina) Screenshots verlassen Sie sich auf Snapmarks Auto-Skalierung, um die Bildgröße zu reduzieren – das Modell verarbeitet eine 1920px-Längsseite statt extrem großer Screenshots.
• Mehrere AI-Chat-Tools mit gleichem Workflow nutzen: Wechseln Sie zwischen AI-Chat-Clients (Seite nennt Claude Code, Copilot, Cursor u. a.), ohne Ihren Screenshot-Annotierungsprozess zu ändern – fügen Sie das annotierte Bild überall ein, wo es akzeptiert wird.

FAQ

Integriert sich Snapmark mit spezifischen AI-Agenten?

Snapmark funktioniert mit „ allem, was eingefügte Bilder akzeptiert“. Die Seite nennt Beispiele wie Claude Code, GitHub Copilot und Cursor, aber die Kernvoraussetzung ist, dass der AI-Chat-Client eingefügte Bilder akzeptiert.

Was passiert mit dem Screenshot während der Annotation?

Die Seite gibt an, dass Snapmark in Ihrer Zwischenablage lebt und kein Agenten-Fenster berührt. Sie annotieren das Clipboard-Bild in VS Code und fügen es dann annotiert in den AI-Chat ein.

Kann ich sensible Infos wie API-Keys und PII verbergen?

Ja. Snapmark bietet eine Verpixelungsfunktion für sensible Bereiche, die Seite erwähnt explizit API-Keys, Tokens und PII.

Skaliert Snapmark große Screenshots?

Ja. Die Seite gibt an, dass Retina-Screenshots beim Kopieren auf 1920px an der Längsseite skaliert werden.

Alternativen

• Manuelle Screenshot-Bearbeitungstools: Verwenden Sie einen Bildeditor (oder die OS-Annotierungs-Tools), um Screenshots vor dem Einfügen zu verpixeln und zu beschriften. Das ist flexibler für Bearbeitungen, erfordert aber den Wechsel zu anderen Tools und bietet nicht denselben Workflow vom Clipboard zum Annotator direkt in VS Code.
• Spezialisierte UI-/Schritt-Annotierungstools: Tools zur Markierung von Screenshots für Dokumentationen können einen ähnlichen Zweck erfüllen, sind aber möglicherweise nicht auf den clipboard-first-Workflow und den Schritt „in AI-Chat einfügen“ zugeschnitten.
• Andere VS Code-Bild-/Clipboard-Utility-Tools: Alternativen im Entwickler-Tooling-Bereich bieten möglicherweise Clipboard-Verarbeitung oder Bildmanipulation, beinhalten aber nicht unbedingt denselben integrierten Workflow für Verpixeln und nummerierte Schritte wie bei Snapmark.
• Nur auf die Bildverarbeitung des AI-Chat-Clients setzen: Wenn Ihr AI-Chat direkt eingefügte Screenshots akzeptiert, können Sie die Annotation überspringen. Das ist jedoch weniger zuverlässig für die Redaktion sensibler Inhalte und die Führung von Modellen durch mehrstufige UI-Flows.