Режим дизайна
Режим дизайна позволяет направлять Агентов с помощью визуальных промптов. В браузере, в Окне Agents, можно выбрать элемент, выделить область на странице или голосом описать изменение. Cursor собирает необходимый контекст и редактирует код, пока вы переходите к следующему изменению.
Работа с UI часто требует пространственного мышления. Вместо того чтобы описывать изменение словами, инструкция может включать выбранный элемент, связанный с ним код, окружающую компоновку и визуальные связи на странице. Это сокращает путь от обнаружения проблемы до её исправления.
Выберите элемент в запущенном приложении, задайте промпт для него и позвольте Агенту отредактировать код.
Открытие Режима дизайна
Режим дизайна доступен в браузере в Окне Agents. Откройте браузер и включите Режим дизайна сочетанием клавиш CmdCtrl + Shift + D. Чтобы вернуться к обычному просмотру, отключите его тем же сочетанием клавиш.
Как управлять Agent
Режим дизайна позволяет несколькими способами передать свои намерения.
Выберите элемент
Нажмите на любой элемент в запущенном приложении, чтобы выбрать его в качестве цели. Agent получает элемент и его код, поэтому вы можете задавать промпты для конкретного объекта, который видите, не выходя из приложения.
Выберите несколько элементов
Множественный выбор полезен, когда изменения зависят от взаимосвязи между элементами. Укажите два компонента и попросите Agent сделать один таким же, как другой, удалить повторяющийся контент или изменить всю группу.
Выберите несколько элементов и опишите, как они должны измениться вместе.
Рисуйте на странице
Рисунок показывает Agent, к какой области страницы относится ваша инструкция. Обведите перегруженный участок, выделите область рамкой или отметьте часть анимированной страницы. Аннотация накладывается на зафиксированный кадр области просмотра, поэтому Agent видит точное состояние страницы, на которое вы реагировали.
Голосовое описание
Вы можете надиктовывать инструкции вместо ввода текста. Микрофон остаётся доступным, пока агенты работают, поэтому можно поставить следующее изменение в очередь, не дожидаясь завершения текущего.
Используйте голосовой ввод и рисование вместе, чтобы описать изменение.
Сочетания клавиш
| Действие | Сочетание клавиш |
|---|---|
| Включить/выключить Режим дизайна | CmdCtrl + Shift + D |
| Выбрать область | Shift + перетаскивание |
| Добавить элемент в чат | CmdCtrl + L |
| Добавить элемент в поле ввода | OptionAlt + клик |
Что видит Agent
При выборе элемента в контекст добавляются два взаимодополняющих источника информации:
- Идентификаторы элемента: XPath, компонент, атрибуты, вычисленные стили и props из дерева Fiber. Это помогает Agent найти исходный код и отредактировать нужный фрагмент.
- Скриншот: макет, окружающие элементы и точное состояние страницы. Он даёт Agent пространственный контекст для внесения изменений.
Работайте в потоке
При доработке интерфейса одно изменение обычно влечёт за собой следующее. Вы настраиваете компонент, замечаете отступы вокруг него, а затем видите, как должен сочетаться другой компонент.
Режим дизайна позволяет отправлять изменения по мере того, как вы их замечаете. Укажите на один элемент, опишите изменение, перейдите к другой части страницы и отправьте ещё одно, не дожидаясь завершения первого. Так можно легко работать в многозадачном режиме и управлять несколькими субагентами одновременно. Когда агенты завершают работу, приложение автоматически перезагружается, и ваши изменения появляются в запущенном продукте.
Этот процесс лучше всего работает с быстрой моделью, хорошо справляющейся с интерфейсами. Мы рекомендуем Composer 2.5.