Как я ускорил работу с Claude Code в 2 раза: разбираем Agentation

Я совсем не опытный фронтендер, но вайбкодинг уважаю и люблю. Отдельная боль - это создание стабильных и хороших UI для своих проектов. И вот представь: используешь Claude Code в разработке своего очередного стартапа-единорога и пытаешься объяснить агенту, что нужно поправить: "сделай кнопку темнее и ту фигуру закругленней". Какую? «Ну ту, в сайдбаре». Так их там три. «Вторую сверху, с иконкой». Агент правит первую и как итог - ты возмущаясь, пишешь подробное описание с координатами, классами, соседними элементами и всё равно 50 на 50, что он поймёт. Если знакома эта боль, то позволь рассказать про штуку под названием Agentation.

Реноме у неё довольно рекламное: за пару месяцев проект набрал 120 000+ загрузок на npm и наделал много шума, став частью воркфлоу многих разработчиков, которые активно вайб-кодят с AI. В этой статье разберем: что это за штука, как устроена, зачем нужна версия 2.0 с MCP, как завести и пользоваться самому и стоит ли вообще тратить время. Спойлер: если ты React-разработчик и работаешь с AI-агентами, то да, как минимум попробовать стоит.

Что за проблема?

Когда работаешь с AI-агентом над UI, есть два стула подхода:

• Скриншот + описание. «Вот скрин, видишь кнопку справа? Сделай её больше». Агент смотрит на картинку, пытается угадать, какой это компонент в коде. Угадывает через раз, да еще и рядом что-нибудь зацепит.

• Текстовое описание. «В компоненте Header есть кнопка Submit, она слишком маленькая». Если в проекте три компонента с кнопкой Submit - ха, удачи.

Проблема здесь одна и очевидная: у тебя нет связь между тем, что ты видишь на экране, и тем, где это лежит в коде. Ты точно знаешь, что не так, можешь даже ткнуть мышкой, но агент тебя не понимает. И вот ты тратишь кучу времени и сжигаешь месячные лимиты на объяснения, вместо того, чтобы фиксить проблемы.

Что такое Agentation и что он делает?

Agentation - это React-компонент, который добавляет в твоё приложение режим аннотаций. Что это такое: ты кликаешь на любой элемент в твоем UI, пишешь комментарий о нем в появившимся окне - и получаешь markdown текст с CSS-селекторами, позицией и контекстом. Этот markdown копируешь в агента, и он точно знает, где искать проблему, ведь у него есть точное описание проблемной области. Вот как это выглядит:

## Annotation - **Selector:** `.sidebar > button.primary` - **Classes:** btn, btn-primary, submit-action - **Position:** x: 245, y: 180, width: 120, height: 40 - **Text content:** "Submit" - **Note:** "Сделай темнее и добавь hover-эффект"

Ключевые фишки:

• Клик по элементу - это автоматический захват селекторов, классов, позиции.

• Выделяешь текст и агент знает точную строку для исправления опечаток.

• Можно выделять нескольких элементов разом (удобно для batch-правок).

• Можно выделить пустую область для фидбэка по layout («здесь должен быть отступ или здесь слишком пусто»).

• Заморозка CSS-анимаций - это одна из любимых фич: состояние, которое существует 0.3 секунды, теперь можно поймать и аннотировать.

• Выход - это просто чистый markdown. Работает с Claude Code, Cursor, Windsurf, чем угодно.

Что Agentation НЕ делает: он не генерирует код. Это инструмент для формирования контекста, а не замены агента: все еще надо будет платить за Claude/GPT/что-там-у-тебя.

Как работает?

Архитектура максимально простая и понятная - это один React-компонент без внешних зависимостей.

import { Agentation } from 'agentation'; function App() { return ( <> <YourApp /> {process.env.NODE_ENV === "development" && <Agentation />} </> ); }

После добавления в layout появится toolbar в углу экрана и он по дефолту справа внизу, но можно перетащить.

Как ходит клик:

1. Активируешь режим аннотаций (клик по иконке в toolbar).

2. Наводишь на элемент, и он подсвечивается, показывается имя/селектор.

3. Кликаешь и открывается поле для заметки.

4. Пишешь фидбэк, жмёшь Add.

5. Agentation генерирует markdown с контекстом.

6. Копируешь, вставляешь в агента.

7. Агент находит код по селектору, правит.

8. Profit, повторяешь, пока не станет идеально.

4 режима детализации результата:

Для 90% задач хватает стандартного. Forensic нужен для отладки сложной анимации и хитрых CSS-проблем.

Как упоминал выше - одна из фишек это Animation Pause. Это очень крутая штука для CSS-анимации. Ловить состояния сложных анимаций в определённой фазе нереально, так как всё это существует доли секунды. Agentation умеет замораживать все анимации (CSS, JS, даже видео), чтобы ты мог кликнуть на нужный кадр и пожаловаться на него агенту.

Версия 2.0

Наверное, ты читаешь и думаешь: как-то всё это неудобно, не современно - что-то копировать в одном окне, переносить руками в другое. Разве для этого мы тут всякие ИИ-агенты изучаем, вот бы автоматизировать это как-то. Также подумали и авторы Agentation и выпустили 2.0-версию с главным нововведением: поддержкой Model Context Protocol (MCP).

MCP это открытый протокол от Anthropic для подключения AI к внешнему миру. Agentation 2.0 поднимает локальный MCP-сервер, и агент может:

• Получать список текущих аннотаций онлайн

• Помечать их как: "взял в работу"

• Помечать и отвечать, что исправил и что сделал

• Или отвечать почему не будет их исправлять

