Привет, Хабр! Меня зовут Роман Белоусов, я заместитель руководителя отдела проектирования интерфейсов в Битрикс24. Недавно у нас внутри компании прошел традиционный спортивный марафон. Мы решили не брать готовые решения, а навайбкодить собственную платформу для трекинга активностей, рейтингов и общения. У нас была пара разработчиков для бэкенда, я, как продуктовый дизайнер и супер-сжатые сроки — 3-4 недели на все.

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

Делаем приложение под нагрузку

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

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

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

Мой стек выглядел так: изолированная среда с агентом Claude под капотом и кусочки Figma для прототипирования. Мы делали нативные приложения — использовали дизайн-системы iOS и Android без кастомных велосипедов.

Реальность ИИ-дизайна: привет из 2017-го

Когда вы просите AI-агента — в нашем случае это был Claude — сгенерировать интерфейс, он не учитывает ограничения человеческой памяти. Считается, что рабочая память человека комфортно обрабатывает 3–4 элемента одновременно (закон Миллера).

Но базовый промпт «Создай интерфейс спортивного марафона» выдает пользователю все и сразу. ИИ генерирует типичный неказистый паттерн из 2017 года: многослойная навигация, перегруженные дашборды, глупые градиенты и тотальное отсутствие интерфейсного ритма. Возникает эффект «плоского UI» — нет иерархии, глаз не может зацепиться за главное, когнитивная нагрузка взлетает до небес.

Пришлось вычищать весь этот визуальный мусор по запчастям. Порционная подача (один экран — одна задача) работает безупречно. Мы свели интерфейс к атомарным паттернам: кнопка добавления активности, понятная лента, чистая карточка участника.

Кстати, начали мы разработку строго с iOS-версии. Нативные гайдлайны Apple достаточно жесткие, и эта строгость не давала искусственному интеллекту уходить в галлюцинации и «эстетику ради эстетики». А уже потом мы портировали эту логику на Android.

Инструментарий и воркэраунды

Главный урок, который я вынес: ИИ не понимает абстракций из коробки. Если написать «сделай блок визуально легче» или «сдвинь элемент», модель может потерять контекст и зациклиться. Попытка изменить отступы иногда приводила к тому, что переписывался огромный кусок логики, и безобидная визуальная правка ломала бэкенд.

Поэтому мы выработали правила:

1. Атомарные сессии. Мы перестали скармливать агенту глобальные задачи. Интерфейс разбивался на микро-компоненты. Промпт звучал конкретно: «Возьми компонент Карточки. Добавь возможность загружать две фотографии с переключением по тапу, без проваливания на отдельный экран». Короткая итерация -> тест -> фиксация результата.

2. Проще нарисовать, чем объяснить.

Если агент тупил дольше 5 минут, я шел в Figma, руками рисовал нужный элемент, скармливал ноду из фигмы через Figma MCP со словами «сделай вот так». В итоге у нас получилось примерно 98% чистой генерации кода и 2% ручных визуальных подсказок.

Но где ИИ великолепен, так это в рутине. Промпт: «Подготовь этот раздел к темной теме» — отрабатывает безупречно. То, на что раньше уходили часы перекрашивания токенов, сейчас делается одним предложением.

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

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

В его основу я заложил ключевой принцип: правки интерфейса ломают бэкенд не сами по себе, а через контракт. Пока меняется только CSS, отступы и цвета — бэкенду все равно. Опасность начинается там, где дизайн-правка случайно удаляет скрытые id, меняет name инпутов в формах или трогает payload, который летит на сервер.

Перед тем как мержить мои визуальные изменения в основную ветку, агент получал мой git diff и прогонял его через этот скилл-предохранитель.

Здесь я привожу базовую, очищенную от нашей специфики версию этого промпта, которую вы можете забрать себе и адаптировать под свой проект:

Роль: Pre-Merge Backend Guard

Твоя задача — до того, как изменения интерфейса попадут в общую ветку, проанализировать git diff и найти правки, которые могут сломать бэкенд на рантайме. Ты ничего не пушишь и не правишь код сам — ты только выносишь вердикт.

Инструкция по аудиту:

1. Раздели diff на две корзины. Чисто презентационные правки (CSS, отступы, тексты, локальный стейт) отбрасывай — они безопасны.

2. Оставшиеся изменения проверь на нарушение «контракта» клиент-сервер. 

Ищи следующие категории риска:

- Поверхность API: изменен URL, HTTP-метод, вызов несуществующего эндпоинта.

- Тело запроса: переименованы/удалены поля payload, изменен тип данных.

- Формы: удалены скрытые поля (CSRF-токен, ID сущности), изменены атрибуты name/id.

Формат ответа:

Проанализируй код и выдай вердикт по шаблону:

? НЕ мержить (Ломает: [файл:строка] -> какой контракт нарушен)

? Мержить после проверки (Рискованно: [файл:строка] -> что именно подтвердить против бэкенда)

? Безопасно (Только презентация)

Такой промпт — изолированный скелет. Если вы просто отдадите его нейросети, большинство правок улетят в желтую зону (?), потому что изолированный ИИ не знает, примет ли ваш конкретный сервер измененные данные.

Чтобы этот скилл заработал на 100%, его нужно адаптировать под свой проект: прямо в теле промпта объясните агенту, что именно у вас считается «контрактом» (Swagger, GraphQL-схема, DTO-файлы) и где эти файлы лежат.

Для нас такой нехитрый этап валидации сэкономил кучу нервов. Агент честно подсвечивал: «Ты удалил скрытый инпут с ID активности вместе с формой, верни обратно, иначе бэк упадет». Это спасало нас от архитектурных катастроф.

UX и «дофаминовые шалости»

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

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

Здесь нам на помощь пришла нейробиология, а именно — ошибка предсказания награды (Reward Prediction Error). Дофамин выделяется не тогда, когда мы получаем ожидаемое, а когда результат превосходит ожидания. Классические счетчики лайков под постами, как в соцсетях, вызывают быструю адаптацию. Пользователь видит ? 12 и ничего не чувствует. Дофаминовый сигнал теряет силу.

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

Мы добавили и другие микро-бонусы: значки молний за выполнение ежедневной нормы, накопительные медали.

Итоги: месяц на MVP, который не стыдно показать

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

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

Но генеративный ИИ пока не способен заменить продуктовое мышление. Модели не знают, как работает человеческое внимание, что такое дофаминовое истощение и почему 10 кнопок на экране убьют вашу конверсию. Искусственный интеллект пишет код, но проектировать пользовательский опыт — это по-прежнему задача инженера и дизайнера.