Prompts que producen grandes apps móviles: 9 consejos que de verdad funcionan

Pídele a una IA «una app de tareas» y obtendrás algo que funciona en un portátil. Luego la abres en un teléfono y los botones son diminutos, el texto se sale del borde y tu lista desaparece al cerrarla. La solución no es un modelo mejor. Es un mejor prompt.

Estas son las instrucciones que ponemos en cada prompt de plantilla de Free HTML to APK, y por qué está cada una.

1. Pide un solo archivo

«Devuelve un solo index.html con CSS y JavaScript en línea». Un solo archivo significa que no faltan hojas de estilo ni se rompen rutas. También es mucho más fácil de pegar en la app y de devolver a la IA para corregirlo.

2. Di que es una app de teléfono

«Primero móvil, apto para pantallas táctiles, funciona en vertical». Los modelos usan por defecto diseños de escritorio a menos que digas lo contrario. Esta frase cambia los tamaños de fuente, los espacios y todo el diseño.

3. Pide áreas táctiles grandes

«Haz que cada botón mida al menos 44 píxeles de alto». Los dedos no son punteros de ratón. Esta sola regla elimina la mayor parte del problema de «parece un sitio web».

4. Menciona el viewport y las áreas seguras

Pide <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> y relleno con env(safe-area-inset-*). Los teléfonos con muesca y esquinas redondeadas te lo agradecerán.

5. Exige almacenamiento sin conexión

«Sin CDN, sin scripts ni fuentes externos, guarda los datos en localStorage». Las apps que necesitan internet para su propio código fallan en el autobús. Las apps que guardan en localStorage conservan tus datos entre aperturas.

6. Pide modo claro y oscuro

«Admite modo claro y oscuro con prefers-color-scheme». Le cuesta al modelo unas líneas de CSS y hace que la app se sienta nativa en cualquier teléfono.

7. Describe las funciones nativas que quieres

Si tu app debe vibrar, escanear un código QR o enviar una notificación, enumera esas funciones y las funciones exactas. Por ejemplo: FreeApp.vibrate(ms), FreeApp.scanCode(), FreeApp.notify(title, body). La lista completa está en la API de JavaScript. Los modelos siguen mucho mejor los nombres reales de las funciones que los deseos vagos.

8. Dile que proteja las llamadas nativas

«Comprueba siempre window.FreeApp antes de llamarlo y usa una alternativa que funcione en un navegador normal». Así puedes previsualizar la app en cualquier lugar y evitas fallos si falta una función.

9. Describe la app como un usuario, no como un programador

«Al abrirla veo el total de hoy. Toco un vaso para añadir 250 ml. Una pulsación larga quita el último». Escenas como esta le dan al modelo una imagen clara de las pantallas y del flujo. No necesitas saber las palabras técnicas.

Un prompt que puedes copiar

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]

O ahórrate escribir: cada plantilla de Free HTML to APK tiene un prompt como este listo para copiar.