Мы давно привыкли, что ИИ умеет генерировать код. Но до недавнего времени генерация интерфейсов была зоной риска: галлюцинации, небезопасный JSX, поломанная дизайн-система и ощущение, что модель «лезет не туда». Новый open-source-инструмент json-render от Vercel впервые предлагает рабочий компромисс: ИИ больше не рисует UI как хочет — он собирает его строго по вашим правилам.
И это реально меняет игру.
Что вообще произошло
Vercel выложил json-render — библиотеку, которая превращает текстовый запрос пользователя в JSON-описание интерфейса, а затем рендерит его через заранее определённый каталог компонентов.
Схема простая, но изящная:
🧠 пользователь пишет: «Сделай форму логина»
🤖 ИИ генерирует JSON, а не JSX или HTML
🧩 JSON может содержать только разрешённые компоненты
🎨 UI сразу рендерится вашими React-компонентами
📦 при желании всё экспортируется в чистый код
Ключевая идея — жёсткие ограничения (guardrails). Модель физически не может выйти за рамки вашего каталога. Никакого <script>alert()</script>, никаких левых div’ов и внезапных inline-стилей.
Почему это реально важно, а не просто «ещё одна библиотека»
Раньше генерация UI выглядела так:
😬 ИИ придумал компонент, которого нет
😬 нарушил дизайн-систему
😬 вставил небезопасный код
😬 вы всё равно идёте и переписываете руками
json-render ломает этот сценарий.
⚙️ ИИ не знает про ваши компоненты — вы их явно описываете
⚙️ каждый проп валидируется через схемы (например, zod)
⚙️ структура интерфейса прозрачна и детерминирована
⚙️ UI можно стримить по мере генерации JSON
⚙️ результат можно экспортировать без runtime-зависимостей
По сути, ИИ становится конструктором, а не художником-абстракционистом.
Как это устроено под капотом (без магии)
Самое интересное — техническая часть, потому что здесь нет «волшебства», только аккуратная инженерия.
🧩 вы описываете catalog
🧩 перечисляете доступные компоненты
🧩 задаёте их свойства (props) через строгие схемы
🧩 определяете действия (actions), биндинги данных и условия видимости
ИИ на выходе генерирует JSON примерно такого вида:
⚙️ тип компонента
⚙️ ключ
⚙️ разрешённые props
⚙️ иерархия детей (children)
⚙️ пути к данным через JSON Pointer
Никакого кода — только структура. А дальше ваш React просто делает своё дело.
Отдельный плюс — двусторонний data binding (изменения в интерфейсе автоматически обновляют данные, а изменения данных сразу отражаются в интерфейсе). Компоненты могут быть связаны с данными по путям вроде /analytics/revenue, и это сразу ложится в реальный UI.
Сдвиг роли фронтенд-разработчика
И вот здесь начинается самое интересное.
json-render — это не про «ИИ отнял работу». Это про смену фокуса.
🧠 меньше верстки
🧠 меньше ручного CRUD-UI
🧠 больше проектирования компонентов
🧠 больше работы с состояниями и поведением
🧠 больше мышления о контексте и ограничениях
Фронтендер всё меньше «пишет кнопки» и всё больше проектирует язык интерфейса, на котором ИИ потом говорит с пользователем.
По сути, мы движемся к генеративному UI — интерфейсам, которые собираются на лету под задачу, пользователя или контекст. Но впервые — без ощущения, что вы теряете контроль.
Моё мнение: это очень правильное направление
Мне нравится этот подход ровно потому, что он не пытается заменить разработчика. Он чётко признаёт: ИИ плохо чувствует границы. Значит, границы надо задать явно.
json-render — это не «пусть модель рисует всё». Это:
🛡️ безопасность
🧱 целостность дизайн-системы
🧠 контроль архитектуры
🚀 ускорение прототипирования
Если этот подход приживётся (а шансы высокие), через пару лет мы будем воспринимать ручную сборку типовых интерфейсов так же, как сегодня — ручную реализацию сортировки.
ИИ будет собирать.
Мы — решать, что именно можно собирать.
Источники
🔗 Официальный сайт и документация: https://json-render.dev/
🔗 GitHub проекта: https://github.com/vercel-labs/json-render