AI-генерация WebView для Telegram Mini App ломается не в коде, а в деталях интерфейса

AI-генерация WebView для Telegram Mini App ломается не в коде, а в деталях интерфейса

Если просите Cursor или Claude Code собрать WebView «как мини-апп», ИИ обычно делает страницу, а не оболочку Telegram. Проверять надо не красоту, а базу: открытие в iframe/WebView, корректный viewport, отсутствие лишнего скролла, адаптацию под safe area, поведение кнопок на мобильном.

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

Самая частая ошибка — просить «сделай красивый WebView» без сценария. ИИ рисует карточки, а потом ломается на state: форма отправлена, но экран не меняется; лоадер есть, но кнопка остаётся активной; запрос уходит, но нет обработки ошибки. Для мини-аппа нужен не дизайн, а цепочка состояний: idle → loading → success → error.

Полезный шаблон для генерации: сначала описываете мобильный экран, потом список состояний, потом ограничения по верстке. Если нужен вход через Telegram, отдельно требуйте чтение initData и заглушку для local mode. Так ИИ меньше фантазирует и чаще выдаёт код, который можно открыть в WebView без ручной переделки.

Правило простое: сначала сценарий и состояния, потом стили, и только потом “сделай красиво”.