AI-режим проектирования интерфейсов
Режим AI позволяет менять макет страницы не вручную, а текстовыми описаниями.
Доступны два способа работы, их можно комбинировать:
-
AI-чат — диалог в свободной форме. Подходит для структурных изменений: добавить блок фильтров, перестроить форму в две колонки, собрать страницу по описанию. Изменения применяются ко всей странице.
-
Заметки на элементах — короткие пожелания, привязанные к конкретным элементам макета: увеличить отступ, сделать кнопку основной, переименовать в «Отправить». Заметки накапливаются и отправляются агенту пакетом, поэтому правки получаются точечными.
Обратите внимание: изменения от агента попадают в локальный черновик страницы. Чтобы зафиксировать их, нажмите Сохранить на панели инструментов.
AI-чат
Чтобы открыть чат, нажмите кнопку AI на панели инструментов — справа откроется панель AI Ассистент.
Кнопка доступна во всех режимах редактирования, кроме Шаблоны и Панель разработчика.
Чат всегда работает в контексте открытой страницы: к каждому запросу автоматически прикладывается актуальное описание макета. Контекст обновляется после любых правок — и ручных, и сделанных агентом, — поэтому следующий запрос агент выполняет уже над обновленной страницей.
Диалог с агентом
-
Опишите в поле ввода, что нужно изменить на странице.
-
Нажмите Enter или кнопку отправки. Для переноса строки используйте Shift + Enter.
-
Дождитесь ответа — он выводится по мере генерации.
Подсказка: агент может задать уточняющий вопрос вместо готового макета — ответьте на него в чате, и диалог продолжится.
Применение изменений
Пока агент формирует ответ, макет в рабочей области обновляется на лету, так что результат виден еще до конца генерации. Когда ответ завершен, изменения применяются к дереву элементов и выводится сообщение «Изменения от AI-агента применены».
Применённое состояние попадает в историю правок: кнопки Отмена и Восстановить на панели инструментов работают так же, как для ручных изменений.
История чатов
История ведется отдельно для каждой страницы и восстанавливается при ее повторном открытии. Название чата формируется из первого сообщения.
Чтобы очистить историю текущей страницы, нажмите кнопку Начать новый чат.
Заметки на элементах макета
Изменение интерфейса с помощью заметок доступно только через вкладку AI.
Откройте страницу в редакторе интерфейса и выберите вкладку AI на панели режимов.
Вкладка доступна пользователям с правом на редактирование страниц.
В режиме AI меняется поведение редактора:
-
левая панель с библиотекой элементов скрывается — макет правится через агента;
-
клик по элементу выделяет его и открывает панель действий с кнопками Заметки для AI, Выделить родитель, Удалить, Настройки;
-
кнопка Настройки открывает привычный редактор свойств элемента, поэтому ручная донастройка остается доступной.
Добавление заметки
-
Откройте панель заметок одним из способов:
-
выделите элемент кликом и нажмите Заметки для AI в панели действий элемента;
-
нажмите Ctrl + клик (Cmd + клик на macOS) по элементу макета.
-
-
Введите текст в поле Новая заметка.
-
Нажмите Enter или кнопку сохранения — заметка попадет в список.
Чтобы изменить заметку, нажмите кнопку Редактировать, отредактируйте текст и подтвердите правку.
Чтобы удалить заметку, нажмите кнопку Удалить рядом с ней.
Обратите внимание: заметка сохраняется только после подтверждения. Введенный, но не подтвержденный текст отбрасывается при переключении на другой элемент или закрытии панели.
Если у элемента уже есть заметки, рядом с кнопкой Заметки для AI отображается индикатор с подсказкой «Есть заметки».
Заметки хранятся отдельно для каждой страницы проекта и не теряются при перезагрузке. Заметки удаленного элемента удаляются автоматически.
Заметки для группы элементов
Чтобы дать одинаковое указание нескольким элементам:
-
Выделите первый элемент кликом.
-
Добавьте остальные с помощью Shift + клик. Повторный Shift + клик снимает выделение с элемента.
-
Нажмите Заметки для AI — откроется групповая панель.
В групповой панели отображаются только заметки, которые есть у всех выбранных элементов. Добавление, правка и удаление заметки затрагивают все выбранные элементы.
Подсказка: кнопка Выделить родитель переводит выделение с текущих элементов на родительские — это удобно, чтобы дать указание всему блоку целиком.
Обработка заметок
Отправить заметки агенту можно двумя способами:
-
Обработать — кнопка внизу панели заметок. Отправляет заметки текущего элемента или всех элементов групповой выборки;
-
Обработать все заметки — кнопка на панели инструментов. Отправляет одним запросом заметки всех элементов страницы.
При отправке панель заметок закрывается, а над рабочей областью включается индикатор обработки. Пока обработка идет, добавление и редактирование заметок недоступны.
При успешной обработке измененные элементы встраиваются в текущий макет — остальная часть страницы не затрагивается, — и выводится сообщение «Заметки обработаны, изменения применены». Обработанные заметки удаляются, заметки остальных элементов сохраняются.
Если обработка не удалась, макет не меняется, а заметки сохраняются — формулировку можно скорректировать и отправить повторно.
Рекомендации
-
Формулируйте пожелания предметно: «увеличить отступ между полями до 16px» работает лучше, чем «сделать красиво».
-
Используйте заметки для точечных правок, а чат — для структурных изменений макета.
-
Накапливайте заметки по нескольким элементам и отправляйте их кнопкой Обработать все заметки: агент увидит правки целиком и учтет их взаимосвязи.
-
Проверяйте результат в режиме предпросмотра и сохраняйте страницу только после проверки.