Cursor Design Mode Annotate: как менять интерфейс сайта с помощью AI-агента

Cursor Design Mode Annotate позволяет указать на элемент работающего сайта, описать нужное изменение и передать инструкцию AI-агенту вместе с информацией об элементе и скриншотом. Для работы нужен Cursor 3.24.18 или новее. Откройте браузер внутри Agents Window и нажмите Annotate или используйте сочетание Cmd/Ctrl + Shift + D. Если нужно изменить несколько связанных частей интерфейса, включите Batch edits, чтобы собрать заметки и отправить их одним сообщением.

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

Где находится Annotate и почему вместо него отображается значок пера?

Annotate находится на панели инструментов браузера внутри Agents Window в Cursor. Доступный элемент интерфейса зависит от версии приложения.

Выполните следующие действия:

1. Откройте проект в Cursor и перейдите в Agents Window.
2. Запустите новую сессию агента или откройте существующую. Затем откройте браузер с работающим приложением.
3. Нажмите Annotate на панели браузера. Другой вариант: активируйте браузер и нажмите Cmd + Shift + D в macOS или Ctrl + Shift + D в Windows и Linux.
4. Если удобнее пользоваться палитрой команд, найдите Toggle Design Mode.
5. Следуйте подсказкам в верхней части страницы. Они показывают доступные жесты и действия.

Согласно официальной документации Cursor Design Mode, Annotate доступен начиная с Cursor 3.24.18.

Если вместо Annotate вы видите значок пера с надписью Design Mode, сначала проверьте версию Cursor. В более ранних версиях используется старый элемент управления. Обновите приложение, если хотите пользоваться новым интерфейсом Annotate.

Внешний вид панели может меняться и по другим причинам. До первого открытия Design Mode кнопка показывает Try Annotate и запускает короткую демонстрацию. После того как вы оставите больше пяти заметок, кнопка отображается только в виде значка.

Чтобы выйти из Design Mode, нажмите кнопку выхода в строке подсказок, повторите сочетание клавиш или нажмите Esc. Сначала Escape отменяет активный рисунок, редактирование текста или открытую заметку. Режим закрывается, когда эти действия завершены.

В публичной документации Cursor не указано, какие тарифы поддерживают Annotate, и не подтверждён график полного развёртывания функции. Поэтому нельзя считать, что она доступна каждому аккаунту только потому, что версия приложения соответствует требованиям.

Как выбирать элементы, рисовать пометки и менять CSS?

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

Как выбрать один или несколько элементов

Нажмите на элемент работающего приложения, чтобы выбрать его и открыть заметку. Затем опишите нужное изменение.

Представим SaaS-панель с перегруженной шапкой, полем поиска и рядом кнопок фильтрации. Выберите поле поиска и добавьте инструкцию:

Увеличьте высоту поля ввода и его внутренние отступы. Выровняйте текст в поле по вертикали относительно кнопок фильтрации. Сохраните текущую цветовую схему.

Выбранный элемент даёт агенту конкретную цель. Текст заметки объясняет, какой результат вам нужен.

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

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

Как выделить область и нарисовать пометки

Протяните курсор по странице, чтобы выделить область. Затем опишите проблему и добавьте графические пометки.

В верхней строке подсказок доступны четыре инструмента:

• Draw: нарисовать произвольную фигуру или обвести проблемный участок.
• Ellipse: обвести элемент или группу элементов овалом.
• Rectangle: выделить прямоугольником часть страницы.
• Arrow: указать стрелкой на место, которое нужно изменить.

Удерживайте Shift во время перетаскивания, чтобы ограничить движение одной осью. Удерживайте Option в macOS или Alt в Windows и Linux, чтобы рисовать прямоугольник от центра. Нажмите Cmd/Ctrl + Z, чтобы отменить графическую пометку.

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

Добавьте вертикальный отступ 24px между карточками с итоговыми показателями и графиком. Сохраните текущие размеры графика и адаптивность вёрстки.

Рисунок показывает, где находится проблема. Текст задаёт требуемое расстояние и ограничения, которые агент должен сохранить.

Как изменить текст прямо на странице

Дважды нажмите на текстовый элемент, чтобы отредактировать его содержимое. Нажмите Return или Enter, чтобы сохранить изменение, либо Esc, чтобы отменить его.

Например, замените заголовок «Usage Overview» на «API Usage» прямо в браузере. Не нужно отдельно описывать замену словами.

Здесь есть важная особенность: изменение текста всегда ожидает отправки через Send, даже если Batch edits выключен. Сохранение текста на странице само по себе не отправляет его агенту.

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

Как менять CSS через инспектор

Если заметка относится к одному элементу, выберите Edit CSS properties, чтобы открыть инспектор CSS. Найдите нужное свойство, измените значение и отправьте правки вместе с заметкой.

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

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

Как надиктовать заметку голосом

Голосовой ввод доступен, когда заметка уже содержит текст или изменения CSS. Нажмите Dictate или удерживайте эту кнопку во время речи.

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

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

Когда стоит включать Batch edits?

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

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

Поведение	Batch edits выключен	Batch edits включён
Заметки об элементах и областях	Отправляются по одной	Собираются в виде пронумерованных меток
Отправка заметок об элементах и областях	Нажмите Return или Enter в заметке, чтобы отправить её сразу	Нажмите Send на панели, чтобы отправить все ожидающие заметки
Группировка сообщений	Каждая заметка отправляется отдельно	Все ожидающие заметки отправляются одним сообщением
Изменения текста	Ожидают Send	Также ожидают Send
Просмотр ожидающих заметок	Если есть ожидающие текстовые правки, просмотрите их в списке Send	Просмотрите собранные заметки в списке рядом с Send
Очистка ожидающих заметок	Используйте Clear All; уже отправленные заметки нельзя удалить из очереди	Используйте Clear All, чтобы удалить ожидающие заметки

