Free HTML to Demandez à une IA « une application de liste de tâches » et vous obtiendrez quelque chose qui marche sur un ordinateur portable. Puis vous l'ouvrez sur un téléphone : les boutons sont minuscules, le texte dépasse du bord et votre liste disparaît à la fermeture. La solution n'est pas un meilleur modèle. C'est un meilleur prompt.
Voici les instructions que nous mettons dans chaque prompt de modèle de Free HTML to APK, et pourquoi chacune s'y trouve.
1. Demandez un seul fichier
« Renvoie un seul index.html avec CSS et JavaScript intégrés. » Un seul fichier, c'est pas de feuille de style manquante ni de chemin cassé. C'est aussi bien plus simple à coller dans l'application et à renvoyer à l'IA pour des corrections.
2. Dites que c'est une application mobile
« Mobile d'abord, adapté au tactile, fonctionne en portrait. » Les modèles produisent par défaut des mises en page pour ordinateur, sauf indication contraire. Cette seule phrase change les tailles de police, les espacements et toute la mise en page.
3. Demandez de grandes zones tactiles
« Fais des boutons d'au moins 44 pixels de haut. » Les doigts ne sont pas des pointeurs de souris. Cette seule règle élimine l'essentiel du problème « on dirait un site web ».
4. Mentionnez le viewport et les zones sûres
Demandez <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> et un remplissage avec env(safe-area-inset-*). Les téléphones à encoche et à coins arrondis vous remercieront.
5. Exigez un stockage hors ligne
« Pas de CDN, pas de scripts ni de polices externes, enregistre les données dans localStorage. » Les applications qui ont besoin d'Internet pour leur propre code plantent dans le bus. Celles qui enregistrent dans localStorage conservent vos données d'un lancement à l'autre.
6. Demandez les modes clair et sombre
« Prends en charge les modes clair et sombre avec prefers-color-scheme. » Cela ne coûte au modèle que quelques lignes de CSS et donne à l'application un rendu natif sur chaque téléphone.
7. Décrivez les fonctions natives voulues
Si votre application doit vibrer, scanner un QR code ou envoyer une notification, listez ces fonctions et les fonctions exactes. Par exemple : FreeApp.vibrate(ms), FreeApp.scanCode(), FreeApp.notify(title, body). La liste complète se trouve dans l'API JavaScript. Les modèles suivent bien mieux de vrais noms de fonctions que des souhaits vagues.
8. Demandez de protéger les appels natifs
« Vérifie toujours window.FreeApp avant de l'appeler, et prévois une solution de repli qui marche dans un navigateur normal. » Cela vous permet de prévisualiser l'application n'importe où et évite les plantages si une fonction est absente.
9. Décrivez l'application comme un utilisateur, pas comme un programmeur
« Quand je l'ouvre, je vois le total du jour. Je touche un verre pour ajouter 250 ml. Un appui long supprime le dernier. » Des scènes comme celle-ci donnent au modèle une image claire des écrans et du déroulement. Vous n'avez pas besoin de connaître les termes techniques.
Un prompt à copier
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]
Ou évitez de taper : chaque modèle de Free HTML to APK propose un prompt comme celui-ci, prêt à copier.