Handwritten notes on your screenshots

annotate is a skill and CLI for coding agents. They point at an element, it places the note and the arrow. Try it on the screenshot below.

GitHub

spec.json

{
  "image": "notra-home.png",
  "notes": [
    { "text": "logos stand in for the brand names", "to": [789, 320, 112, 112] },
    { "text": "one loud action, the other stays quiet", "to": [917, 923, 295, 44] }
  ]
}

$ annotate spec.jsonnotes: 2warnings: []layout: 136 ms

Rendered by the CLI

Each image comes from a spec in the repo's docs/examples.

An invite form before and after, with notes on spacing and button order — Before and after

Pricing cards in light and dark mode with notes — Light and dark

A dense plan comparison table with notes in the margins — A dense table