ChatGPT can build a small app if you give it a tight v1 and three short prompts, not one giant “build the whole app” request. Here's the single index.html approach, a copy-paste first-prompt template, the 3-prompt build order and a real example. Or skip the writing: type one sentence and FirstThree writes all three ChatGPT prompts for you.
Free · no sign-up · your idea isn't stored · about 5 seconds · form is preset to ChatGPT
Why plan first
The usual stall is pasting the whole idea — accounts, live data, extra pages — into the first ChatGPT message. It tries to do everything in one go, and you get a long, half-working file that's hard to fix.
Plan the smallest useful version first: 3 to 5 things v1 must do, a short list of what to skip (and why), and one core screen. Then build it in three steps. FirstThree will cut that scope for you if you'd rather type one sentence.
The single index.html approach
For a first ChatGPT app, ask for one file that holds the HTML, styling and JavaScript. Save it as index.html, double-click it, and it opens in your browser. No project setup, no terminal, nothing to install.
Stack: HTML, Tailwind CSS via the CDN, vanilla JavaScript. Store data in the browser (localStorage).
Always ask for the complete file and replace your whole index.html with it after each prompt. Mixing old and new snippets is the #1 way these builds break.
Save a copy of the file before each prompt so you can go back if something breaks.
Open the file after each prompt and check the “Done when” line before you paste the next one.
Leave out accounts, servers, payments and live APIs in v1. A single file can't hold secrets safely, and you don't need them to prove the idea works.
Copy-paste first-prompt template
ChatGPT first-prompt template
I'm building [APP NAME]: [one sentence: what it does and who it's for].
Please write a complete single index.html file (HTML, CSS and JavaScript in one file). Use Tailwind CSS via the CDN and vanilla JavaScript. Keep data in the browser (localStorage).
Build only the first screen: [CORE SCREEN] showing [WHAT'S ON IT], using realistic sample data.
Do not build yet: user accounts, servers, payments, live APIs, extra pages.
When you finish, tell me how to save the file and open it in my browser (double-click is fine).
Done when: [one thing I can check in under a minute, e.g. "I can open the file, see 5 sample items, and the Add button opens the form"].
The 3-prompt build order
Prompt 1: complete file + core screen. One index.html with the screen that proves the idea, and sample data already on the page.
Prompt 2: make it real. Save data in localStorage, add the main action (add, check off, edit), and ask for the entire updated file again.
Prompt 3: polish v1. Empty states, a reset or delete, mobile layout and a short test checklist — again as one complete file.
Paste one prompt, check its “Done when”, then paste the next. If something breaks, ask for one fix and the complete file (“change only what you need to fix this”) instead of a rebuild.
Real example: one sentence → 3 ChatGPT prompts
Generated by FirstThree · from the examples page
CampCheck: “a packing checklist generator for weekend camping trips based on the weather”
A simple checklist generator that creates a custom weekend camping packing list based on the weather forecast.
v1 includes
Weather input selector (Sunny, Rainy, Cold, Hot)
Generated packing list with checkboxes
Ability to add custom items to the list
Saves your checklist automatically using browser storage
Skip for now
User accounts · Not needed for a personal packing checklist.
Live weather API · Manual weather selection keeps things working without API keys.
PDF export · Checking items off on the screen is enough for v1.
Mobile app stores · A web page works great on mobile browsers.
Stack: HTML, Tailwind CSS, and vanilla JavaScript · no backend · browser localStorage · open the file locally (or drop it on Vercel later)
1Build core layout and listYou will have a complete working single-file app with the user interface and sample packing data.
We are building CampCheck, a web app that generates a weekend camping packing list based on the weather. Please write the complete code for a single index.html file using Tailwind CSS via CDN and vanilla JavaScript.
- Create a clean, modern mobile-friendly interface with a title and brief description.
- Add a weather selector section with buttons or a dropdown for Sunny, Rainy, Cold, and Hot.
- Add a generate button that displays a categorized packing list (Gear, Clothing, Food) based on the chosen weather.
- Include working checkboxes next to each item so users can check things off.
- Provide clear step-by-step instructions on how to save this code into an index.html file and open it in a web browser.
Do not include backend servers, user logins, or live API calls.
Done when: I can open the HTML file in my browser, select a weather type, and see a tailored checklist with working checkboxes.
2Add local storage and custom itemsYou will be able to save your checked items and add new custom items to the list.
We are continuing work on CampCheck, our single-file HTML camping packing list generator using Tailwind CSS and JavaScript. Please review the current app logic and update the index.html file with complete code.
- Add an input field and an 'Add Item' button so users can add their own custom items to any category.
- Implement browser localStorage so that checked items and custom items stay saved even if the page is refreshed.
- Add a 'Reset List' button to uncheck all items and clear custom additions.
- Ensure the UI feels responsive and gives subtle visual feedback when items are checked off.
- Provide the complete updated index.html file so I can replace my old code entirely.
Do not add external databases or user accounts.
Done when: I can check items, add a custom item, refresh the page, and see that my changes were saved.
3Polish styles and empty statesYou will have a polished, finished v1 ready to use for your next camping trip.
We are finalizing v1 of CampCheck, our single-file camping packing list generator. Please review the complete index.html file and provide the final polished version with all previous features intact.
- Add a progress bar at the top that fills up as you check off items on your list.
- Improve the visual design with better spacing, friendly camping icons or emojis, and a clean color palette using Tailwind CSS.
- Add a nice empty state or instruction banner when the page first loads before a weather type is selected.
- Include clear instructions on how to use the app and test all features.
- Output the entire index.html file in one complete code block without truncation.
Do not add complex animations, multi-language support, or external JavaScript libraries.
Done when: The app looks polished, the progress bar moves as I check items, and I can use it smoothly from top to bottom.
Asking for the whole app in one prompt. Login, APIs and extra pages in the first message usually produce a file you can't untangle.
Accepting partial code. If ChatGPT gives you a snippet, ask it to output the entire index.html again and replace the file.
Starting with accounts or a live API. A packing list, tracker or checklist doesn't need them to be useful, and a static file can't keep API keys secret.
No finish line. Without a “Done when” check, you can't tell if the reply finished or quietly skipped something.
Editing by hand between prompts. Let ChatGPT rewrite the whole file each time. Your job is to test, not to merge code.
FAQ
Why should I plan before I prompt ChatGPT?
A giant first prompt makes ChatGPT try to build the whole app in one file, and you usually get a tangle of half-working features. Write a tiny v1 scope first (what to include, what to skip), then paste three small prompts in order: core screen, saved data, polish.
Can I really build an app with just ChatGPT?
Yes, a small one. Ask ChatGPT for a single index.html file that contains the HTML, styling and JavaScript, save it, and double-click it to open it in your browser. Keep it to one or two screens and store data in the browser (localStorage). No accounts, servers or payments in v1.
What should my first ChatGPT prompt include?
What the app is and who it is for, that you want one complete index.html file (Tailwind via CDN and vanilla JavaScript is a good default), the one core screen with sample data, what not to build yet, and a “Done when” check you can verify in a minute.
How many ChatGPT prompts does a first version need?
For a small app, three is enough: (1) a complete index.html with the core screen and sample data, (2) make the main feature real and save data in the browser, (3) polish, empty states and a test checklist. Always ask for the entire file and replace your old one. Paste one prompt, check it works, then paste the next.
Is there a free ChatGPT app-plan generator?
Yes. FirstThree turns one sentence about your app idea into a tiny v1 plan and three copy-paste ChatGPT prompts in build order. It is free and needs no sign-up.