jlnankjnhpjffajbcnodbohdkpoeifmc
Turn UI annotations into coding-agent instructions. Click any element, add a note, and paste into any AI tool. Agentation Vue turns visual feedback into structured instructions for AI coding agents. Click any element on a page, leave a comment, and copy the output as Markdown — ready to paste into Claude Code, Cursor, Copilot, or any LLM. 1. Click the toolbar icon (or double-tap a modifier key) to enter inspect mode. 2. Hover over any element — it highlights automatically with full CSS path detection. 3. Click to pin a numbered marker and type your note. 4. Hit "Copy" — structured Markdown lands in your clipboard, ready for your AI tool. - Click-to-annotate — Pin markers on any element with a single click. - Multi-select — Shift+drag to rubber-band multiple elements at once. - Area select — Alt+drag to annotate a screen region. - Text selection — Highlight specific text to annotate it. - Vue component tree — Automatically detects the full Vue component hierarchy (works on any Vue 2.7 or Vue 3 app). - Keyboard-first — Double-tap a modifier key to toggle; hold it to "peek" without interrupting your flow. - Two detail levels — Standard for quick feedback, Forensic for deep debugging (bounding boxes, computed styles, accessibility attributes). - Themes — Light, dark, or auto (follows your system preference). - Session persistence — Annotations survive page refreshes, scoped per URL. The Markdown output is designed for LLMs: each annotation includes the element tag, its CSS selector path, your comment, the Vue component chain, and nearby context. Forensic mode adds viewport dimensions, user agent, bounding boxes, CSS classes, computed styles, and accessibility info — everything an AI agent needs to locate and fix the issue. All data stays in your browser. Annotations are stored in sessionStorage — nothing is sent to any server. Works fully offline. WHO IT'S FOR - Developers using AI pair-programming tools (Claude Code, Cursor, Windsurf, Copilot...) - QA teams reporting bugs with precise element context - Designers handing off feedback on live sites - Anyone who wants to point at a UI and tell an AI exactly what to change Unofficial community-maintained Vue.js port of Agentation (agentation.dev) by Ben Taylor. Also available as an NPM package for embedding directly in your Vue app.
Paper Snapshot
Copy and paste your real site directly into Paper as editable layers. No more screenshots! - Get your starting place straight from production - Mock new ideas in seconds - Paper uses html/css to render so nothing is lost in translation Less work, more design. Move faster with Paper Snapshot.
Impeccable
Detect common UI anti-patterns in any web page Impeccable detects 41 common UI anti-patterns directly in your browser. Open DevTools on any page and overlays instantly highlight issues, from AI-generated design tells to accessibility and quality problems. AI slop (design tells that scream "AI made this"): - Cream and beige "AI default" backgrounds - Purple/violet AI color palettes - Gradient text on headings - Side-tab and rounded-border accent stripes - Nested cards, monotonous spacing, icon-tile stacks - Bounce and elastic easing, hover image zoom - Dark mode with glowing accents - Overused or single-family fonts, flat type hierarchy - Oversized H1s, extreme negative letter-spacing, italic-serif heroes - Uppercase eyebrows, repeated kickers, numbered section markers - Em-dash overuse, marketing buzzwords, "not just X, it's Y" cadence - Thin borders with wide drop shadows, repeating-stripe backgrounds Quality issues (general design and accessibility): - Low contrast text (WCAG AA), gray text on colored backgrounds - Cramped padding, tight line height - Skipped heading levels - Line length too long, text running to the viewport edge - Tiny body text, justified text, all-caps body copy, wide letter-spacing - Layout-property animations, clipped overflow containers, text overflow - Broken images 1. Install the extension 2. Open DevTools on any page (Cmd+Opt+I / F12) 3. Overlays appear automatically, highlighting issues 4. Click the "Impeccable" panel tab for a structured list of all findings 5. Click any finding to jump to the element in the Elements panel - Auto-scans when DevTools opens, no manual step needed - Grouped findings: AI tells vs. quality issues - Click-to-inspect: jump from a finding to the element - Toggle overlays on/off from the panel or toolbar popup - Per-rule settings: disable detections you don't care about - Re-scans on navigation, including SPA route changes - Works on any website - Runs 100% locally, no data sent anywhere
Vibe Annotations - Visual Feedback for AI Coding Agents
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. 📌 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) with live preview changes are captured as annotations for your agent to implement in source 👁️ 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 🔍 Captures full element context: CSS selectors, styles, positioning, and viewport dimensions 🗂️ 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 🌐 Per-site enabling (beta): optionally annotate on public URLs for design reference 🧠 Intelligent project detection prevents cross-project annotation mixing 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 Install the companion server for direct agent integration. Your agent fetches annotations automatically without copy/paste. Claude Code: claude mcp add --transport http vibe-annotations http://127.0.0.1:3846/mcp Cursor / Windsurf / Codex / OpenClaw: Add the MCP server URL to your agent's config. See the extension's Get Started guide for full setup instructions. ✅ 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) 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.
React Grab
Select context for coding agents directly from your website. Makes tools like Cursor, Claude Code, Copilot run up to 3× faster React Grab lets you select context for coding agents directly from your website.
