データ月 2026-09

Vibe Annotations

Name: Vibe Annotations
Rating: 5 (9 reviews)
Author: Spellbind

プログラミング

AIコーディングエージェント Vibe Coding

SpellbindVisual annotations for localhost dev projects. Send feedback to AI coding agents like Claude & Cursor via MCP.

Chromeに追加 ↗

AlphaMoatによると、2026-09時点でChrome拡張機能Vibe Annotationsのユーザー数は1,000(前月比 +0%)、評価は5(9件のレビュー)で、9,324件のAIブラウザ拡張機能中1,224位、プログラミングでは601件中60位です。

ユーザー数 · 2026-09

1000+0%

評価

★ 59

総合順位(9,324件中)

#1,224

プログラミング内の順位

#60/ 601

Vibe Annotationsとは

Chromeウェブストアより

Visual annotations for localhost dev projects. Send feedback to AI coding agents like Claude & Cursor via MCP. Transform your localhost development workflow with visual annotations for AI coding agents.

Vibe Annotations lets you drop visual feedback directly on your development pages and send it to any AI coding agent.

Annotate elements, describe what should change, and let your agent implement the fixes across multiple pages, respecting your responsive breakpoints.

🎯 Key Features

📌 Drop annotations: Click any element to leave a comment or an empty pointer for your AI agent to pick up and act on 🎨 Direct design edits: Tweak CSS properties (font size, colors, layout, spacing) in a single panel with live preview — changes are captured as annotations for your agent to implement in source 🧬 Component variants: Ask your agent for variants of any component, preview them live on the page, and pick the winner — built in your real codebase, not a mockup (requires the MCP server) 📸 Screenshots & reference images: Every pin can carry an auto-screenshot of the element plus reference images you paste or attach — your agent receives both as real files 📤 Share in one file: Export a review as .md (offline), self-contained .html (images embedded, opens anywhere), or .json (re-import onto another localhost) 👁️ Watch mode: Tell your agent "Start watching Vibe Annotations" — it picks up annotations as you drop them, implements changes, and loops. Hands-free 🤖 Works with Claude Code, Cursor, Windsurf, Codex, OpenClaw, and any MCP-compatible agent 🤝 Agent collaboration: let browser-based agents (Claude Chrome, OpenClaw) annotate autonomously as a styling or copywriting partner 🔍 Rich element context: captures CSS selectors, styles, positioning and viewport — plus the React or Vue component and its source file, read from the page's real fiber tree 🗂️ Multi-page support: annotate across different routes in your SPA or multi-page app 📍 Persistent inspection mode: stay in annotation mode to drop multiple pins efficiently ⚡ Batch workflow: annotate → copy or let your agent read → implement → delete 📋 Copy to clipboard with rich context formatting, or connect via MCP for automated reads 🔄 Auto-deletion after copy (opt-in) for streamlined iteration cycles 🌐 Annotate any site: optionally enable on public URLs for design reference and reviews 🧠 Intelligent project detection prevents cross-project annotation mixing

🔧 How It Works

ストアの説明の続きを表示▾

1. Annotate: Click the extension icon, enter inspection mode, and click elements to add feedback 2. Send to your agent: Copy all annotations to clipboard and paste, or connect the MCP server for automatic reads 3. Implement: Your AI agent reads the annotations with full element context and applies the changes 4. Iterate: Delete resolved annotations and start the next cycle

🔌 MCP Server Setup (Optional)

One line in your terminal to launch the wizard: npx vibe-annotations-server init

✅ Works With

React, Vue, Angular, Next.js, Svelte, and all web frameworks Any localhost dev server (ports 3000, 5173, 8080, etc.) Local development domains (*.local, *.test, *.localhost) Local HTML files (file://) Public URLs via per-site opt-in (beta)

📦 Requirements

Chrome browser with Developer mode or Chrome Web Store install Optional: vibe-annotations-server npm package for MCP integration

Note: The extension auto-enables on localhost, local development domains, and file:// URLs.

Public site annotation requires explicit per-site permission. All data stays local — no external network requests.