Промпты, которые создают отличные мобильные приложения: 9 советов, которые действительно работают

Попросите ИИ «приложение со списком дел», и получите то, что работает на ноутбуке. Затем открываете его на телефоне: кнопки крошечные, текст вылезает за край, а список исчезает при закрытии. Дело не в лучшей модели. Дело в лучшем промпте.

Это инструкции, которые мы вставляем в каждый промпт шаблонов в Free HTML to APK, и вот зачем нужна каждая из них.

1. Просите один файл

«Верни один index.html со встроенными CSS и JavaScript». Один файл — это нет потерянных таблиц стилей и сломанных путей. Его также гораздо проще вставить в приложение и отправить обратно ИИ для исправлений.

2. Скажите, что это приложение для телефона

«Mobile-first, удобно для касаний, работает в портретной ориентации». Если не сказать иначе, модели по умолчанию делают десктопную вёрстку. Это одно предложение меняет размеры шрифтов, отступы и весь макет.

3. Просите большие области нажатия

«Сделай каждую кнопку высотой не менее 44 пикселей». Пальцы — не курсоры мыши. Это одно правило устраняет большую часть проблемы «ощущается как сайт».

4. Упомяните viewport и безопасные зоны

Попросите <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> и отступы с env(safe-area-inset-*). Телефоны с вырезами и скруглёнными углами скажут вам спасибо.

5. Требуйте офлайн-хранилище

«Без CDN, без внешних скриптов и шрифтов, сохраняй данные в localStorage». Приложения, которым нужен интернет для собственного кода, ломаются в автобусе. Приложения, сохраняющие в localStorage, хранят данные между запусками.

6. Просите светлый и тёмный режим

«Поддержи светлый и тёмный режим через prefers-color-scheme». Это стоит модели нескольких строк CSS и делает приложение нативным на любом телефоне.

7. Опишите нужные нативные функции

Если ваше приложение должно вибрировать, сканировать QR-код или отправлять уведомление, перечислите эти функции и точные имена функций. Например: FreeApp.vibrate(ms), FreeApp.scanCode(), FreeApp.notify(title, body). Полный список есть в JavaScript API. Модели гораздо лучше следуют реальным именам функций, чем расплывчатым пожеланиям.

8. Скажите ему защищать нативные вызовы

«Всегда проверяй window.FreeApp перед вызовом и делай запасной вариант, работающий в обычном браузере». Так вы сможете просматривать приложение где угодно, а отсутствие функции не приведёт к сбою.

9. Описывайте приложение как пользователь, а не как программист

«Когда я открываю его, я вижу сегодняшний итог. Я нажимаю на стакан, чтобы добавить 250 мл. Долгое нажатие удаляет последний». Такие сценки дают модели ясное представление об экранах и логике. Технические слова знать не нужно.

Промпт, который можно скопировать

Build a single-file mobile web app (index.html with inline CSS/JS)
for an Android WebView.

Requirements:
- Mobile-first, touch-friendly, buttons at least 44px tall.
- Viewport meta with viewport-fit=cover, pad for safe areas.
- Works fully offline: no CDN, no external fonts or images.
- Save data in localStorage.
- Light and dark mode.
- If window.FreeApp exists, use FreeApp.vibrate(30) on taps.

The app: [describe it like a user would]

Или обойдитесь без набора текста: у каждого шаблона в Free HTML to APK есть готовый для копирования промпт.