nicobailon/pi-annotate

Visual feedback from browser to AI. Click elements, add comments, fix code.

What it solves

Pi Annotate provides a way to visually communicate UI bugs and design changes to AI agents. Instead of manually describing a layout issue or copying CSS, users can click elements on a webpage to capture the exact technical context (selectors, box models, accessibility roles) and screenshots that an AI agent needs to fix the code.

How it works

It functions as a browser extension (for Chrome/Chromium) paired with a native host and a Pi extension. When a user runs the /annotate command, the tool injects an annotation UI into the browser. Users can select elements, add comments, and even use an "Etch" mode to record real-time DevTools edits. This data—including HTML attributes, CSS styles, and visual crops—is then packaged into a structured Markdown report and sent to the AI agent.

Who it’s for

Frontend developers and designers who use AI agents to assist with UI/UX implementation and bug fixing.

Highlights

  • Deep Context Capture: Automatically collects box model data, accessibility info, and key CSS styles for selected elements.
  • Edit Capture (Etch): Tracks live changes made in browser DevTools via MutationObserver and provides before/after screenshots and property diffs.
  • Visual Note Cards: Features a Figma-like experience with draggable floating notes and SVG connectors linking comments to elements.
  • Remote & WSL Support: Supports annotating pages on remote SSH hosts or within WSL environments via a native messaging bridge.

Related

  • Project
    a2328275243/mempalace-evolve

    A local-first long-term memory layer for AI agents that stores durable facts and manages context through isolated project boundaries called wings.

  • Project
    KhronosGroup/OpenCL-ICD-Loader

    The official Khronos OpenCL ICD Loader allows applications to interface with multiple OpenCL hardware implementations without linking to a specific vendor driver.

  • Project
    open-mmlab/labelbee

    A rendering and component library focused on the annotation experience, designed to help developers quickly build data labeling applications.

  • Project
    sleuth-io/sx

    A distribution and versioning system for AI assets like skills, prompts, and agents, allowing teams to share them across different AI tools using shared folders or Git vaults.