UI feedback for AI coding agents

Stop describing UI bugs.
Start pointing at them.

A tiny Web Component that turns pointing at UI into machine-readable prompts: selector, position, visible text, exact CSS property changes — and on dev builds, the component's own source file.

Try the live demo

Workflow

Three steps from “that looks wrong” to a fixed commit

Pick

Click the floating Annotate button, hover any element to inspect its tag and dimensions, then click to select it. Esc cancels anytime.

Comment

Write feedback in plain language. Need precision? Open the property inspector and type exact values like font-size: 12px → 14px instead of describing them.

Hand off

One click copies a batch handoff prompt for any agent. Or register the MCP server and the agent pulls open items and marks them resolved itself — zero copy-pasting.

Playground

This page is the playground

The mock dashboard below ships with patch-mark already attached. Look for the floating button on the right edge of your screen.

Try it now: click the Annotate button on the right edge of this page, then click any element inside the mock app below. A few rough edges were left in on purpose. See if you can spot them.

https://preview.trellis.dev/dashboard

Overview

Last 30 days · updated just now

MRR

$48,230

+12.4% vs last month

Active users

8,429

+3.1% vs last month

Churn

2.4%

-0.8% vs last month

Weekly revenue

hover bars for exact values

Mon

Tue

Wed

Thu

Fri

Sat

Sun

Latest signups

Customer	Plan	Status	MRR
Ada Lovelaceada@analytical.io	Pro	Active	$249
Alan Turingalan@enigma.dev	Pro	Pending	$249
Grace Hoppergrace@navy.mil	Free	Active	$0
Margaret Hamiltonm.hamilton@apollo.io	Pro	Active	$249

Invite a teammate

they will receive a magic link

Output

What your agent receives

Every annotation becomes a self-contained Markdown prompt. The agent doesn’t guess which button you meant. It gets the exact selector, the rendered text, the position, and any property changes you typed in the inspector.

Annotations persist to localStorage by default, or stream to your own endpoint via createFetchStore. That’s how the feedback loop closes without copy-pasting.

annotation.md

## UI Feedback

- **Element:** `button`
- **Selector:** `div.app-title-actions > button.btn-export`
- **Name:** button.btn-export
- **Component:** `ExportButton`
- **Source:** src/dashboard/ExportButton.tsx:38
- **Text:** "Export"
- **Position:** top=612, left=944, 86x36
- **Page:** /
- **Feedback:** This button is green while every other action
  uses the brand blue. Make it consistent.
- **Property Changes:**
  - `background-color`: rgb(22, 163, 74) → rgb(0, 88, 208)
- **Status:** open

Features

Small surface, sharp edges

Everything you need to close the feedback loop between human and agent, and nothing you don’t.

Batch handoff

Annotate ten things, hand them off in one prompt. The list panel’s handoff bar copies working instructions plus every open item — resolved ones excluded.

You are fixing a batch of UI feedback captured with patch-mark. - **Open Items:** 7 1. Locate each element by Selector, Text, or Quote. 2. Apply the Feedback. Property Changes are exact. 3. Don’t pause for confirmation — edit and move on.

MCP server

Agents that speak MCP pull open annotations and mark them resolved themselves. The feedback loop closes with zero copy-pasting.

"patch-mark": { "command": "npx", "args": ["-y", "patch-mark-mcp", "--endpoint", "/api/annotations"] }

Property inspector

Capture exact CSS changes as from → to pairs, so “make it bigger” becomes a precise instruction.

font-size12px→14px
background-colorrgb(22, 163, 74)→rgb(0, 88, 208)

Component & source

On React / Vue dev builds the prompt carries the component name and its src/File.tsx:42 — the agent jumps straight to the file.

Text selection

Drag across any phrase to annotate it verbatim. The Quote line gives the agent an exact string to grep.

Zero dependencies

A single ESM file, ~19 KB gzipped. No runtime, no framework lock-in — Shadow DOM keeps its styles out of your app.

Install

Two lines, any page

Load the script, drop the element, done. Annotations persist locally with zero config. Connect a backend when your agent should consume them directly. The README covers the store adapter contract and React / Vue / Next.js recipes.

index.html

<!-- 1. Load the component (registers <patch-mark>) -->
<script type="module" src="https://unpkg.com/patch-mark"></script>

<!-- 2. Drop it anywhere on the page -->
<patch-mark></patch-mark>