Меня зовут Роман Белоусов, я заместитель руководителя отдела проектирования интерфейсов в Битрикс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 кнопок на экране убьют вашу конверсию. Искусственный интеллект пишет код, но проектировать пользовательский опыт — это по-прежнему задача инженера и дизайнера.
Автор: bitrix24