• Задавать уточняющие вопросы

По итогу это настоящий двусторонний диалог: ты указываешь на проблему, агент отвечает, ты уточняешь, он правит, и всё в реальном времени. И никаких копировать вставить.

React Component Detection

Ещё одна фишка v2 это показ иерархии React-компонентов, а не только DOM-элементов.

• Раньше: .css-1a2b3c > div > button- агенту приходится искать по сгенерированным классам.

• Теперь: ProductCard > ActionButton- агент ищет по именам компонентов, которые ты используешь в коде.

Туториал: установка и первые шаги

Сделаю краткую заметку-туториал, надеюсь кому-то будет полезно. Совершенно ничего сложного нет.

Шаг 1: Установка

npm install agentation -D # или pnpm add agentation -D

Шаг 2: Интеграция в приложение

Для Next.js App Router (app/layout.tsx):

import { Agentation } from 'agentation'; export default function RootLayout({ children }) { return ( <html> <body> {children} {process.env.NODE_ENV === "development" && <Agentation />} </body> </html> ); }

Для Next.js Pages Router (pages/_app.tsx):

import { Agentation } from 'agentation'; export default function App({ Component, pageProps }) { return ( <> <Component {...pageProps} /> {process.env.NODE_ENV === "development" && <Agentation />} </> ); }

Шаг 3: Первая аннотация

1. Запускаешь dev-сервер (npm run dev)

2. Открываешь приложение в браузере

3. Видишь иконку Agentation в правом нижнем углу

4. Кликаешь по ней и активируется режим аннотаций

5. Наводишь на любой элемент и он подсвечивается

6. Кликаешь, пишешь заметку, жмёшь Add

7. Кликаешь Copy и markdown в буфере

8. Вставляешь в Claude Code / Cursor

Шаг 4 (опционально): Подключение MCP

Если хочешь убрать copy-paste (советую, так гораздо удобнее):

npm install agentation-mcp npx agentation-mcp init npx agentation-mcp server

Добавляешь в конфиг Claude Code (~/.claude/settings.json):

{ "mcpServers": { "agentation": { "command": "npx", "args": ["agentation-mcp", "server"] } } }

Теперь в Claude Code можно писать «посмотри на мой фидбек» или «поправь фикс под номером 2» - агент видит аннотации напрямую и в реальном времени.

Для Claude Code есть skill:

npx skills add benjitaylor/agentation

Он сам определит фреймворк, установит пакет и добавит компонент в layout. Можно пойти и таким путем.

Честный взгляд: плюсы, минусы и ограничения

Плюсы мы обсуждали почти весь обзор выше, но еще раз кратко топ моих плюсов:

• Самое главное - это сама концепция аннотаций, что ведет к сокращению итераций на исправление UI проблем => экономит драгоценные токены.

• Разбор анимация по кадрам - реально уникальная фича.

• MCP в v2. Убирает ручной copy-paste + realtime ответы.

• Работает с любым агентом, который понимает markdown => не привязан к экосистеме.

• Нет зависимостей.

• Бесплатный и open-source. MIT для внутреннего использования.

Что по минусам:

• Только для React 18+. Vue, Svelte, Angular, Solid - это все не про него. Если у тебя не React, то Agentation не для тебя, но всё быстро меняется.

• Копировать-вставить в v1. Без MCP всё ещё ручной handoff, а MCP требует настройки и не все агенты его поддерживают.

• Нужен доступ к коду. Агент должен иметь доступ к твоей кодовой базе, чтобы найти селектор. Если работаешь с внешним API/сервисом, то тут он уже не поможет.

• Desktop only. Мобильные браузеры не поддерживаются - это инструмент для разработки, а не для тестирования на телефоне.

• Не работает без агента. Agentation формирует контекст, но не генерирует код. Нужна подписка на Claude/Cursor/что-там-у-тебя.

Еще пару минусов из личного опыта:

• Сложные селекторы. Если у тебя CSS-in-JS с генерируемыми классами типа .css-1a2b3c, селектор будет бесполезен. Версия 2.0 с React Component Detection частично решает это, но не полностью.

• Большие проекты. Если в проекте 500 компонентов, grep по селектору может дать несколько результатов и агенту придётся гадать на кофейной гуще.

Выводы: для кого это и стоит ли пробовать

Agentation для тебя, если:

• Работаешь с React 18+

• Активно используешь AI-агенты для UI-правок (Claude Code, Cursor)

• Устал объяснять агенту, какой именно элемент имеешь в виду

• Много работаешь с анимациями и transitions

• Практикуешь vibe-coding и хочешь ускорить итерации

Agentation НЕ для тебя, если:

• Используешь Vue, Svelte, Angular или что-то кроме React

• Ненавидишь vibe coding

• Ожидаешь «поставил и забыл» (это dev-инструмент, требует участия)

• Работаешь в основном с backend-кодом

• Ожидаешь идеального результата от этого инструмента

Мой вердикт: если ты React-разработчик и уже используешь ИИ-агентов для UI, Agentation стоит попробовать. Установка занимает 2 минуты, и, возможно, «нет-нет-да» поможет. Особенно если много работаешь с визуальными правками. Но, как уже говорил, инструмент не идеальный и не является «революцией» или «уничтожителем разработки фронтенда» - это просто еще одна отвертка в твоем ящике инструментов.

Полезные ссылки:

• agentation.dev — официальный сайт и документация

• github.com/benjitaylor/agentation — GitHub-репозиторий

• npmjs.com/package/agentation — npm-пакет

• agentation.dev/mcp — документация по MCP-интеграции

• benji.org/agentation — пост автора с демо и философией