Agentation
I'm excited to introduce Agentation, a visual feedback tool for AI coding agents. It started as the rough prototype I wrote about here, and it's now a proper npm package that anyone can use.
The best way to explain what it does is to show you. Every animation on this page was built with Claude Code and Agentation.1 In fact, so was the entire docs site, from the layout and components to every animated demo. I'd describe what I wanted, watch what Claude produced, click on the parts that needed work, and paste the feedback back. Agentation helped build Agentation.
A faux example of Agentation in action, made with Agentation + Claude of course.
What follows is a tour of Agentation's features. Every demo was made with the feature it's showing. Yes, it's very meta.
Building with pointing
The loop looked like this: Claude generates some UI. I look it over, interact with it a few times. Something feels off: maybe the spacing is too tight, or a color is slightly wrong, or a transition doesn't quite land. I click on the element, write a note like "needs more padding" or "make this darker," and copy the output.
That output is structured markdown with selectors, positions, and context. I paste it into Claude. Claude reads the selector, finds the code, makes the adjustment. I check again. Still not right. Another annotation. Another pass.
This went on for hours. Dozens of iterations per demo. Hundreds across the entire docs site.
Text selection
The simplest case is text. You see a typo, you select it, you write the correction. The selected string goes into the output so the agent knows exactly what to search for. I fixed dozens of copy issues on the docs site this way.
“Simple can be harder than complex: You have to work hard to get your thinking clean to make it simpl. But it's worth it in the end because once you get there, you can move mountains.”
Select text to annotate typos, content issues, or copy changes.
Element click
For everything else, you click. Agentation figures out what you clicked on and captures enough context for an agent to find it in code. Most of the demos you're seeing were refined this way: click, note, iterate.
Click any element to add feedback.
Multi-select
Sometimes you want to annotate several things at once. I used this constantly when building the docs, selecting all the navigation links that needed the same hover treatment.
Drag to select multiple elements at once.
Area selection
You can also select empty space. I used this for layout feedback, pointing at gaps where something should go or areas that felt too cramped.
Drag to select any region, even empty space.
Animation pause
CSS animations are the trickiest. The state you want to annotate might only exist for a fraction of a second. Pausing freezes everything in place so you can click on exactly the right moment.
Freeze CSS animations to annotate specific states.
The logo
Even the bunny went through this process. The ear twitches, the blinks, the eye movements: all tuned through pointing and feedback until it felt right.
I'm not sure why I chose a bunny for the logo, but it feels right.
What the output captures
When you click an element, the output includes its class names, its position in the DOM, its bounding box. When you select text, you get the exact string.
Benji Taylor
@benjitaylorhead of design @base. founder @family (acq by @aave). tools @dip.
Elements are identified by text, alt attributes, or class names.
Elements are named by their most identifying feature: text content, alt attributes, or class names.
A button is identified by its text. An image by its alt attribute. A link by where it points.2 "Make the avatar smaller" is ambiguous. img.sid-avatar is not. This precision is why the feedback loop stayed tight even after hundreds of iterations.
Calibrating context
One thing that became increasingly obvious: how much context you need depends entirely on the problem.
Fixing a typo? The agent just needs to know where the text is. Debugging why a transition feels off? That might need computed styles, bounding boxes, the element's full DOM path, etc.
So there are four output modes: Compact gives you just the selector and your note. Standard adds position and any selected text. Detailed includes bounding boxes and nearby context. Forensic captures everything, including computed styles.
Configure output detail, marker color, and behavior.
Most of the time Standard was enough. But when I couldn't figure out why the settings panel animation on the docs site felt wrong, switching to Forensic revealed the exact CSS properties being applied. Claude saw the same thing I saw, and fixed it in one pass.
Now available
Agentation is a single React component. Add it to your layout, and a toolbar appears in the corner. Click to annotate, copy the output, paste it into your agent. The output is plain markdown, so it works with Claude Code, Cursor, or whatever you're using.
npm install agentationimport { Agentation } from "agentation";
export default function Layout({ children }) {
return (
<>
{children}
{process.env.NODE_ENV === "development" && <Agentation />}
</>
);
}People talk about one-shotting: getting an agent to nail something on the first try. Agentation is less about that and more about giving the agent what it needs to give you its best shot. Sometimes that's one pass. Usually it's a few. The point is each pass counts.
This is still a v1. But even in its current form, it's already changed how I work. Hopefully it does the same for you.