HTML para Peça a uma IA “um app de tarefas” e você receberá algo que funciona em um notebook. Aí você abre no celular e os botões são minúsculos, o texto vaza pela borda e sua lista some quando você fecha. A solução não é um modelo melhor. É um prompt melhor.
Estas são as instruções que colocamos em todo prompt de modelo do Free HTML to APK, e por que cada uma está lá.
1. Peça um único arquivo
“Retorne um index.html com CSS e JavaScript embutidos.” Um arquivo significa nada de folhas de estilo faltando nem caminhos quebrados. Também é muito mais fácil colar no app e devolver à IA para correções.
2. Diga que é um app de celular
“Mobile-first, amigável ao toque, funciona em retrato.” Os modelos usam layouts de desktop por padrão, a menos que você diga o contrário. Essa única frase muda tamanhos de fonte, espaçamento e o layout inteiro.
3. Peça áreas de toque grandes
“Faça todos os botões com pelo menos 44 pixels de altura.” Dedos não são ponteiros de mouse. Essa regra única elimina a maior parte do problema de “parece um site”.
4. Mencione a viewport e as áreas seguras
Peça <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> e preenchimento com env(safe-area-inset-*). Celulares com notch e cantos arredondados vão agradecer.
5. Exija armazenamento offline
“Sem CDN, sem scripts ou fontes externos, salve os dados no localStorage.” Apps que precisam de internet para o próprio código quebram no ônibus. Apps que salvam no localStorage mantêm seus dados entre as aberturas.
6. Peça modo claro e escuro
“Suporte os modos claro e escuro com prefers-color-scheme.” Custa ao modelo algumas linhas de CSS e faz o app parecer nativo em qualquer celular.
7. Descreva os recursos nativos que você quer
Se seu app deve vibrar, ler um QR code ou enviar uma notificação, liste esses recursos e as funções exatas. Por exemplo: FreeApp.vibrate(ms), FreeApp.scanCode(), FreeApp.notify(title, body). A lista completa está na API JavaScript. Os modelos seguem nomes reais de funções muito melhor do que desejos vagos.
8. Mande proteger as chamadas nativas
“Sempre verifique window.FreeApp antes de chamá-lo e use uma alternativa que funcione em um navegador comum.” Isso permite visualizar o app em qualquer lugar e evita travamentos se um recurso estiver ausente.
9. Descreva o app como um usuário, não como um programador
“Quando abro, vejo o total de hoje. Toco em um copo para adicionar 250 ml. Um toque longo remove o último.” Cenas assim dão ao modelo uma imagem clara das telas e do fluxo. Você não precisa saber os termos técnicos.
Um prompt que você pode 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]
Ou pule a digitação: todo modelo do Free HTML to APK tem um prompt como este pronto para copiar.