Point, don't describe

"The button in the top right, no, the other one, the grey one next to the title." You have typed a sentence like this. The agent edited the wrong button.

Now watch the same feedback given by pointing.

What just happened

The toolbar in the corner is Agentation, by Benji Taylor. It runs inside your app while you develop it. You click an element, type a short critique, and it turns that into structured notes an agent can read: the element's selector, the file it lives in, its computed styles and your words.

Pointing beats describing. The agent no longer guesses which button. It is handed the button.

Set it up once

1. Install the package

   Add it as a development-only dependency.

2. Mount it in development only

   Render it in your root layout behind a development check, so it never ships.

3. Optional: connect your agent

   Add Agentation's MCP server so the agent reads notes directly instead of you pasting them.

$ npm install --save-dev agentation

Install agentation as a dev dependency and mount its toolbar in the root layout,
after the page content, only when process.env.NODE_ENV === "development".
Keep the layout a server component. Don't add a second mount if one exists.

Not on Next.js? Benji ships an agentation skill that knows how to mount it in Vite, Remix, Astro and the Pages Router. Ask your agent to "set up Agentation" with that skill installed.

Two ways to hand the notes over

Paste. Click Annotate, click the element, write your note, submit. Agentation gives you markdown: selector, file path, styles, critique. Copy it into your agent. No server needed.

Over MCP. Here a little vocabulary helps. Theo Browne describes an agent as a model plus a harness: the hidden layer that hands the model its tools and runs them. An MCP server is a tool that lives somewhere else, reached by an address. Agentation's server is one such tool. Connect it, and your agent can read new annotations the moment you add them.

$ claude mcp add agentation -- npx -y agentation-mcp server

The two-session loop

With MCP connected, you can split the work across two agent sessions, each with one job.

The annotation is the contract between them: the same selector and note a person would have written. Session 1 can be you, clicking around, or an agent driving the browser on its own. Either way, you review the resulting commits, not every single note.

The skill's own verb for session 2 is short:

$ /design-engineering agentation

It pulls the annotations, fixes them one at a time with minimal diffs you could defend as review rows, and commits only if you ask.

Write notes the agent can act on

Agentation's own guidance for a good note, paraphrased:

• Two or three sentences. Longer reads as an essay; shorter is too vague.
• Specific and actionable. Not "this section needs work". Instead: "Use a three-column card grid with icons."
• Name the principle. Hierarchy, grouping, whitespace. Those words are how the agent finds the right pattern.
• Point at a product that does it right. "Like Linear's command bar."

Read my pending Agentation annotations.
For each one: open the file it names, make the smallest change that answers the note, and give me a Before | After | Why row.
One annotation at a time. Don't commit until I say so.

Where it doesn't fit

• Production. It is a development tool; it should never ship.
• A one-off marketing page. Pointing by screenshot is faster than setting up the toolbar.
• No running app. It needs something on localhost to click.