Как собрать WebView для Telegram Mini App через ИИ и не утонуть в баг-хаосе

Как собрать WebView для Telegram Mini App через ИИ и не утонуть в баг-хаосе

Для Mini App важнее не «красивый код», а три вещи: нормальная высота WebView, предсказуемая кнопка назад и отсутствие скролла, который конфликтует с интерфейсом Telegram. Если это не описать в ТЗ, ИИ почти всегда делает «обычный сайт в iframe-духе», который в Telegram ощущается сломанным.

Рабочий промпт для Cursor или Claude Code:
Собери WebView-страницу для Telegram Mini App.
Требования: full-height layout, без вертикального скролла на первом экране, safe-area inset для iPhone, кнопка Back через Telegram WebApp API, закреплённый CTA внизу, адаптация под тёмную тему Telegram.
Не используй лишние библиотеки.
Сразу выведи структуру компонентов, затем код.
Если есть спорные места — сначала перечисли риски, потом предложи реализацию.

Что важно добавить в промпт:
— явно просить обработку viewport и safe-area
— запретить «лишние анимации» и тяжёлые UI-kit’ы
— отдельно указать поведение при закрытии, возврате и смене темы
— попросить сделать fallback, если Telegram API недоступен

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