Vibe Annotations

Chaque épingle enregistre le sélecteur DOM exact de l'élément cliqué, avec le composant React ou Vue et le fichier source derrière lui. C'est la différence avec un outil de captures d'écran, où l'agent doit deviner l'élément visé à partir des pixels. Ici, il reçoit un sélecteur sur lequel agir, et la correction tombe sur le bon nœud du premier coup.

Au-delà des commentaires, vous modifiez taille, espacement, couleur et texte directement sur la page via un panneau de retouche type Figma. L'aperçu s'affiche en direct avant la transmission, donc ce que l'agent applique est ce que vous avez déjà validé. Les petits ajustements visuels restent hors du chat.

Vous demandez à l'agent des variantes de n'importe quel composant, puis vous les comparez juste là, sur la page. Le panneau présente les options côte à côte et vous choisissez la gagnante sans quitter le navigateur. Un aller-retour sur une mise en page devient une seule décision.

L'outil capture seul une image de chaque élément annoté, et vous pouvez y ajouter vos propres références. Le contexte visuel voyage avec la note écrite, ce qui aide quand un changement se montre plus facilement qu'il ne s'explique.

Vous exportez un lot d'annotations en un seul .html autonome avec les images intégrées, ou en un .md plus léger quand seul le texte compte. Dans les deux cas, c'est un fichier à envoyer, pas un dossier de captures et de notes.

Le serveur expose des outils comme read_annotations, watch_annotations et get_project_context aux agents connectés. La configuration tient en une commande pour Claude Code, Cursor, Windsurf, Codex, OpenClaw et VS Code. Le mode veille fait du long-poll sur les nouvelles annotations, donc votre agent applique les corrections en direct pendant que vous continuez à travailler.