Point at the pixel.
Ship the change.

Whatever you already use

It does not replace your AI. It writes its prompt.

Annotate Kit has no model, no API key and no opinion about which agent you should use. What comes out is text — one precise, structured prompt — so it works the same whether you paste it, pipe it over MCP, or send it to a webhook.

The gain is upstream of the model: a prompt that already carries the element, the component, the file and the line does not send your agent hunting through the repo — which is where the tokens and the iterations go.

One idea, two products

Annotate Kit for the web. Annotate Kit for iOS.

Same workflow, same design language, same annotation schema — two independent implementations, because a web page and a native iOS screen are not pointed at the same way. Pick the one that matches what you are building; the message your agent receives is the same shape either way.

For the web

Annotate any page, restyle it live

A JavaScript package that mounts an overlay on your running site: annotate, open a Figma-style inspector and change the real CSS, or wireframe a whole component — then send one agent-ready message.

Stack

JS / TypeScript · React, Vue, Svelte, plain HTML

Install

npm install annotate-kit

Repo

annotate-kit-web · private

Try it on a live page → Install Repo

For iOS

Tap any element of your running app

A Swift package for SwiftUI, Debug builds only. Tap the floating toolbar, tap an element, write a note: your agent gets the accessibility identity, the view chain, nearby texts and a marked screenshot — live over MCP if you want.

Stack

Swift · SwiftUI · Swift Package Manager

Install

.package(url: "…/annotate-kit-ios")

Repo

annotate-kit-ios · public

Repo → Runnable demo

Everything, in one place. Four repositories, one family — this is where each of them lives.

Why

Your agent cannot see what you are pointing at.

Coding agents are good at changing code and blind to the screen. Every design review turns into an exercise in describing pixels in prose — and the agent edits the wrong component, or asks three questions before touching anything.

How it works

Three steps, one message.

Features

Everything a design review needs, on the page itself.

Annotate mode

The classic loop, sharpened: click, choose Improvement, Fix or Design, write what should change. A numbered marker stays on the page so you can see what you have already said.

• Element identity an agent can grep: selector, DOM path, component, source line
• Kind chips, so the batch sorts itself
• Screenshot of the element, taken by the browser — no host setup
• The batch, laid open: click the count to review, reveal or drop any item

Design mode

A Figma-style inspector docked on the right. Restyle the real element — colour, type, spacing, radius, shadow — and watch the page change under you. Every edit is recorded as a before/after the agent can apply to the source.

• States: design the hover, focus, active and disabled versions, not just the one on screen
• Your palette: the project's own colours and typefaces, read off the page, offered first
• Guardrails: off-rhythm spacing and unreadable contrast are flagged, never blocked
• Edits reference your design tokens (var(--brand-500)), not raw hex

Wireframe mode

Pick a component and it drops to grey and white blocks — no text, no images, no opinions. Drag the blocks, resize them, remove one, add another. You are asking for a new arrangement, not describing one.

• Only what a person can see becomes a block: invisible wrapper divs are walked through, never drawn
• Drag, resize, drop and name each block
• The result ships as an annotation, with the before and after geometry

Every screen size

Desktop, tablet, phone — from the toolbar, without leaving the page or losing the session. Every note records the width it was written at, because "make this smaller" means opposite things at 1440 and at 390.

• Written at Phone · 390px travels with each item
• Annotation pauses while you choose a size — the modes never fight

Your project's own palette

The colour picker opens on the colours the page already uses — read from its CSS variables, or from what it actually paints when there are none. Pick one and the agent is told it is --ink, not #10201F.

• Works on the first connection to any codebase: Tailwind, CSS modules, plain CSS, styled-components
• Off-palette colours are named as such, and still allowed
• An eyedropper, for the colours that are on screen but not in the system

Who it is for

So designers can finally ship the change themselves.

Vibe-coding works right up to the moment you have to describe a screen in words. A designer knows exactly what is wrong and cannot say it in a way an agent can act on; a developer can say it and did not notice it. Annotate Kit removes the translation step: you point at the thing, and the agent receives the thing.

Why it costs less

A precise prompt is a cheap prompt.

An agent that does not know which element you mean has to go and find out: grep the repo, open candidate files, read components, guess, ask, try, be told it is the wrong one, try again. Every one of those steps is tokens in and tokens out — and the search is the expensive part, not the fix. Hand it the selector, the component, the source line and the exact before/after value, and there is nothing left to search for.

What the agent gets

One message, already a plan of work.

Not a list of complaints: a briefing. The batch is sorted into lots by kind, each lot split into groups that cannot touch each other, with the instruction to run one sub-agent per group — and the reason why the rest must not be split.

## Page feedback — /pricing

- **Items**: 5
- **Annotated at**: Phone · 390px

## How to work through this

3 kinds of work, 3 independent groups in total. Run one sub-agent per group —
every group below touches a different part of the page.

### Design — 2 items
- Group 1: items 1, 2 — one worker takes all of them, in this order.
  These elements contain one another, so splitting them would have two
  workers changing the same component from two directions.

## Design (2)

### 1. Design — background-color: #FFFFFF → #FBF9F4
- **Element**: `div.hero-card`
- **Selector**: `div#root > div.shell > section.hero > div.hero-card`
- **React component**: `<Landing>` (`src/pages.tsx:44:9`)
- **Written at**: Phone · 390px
- **Design edits (1)**:
  - `div` (`:hover`) · `background-color`: `#FFFFFF` → `#FBF9F4`
    "newValueToken": "var(--paper)"

The instructions are stated once for the whole batch, with the project's token table, so five edits do not repeat forty lines of preamble five times. Copy it to the clipboard, or send it straight to an agent over MCP or a webhook — and when the agent answers back, every marker on the page changes shape: working, done, or refused.

Install

Two lines, and it is on your page.

// npm install annotate-kit

import { createAnnotateKit } from 'annotate-kit';

const kit = createAnnotateKit({
  // Where the batch goes: clipboard, your own callback,
  // an HTTP endpoint, or an MCP bridge.
  transport: clipboardTransport(),
});
kit.mount();

React, Vue, Svelte or plain HTML — the kit mounts itself onto the page and does not care what rendered it. There is a <script> build too, for pages with no bundler at all.

What it costs

Bought once. Yours for good.

No subscription, no seat counting, no meter running while you think. You buy Annotate Kit once and the version you bought is yours for life, on as many applications as you like. Updates are the only thing paid again — and only if you want them.

Adapting only pays off if the next release does not undo your work, so the package publishes a versioned contract: the API, the DOM attributes and the extension points that will not break inside a major version.

# set it up — writes your config and a brief for your own agent
npx annotate-kit init

# when you take an update — says what moved, before it breaks
npx annotate-kit upgrade

init reads your codebase, asks what it cannot detect — framework, design system, where feedback should go, where your engineering rules live — and writes annotate-kit.config.js plus ANNOTATE-KIT.md, a brief your own coding agent uses to finish the integration in your idiom. Every choice lives in that one file, so taking an update is a version bump instead of a merge.

Made for you

Want this, but built around your company?

Annotate Kit is one answer to one problem. If you have the same problem in a different shape — your design system, your review process, your agents, your internal tools — it can be built for you rather than adapted by you. Same for a project that has nothing to do with annotation: if it is software that has to work on the first day it ships, say what you need and we will talk about it.