AI-ассистент для создания интерфейса

AI-ассистент — это встроенный инструмент, который помогает создавать и редактировать интерфейс заданий с помощью текстовых описаний на естественном языке. Вместо ручной верстки вы описываете, какой интерфейс вам нужен, и ассистент генерирует готовый код.

Если вам нужна ручная верстка интерфейса, воспользуйтесь разделом Верстка интерфейса.

Начало работы

Чтобы открыть AI-ассистент, перейдите в проект на вкладку Интерфейс. Панель чата расположена справа от редактора кода.

ai agent overview

Вы можете начать работу двумя способами:

  • Написать описание нужного интерфейса в поле ввода.

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

Как составлять запросы

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

Что указать в запросе

Хороший запрос содержит следующую информацию:

  • Тип задачи — классификация, сегментация, сравнение, генерация текста, оценка качества и т. д.

  • Тип входных данных — текст, изображение, аудио, видео, диалог.

  • Структура ответа — какие категории, варианты ответов или элементы должен выбирать разметчик.

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

Примеры запросов

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

Запросы на редактирование

Ассистент видит текущий код вашего интерфейса. Вы можете попросить его внести точечные изменения в уже существующий интерфейс:

  • «Добавь поле для комментария после блока с вариантами ответа»

  • «Измени количество вариантов ответа на 5»

  • «Добавь валидацию: комментарий обязателен, если выбран вариант "Другое"»

Уточняющие вопросы

Если информации в вашем запросе недостаточно для генерации качественного интерфейса, ассистент задаст уточняющие вопросы. Вопросы могут касаться:

  • Типа задачи — если из запроса неясно, какой тип разметки требуется.

  • Входных данных — если не указан тип данных, с которыми будет работать разметчик.

  • Структуры ответа — если нужны детали: категории, сущности, критерии оценки.

ai agent questions

Формат вопросов

Вопросы отображаются в виде карточек с вариантами ответа. Вы можете:

  • Выбрать один или несколько предложенных вариантов (зависит от типа вопроса).

  • Ввести свой вариант в текстовом поле, если ни один из предложенных не подходит.

Если вопросов несколько, они отображаются последовательно — переключайтесь между ними с помощью кнопок Назад и Далее. После ответа на все вопросы нажмите Отправить.

Генерация и просмотр изменений

После обработки вашего запроса ассистент сгенерирует код и предложит его к применению. Изменения отображаются слева от чата в виде блоков кода с подсветкой синтаксиса.

ai agent diff

Ассистент может изменить один или несколько блоков интерфейса:

  • HTML — разметка задания

  • CSS — стили

  • JavaScript — логика и валидация

  • Example data — пример данных для предпросмотра

  • Config — конфигурация

  • Specification — спецификация для расчёта качества

Изменяются только те блоки, которые необходимо обновить. Остальные блоки остаются без изменений.

Принятие и отклонение изменений

После генерации кода вам необходимо принять или отклонить предложенные изменения.

ai agent accept reject

Доступные действия

Действие Описание

Принять изменение

Применяет сгенерированный код к соответствующему блоку интерфейса.

Отклонить изменение

Отменяет предложенное изменение — текущий код блока останется без изменений.

Принять всё

Применяет все предложенные изменения одновременно.

Отклонить всё

Отменяет все предложенные изменения.

Отклонить с комментарием

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

Обратная связь при отклонении

Если сгенерированный код не соответствует ожиданиям, отклоните изменения с комментарием. Опишите, что именно нужно исправить, например:

  • «Варианты ответа должны располагаться горизонтально, а не вертикально»

  • «Не хватает поля для комментария»

  • «Изображение должно быть слева, а не сверху»

Ассистент получит вашу обратную связь и предложит исправленный вариант кода.

Редактирование существующего интерфейса

Ассистент автоматически видит текущий код всех блоков вашего интерфейса (HTML, CSS, JavaScript, Example data, Config, Specification). Благодаря этому вы можете:

  • Просить внести точечные правки в уже готовый интерфейс.

  • Описывать изменения относительно текущего состояния: «измени цвет кнопки», «добавь ещё один вариант ответа», «убери поле с комментарием».

  • Дорабатывать интерфейс итеративно, отправляя последовательные запросы.

Если вы вручную изменили код в редакторе, ассистент увидит обновлённый код при следующем запросе.

Сохранение и предпросмотр

После принятия изменений код отображается в редакторе, но ещё не сохранён на сервере.

Чтобы сохранить изменения и посмотреть результат:

  1. Нажмите Сохранить, чтобы сохранить интерфейс.

  2. Нажмите Предпросмотр интерфейса, чтобы проверить, как выглядит форма.

История версий интерфейса

Каждое сохранение интерфейса создаёт новую версию. Вы можете просмотреть историю версий и вернуться к любой предыдущей.

ai agent history

Просмотр истории

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

  • Автора изменения.

  • Дату и время сохранения.

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

История чата

История чата с ассистентом сохраняется автоматически и привязана к вашему проекту. При повторном открытии страницы интерфейса вы увидите предыдущие сообщения.

Управление историей чата

  • Очистить историю — удаляет все сообщения чата. Действие необратимо.

  • Скачать историю — сохраняет переписку в файл chat-history.json на ваш компьютер.

Очистка истории чата не влияет на сохранённые версии интерфейса. Код, который вы приняли и сохранили, останется в истории версий.

Рекомендации по работе с ассистентом

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

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

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