AI-собирает WebView для Telegram Mini App, но ломается на 5 типовых вещах

AI-собирает WebView для Telegram Mini App, но ломается на 5 типовых вещах

Если просишь Cursor или Claude Code накидать WebView для Mini App, не стартуй с «сделай красиво». Сначала задай каркас: экран, хедер, состояние загрузки, ошибка, пустой список. Иначе ИИ рисует витрину без логики, а потом ты вручную дописываешь то, что должно было быть в промпте.

Промпт должен фиксировать Telegram-специфику: без внешних редиректов, с адаптацией под тёмную тему, с учётом safe area, с кнопкой закрытия и поведением на мобиле. Отдельно проси не использовать тяжёлые анимации и не завязываться на browser-only API, которые в WebView ведут себя криво.

Самые частые поломки:
— скролл блокируется из-за лишних wrapper-ов;
— кнопка «назад» не синхронизирована с историей;
— формы отправляют данные без валидации;
— SVG/изображения тянут лишний вес;
— состояние экрана теряется после перезагрузки WebView.

Хороший шаблон задачи для ИИ: «Собери Telegram Mini App WebView с 3 экранами, адаптацией под mobile, тёмной темой, skeleton loading, обработкой ошибки и пустого состояния. Не используй тяжёлые библиотеки, не ломай вертикальный скролл, оставь точки расширения под форму и список». После генерации проверь именно поведение, а не только верстку.

Если WebView нужен под лидоген или прелендер, сначала заставь ИИ сделать рабочий каркас, потом уже проси полировку. В Mini App важнее предсказуемость интерфейса, чем эффектная анимация.