Если у вас один продукт живёт сразу в двух местах, в Telegram Mini App и в браузере, и человек заходит с компа и не узнаёт то самое приложение, которым только что пользовался в телеге, то проблема тут не в кнопках и даже не в том, где у вас висит навигация, сверху или сбоку. Проблема в том, что вы собрали два разных интерфейса вместо одного, который просто открывается из разных дверей. Я это понял буквально на себе: открыл свою же веб-версию и ничего не понял, ни по дизайну, ни по UX, хотя в мобильном приложении у меня всё было ясно как день. А первое, что попыталась сделать нейросеть, чтобы это «починить», было переставить навигацию местами. Что меня, мягко говоря, не обрадовало.
Давайте по порядку, потому что история тут не про баг в коде, а про то, как легко словить рассинхрон, когда ты делаешь два фронта параллельно и каждый из них вроде бы работает.
Как я вообще это заметил
Я ведь не дизайнер и не тестировщик, у меня нет человека, который сядет и пройдёт оба интерфейса свежим взглядом, я сам себе и заказчик, и тот единственный юзер, который ловит косяки уже на проде. И вот захожу я в веб-версию своего продукта, не в телегу, а именно с браузера, и сижу будто впервые вижу это приложение. В Telegram Mini App всё понятно, куда тыкать, что где лежит, как вернуться назад, а тут открываю то же самое по сути приложение и буквально торможу. Дословно моя реакция была такая: «Если в ТМА захожу и все понятно, то тут нихуя не понятно, ни по дизайну ни по ux».
И вот это ощущение, когда ты тупишь в собственном продукте, оно отрезвляет лучше любой аналитики, потому что если я, который всё это придумал и оркестрировал сборку через claude code, не могу с ходу разобраться, то что почувствует обычный человек, который пришёл с рекламы и видит это первый раз в жизни? Он просто закроет вкладку и уйдёт, и никакой воронки, никакого онбординга у вас не случится, потому что до них человек банально не дойдёт.
Почему перестановка навигации это не фикс
Дальше пошло самое любопытное. Я говорю агенту, мол, веб не похож на мобилку, давай чинить, и первое, что он делает, берётся переставлять навигацию: была шапка сверху, давай сделаем боковую панель, или наоборот. То есть нейросеть честно попыталась решить задачу так, как её многие и решают: подвигать элементы местами и сказать «ну вот, теперь по-другому».
А меня это только разозлило, и не потому что я капризный, а потому что это лечение симптома, а не болезни. Перенос навигации из шапки в сайдбар не делает веб похожим на TMA, он делает веб просто другим вебом. Понимаете разницу? Корневой вопрос вообще не в том, где висит меню. Корневой вопрос я себе сформулировал так: «Главная проблема почему веб не продолжает тма а тма не продолжает веб. почему ???». Вот это «почему» с тремя знаками вопроса тут и есть самое важное, потому что пока ты на него не ответил, ты будешь до посинения двигать кнопки и каждый раз получать новый вариант не того.
Это, кстати, частая ловушка в работе с ИИ-агентами вообще. Агент очень хорошо делает ровно то, что ты буквально сказал: сказал «поменяй навигацию», получил перестановку навигации. Но он не телепат и не вытащит из тебя то, что ты на самом деле имел в виду, если ты сам себе этого ещё не сформулировал, и вот тут вся ответственность на тебе, на человеке, который оркестрирует. Приходишь с косметической задачей, получаешь косметику.
Что я на самом деле хотел
Когда я остановился и перестал гонять агента туда-сюда, до меня дошло, чего я с самого начала хотел от этого продукта, просто не проговорил вслух, а хотел я простой вещи: «оно должно было быть похожим! чтобы или с компа или с мобильного браузера или с телеги везде все знакомо».
То есть цель не в том, чтобы веб и TMA были одинаковыми пиксель в пиксель, это вообще невозможно, ведь у телеги свои ограничения, на десктопе совсем другое пространство, а в мобильном браузере третье. Цель в том, чтобы это ощущалось как одно приложение, у которого просто три входа. Человек один раз разобрался в телеге, и когда он сел за комп и открыл веб, у него не должно быть чувства, что он попал в чужой сервис: те же сущности на тех же местах по смыслу, та же логика переходов, та же визуальная подача, тот же тон, а меняется только то, что обязано меняться под размер экрана, и больше ничего.
И вот когда задача сформулирована так, сразу видно, почему перестановка навигации не работала. Я просил агента сделать веб похожим на мобилку, а на деле мне нужно было, чтобы у обоих фронтов был общий источник правды по дизайну и по UX, чтобы они росли из одного корня, а не из двух разных голов, которые когда-то начали делать каждый своё.
Откуда вообще берётся этот рассинхрон
Если копнуть глубже, а не отделаться тремя пунктами, то понятно, как два фронта расходятся. Ты делаешь сначала Telegram Mini App, потому что это твой основной канал и всё внимание туда, TMA обрастает экранами, логикой, привычками. Потом доходят руки до веб-версии, и ты её делаешь как бы заново, отдельной задачей, отдельной сессией, иногда другими решениями по компоновке. И каждый из фронтов по отдельности вроде нормальный, ничего не сломано, тесты зелёные, всё открывается, а вместе они уже два разных продукта, потому что у них нет общего договора о том, как они выглядят и как себя ведут.
При вайбкодинге, когда код пишет нейросеть, а ты раздаёшь задачи, это вылезает особенно легко. В одной сессии ты делаешь мобилку, в другой веб, контекст между ними не всегда переезжает целиком, и агент в каждой сессии принимает локально разумные решения, которые глобально друг с другом не бьются. Не потому что агент тупой, а потому что ты сам не задал ему рамку «делай как там» и не дал единую дизайн-систему, на которую можно опереться. Как это выглядит на уровне одного компонента, я отдельно разбирал в истории про дрейф UI и общую обёртку.
Тут же всплывает и более широкая мысль про то, как мы вообще строим продукты с ИИ для автоматизации своей же работы. Очень соблазнительно гнать скорость: накидал TMA за пару дней, накидал веб за вечер, оба работают, красава. Но скорость без общей рамки превращается в технический и продуктовый долг, который ты потом ловишь собственным лицом, открыв свой продукт как чужой. Я уже наступал на похожие грабли, когда делал интерфейсы быстро и потом находил кучу косяков, которых сам сразу не видел, про это я писал в истории про астрологию от нуля до MVP за 7 часов.
Что я из этого вынес
Главное, что я для себя забрал, простое и неприятное: когда у продукта два фронта, веб и TMA, их надо проектировать как один опыт с самого начала, а не склеивать задним числом. Это не вопрос «где навигация», это вопрос единого источника правды, когда логика одна, визуальный язык один, сущности на одних и тех же местах, и только адаптация под устройство сверху.
Дальше про саму работу с ИИ-агентами. Если вы пришли к агенту с симптомом, мол «сделай не так, как сейчас», вы и получите другой симптом. Хотите результат, сначала сами докрутите задачу до корня, до того самого «почему веб не продолжает телегу», и только потом несите её агенту. Нейросеть прекрасно реализует ясную мысль и так же прекрасно реализует невнятную, разница только в том, что в первом случае на выходе то, что вам нужно, а во втором перестановка кнопок, которая вас взбесит.
И последнее, для тех, кто делает свой первый продукт или думает, как сделать телеграм бота с веб-частью. Не держите мобилку и веб двумя отдельными проектами в голове, это один продукт, который умеет открываться из трёх дверей, и человек за каждой из этих дверей должен попадать в одну и ту же знакомую комнату. А если он попадает в три разные, то вы потеряли его ещё на пороге, и никакая красивая навигация это уже не спасёт. Вот и делайте выводы.