Создание интерфейса
AI-режим проектирования интерфейсов

AI-режим проектирования интерфейсов

Режим AI позволяет менять макет страницы не вручную, а текстовыми описаниями.

Доступны два способа работы, их можно комбинировать:

  • AI-чат — диалог в свободной форме. Подходит для структурных изменений: добавить блок фильтров, перестроить форму в две колонки, собрать страницу по описанию. Изменения применяются ко всей странице.

  • Заметки на элементах — короткие пожелания, привязанные к конкретным элементам макета: увеличить отступ, сделать кнопку основной, переименовать в «Отправить». Заметки накапливаются и отправляются агенту пакетом, поэтому правки получаются точечными.

Обратите внимание: изменения от агента попадают в локальный черновик страницы. Чтобы зафиксировать их, нажмите Сохранить на панели инструментов.

AI-чат

Чтобы открыть чат, нажмите кнопку AI на панели инструментов — справа откроется панель AI Ассистент.

Кнопка доступна во всех режимах редактирования, кроме Шаблоны и Панель разработчика.

Чат всегда работает в контексте открытой страницы: к каждому запросу автоматически прикладывается актуальное описание макета. Контекст обновляется после любых правок — и ручных, и сделанных агентом, — поэтому следующий запрос агент выполняет уже над обновленной страницей.

Диалог с агентом

  1. Опишите в поле ввода, что нужно изменить на странице.

  2. Нажмите Enter или кнопку отправки. Для переноса строки используйте Shift + Enter.

  3. Дождитесь ответа — он выводится по мере генерации.

Подсказка: агент может задать уточняющий вопрос вместо готового макета — ответьте на него в чате, и диалог продолжится.

Применение изменений

Пока агент формирует ответ, макет в рабочей области обновляется на лету, так что результат виден еще до конца генерации. Когда ответ завершен, изменения применяются к дереву элементов и выводится сообщение «Изменения от AI-агента применены».

Применённое состояние попадает в историю правок: кнопки Отмена и Восстановить на панели инструментов работают так же, как для ручных изменений.

История чатов

История ведется отдельно для каждой страницы и восстанавливается при ее повторном открытии. Название чата формируется из первого сообщения.

Чтобы очистить историю текущей страницы, нажмите кнопку Начать новый чат.

Заметки на элементах макета

Изменение интерфейса с помощью заметок доступно только через вкладку AI.

Откройте страницу в редакторе интерфейса и выберите вкладку AI на панели режимов.

Вкладка доступна пользователям с правом на редактирование страниц.

В режиме AI меняется поведение редактора:

  • левая панель с библиотекой элементов скрывается — макет правится через агента;

  • клик по элементу выделяет его и открывает панель действий с кнопками Заметки для AI, Выделить родитель, Удалить, Настройки;

  • кнопка Настройки открывает привычный редактор свойств элемента, поэтому ручная донастройка остается доступной.

Добавление заметки

  1. Откройте панель заметок одним из способов:

    • выделите элемент кликом и нажмите Заметки для AI в панели действий элемента;

    • нажмите Ctrl + клик (Cmd + клик на macOS) по элементу макета.

  2. Введите текст в поле Новая заметка.

  3. Нажмите Enter или кнопку сохранения — заметка попадет в список.

Чтобы изменить заметку, нажмите кнопку Редактировать, отредактируйте текст и подтвердите правку.

Чтобы удалить заметку, нажмите кнопку Удалить рядом с ней.

Обратите внимание: заметка сохраняется только после подтверждения. Введенный, но не подтвержденный текст отбрасывается при переключении на другой элемент или закрытии панели.

Если у элемента уже есть заметки, рядом с кнопкой Заметки для AI отображается индикатор с подсказкой «Есть заметки».

Заметки хранятся отдельно для каждой страницы проекта и не теряются при перезагрузке. Заметки удаленного элемента удаляются автоматически.

Заметки для группы элементов

Чтобы дать одинаковое указание нескольким элементам:

  1. Выделите первый элемент кликом.

  2. Добавьте остальные с помощью Shift + клик. Повторный Shift + клик снимает выделение с элемента.

  3. Нажмите Заметки для AI — откроется групповая панель.

В групповой панели отображаются только заметки, которые есть у всех выбранных элементов. Добавление, правка и удаление заметки затрагивают все выбранные элементы.

Подсказка: кнопка Выделить родитель переводит выделение с текущих элементов на родительские — это удобно, чтобы дать указание всему блоку целиком.

Обработка заметок

Отправить заметки агенту можно двумя способами:

  • Обработать — кнопка внизу панели заметок. Отправляет заметки текущего элемента или всех элементов групповой выборки;

  • Обработать все заметки — кнопка на панели инструментов. Отправляет одним запросом заметки всех элементов страницы.

При отправке панель заметок закрывается, а над рабочей областью включается индикатор обработки. Пока обработка идет, добавление и редактирование заметок недоступны.

При успешной обработке измененные элементы встраиваются в текущий макет — остальная часть страницы не затрагивается, — и выводится сообщение «Заметки обработаны, изменения применены». Обработанные заметки удаляются, заметки остальных элементов сохраняются.

Если обработка не удалась, макет не меняется, а заметки сохраняются — формулировку можно скорректировать и отправить повторно.

Рекомендации

  • Формулируйте пожелания предметно: «увеличить отступ между полями до 16px» работает лучше, чем «сделать красиво».

  • Используйте заметки для точечных правок, а чат — для структурных изменений макета.

  • Накапливайте заметки по нескольким элементам и отправляйте их кнопкой Обработать все заметки: агент увидит правки целиком и учтет их взаимосвязи.

  • Проверяйте результат в режиме предпросмотра и сохраняйте страницу только после проверки.