Cursor запустил Design Mode: редактируй UI кликами и рисунками, агент правит код

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

Четыре способа дать задачу агенту

Cursor предлагает несколько интуитивных способов показать агенту, какие изменения требуются: Клик на элемент — выбираешь элемент в работающем приложении, даешь краткий промпт, и агент находит соответствующий код и редактирует его Мультиселект — выбираешь несколько элементов одновременно, полезно когда изменения касаются отношений между компонентами (выровнять, сделать одинаковыми, убрать дублирование) Рисование на странице — обводишь маркером нужную область интерфейса, и агент видит ровно ту часть экрана, на которую ты указал, с учетом разметки и анимации Голосовое описание — описываешь задачу голосом, система распознает речь и отправляет промпт агенту Под капотом система передает агенту два набора информации. Первый — технические данные элемента: его xpath, название компонента, HTML-атрибуты, вычисленные CSS-стили и данные из дерева компонентов React/Vue. Второй — скриншот страницы в момент, когда ты дал команду.

Вместе это дает агенту полный контекст для безошибочного редактирования.

Почему это ускоряет разработку Правка интерфейса — это всегда цепочка изменений.

Подправил один компонент, заметил проблему с отступом рядом, понял, что нужно переделать целую группу кнопок. В обычном workflow ты долго объясняешь каждую задачу отдельно. Design Mode позволяет отправлять новую задачу, даже не дожидаясь, пока агент закончит предыдущую. Cursor использует модель Composer 2.5 — она специально оптимизирована для быстрых и точных UI-изменений. Приложение перезагружается в реальном времени благодаря hot reload, так что ты сразу видишь результат изменений. Это позволяет одному разработчику делать сложные UI-правки в разы быстрее, не разрывая concentration и flow-состояние. Ключевая идея — модель должна быть не только умной, но и быстрой. Если агент будет обдумывать задачу полминуты, ты потеряешь focus. Composer 2.5 дает ответ почти мгновенно, позволяя тебе держать ритм работы.

Что это значит для фронтенда

Design Mode переносит классическую парадигму дизайнерского общения в эпоху AI. Раньше дизайнеры, PM и разработчики указывали друг другу на области экрана, рисовали стрелочки, писали аннотации. Design Mode автоматизирует эту часть: теперь агент видит то же, что видишь ты, и понимает инструкции через зрение, а не через текст.

«Будущее разработки — это возможность двигаться между высоким уровнем абстракции и низкоуровневыми деталями, не теряя flow-состояния», — подход Cursor к Design Mode.

Для бизнеса это означает, что UI-задачи можно решать быстрее и дешевле, особенно для итеративных правок и A/B-тестирования. Разработчик может сосредоточиться на архитектуре, а рутинные CSS и верстка попадут агенту.

Что это значит

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