Does this work in production environments?

No, the plugin is specifically designed for development workflows and is automatically disabled during the vite build process to ensure security and performance.

How do I connect the annotator to Claude Code?

You can connect it by adding it as an MCP server using the command 'claude mcp add annotator' and pointing it to your local development server address.

Can I use this with frameworks like React, Vue, or Svelte?

Yes, the annotator is framework-agnostic and provides specific component data for React, Vue, Svelte, Angular, and vanilla JavaScript projects.

Do I need a browser extension to use this skill?

No browser extension is required. The annotator UI is injected directly into your application via the Vite plugin and communicates with Claude via a local WebSocket.

How does the annotator link visual elements to source code?

It uses the vite-plugin-ai-annotator to inject data-source-loc attributes during development, allowing Claude to identify the exact file path and line number of any selected element.

AI Visual Annotator

Name: AI Visual Annotator
Author: nguyenvanduocit

bynguyenvanduocit

0•

디자인 도구

Enables real-time visual collaboration between developers and AI by selecting, annotating, and manipulating web elements directly in the browser.

The AI Visual Annotator is a specialized Vite plugin and MCP server that bridges the gap between Claude Code and your browser's DOM. It allows users to visually select elements, provide feedback via comments, and automatically map those UI components back to their exact source code locations. By enabling features like screenshot capture, CSS/JS injection, and console log retrieval, it streamlines debugging and iterative frontend development through a seamless AI-human feedback loop that eliminates the guesswork of locating code for specific UI elements.

주요 기능

01Real-time CSS and JavaScript injection for instant UI prototyping and debugging

02Viewport and element-specific screenshot capture for visual verification within Claude

03Bi-directional collaboration via an in-browser toolbar and element-specific comments

04Integrated console log access and session management for browser-side troubleshooting

050 GitHub stars

06Visual element selection with direct mapping to source code files and line numbers

사용 사례

01Implementing UI changes based on visual feedback provided by humans directly on the webpage

02Mapping rendered UI components to their respective codebase locations instantly to accelerate development

03Debugging complex styling issues by inspecting computed styles and testing live CSS fixes

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add nguyenvanduocit/claude-annotator-plugin annotator

For use in Claude.ai and ChatGPT

Download Skill