Дизайн для наблюдающих агентов

Пользователь больше не один за экраном. Пока человек читает заголовок, AI-агент разбирает DOM, называет кнопки, оценивает селекторы и решает, можно ли управлять вашим продуктом от имени кого-то другого. Дизайн для одного пользователя был роскошью 2024 года.

Сдвиг структурный, а не косметический. Cursor вызывает ваши кнопки. Claude читает ваши скриншоты. Anthropic Computer Use кликает по вашим формам. OpenAI Operator покупает товары на вашей странице оплаты. К каждой поверхности, которой касается человек, теперь касается и агент, причём с другими критериями того, что считать хорошим.

Две аудитории, один экран

У каждой продуктовой поверхности в 2026 году есть человеческая плоскость и машинная плоскость, уложенные в один и тот же DOM.

Человеческая плоскость это то, что дизайнеры всегда и выпускали. Поток, вкус, иерархия, доверие, которое пользователь чувствует, когда кнопка делает то, что обещает подпись. Машинная плоскость это та же поверхность, прочитанная другим пользователем. Стабильные селекторы, именованные аффордансы, семантический HTML, машиночитаемый статус, структура, которую агент разбирает без двусмысленности.

Ошибка большинства команд в том, что они считают две плоскости одной и той же плоскостью с разными приоритетами. Это не так. Кнопка может выглядеть идеально для человека и быть невидимой для агента, если её доступное имя «нажмите здесь» или её узел DOM это div с обработчиком клика.

Пять слоёв, где проявляется наблюдение агентов

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

Слой 1: поверхности инструментов это именованные кнопки, которые вызывают агенты

Поверхность инструмента это любая возможность продукта, которую агент может вызвать по имени. Вызовы инструментов в Cursor, tool use у Claude, экранные действия Anthropic Computer Use, команды запуска в Vercel Sandbox. Агент думает не пикселями, а именованными глаголами.

Каждое основное действие в вашем продукте это кандидат в поверхность инструмента. Stripe здесь золотой стандарт, и он на десятилетия старше момента агентов: у каждого действия есть именованный, задокументированный, предсказуемый аффорданс. customers.create делает то, что говорит название. Продукт, чьи основные действия спрятаны за безымянными кнопками, агент не сможет водить без гаданий.

Дизайнерский ход: относиться к каждому важному действию как к именованному инструменту. Подпись, ARIA-описание, маршрут, API-эндпоинт и обработчик Model Context Protocol должны нести один и тот же глагол. Агенты и люди тогда тянутся к одному и тому же аффордансу через разные двери.

Слой 2: стабильность селекторов это контракт дизайнера с агентом

В 2024 году дизайнер мог выпустить <div onClick={handle}> и считать работу сделанной. В 2026 этот же div ломает каждую интеграцию с агентом в тот день, когда кто-то рефакторит обёртку.

Стабильность селекторов это гарантия, что аффордансы, которые агент выучил вчера, будут работать завтра. Три решения. Используйте семантический HTML там, где он есть: <button>, а не <div>. Добавляйте data-testid ко всему, что должен найти агент или тестовый раннер. Держите доступные имена стабильными между релизами, так же как вы держите стабильными имена полей API.

Linear необычайно хорош в этом, потому что Linear строился по принципу API-first, а UI это лишь одна из многих поверхностей. У каждого основного действия есть стабильный селектор и стабильное имя. Большинство корпоративных SaaS при рефакторинге меняют имя класса и молча ломают каждую интеграцию, которая его трогала. Агент не получает уведомления об устаревании. Он просто перестаёт работать.

Слой 3: машиночитаемая структура это дизайн-артефакт, который вы раньше пропускали

Агент, читающий ваш продукт, читает и ваши теги Open Graph, ваш JSON-LD, ваш sitemap, а всё чаще ещё и файлы llms.txt и AGENTS.md. Каждый из них в 2026 году это дизайн-артефакт, а не рутина разработчиков.

AGENTS.md это новый README, только аудитория у него модель. Он сообщает агенту, что делает ваш продукт, какие поверхности безопасны и какие соглашения важны. JSON-LD сообщает агенту, чем является каждая страница. Эндпоинт Model Context Protocol сообщает агенту, какие инструменты предоставляет продукт и как их вызывать.

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

