У вашего сайта появился посетитель нового типа: сегодня часть пользователей переходит от ручной навигации к делегированию целевых сценариев ИИ-агентам. Эти автономные системы способны интерпретировать вводные данные, планировать и выполнять действия от имени человека.
Однако многие сайты создают красивыми только для людей — со сложными hover-эффектами, перестраивающимися макетами и плавными анимациями. Для агентов все это попросту не работает.
Как агенты видят ваш сайт
Агенты не смотрят на сайт через монитор. Они работают с машиночитаемым представлением страницы. Качество этого представления и определяет, насколько хорошо агент справится с задачей.
Есть три основных способа, благодаря которым агент «видит» сайт: скриншоты, исходный HTML и дерево доступности (accessibility tree).
Скриншоты
Агент делает снимок отрисованной страницы и с помощью модели компьютерного зрения распознает элементы. По скриншоту он понимает, что строка в правом верхнем углу — это глобальный поиск, а поле по центру — скорее всего, элемент формы. Визуальные подсказки полезны: цвет, размер и расположение элементов помогают агенту оценить их значимость. К крупной кнопке «Удалить» он отнесется с большей осторожностью, чем к маленькой ссылке «Справка». Но анализ скриншотов медленный и затратный по токенам, поэтому его лучше использовать как запасной вариант, когда структура страницы неясна.
HTML
Агент анализирует DOM и читает HTML. Он понимает вложенность элементов, логическую иерархию DOM-дерева, атрибуты вроде id и class, задающие структуру, а также текстовые данные, которые составляют информационную основу сайта. Это помогает агенту разобраться в связях между элементами. Если кнопка «Купить» находится внутри карточки товара, агент считает, что она относится именно к этому товару.
Дерево доступности
Дерево доступности — это нативный API браузера, который сводит DOM к самому важному: ролям, названиям и состояниям интерактивных элементов. По сути, это семантическая выжимка страницы, которой пользуются вспомогательные технологии. Для ИИ-агента оно служит точной картой, игнорирующей визуальный «шум» CSS и сосредоточенной на чистой функциональности. Считывая это дерево, агент понимает функциональное назначение каждого переключателя, ползунка и поля ввода.
Примечание: просмотреть дерево доступности можно в Chrome DevTools.
Комбинирование модальностей
Опора на один источник данных создает семантический разрыв. Например, в DOM агент может видеть <div>, не подозревая, что вы превратили его в работающую кнопку с помощью CSS и JavaScript. По скриншоту агент способен определить, где эта кнопка расположена на экране, но он по-прежнему не знает, куда она ведет и какое действие должна запускать.
Поэтому современные агенты комбинируют несколько модальностей. Они используют DOM и дерево доступности, чтобы получить чистый структурированный список интерактивных элементов, а затем сверяют его с визуальной отрисовкой, чтобы понять макет, группировку и визуальные подсказки.
Ваша задача — давать четкие сигналы по всем этим каналам.
Как сделать сайт удобным для агентов
Чтобы помочь агентам ориентироваться на вашем сайте, учтите следующее:
- Все необходимые действия — и для человека, и для агента — должны наглядно отображаться в интерфейсе.
- Обеспечьте стабильность макета. Агенты, работающие со скриншотами, скорее всего, запутаются, если макет постоянно меняется. Например, если кнопка «В корзину» на странице товара располагается по-разному для каждой категории.
- Избегайте «призрачных» элементов и прозрачных оверлеев, которые могут перекрывать интерактивные элементы. При визуальном анализе агент может отбросить перекрытые узлы, даже если перекрывающий элемент прозрачен.
- Проектируйте интерактивные элементы на основе семантического HTML. Используйте теги <button> и <a> вместо переделанных <div> и <span> — агенты распознают их как интерактивные.
- Если использовать семантический HTML невозможно, всегда задавайте элементу подходящую роль и tabindex. Например, <div role="button">.
- Задавайте в CSS свойство cursor: pointer — это сильный сигнал о том, что элемент кликабелен.
- Добавляйте атрибут for к тегам <label>, чтобы связать их с полями ввода. Так ИИ-агент поймет назначение поля по тексту привязанной к нему метки.
- Следите, чтобы у интерактивных элементов, без которых пользователю не продолжить путь, видимая область превышала 8 квадратных пикселей. Иначе они могут быть отброшены при визуальном анализе.
Дальнейшие шаги
Все, что было предложено выше в целях адаптации сайта для ИИ-агентов, одновременно делает его лучше и для людей.
Адаптация под ИИ-агентов — это повод вернуться к основополагающим принципам: строить хорошо структурированные, доступные и семантически правильные сайты.
