ИИ как генератор форм: как получить готовый UI, не раскрывая внутренний код

Источник этого материала описывает практический подход: передавать в публичную LLM (большую языковую модель, то есть нейросеть, обученную на текстах и коде) только те данные, которые и так видит любой посетитель страницы. HTML-разметка, стили, структура запросов к API уже отдаются браузеру. Значит, их можно безопасно отправить модели и получить на выходе рабочую форму.

Что понадобится?

• Доступ к любой публичной LLM. В примере используется DeepSeek (deepseek.com), но подойдёт и другая модель, умеющая работать с JSON.
• Заранее подготовленная JSON-схема, описывающая целевую структуру данных вашей формы. JSON Schema (json-schema.org) задаёт правила: какие поля, какого типа, обязательны ли они.
• Пакет для сборки формы. В источнике используется «@cloudx/react-ui-kit-forms-builder», но принцип применим к любому конструктору, который умеет строить форму по схеме.
• Базовое понимание JSON (текстовый формат для обмена данными, похожий на вложенные списки «ключ: значение»).
• Около 20 минут на весь цикл: промпт (промпт, текстовая команда для нейросети), проверка результата, сборка.

Пошаговая инструкция

1. Определите, какие данные можно считать открытыми. Всё, что браузер пользователя получает при загрузке страницы, уже публично: HTML, JavaScript, CSS, структура запросов и ответов API. Именно эти данные и только их вы передадите модели.

2. Подготовьте файл JSON-схемы. Схема описывает, как должен выглядеть итоговый JSON: типы полей, вложенность, обязательность. Этот файл вы загрузите в LLM вместе с промптом, чтобы модель выдала результат, соответствующий вашим правилам.

3. Сгенерируйте схему данных формы. Загрузите файл схемы в DeepSeek и отправьте промпт. Пример промпта приведён ниже в блоке.

4. Проверьте результат. Убедитесь, что полученная схема валидируется вашей исходной JSON-схемой. Названия полей, типы и вложенность должны совпадать.

5. Создайте модель формы. Используя результат из шага 3, вызовите функцию сборки модели:

const formModel = buildFormModel(exampleScheme);

1. Сгенерируйте UI-схему. Повторите подход: загрузите в DeepSeek схему разметки (она тоже публична) и опишите промптом, какие элементы нужны: input, number, textarea, checkbox.

2. Скорректируйте пути. В полученной UI-схеме поправьте свойство path у каждого элемента, чтобы оно совпадало со структурой данных из шага 3. Например, поле «name» получает путь personal/name.

3. Соберите UI формы и поставьте на страницу:

const formElement = buildFormUI({
  model: formModel,
  scheme: UiScheme,
});

<FormLayout>{formElement}</FormLayout>

Форма готова. Весь конфиденциальный код остался внутри вашего проекта.

Напиши JSON схему, в которой есть свойства: name - строка,
phone - строка, zip - число, address - строка, comment - строка,
agreement - булево значение. Свойства name и phone объединены
в свойство personal. Свойства zip и address объединены
в свойство address. Все поля не обязательны для заполнения
и могут оставаться пустыми. Полученная схема должна
валидироваться схемой из файла.

Что делать с этим прямо сейчас?

Автору на Дзене: если вы ведёте блог о разработке или no-code, этот подход отлично ложится в формат пошагового гайда. Генератор форм через промпт даёт наглядный результат за 20 минут, а тема безопасности данных добавляет глубину.

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

Предпринимателю в РФ и СНГ: DeepSeek доступен из России без VPN. Из аналогичных моделей, работающих с JSON, можно использовать YandexGPT или GigaChat, но промпт придётся адаптировать под их синтаксис. Главное правило то же: не передавайте модели ничего, что не готовы показать на улице.

Принцип, который стоит забрать из этого материала, шире конкретного стека: любая генерация через публичную LLM безопасна ровно настолько, насколько вы контролируете входные данные. JSON-схема вместо исходного кода, открытая разметка вместо серверной логики. Не отказывайтесь от нейросетей, просто не кормите их тем, что не готовы потерять.