Annotating for agents

AI coding tools have gotten increasingly good at understanding visual feedback. v0, Lovable, Bolt, Cursor, and others all let you select elements, describe changes, and iterate on what you see. Claude Code obviously understands what to do when you ask it to change something specific.

Animations and interactions however, are a different story.

Bridging the gap

Most visual feedback tools work on snapshots. That works when the problem is visible in a static frame. But animations are temporal. The problem might be in the in-between states, the timing, the way something eases out, and so on.1

"The button hover feels sluggish" is vague. Which part? The delay before it starts? The duration? The easing curve? I know exactly what I mean when I see it, but describing it loses precision.

Save
Feedback Precision
(initial impression)
Direct observation

Precision tends to decrease as feedback moves from observation to description.

The harder something is to describe, the more helpful it is to just point at it.

the gap

A different approach

For my own projects, I've been working on a tool to help with this.2 It overlays directly on localhost, letting me pause an animation at any moment, click on an element mid-transition, and leave a note.

The trick is what it captures alongside that note: timing, coordinates, file paths, animation state, etc. When I'm done, it generates a prompt for Claude Code or any other agent.3 The agent understands not just what I want changed, but when.4

Click anywhere to add feedback
Click anywhere to add feedback

With this approach, I can give feedback the way I naturally think: visually and in real time. Notice how the notes in the demos above are short. "Slow this down." "Make this more rounded." When you can point directly at something, you don't need to laboriously specify which button or which spinner. The context is already captured. These small differences add up to a process that feels more creative and less cumbersome.

What I see gets converted into what the agent needs automatically. It's a tighter feedback loop that feels far more collaborative.

Closing thoughts

The core insight isn't the tool itself, but that the gap between taste and results shrinks when you can express feedback in smaller, more natural pieces.

This particular implementation is rough and will probably feel outdated soon, but I think the underlying principle will remain true. Any approach that lets you react as naturally as possible, while capturing context automatically, is going to make the creative process feel lighter.

Footnotes

  1. Style guidelines help here. The .md files that capture animation curves and timing preferences give agents a baseline. But guidelines describe principles; feedback addresses instances. ↩

  2. Still rough, more proof of concept than polished product. But it's changed how I work. ↩

  3. There are other tools pointing in this direction. Vercel's toolbar lets you annotate previews. React Grab does element selection. Figma MCP connects designs to code. What I wanted was something focused purely on feedback: capture what you're looking at, hand it off to whatever you're already using. ↩

  4. If you build something similar, let your agent help design the prompt format. It knows what context it needs. ↩