Agentation

Что такое Agentation?

Agentation — визуальный инструмент для разметки элементов прямо в интерфейсе, после чего обратную связь можно передать AI-агентам, чтобы они точно определили цель в вашем коде. Основная цель — преобразовать неформальную обратную связь «указать на это» в структурированные, машинно-исполнимые инструкции, на которые агенты могут реагировать.

Он особенно хорошо работает с AI-инструментами для кодирования, имеющими доступ к файлам проекта, где вывод Agentation включает селекторы, пути к файлам и информацию о структуре, помогая агенту перейти к нужным строкам и компонентам.

Ключевые возможности

• Визуальная разметка на странице: Активируйте панель инструментов и кликните или выберите элементы, чтобы создать разметку, привязанную к конкретной цели на экране.
• Таргетинг элементов для агентов: Agentation генерирует путь к элементу, CSS-селекторы и детали расположения файла, чтобы агент не гадал, какой UI-элемент имеется в виду.
• Контекст кодовой базы для лучших правок: Когда агент имеет доступ к кодовой базе (например, через инструменты вроде Claude Code или Cursor), он использует селекторы для поиска, пути к файлам — для перехода к нужной строке, дерево компонентов React — для понимания иерархии, а вычисленные стили — для определения текущего вида элемента.
• Форматированный Markdown-вывод: После добавления обратной связи кликните, чтобы скопировать отформатированный Markdown и вставить в ввод агента.
• Поддержка интеграции MCP: С MCP копи-паст не нужен — агент уже видит контекст разметки; его можно попросить «исправить мою обратную связь» или «починить разметку 3».
• Управление жизненным циклом разметки: Агенты могут запрашивать существующую обратную связь (например, перечислить все разметки по страницам) и реагировать на действия вроде удаления или разрешения элементов (например, «очистить все разметки»).

Как использовать Agentation

1. Активируйте панель разметки: Панель доступна в интерфейсе Agentation (на демо-странице отмечено, что она активна).
2. Наведите для идентификации элементов: Наведите на элементы, чтобы увидеть их имена подсвеченными.
3. Создайте разметку: Кликните на целевой элемент или выделите текст (например, на демо-элементах), чтобы создать новую разметку, затем введите обратную связь.
4. Отправьте и поделитесь обратной связью: Добавьте разметку и кликните, чтобы скопировать отформатированный Markdown-вывод для вставки в агента.
5. Опционально используйте MCP: Если агент подключен через MCP, избегайте ручного копи-паста и попросите его обработать или исправить конкретные разметки.

Сценарии использования

• Отчёты об ошибках для конкретного UI-элемента: Если видите неверное состояние кнопки или стили, наведите для идентификации, разметьте с указанием ожидаемого vs. реального, поделитесь селекторами/путями, чтобы агент нашёл нужный код.
• Обратная связь по типографике и отступам: Для проблем с padding и размерами разметьте точную область компонента и попросите агента выбрать альтернативу (например, «24px или 16px») при разрешении.
• Коррекция текста/контента: Если в лейбле или копии опечатка, выделите точный текст и добавьте краткую обратную связь (например, «Текст кнопки неясен» или «контент должен быть X»), чтобы агент targeted нужную строку UI.
• Обратная связь по конкретному кадру анимации: Поставьте анимацию на паузу (через панель) в нужном кадре, разметьте это визуальное состояние и дайте обратную связь, привязанную к контексту паузы.
• Координация командной или многстраничной обратной связи: Пусть агенты перечислят все видимые разметки по страницам, разрешат по одной и очистят всё по завершении ревью.

FAQ

Как Agentation помогает агенту найти нужную часть моего приложения?
Вывод Agentation может включать CSS-селекторы, пути к исходным файлам, иерархию компонентов React и вычисленные стили, чтобы агент мог выполнить grep, перейти к нужной строке и понять, где и как элемент вписывается.

Нужно ли копировать и вставлять отзывы в агента?
Не всегда. На странице указано, что с интеграцией MCP можно обойтись без копирования-вставки, поскольку агент уже видит контекст аннотации.

Какие отзывы следует писать в аннотациях?
Страница рекомендует быть конкретным (например, четко описывать проблему), обрабатывать одну проблему на аннотацию и включать контекст о том, что ожидалось, по сравнению с тем, что видно.

Могут ли агенты задавать вопросы или реагировать на аннотации?
Да. С интеграцией MCP и схемой формата аннотаций страница описывает взаимодействия агента, такие как перечисление аннотаций, запрос уточнений, разрешение с итоговым summary и отклонение аннотаций.

Какая модель лицензирования у Agentation?
Agentation бесплатен для физических лиц и компаний для внутреннего использования. Для распространения Agentation как части продаваемого продукта страница советует связаться с ними для коммерческой лицензии.

Альтернативы

• Интерактивные инструменты для скриншотов/разметки UI (с рабочими процессами человеческой проверки): Инструменты, которые захватывают и разметкуют UI для проверки, также поддерживают обмен отзывами, но обычно не генерируют структурированные селекторы/пути к файлам для агентов, ориентированных на код.
• Шаблоны текстовых задач в трекере (например, тикеты багов): Трекеры багов помогают документировать ожидаемое vs фактическое поведение, но полагаются на описание, а не на указание агенту конкретного пути к элементу UI в кодовой базе.
• Инструменты навигации по коду, способные на агентов, без визуальной аннотации: Ассистенты для кодирования, понимающие ваш репозиторий, все равно могут действовать по отзывам, но без слоя аннотации обычно приходится описывать цель более косвенно (например, вручную называя компоненты).