Важно различать немедленную отправку и ожидающие текстовые правки. Когда Batch edits выключен, заметку об элементе или области можно сразу отправить клавишей Return или Enter. Изменение текста остаётся ожидающим до отправки. Если такие правки есть, просмотрите их в списке Send или удалите ожидающие заметки через Clear All.

При включённом Batch edits вместо Annotate появляется кнопка Send с количеством ожидающих заметок. Перед отправкой можно проверить пронумерованные метки. Отправка всех ожидающих заметок также закрывает Design Mode.

Если вы выйдете из режима с неотправленными заметками, кнопка Send останется на панели, пока вы не отправите их или не очистите очередь.

Пример: как переработать страницу с тарифами

Предположим, вы хотите исправить три проблемы на странице с тарифами:

1. Главный заголовок занимает слишком много места по вертикали.
2. Основная кнопка действия не выровнена относительно цены.
3. Таблица сравнения выглядит тесной на небольших экранах.

Включите Batch edits и создайте отдельную заметку для каждой проблемы.

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

Перед отправкой проверьте пронумерованные метки. Убедитесь, что каждая заметка относится к правильному элементу или области. Затем отправьте весь набор одним сообщением.

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

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

Можно также нажать Cmd/Ctrl + L внутри заметки или текстового редактора, чтобы перенести содержимое в поле чата вместо немедленной отправки или добавления в очередь Send. Удерживайте Option/Alt и нажмите на элемент, чтобы добавить его непосредственно в поле чата. Если заметка уже открыта, то же действие добавит элемент в эту заметку.

Какой контекст агент получает на самом деле?

Каждая отправленная заметка содержит вашу инструкцию, структурированные сведения об элементах и обрезанный скриншот. В поддерживаемых приложениях на React, Vue и Svelte сведения также включают информацию о компонентах, которая помогает найти соответствующий исходный код.

Согласно документации Cursor, для каждого выбранного элемента передаётся следующий контекст:

Контекст	Что передаёт Cursor	Чем это помогает
HTML-тег	Название тега элемента	Позволяет определить тип элемента
Атрибуты	id, классы и атрибуты элемента	Помогает отличить нужный элемент от остальных
Путь селектора	Путь в формате CSS-селектора	Помогает найти элемент в отрисованной странице
Видимый текст	Первые 200 символов видимого текста	Связывает выбор с содержимым страницы
Геометрия	Размер и положение элемента	Показывает расположение и размеры
Вычисленные стили	Цвет, цвет фона, размер шрифта, семейство шрифта, display и position	Передаёт сведения о текущем отображении элемента
Контекст компонента	Название компонента и стек компонентов в React, Vue и Svelte	Помогает связать элемент на странице с исходным кодом
Скриншот	Фрагмент выбранного элемента или выделенной области с рисунком	Показывает визуальный контекст изменения

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

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

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

Такой же тип контекста компонентов предусмотрен для Vue и Svelte. При этом документация не гарантирует одинаковую точность поиска исходного кода для разных фреймворков и проектов.

Агенту всё равно нужно изучить репозиторий, понять окружающую реализацию и выбрать способ изменения. После выполнения проверьте diff и страницу в браузере.

Cursor не публикует формулу расчёта токенов для скриншотов и метаданных Annotate. Не считайте, что каждая заметка имеет фиксированную стоимость или что пакетная отправка обязательно уменьшает общий расход модели. Batch edits меняет способ передачи заметок. Фактические затраты зависят от работы агента и использования модели.

Как проверить изменения, внесённые агентом?

Используйте Annotate, чтобы точнее описать задачу, а затем проверьте изменения в коде и результат в браузере.

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

1. Дождитесь, пока агент закончит необходимые изменения.
2. Просмотрите diff на предмет посторонних правок, неправильных селекторов и нарушений принятых в проекте соглашений.
3. Проверьте работающую страницу после горячей перезагрузки, если её поддерживает сервер разработки.
4. Повторно проверьте компоновку на размерах экрана, важных для вашего приложения.
5. При необходимости протестируйте взаимодействия и доступность, включая клавиатурный фокус и читаемость текста.

В объявлении от 28 октября 2026 года Cursor сообщает, что Annotate помогает проверять дизайн на экранах разных размеров. Однако в предоставленной публичной документации Design Mode не описан механизм автоматической проверки адаптивности. Поэтому проверяйте нужные размеры экрана отдельно, если установленная версия не предоставляет документированного способа автоматизации.

Для более масштабной работы над интерфейсом можно использовать Inspo MCP, который передаёт референсы дизайна и скриншоты инструментам программирования с AI-агентами. Это решает другую задачу: Annotate указывает, что изменить в работающем интерфейсе, а дизайн-референсы помогают объяснить, к какому визуальному результату нужно прийти.

Если вы выбираете общий подход к разработке с AI, ознакомьтесь со сравнением Cursor и Codex в 2026 году. В нём рассматриваются рабочие процессы, цены, лимиты и оплата по фактическому использованию.

Выбирайте отдельные заметки для быстрой обратной связи, Batch edits для согласованного набора изменений, а голосовые инструкции и рисунки используйте для уточнения визуальных требований. Независимо от способа отправки, результат работы агента нужно проверить в коде и на работающей странице.