В Cursor появился режим Annotate: правка верстки прямо по клику на элементы

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

Мы уже затрагивали эту боль, когда исследовали первые эксперименты с визуальным мостом Annotate. Но с выходом стабильного обновления популярного редактора Cursor режим Design Mode и инструмент Annotate стали полноценным рабочим стандартом. Теперь разработчику достаточно переключиться во встроенный браузер превью, кликнуть по спорному элементу мышью или обвести группу блоков рамкой — и редактор автоматически сформирует точечный контекстный пакет для модели. Я протестировал этот инструмент на боевых макетах и спешу разобрать, как устроена эта магия.

Смерть пространственных промптов: клик вместо текста

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

Режим Design Mode в Cursor активируется сочетанием клавиш Cmd + Shift + D на macOS или Ctrl + Shift + D на Windows и Linux. Встроенное окно превью на базе Chromium превращается в интерактивный холст:

• Ты кликаешь по кнопке, заголовку или карточке;
• Вокруг элемента появляется акцентная рамка выделения;
• Поверх макета можно нарисовать стрелку, обвести проблемную область карандашом или зажать Shift для группового выбора нескольких компонентов;
• В открывшемся компактном поле ввода ты пишешь короткую команду: «Сделай кнопку на мобильном на всю ширину и добавь тень».

Время от обнаружения бага на экране до внесения готового диффа в репозиторий сократилось с 10 минут до 20 секунд.

Механика DOM-to-Source: как клик в браузере находит React-компонент

Почему это работает точнее обычного инспектора элементов DevTools? В Chrome DevTools ты можешь поправить стили «на лету», но эти изменения живут в оперативной памяти браузера: их приходится вручную переносить в код.

Инструмент Annotate работает иначе благодаря механизму DOM-to-Source Mapping:

1. Встроенный браузер считывает виртуальный узел (Fiber Node в React или VNode во Vue) и извлекает точный адрес в файловой системе: например, src/components/HeroCTA.tsx, строка 48.
2. Система вычисляет реальные геометрические размеры блока (Bounding Box) и активные медиа-запросы (breakpoints).
3. Cursor делает автоматический скриншот выделенной области с пользовательскими графическими пометками.
4. В контекстное окно агентного ядра Composer отправляется компактный пакет: имя файла, точные строки, вычисленный CSS и скриншот.

Модель больше не блуждает по сотням файлов проекта вслепую: ее внимание сфокусировано на конкретном компоненте.

Пять сценариев продакшена: от Hero-экрана до адаптивности

Практика показывает пять типовых рабочих процессов, где Annotate экономит часы работы:

1. Правка главного экрана (Hero): клик по заголовку <h1> и ввод маркетингового промпта. Модель правит только текст и типографику, не рискуя сломать внешнюю сетку.
2. Адаптация мобильного CTA: переключение окна превью в эмуляцию смартфона (375px), клик по вылезающей за край кнопке и генерация классов w-full sm:w-auto.
3. Унификация сетки преимуществ: групповое выделение трех карточек с командой выровнять внутренние отступы и прижать кнопки действий к нижнему краю.
4. Редизайн тарифов: выделение карточки популярного тарифа с просьбой добавить акцентный градиентный бейдж и рамку.
5. Точечная инспекция стилей: мгновенная замена цветов и отступов без копания в коде.

Реальный код: до и после правки мобильного CTA

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

Исходный компонент (src/components/HeroCTA.tsx): кнопка зафиксирована во flex-row и на узких мобильных экранах позорно обрезается краем вьюпорта:

export function HeroCTA() {
  return (
    <div className="flex space-x-4 mt-6">
      <button className="px-8 py-3 bg-emerald-500 text-white font-semibold rounded-lg">
        Присоединиться к AI Boardroom
      </button>
      <button className="px-6 py-3 border border-gray-300 rounded-lg">
        Узнать больше
      </button>
    </div>
  );
}

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

Дифф, который автоматически генерирует Composer:

export function HeroCTA() {
  return (
    <div className="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4 mt-6 w-full sm:w-auto">
      <button className="w-full sm:w-auto px-8 py-3 bg-emerald-500 hover:bg-emerald-600 text-white font-semibold rounded-lg shadow-md hover:shadow-lg transition-all text-center">
        Присоединиться к AI Boardroom
      </button>
      <button className="w-full sm:w-auto px-6 py-3 border border-gray-300 hover:border-gray-400 rounded-lg text-center">
        Узнать больше
      </button>
    </div>
  );
}

Все классы Tailwind CSS легли ровно в существующую дизайн-систему проекта.

Пакетная аннотация сетки карточек

Еще более мощный сценарий — пакетное выделение (Batch Selection). Зажимаем клавишу Shift, кликаем по трем соседним карточкам в сетке преимуществ и вводим команду: «Сделай карточки одинаковой высоты, выровняй текст и прижми ссылку к низу через mt-auto».

Результат генерации в файле src/components/BenefitCards.tsx:

export function BenefitCards({ items }: { items: Array<{ title: string; desc: string }> }) {
  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-6xl mx-auto px-4">
      {items.map((item, idx) => (
        <div 
          key={idx} 
          className="flex flex-col justify-between p-6 bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-xl shadow-sm hover:shadow-md transition-shadow h-full"
        >
          <div>
            <h3 className="text-xl font-bold text-zinc-900 dark:text-zinc-100 mb-2">
              {item.title}
            </h3>
            <p className="text-zinc-600 dark:text-zinc-400 text-sm leading-relaxed">
              {item.desc}
            </p>
          </div>
          <div className="mt-6 pt-4 border-t border-zinc-100 dark:border-zinc-800">
            <span className="text-sm font-medium text-emerald-600 hover:underline cursor-pointer">
              Подробнее &rarr;
            </span>
          </div>
        </div>
      ))}
    </div>
  );
}

Границы применимости: Tailwind против CSS-in-JS

Режим Annotate знаменует важный переход: фронтенд-разработка окончательно перестает быть ручным жонглированием пикселями. Ты просто показываешь пальцем на экран, говоришь, что исправить — и система вносит точечные изменения в кодовую базу.