Vibe Annotations
Vibe Annotations · Programación
Vibe Annotations es una extensión de navegador y servidor MCP gratuitos que permite marcar comentarios en páginas locales para que agentes como Claude Code o Cursor apliquen los cambios.
Acerca de Vibe Annotations
What Is Vibe Annotations
Vibe Annotations es una herramienta de anotación visual pensada para el desarrollo web. Instalas la extensión del navegador, haces clic en cualquier elemento de una página en localhost y dejas una nota sobre lo que hay que arreglar. Cada marca guarda el selector DOM exacto, el componente de React o Vue y el archivo fuente detrás de ese elemento, así que el agente de IA recibe contexto preciso en lugar de una descripción vaga.
El producto viene en dos piezas. La extensión funciona sola con copiar y pegar, y un servidor MCP opcional añade sincronización automática para que los agentes lean, vigilen y resuelvan las anotaciones sin que copies nada. El servidor se publica en npm como vibe-annotations-server, y ambas partes son gratuitas y de código abierto.
El límite principal está en su alcance. Está hecho para localhost y archivos HTML locales durante el desarrollo, no para sitios en producción ni proyectos que no sean web. Si no levantas un servidor de desarrollo ni usas un agente de IA, aquí hay poco para ti.
Getting Started
- Instala la extensión desde la Chrome Web Store, o cárgala sin empaquetar desde el repositorio para desarrollo
- Ejecuta npx vibe-annotations-server init para instalar el servidor, arrancarlo en el puerto 3846 y conectarlo a tu agente de IA
- Abre cualquier página en localhost, pulsa Annotate en la barra y haz clic en los elementos para dejar comentarios, retoques de diseño o cambios de texto
- Pasa la cola a tu agente, que lee las anotaciones por MCP y aplica las correcciones en un solo lote
Información del producto
Un vistazo rápido a los precios, las plataformas compatibles y el rendimiento de Vibe Annotations.
Ideal para
Los usuarios, tareas y casos de uso en los que esta herramienta encaja mejor.
Usuarios
- Desarrolladores front-end
- Programadores que trabajan con agentes de IA
- Creadores en solitario
- Equipos pequeños que revisan interfaz
Tareas
- Señalar maquetación rota
- Enviar correcciones de diseño
- Pedir variantes de un componente
- Compartir feedback fuera del navegador
- Automatizar el ciclo de arreglos
Casos de uso
- Llevas una docena de retoques a un botón y escribir el selector se hace lento
- Una captura por sí sola no dice al agente qué elemento falla
- Revisas una página repartida en varias rutas
- Un compañero quiere tu opinión sobre su build local
- Quieres que el agente siga trabajando mientras anotas
Funciones clave
Marcas con contexto completo
Cada marca guarda el selector DOM exacto del elemento que tocaste, junto con el componente de React o Vue y el archivo fuente que hay detrás. Ahí está la diferencia frente a una herramienta de capturas, donde el agente tiene que adivinar a qué elemento te refieres a partir de los píxeles. Aquí recibe un selector sobre el que puede actuar, y el arreglo cae en el nodo correcto a la primera.
Panel de edición de diseño tipo Figma
Además de los comentarios, puedes cambiar tamaño, espaciado, color y texto directamente sobre la página desde un panel de edición tipo Figma. Ves la previsualización en vivo antes de entregar el retoque, así que lo que aplica el agente es lo que ya aprobaste. Los ajustes visuales pequeños se quedan fuera del chat.
Generación y previsualización de variantes
Puedes pedir al agente variantes de cualquier componente y compararlas ahí mismo, sobre la página. El panel muestra las opciones en paralelo y eliges la ganadora sin salir del navegador. Un ida y vuelta sobre maquetación se convierte en una sola decisión.
Capturas e imágenes de referencia
La herramienta captura sola una imagen de cada elemento que anotas, y encima puedes adjuntar tus propias referencias. El contexto visual viaja junto a la nota escrita, lo que ayuda cuando un cambio es más fácil de mostrar que de explicar.
Exportación en un solo archivo
Puedes exportar un lote de anotaciones como un único .html autocontenido con las imágenes incrustadas, o como un .md más ligero si solo necesitas el texto. En ambos casos es un archivo para enviar, no una carpeta de capturas y notas.
Integración MCP con modo vigilancia
El servidor expone herramientas como read_annotations, watch_annotations y get_project_context a los agentes conectados. La configuración es un solo comando para Claude Code, Cursor, Windsurf, Codex, OpenClaw y VS Code. El modo vigilancia hace long-poll de anotaciones nuevas, así que tu agente aplica arreglos en vivo mientras sigues trabajando.
Ventajas y desventajas
Ventajas
- Gratuito y de código abierto, con el servidor en npm y el código en GitHub
- Las marcas llevan selector, componente y archivo fuente, así que el agente no adivina el objetivo
- Funciona con los principales agentes de IA, incluidos Claude Code, Cursor, Windsurf, Codex y VS Code
- La extensión funciona sola con copiar y pegar, así que el servidor MCP es opcional
- Exporta un lote entero como un único .html o .md para compartirlo fuera del navegador
Desventajas
- Está hecho para localhost y archivos HTML locales, así que no puede anotar sitios en producción
- No hay página de precios ni soporte comercial, algo que pesa si un equipo quiere un proveedor detrás de la herramienta
- La configuración MCP exige Node y un servidor local en marcha, más trabajo que instalar solo la extensión
- La anotación solo aplica a front ends web, así que no hay nada para apps nativas ni trabajo de back end
Preguntas frecuentes
Vibe Annotations te deja hacer clic en elementos de una página en localhost y dejar feedback que los agentes de IA pueden leer y aplicar. Cada anotación guarda el selector DOM, el componente de React o Vue y el archivo fuente, así que el agente sabe qué elemento cambiar.
Contenido relacionado
Explora herramientas, habilidades y artículos relacionados con Vibe Annotations.
Alternativas a Vibe Annotations
Base Code
Base44 (Wix) · Programación · ProductividadBase Code es un entorno de desarrollo en la nube compartido de Base44. El equipo describe cambios sobre un repositorio de GitHub en el chat, los ve en una vista previa y los envía como pull requests.
Google EmbeddingGemma 2
Google DeepMind · Escritura · Imagen · ProgramaciónGoogle EmbeddingGemma 2 es un modelo abierto de 740 millones de parámetros que convierte texto, código, imágenes, audio y fotogramas de vídeo en vectores de un mismo espacio de 768 dimensiones, y funciona en móviles y portátiles.
GitGlow
GitGlow · Programación · ProductividadGitGlow es un cliente Git de escritorio que reúne tu código y los cambios de tus agentes de IA en una sola revisión, para que sepas qué va a salir de tu máquina antes de publicarlo.