AIKraft Agents
ВойтиТарифы и покупка
Релиз модели28 октября 2026 г., 19:45 МСК🤖 Auto

Cursor 3.24.18: Визуальный дизайн через AI-аннотации

В Cursor 3.24.18 появился Design Mode: кликайте по элементам сайта, оставляйте заметки, и ИИ сам исправит код. Поддержка Composer 2.5.

AIРедакция AIKraftавто-обзор источников
2 мин чтения·источник: Cursor
Поделиться
Баннер новости 10734

Визуальное управление через AI-агентов

Cursor представил Design Mode — новую функцию в Agents Window, которая позволяет направлять ИИ-агентов, оставляя аннотации прямо на работающем приложении. Вместо того чтобы писать длинные текстовые описания изменений, разработчики могут кликать по конкретным элементам, выделять области или редактировать текст на лету. ИИ получает контекст, включая скриншоты и метаданные DOM, и самостоятельно вносит правки в код.

Как это работает: от клика до кода

Режим активируется через кнопку Annotate или горячие клавиши Cmd/Ctrl + Shift. Функция доступна в версиях Cursor 3.24.18 и новее. Процесс взаимодействия строится на пространственном понимании интерфейса:

  • Выбор элементов: Клик по элементу открывает заметку. Можно выделять несколько объектов через Shift + клик, чтобы изменить их совместно.
  • Выделение областей: Перетаскивание мыши создает рамку вокруг зоны изменений. Поддерживаются фигуры (эллипс, прямоугольник, стрелка).
  • Редактирование текста: Двойной клик по тексту позволяет изменить его прямо на странице. Изменения сохраняются по Enter.
  • CSS-инспектор: Для одиночных элементов доступен редактор CSS-свойств, где можно фильтровать и менять значения стилей.

Техническая начинка: что видит ИИ

Ключевое преимущество Design Mode — богатый контекст, передаваемый агенту. При отправке заметки ИИ получает не только ваш текст, но и:

  • Детали элемента: Тег, ID, классы, атрибуты, CSS-селектор, первые 200 символов видимого текста, размер и позицию.
  • Вычисленные стили: Цвет, фон, размер шрифта, семейство шрифта, display и position.
  • Стек компонентов: В React, Vue и Svelte-приложениях ИИ получает имя компонента и стек, что позволяет точно найти источник кода.
  • Скриншот: Автоматически обрезанное изображение выбранного элемента или области с наложенными аннотациями.

Управление потоком и отправка

Cursor предлагает два режима отправки изменений:

  1. По одной заметке: Нажмите Enter в заметке, чтобы сразу отправить её агенту. Изменения применяются по мере готовности сервера (hot reload).
  2. Пакетная обработка (Batch edits): Переключатель в карточке заметки позволяет накапливать изменения. Все аннотации собираются в виде пронумерованных значков, и одна кнопка Send отправляет их все разом.

Для быстрого доступа к чату без открытия заметки можно использовать Option/Alt + клик по элементу. Также поддерживается голосовой ввод заметок.

Рекомендации по моделям

Для наиболее эффективной работы с Design Mode Cursor рекомендует использовать модель Composer 2.5, которая демонстрирует лучшие результаты в задачах по работе с интерфейсами. Старая версия Design Mode (с иконкой пера) сохранена во вкладках Canvas, где заметки отправляются напрямую в чат, а пакетная обработка недоступна.

Источник: Cursor ↗