Исправление интерфейса в режиме дизайна
Как выбрать проблемный элемент на странице и передать его агенту для исправления.
Режим дизайна передаёт агенту выбранный элемент страницы вместе с DOM, стилями и снимком экрана. Это избавляет от ручного поиска компонента по описанию вроде "эта кнопка выглядит неправильно".
Порядок действий
- Откройте браузер текущего worktree и перейдите на страницу с ошибкой.
- Включите режим дизайна.
- Нажмите на проблемный элемент. Он появится в чате агента как вложение с подробным контекстом.
- Опишите требуемое исправление, например: "Здесь слишком маленький отступ. Сделай его таким же, как у карточек выше".
- Агент изменит исходный код, а горячая перезагрузка обновит страницу.
- Снова выберите элемент и проверьте результат. Если проблема осталась, повторите действия.
- Когда результат вас устроит, создайте коммит.
Что получает агент
Orca отправляет HTML, вычисленные стили CSS и обрезанное изображение выбранного элемента. Поэтому не нужно отдельно делать снимок экрана, искать узел в DOM и копировать селектор.
Частые вопросы
Как передать агенту проблемный элемент интерфейса?
Откройте страницу во встроенном браузере, включите режим дизайна и выберите элемент, который нужно исправить.
Какой контекст получит агент?
В запрос попадут сведения об элементе, его стили, снимок экрана и доступная привязка к исходному файлу.
Нужно ли отдельно описывать ожидаемый результат?
Да. Коротко объясните, что выглядит неправильно и как элемент должен вести себя после исправления.
Как проверить изменение на разных экранах?
После правки переключите размеры встроенного браузера и проверьте элемент в узком и широком представлении.
Что проверить перед коммитом?
Просмотрите diff, убедитесь, что агент не затронул лишние стили, и повторно откройте исправленный сценарий.