Vibe Annotations
Vibe Annotations · Programação
O Vibe Annotations é uma extensão de navegador e servidor MCP gratuitos que permite marcar comentários em páginas locais para agentes como Claude Code e Cursor aplicarem as mudanças.
Sobre Vibe Annotations
What Is Vibe Annotations
O Vibe Annotations é uma ferramenta de anotação visual para desenvolvimento web. Você instala a extensão do navegador, clica em qualquer elemento de uma página no localhost e deixa uma nota sobre o que precisa ser corrigido. Cada marca guarda o seletor DOM exato, o componente de React ou Vue e o arquivo fonte por trás desse elemento, então o agente de IA recebe contexto preciso em vez de uma descrição vaga.
O produto vem em duas partes. A extensão funciona sozinha com copiar e colar, e um servidor MCP opcional adiciona sincronização automática para que os agentes leiam, acompanhem e resolvam as anotações sem você copiar nada. O servidor é publicado no npm como vibe-annotations-server, e as duas partes são gratuitas e de código aberto, conforme o site oficial informa.
O limite principal está no alcance. Ele foi feito para localhost e arquivos HTML locais durante o desenvolvimento, não para sites em produção nem projetos que não sejam web. Se você não sobe um servidor de desenvolvimento nem usa um agente de IA, aqui não há muita coisa para você.
Getting Started
- Instale a extensão pela Chrome Web Store, ou carregue-a sem empacotar direto do repositório para desenvolvimento
- Rode npx vibe-annotations-server init para instalar o servidor, iniciá-lo na porta 3846 e conectá-lo ao seu agente de IA
- Abra qualquer página no localhost, clique em Annotate na barra e clique nos elementos para deixar comentários, ajustes de design ou mudanças de texto
- Passe a fila para o seu agente, que lê as anotações via MCP e aplica as correções num único lote
Informações do produto
Uma visão rápida dos preços, das plataformas compatíveis e do desempenho de Vibe Annotations.
Ideal para
Os usuários, tarefas e cenários em que esta ferramenta se encaixa melhor.
Usuários
- Desenvolvedores de front-end
- Programadores que trabalham com agentes de IA
- Criadores solo
- Equipes pequenas que revisam interface
Tarefas
- Apontar layout quebrado
- Enviar correções de design
- Pedir variantes de um componente
- Compartilhar feedback fora do navegador
- Automatizar o ciclo de correções
Cenários
- Você já mexeu num botão uma dúzia de vezes e digitar o seletor fica lento
- Uma captura sozinha não diz ao agente qual elemento está errado
- Você revisa uma página dividida em várias rotas
- Um colega quer sua opinião sobre o build local dele
- Você quer que o agente continue trabalhando enquanto anota
Principais recursos
Marcas com contexto completo
Cada marca guarda o seletor DOM exato do elemento em que você clicou, junto com o componente de React ou Vue e o arquivo fonte por trás dele. Aí está a diferença para uma ferramenta de capturas de tela, em que o agente precisa adivinhar a qual elemento você se refere a partir dos pixels. Aqui ele recebe um seletor sobre o qual pode agir, e a correção cai no nó certo de primeira.
Painel de edição de design tipo Figma
Além dos comentários, você muda tamanho, espaçamento, cor e texto direto na página por um painel de edição tipo Figma. A pré-visualização aparece ao vivo antes de entregar o ajuste, então o que o agente aplica é o que você já aprovou. Ajustes visuais pequenos ficam fora do chat.
Geração e pré-visualização de variantes
Você pede ao agente variantes de qualquer componente e as compara ali mesmo, na página. O painel mostra as opções lado a lado, e você escolhe a vencedora sem sair do navegador. Um vai e vem sobre layout vira uma única decisão.
Capturas de tela e imagens de referência
A ferramenta captura sozinha uma imagem de cada elemento que você anota, e por cima disso você anexa suas próprias referências. O contexto visual viaja junto com a nota escrita, o que ajuda quando uma mudança é mais fácil de mostrar do que de explicar.
Exportação em um único arquivo
Você exporta um lote de anotações como um único .html autocontido com as imagens embutidas, ou como um .md mais leve quando só precisa do texto. Nos dois casos é um arquivo para enviar, não uma pasta de capturas e notas.
Integração MCP com modo vigilância
O servidor expõe ferramentas como read_annotations, watch_annotations e get_project_context aos agentes conectados. A configuração é um único comando para Claude Code, Cursor, Windsurf, Codex, OpenClaw e VS Code. O modo vigilância faz long-poll de anotações novas, então o seu agente aplica correções ao vivo enquanto você continua trabalhando.
Prós e contras
Prós
- Gratuito e de código aberto, com o servidor no npm e o código no GitHub
- As marcas carregam seletor, componente e arquivo fonte, então o agente não adivinha o alvo
- Funciona com os principais agentes de IA, incluindo Claude Code, Cursor, Windsurf, Codex e VS Code
- A extensão funciona sozinha com copiar e colar, então o servidor MCP é opcional
- Exporta um lote inteiro como um único .html ou .md para compartilhar fora do navegador
Contras
- Foi feito para localhost e arquivos HTML locais, então não anota sites em produção
- Não há página de preços nem suporte comercial, o que pesa se uma equipe quer um fornecedor por trás da ferramenta
- A configuração MCP exige Node e um servidor local rodando, mais trabalho do que só instalar a extensão
- A anotação só vale para front ends web, então não há nada para apps nativos nem trabalho de back end
Perguntas frequentes
O Vibe Annotations permite clicar em elementos de uma página no localhost e deixar feedback que agentes de IA conseguem ler e aplicar. Cada anotação guarda o seletor DOM, o componente de React ou Vue e o arquivo fonte, então o agente sabe qual elemento mudar.
Conteúdo relacionado
Explore ferramentas, skills e artigos relacionados a Vibe Annotations.
Alternativas a Vibe Annotations
Base Code
Base44 (Wix) · Programação · ProdutividadeO Base Code é um ambiente de desenvolvimento em nuvem compartilhado da Base44. O time descreve mudanças em um repositório do GitHub pelo chat, confere tudo na prévia e envia o resultado como pull request.
Google EmbeddingGemma 2
Google DeepMind · Escrita · Imagem · ProgramaçãoGoogle EmbeddingGemma 2 é um modelo aberto de 740 milhões de parâmetros que transforma texto, código, imagens, áudio e quadros de vídeo em vetores de um único espaço de 768 dimensões, rodando em celulares e notebooks.
GitGlow
GitGlow · Programação · ProdutividadeO GitGlow é um cliente Git de desktop que coloca seu código e as mudanças dos seus agentes de IA na mesma revisão, para você saber o que vai sair da máquina antes de publicar.