How to write prompts for building apps with AI
The difference between an AI app that works and one that falls apart is usually the prompt, not the model. This guide covers a simple, repeatable way to write prompts for building websites and apps, based on the published prompting guidance from OpenAI and Anthropic and on what works in real builds.
The core idea: you're writing a brief, not a wish
Both OpenAI's and Anthropic's prompting guides make the same point first: be clear, specific and direct. Imagine you're handing the job to a capable freelancer who has never met you. They don't know your customers, your style or what "done" looks like. Whatever you leave out, they'll guess. AI is the same, only faster and more confident.
The five-part build prompt
For any new feature or project, cover these five things:
- Goal: what you're building and why. "A booking page so customers can request a 30-minute consultation."
- Users and context: who will use it and on what. "Mostly older customers, mostly on phones."
- Requirements: the specific behaviour, as a list. "Shows the next 14 days. Weekdays 9am–5pm only. Blocks taken slots. Sends a confirmation email."
- Constraints: tools and rules. "Use Cloudflare for hosting and Resend for email. No new frameworks. Don't change the existing header."
- Definition of done: how you'll check it. "I can book a slot on my phone, get the email, and the slot disappears for the next person."
Writing requirements as a list rather than a paragraph matters. Models follow lists more reliably, and you can tick them off when you test.
Ask it to ask you questions first
End big prompts with: "Before writing any code, ask me up to five questions about anything unclear or anything I've missed." This simple line catches gaps such as time zones, what happens when two people book the same slot, or what a customer sees when something fails. It's the single highest-value habit in vibe coding.
Plan, then build
For anything bigger than a single page, split the work in two:
- Planning prompt: "Propose a plan for this feature: the files you'll create or change, the data you'll store and the steps in order. Don't write code yet."
- Build prompt: once you're happy with the plan: "Do step 1 only. Then stop and tell me how to test it."
Anthropic's guidance recommends giving the model room to think before it answers, and OpenAI recommends breaking complex tasks into simpler subtasks. Planning first does both. It also gives you a checklist, so you notice when the AI quietly skips something.
Show, don't just tell
Examples beat descriptions. Instead of "make it modern", give:
- A screenshot of a layout you like, if your tool accepts images.
- A sample of the data: "A booking looks like: name, email, date, time, service, notes."
- An example of the exact wording, e.g. for an error message: "Sorry, that slot's just been taken. Please pick another time."
Give structure to long prompts
When a prompt includes a brief, existing code and an error message, label each part clearly, with headings or tags such as <brief>, <current_code> and <error>. Anthropic's documentation recommends this kind of structure because it stops the model mixing up your instructions with the material you've pasted in.
Prompts for fixing bugs
Bug-fix prompts fail when they're vague ("it doesn't work"). A good one has four parts:
- What you did: "Clicked Book on Tuesday 10am on my iPhone."
- What you expected: "A confirmation message."
- What happened: "Spinner forever, no email."
- The evidence: the full error text from the browser console or server logs, pasted exactly.
Then add: "Explain the likely cause before changing anything. Make the smallest change that fixes it." This stops the AI from rewriting half your app to fix one line.
If the same bug survives two attempts, stop. Start a fresh conversation, or try a different model, with a summary of the problem and what's already been tried. Long conversations drift, and a clean start often fixes things in one go.
Guard-rail phrases worth reusing
- "Only change what I've asked for. Keep everything else exactly as it is."
- "If you're not sure how a service works today, say so instead of guessing."
- "Never put secret keys in front-end code. Tell me where each secret should be stored."
- "After the change, list what you changed and how I can test it."
- "Review your own code for security problems and explain each one in plain English."
Keep a project memory
AI tools forget, and long chats lose detail. Keep a short notes file in your project (many coding agents read files called AGENTS.md or similar automatically) with: what the app does, the tools you're using, decisions you've made and rules the AI must follow. Paste or point to it at the start of each session. It saves you re-explaining everything and keeps the AI consistent.
A worked example
Weak prompt:
Make me a website for my cake business.
Strong prompt:
Goal: a one-page website for "Bake My Day", a home cake business in Leicester taking custom orders.
Users: local parents ordering birthday cakes, mostly on phones.
Requirements: hero with headline and "Order a cake" button; three example cakes with prices from £35; how ordering works in three steps; an order enquiry form (name, email, date needed, cake type, message); footer with Instagram link.
Constraints: single index.html with CSS inside it; no frameworks; warm pastel colours; fast on mobile.
Done when: it looks good on my phone and every button scrolls to the right section.
Before writing code, ask me up to five questions.
The second takes two minutes longer to write and saves hours of back-and-forth.
Where to go next
Put this into practice with how to build a website with ChatGPT or Codex, or try a bigger project in building a booking app with AI. If you're choosing a tool, see Grok vs ChatGPT vs Claude.