Cursor Design Mode — это способ направлять агента визуальными промптами прямо в браузере Agents Window. Вы кликаете элемент, выделяете несколько, рисуете область или диктуете голосом — Cursor забирает identity элемента и скриншот, затем правит код, пока вы идёте к следующей правке. Канон: docs Design Mode, контекст браузера — docs Browser.
Связанный инструмент — Cursor Browser. Обзор режимов — Agent Mode. Модель для UI — Composer 2.5. Pillar: n8n для начинающих.
Для кого Design Mode
- UI-правки, где словами сложно указать «вот этот блок».
- Итерации по живому localhost после hot reload.
- Сравнение двух компонентов: «сделай этот как тот».
- Параллельные правки через несколько субагентов.
Design Mode нет в обычном code editor без Browser tab Agents Window (подтверждено в help/форуме Cursor: File → New Browser → загрузить страницу → кнопка появляется).
Как пользоваться: маршрут на 15 минут
- Поднимите dev-сервер приложения (например
http://localhost:3000). - Откройте Agents Window, затем Browser (File → New Browser).
- Дождитесь полной загрузки страницы — иначе кнопка Design Mode скрыта.
- Включите Design Mode:
Cmd+Shift+D/Ctrl+Shift+D(или иконка ручки). - Кликните элемент / multi-select / Shift+drag область / голос — опишите правку.
- Пока агент работает, можете слать следующую правку на другой части экрана.
- Выключите тем же шорткатом, чтобы вернуться к обычному browsing.
| Действие | Шорткат (Mac) | Зачем |
|---|---|---|
| Toggle Design Mode | Cmd+Shift+D | Вкл/выкл визуальный слой |
| Select an area | Shift+drag | Обвести зону на frozen frame |
| Add element to chat | Cmd+L | Добавить элемент в чат |
| Add element to input | Option+click | Бросить элемент в поле ввода |
Шорткаты — docs/agent/design-mode (проверка 2026-09-03). На Windows: Ctrl вместо Cmd. Рекомендуемая модель для UI-потока — Composer 2.5.
Что видит агент
- Element identity — xpath, компонент, attributes, computed styles, props из fiber tree.
- Screenshot — layout, соседи, точное состояние viewport на момент указания.
Рисование ложится на frozen frame: агент видит тот кадр, на который вы реагировали, а не «живой» скролл после.
Сильные стороны
- Меньше текстовых описаний вида «третья кнопка слева в хедере».
- Можно гнать несколько правок подряд, не дожидаясь первой.
- Hot reload показывает результат в том же браузере.
- Голос доступен, пока агенты ещё бегут.
Типичные ошибки
- Искать Design Mode в классическом editor без Browser tab.
- Ждать кнопку, пока страница грузится или отдаёт ошибку.
- Путать Design Mode с Figma-плагином или с отдельным продуктом.
- Описывать layout без клика/рисунка, когда цель — точечная UI-правка.
FAQ: Cursor Design Mode
Что такое Cursor Design Mode?
Design Mode — режим визуальных промптов в браузере Agents Window: клик по элементу, multi-select, рисование по экрану или голос. Агент получает xpath/компонент/стили и скриншот, затем правит код. Канон: docs/agent/design-mode.
Как включить Design Mode?
Откройте браузер в Agents Window (File → New Browser или Browser tab), загрузите приложение (часто localhost), затем Cmd+Shift+D / Ctrl+Shift+D. Кнопка с ручкой появляется после полной загрузки страницы.
Чем Design Mode отличается от Browser?
Browser — инструмент навигации, кликов, консоли и сети. Design Mode — слой поверх браузера для точного визуального указания: что именно править в UI. Design Mode живёт внутри Browser в Agents Window.
Какие шорткаты у Design Mode?
Toggle: Cmd/Ctrl+Shift+D. Select area: Shift+drag. Add element to chat: Cmd+L. Add element to input: Option+click. Таблица — в docs/agent/design-mode.
Какую модель советует Cursor для UI?
Для потока Design Mode дока рекомендует быструю модель, сильную в интерфейсах: Composer 2.5. Правки можно слать параллельно, пока предыдущие ещё бегут.
Вывод
Cursor Design Mode — визуальный слой над Browser в Agents Window: Cmd+Shift+D → указать элемент → агент правит код. Для навигации/консоли/сети смотрите гайд Browser.
Хотите нейросети под свои задачи, а не «для всех»?
Когда базовых гайдов уже мало, помогает разбор под вашу работу. Наставничество, курсы и подписка Артём Денисов — все форматы на странице обучения. Тех-pillar — n8n для начинающих.