Слой 4: читаемость статуса значит, что машина может понять, что только что произошло

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

Читаемость статуса делает каждое состояние обнаруживаемым для машины. API Linear возвращает стабильный объект ответа для каждого действия. Конечный автомат деплоя Vercel имеет именованные состояния, READY, BUILDING, ERROR, со структурированной нагрузкой на каждом переходе. Claude Code стримит каждый вызов инструмента и результат как структурированный текст, который агент может разобрать.

Дизайнерский ход: статусный слой, который агент читает рядом с визуальным. ARIA live-регион, объявляющий новое состояние. Тост со структурированным role="status". Объект ответа, который агент получает обратно, когда вызвал инструмент. Человек оставляет спиннер, агент получает структурированное событие. Та же позиция, что и в дизайне для AI-задержки, который должен читаться сразу в обеих плоскостях.

Слой 5: сигналы доверия замыкают круг после действий агента

Когда агент что-то делает от имени пользователя, пользователь должен быстро увидеть, что именно. Большинство продуктов пропускают этот слой, а он решает, станет ли кто-нибудь доверять интеграции настолько, чтобы воспользоваться ей дважды.

Одобрение диффов в Cursor это хрестоматийный пример. Агент правит файлы, дифф появляется прямо в тексте, пользователь принимает или отклоняет каждый фрагмент. Артефакты Claude несут тот же паттерн в другой форме. GitHub Copilot Workspace это двухпанельная поверхность «спланируй и выполни» с принятием или отклонением на каждом шаге.

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

Что на самом деле выпускают продукты, которые делают это хорошо

Рамку двойного пользователя проще увидеть на выпущенных продуктах. Короткие разборы, каждый конкретный.

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

Артефакты Claude. Панель предпросмотра артефакта это контракт между агентом и человеком. Агент производит, человек проверяет, у артефакта стабильный URL и структурированный вывод, который может подхватить следующий агент.

Anthropic Computer Use. Скриншоты это контракт между агентом и продуктом. Каждое решение о визуальной иерархии и подписях теперь решение о читаемости для агента. Кнопка-иконка без доступного имени это кнопка, о которой агенту приходится гадать.

Vercel v0. Контракт «промпт человека и рендер агента» это вся поверхность. Пользователь описывает, агент рендерит, каждый рендер это артефакт, доступный для проверки.

Linear и Stripe. Оба AI-native по позиции и API-first по архитектуре. Каждое основное действие названо, стабильно и вызываемо. Обе компании внедрили эту дисциплину до момента агентов, поэтому каждый агентный продукт чисто с ними интегрируется.

Replit Agent, Raycast и GitHub Copilot Workspace завершают список. Replit показывает работу агента как живое редактируемое рабочее пространство. Палитра команд Raycast это поверхность, которую люди и агенты разделяют изначально. Двухпанельный паттерн Copilot Workspace фиксирует план письменно до действия, что делает возможной коррекцию посреди выполнения.

Полную библиотеку паттернов, общих для этих продуктов, раскладывает разбор паттернов UI-дизайна для AI-агентов, а архитектуру под ними описывает материал про дизайн AI-native продуктов.

Антипаттерны, которые ломают интеграции с агентами

Пять режимов отказа повторяются снова и снова. Каждый из них это дизайнерское решение, а не инженерный недосмотр.

Суп из div. Каждый кликабельный элемент обёрнут в <div>, потому что так проще стилизовать. Каждый рефакторинг ломает каждый селектор. Решение: семантический HTML по умолчанию и data-testid на всём, что должно пережить смену имени класса.

Скрытые аффордансы, требующие наведения. Кнопка «редактировать», которая появляется только при наведении мыши. Агенты не наводят курсор. Решение: аффордансы, доступные с клавиатуры и присутствующие в DOM независимо от состояния указателя.

Ссылки «нажмите здесь». Пять ссылок «нажмите здесь» на одной странице это пять одинаковых аффордансов для всего, что читает DOM. Решение: текст ссылки, называющий пункт назначения.

