Snapmark for VS Code

Qu'est-ce que Snapmark pour VS Code ?

Snapmark pour VS Code est une extension VS Code conçue pour vous aider à annoter des captures d'écran avant de les coller dans des outils de chat IA. Le flux de travail principal est ciblé : vous copiez une capture d'écran, l'annotiez dans l'extension, puis collez l'image annotée dans n'importe quel chat IA acceptant les images collées.

Selon la description de l'extension, Snapmark laisse la fenêtre de l'agent intacte en travaillant via votre presse-papiers. Cela vous permet de flouter les zones sensibles, d'ajouter des marqueurs numérotés pour les flux UI, et de redimensionner les grandes captures d'écran à une taille plus adaptée aux modèles avant de les partager en chat.

Fonctionnalités principales

• Flux de travail basé sur le presse-papiers : Snapmark s'intègre à votre presse-papiers — copiez une capture d'écran, puis utilisez le raccourci de l'extension pour ouvrir l'annotateur et préparer l'image pour collage.
• Floutage des zones sensibles : Elle permet de flouter des zones de la capture pour masquer des valeurs comme les clés API, tokens et PII avant collage dans un chat IA.
• Marqueurs numérotés : Vous pouvez ajouter des marqueurs ordonnés (ex. 1, 2, 3) pour décrire un flux UI en séquence, réduisant les allers-retours pour expliquer des écrans multi-étapes.
• Compression auto à la copie : Les captures Retina sont redimensionnées sur le grand côté à 1920px lors de la copie, pour éviter que les modèles visuels traitent des pixels inutiles.
• Collage dans « tout ce qui accepte les images collées » : L'extension est agnostique — utilisable avec des chats IA acceptant les images collées (exemples : Claude Code, GitHub Copilot Chat, Cursor).
• Pas de télémétrie / open source (comme indiqué) : La page indique que le projet est gratuit, open source et sans télémétrie.

Comment utiliser Snapmark pour VS Code

1. Installer l'extension : Installez Snapmark depuis le Marketplace VS Code (ou via le lien GitHub indiqué sur la page).
2. Copier une capture d'écran : Utilisez l'outil de capture de votre OS (exemples : macOS Ctrl+Shift+⌘4, Windows Win+Shift+S, ou tout snipper Linux).
3. Ouvrir l'annotateur : Après copie, Snapmark détecte l'image du presse-papiers et active son bouton de barre d'état. Appuyez sur ⌘⇧A (ou Ctrl+Shift+A) pour ouvrir l'annotateur.
4. Annoter et préparer l'image : Utilisez les outils pour flouter les zones sensibles et ajouter des marqueurs numérotés si besoin. L'extension applique aussi le redimensionnement décrit lors de la copie.
5. Coller dans un chat IA : Utilisez l'action « Copier » de l'extension et collez l'image annotée dans un chat IA acceptant les images collées (exemples : Claude Code, Copilot Chat, Cursor).

Cas d'usage

• Masquage des identifiants avant partage d'UI : Lors de la documentation d'un écran d'application avec clés API, tokens ou données personnelles, floutez ces zones pour que la capture collée n'expose pas d'infos sensibles.
• Explication d'interfaces multi-étapes : Pour un flux comme « configurer paramètres → soumettre → confirmer résultats », ajoutez des marqueurs numérotés (1, 2, 3) pour indiquer les zones d'écran correspondant à chaque étape.
• Préparation de captures pour modèles visuels sans coût pixel excessif : Si vous copiez une capture haute résolution (ex. Retina), fiez-vous au redimensionnement auto de Snapmark pour réduire la taille à un grand côté de 1920px au lieu de captures énormes.
• Utilisation de multiples outils de chat IA avec le même flux : Passez entre différents clients de chat IA (Claude Code, Copilot, Cursor, etc.) sans changer votre processus d'annotation — collez l'image annotée partout où c'est accepté.

FAQ

Snapmark s'intègre-t-il avec des agents IA spécifiques ?

Snapmark fonctionne avec « tout ce qui accepte les images collées ». La page liste des exemples comme Claude Code, GitHub Copilot et Cursor, mais la condition clé est que le client de chat IA accepte les images collées.

Que se passe-t-il avec la capture pendant l'annotation ?

La page indique que Snapmark vit dans votre presse-papiers et ne touche aucune fenêtre d'agent. Vous annotez l'image du presse-papiers dans VS Code, puis la collez annotée dans le chat IA.

Puis-je masquer des infos sensibles comme les clés API et PII ?

Oui. Snapmark inclut un outil de floutage pour les zones sensibles, la page mentionnant explicitement clés API, tokens et PII.

Snapmark redimensionne-t-il les grandes captures ?

Oui. La page indique que les captures Retina sont redimensionnées à 1920px sur le grand côté lors de la copie.

Alternatives

• Outils d'édition manuelle de captures d'écran : Utilisez un éditeur d'images (ou les outils d'annotation du système d'exploitation) pour flouter et étiqueter les captures avant de les coller. C'est plus flexible pour l'édition, mais cela nécessite de changer d'outil et ne propose pas le même flux presse-papiers vers annotateur à l'intérieur de VS Code.
• Outils dédiés d'annotation d'UI/étapes : Les outils qui aident à marquer les captures pour la documentation peuvent servir un objectif similaire, mais ils ne sont peut-être pas adaptés au flux priorisant le presse-papiers et à l'étape « coller dans un chat AI ».
• Autres utilitaires image/presse-papiers pour VS Code : Des alternatives dans l'écosystème des outils de développement peuvent offrir une gestion du presse-papiers ou une manipulation d'images, mais ne incluent peut-être pas le même flux intégré de floutage et d'étapes numérotées décrit pour Snapmark.
• S'appuyer uniquement sur la gestion d'images du client de chat AI : Si votre chat AI accepte directement les captures collées, vous pouvez sauter l'annotation. Cela peut être moins fiable pour masquer le contenu sensible et guider les modèles à travers des flux UI multi-étapes.