Prompts that produce great mobile apps: 9 tips that actually work

Ask an AI for "a to-do app" and you will get something that works on a laptop. Then you open it on a phone and the buttons are tiny, the text runs off the edge, and your list disappears when you close it. The fix is not a better model. It is a better prompt.

These are the instructions we put into every template prompt in Free HTML to APK, and why each one is there.

1. Ask for a single file

"Return one index.html with inline CSS and JavaScript." One file means no missing stylesheets and no broken paths. It is also much easier to paste into the app and to send back to the AI for fixes.

2. Say it is a phone app

"Mobile-first, touch-friendly, works in portrait." Models default to desktop layouts unless you say otherwise. This one sentence changes font sizes, spacing and the whole layout.

3. Ask for big tap targets

"Make every button at least 44 pixels tall." Fingers are not mouse pointers. This single rule removes most of the "it feels like a website" problem.

4. Mention the viewport and safe areas

Ask for <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> and padding with env(safe-area-inset-*). Phones with notches and rounded corners will thank you.

5. Require offline storage

"No CDN, no external scripts or fonts, save data in localStorage." Apps that need the internet for their own code break on the bus. Apps that save to localStorage keep your data between launches.

6. Ask for light and dark mode

"Support light and dark mode with prefers-color-scheme." It costs the model a few lines of CSS and makes the app feel native on every phone.

7. Describe the native features you want

If your app should vibrate, scan a QR code or send a notification, list those features and the exact functions. For example: FreeApp.vibrate(ms), FreeApp.scanCode(), FreeApp.notify(title, body). The full list is in the JavaScript API. Models follow real function names much better than vague wishes.

8. Tell it to guard native calls

"Always check window.FreeApp before calling it, and fall back to something that works in a normal browser." This lets you preview the app anywhere and prevents crashes if a feature is missing.

9. Describe the app like a user, not a programmer

"When I open it I see today's total. I tap a glass to add 250 ml. A long press removes the last one." Scenes like this give the model a clear picture of the screens and the flow. You do not need to know the technical words.

A prompt you can copy

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]

Or skip the typing: every template in Free HTML to APK has a prompt like this ready to copy.