Состояния успеха, переданные только цветом. Зелёная рамка, зелёная вспышка, зелёная иконка. Ничто из этого не обнаружить без модели зрения. Решение: структурированное событие, ARIA live-регион или объект ответа рядом с визуальным сигналом.

Модальные окна без находимого закрытия. «X», который является <svg> без подписи. Решение: доступно названная кнопка закрытия в каждом модальном окне и задокументированное поведение при Escape.

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

Аудит двойного пользователя

Прогоните его на любой поверхности перед релизом. Семь вопросов, три минуты.

1. Именованное действие. У каждого основного действия есть стабильное доступное имя и стабильный селектор.
2. Машинное состояние. Каждое изменение состояния порождает структурированное событие.
3. Видимый дифф. Каждое изменение, сделанное агентом, показывается как артефакт для проверки до коммита.
4. Путь с клавиатуры. Каждый аффорданс, доступный только по наведению, достижим и без указателя.
5. Стабильный селектор. У каждого интерактивного элемента есть data-testid или семантический эквивалент, переживающий рефакторинг.
6. Человек в контуре. Разрушительные действия проходят через подтверждение, катастрофические через двойное, обратимые выполняются с отменой.
7. Задокументированная поверхность. Продукт поставляется с AGENTS.md или эквивалентом, объясняющим агенту, что здесь есть, что безопасно и какие соглашения важны.

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

Аудит это привычка, а не разовое упражнение. Каждая новая поверхность, каждый рефакторинг, каждый ребрендинг проходит через эти семь вопросов до релиза, так же как каждый редизайн проходит проверку на доступность. Читаемость для агентов это новая доступность, и она накапливается так же.

О версии этой дисциплины для слоя ввода читайте про поверхности промптов. О следствии для пустых состояний читайте пустые состояния это и есть продукт. О фундаменте под всем этим рассказывают принципы веб-дизайна, объясняя, почему структура теперь это эстетика.

FAQ

Что на самом деле значит дизайн для AI-агентов в 2026 году?

Относиться к агенту как к полноправному пользователю вашего продукта, а не как к боту, от которого надо защищаться. Агент читает ваш DOM, вызывает ваши кнопки и судит ваш интерфейс по критериям, которых человек никогда не увидит. Каждой поверхности нужны человеческая и машинная плоскости, разделяющие одни и те же аффордансы, состояния и словарь.

Чем это отличается от дизайна доступности?

Большая часть пересекается. Стабильные доступные имена, семантический HTML, достижимость с клавиатуры, структурированный статус, всё это дисциплина доступности, применённая к новому пользователю. Новый слой это поверхности инструментов и машиночитаемая структура, включая эндпоинты MCP, файлы AGENTS.md и JSON-LD. Считайте доступность фундаментом, а читаемость для агентов следующим этажом.

Нужен ли мне MCP-сервер, чтобы быть готовым к агентам?

В первый день нет. Продукт с чистым DOM, именованными действиями, стабильными селекторами, структурированным статусом и артефактами для проверки уже готов к агентам на 80 процентов. MCP-сервер делает работу агента быстрее и надёжнее, но сначала выпускайте структуру, а протокол потом.

Два пользователя, один экран, одна задача

Агент не угроза дизайну. Это второй пользователь с другими потребностями, и продукты, которые относятся к нему именно так, уже отрываются от тех, что не относятся.

Большинство команд всё ещё проектируют для одного пользователя. Бренд-бриф говорит о человеке, мудборд рисует человека, исследования опрашивают человека. Агент появляется после запуска, когда приходит запрос на интеграцию, и команде приходится задним числом дорабатывать селекторы, имена, структуру, доверие. Доработка всегда стоит дороже, чем проектирование обеих плоскостей с первого дня.

Сдвиг не технический, это позиция. Относитесь к каждой поверхности как к поверхности для двух пользователей, прогоняйте аудит до релиза, дарите агенту ту же заботу, что и человеку. Откажетесь, и трафик агентов, партнёрство и выручка достанутся чужому продукту.

Если вам нужна команда, которая выпускает бренд и продуктовый UI сразу с обеими спроектированными плоскостями, а не сшитыми потом, наймите Brainy. Человеческую плоскость мы проектируем так, как делали всегда, а машинную как второго пользователя, которым она и является.