Writing Prompts That Work
Vague prompts get vague code. Flip through real before/after examples to see what turns a so-so AI reply into a great one.
A vague prompt gets a vague answer. Click each card to see how adding specifics, the element, the trigger, the expected outcome, changes the result.
Anatomy of a good prompt
Most working prompts break down into the same four parts. You don't need all four every time, but the more of them you're missing, the more the AI is guessing.
I have a Next.js blog with posts stored in a posts array in src/lib/posts.ts.
Add a search bar above the post list that filters posts by title as the user types.
Don't add any new dependencies, use plain React state.
Show me the full updated component.
Try it yourself
Draft a prompt for something you actually want to build or fix, then check it against the list below.
Putting the four parts together
The anatomy table above is useful as a checklist, but a real prompt reads as one paragraph, not four labelled fields. Here is the search example from earlier, assembled the way you would actually type it.
I have a Next.js blog with posts stored in a posts array insrc/lib/posts.ts. Add a search bar above the post list thatfilters posts by title as the user types. Don't add any newdependencies, use plain React state. Show me the full updatedcomponent.Notice what is missing: no heading that says “Context”, no bullet points. The four parts are still there, in the order that reads naturally. They have just stopped being labelled.
The cost of skipping a part
Leaving a part out does not usually produce an error. It produces a plausible-looking answer that is wrong in a way you only notice later, when you are three prompts deep trying to explain what you actually meant the first time.
A vague first prompt against a real feature typically costs two or three follow-up messages to converge on what you meant, each one narrowing the guess a little further. A prompt with context, goal, constraints, and format named up front usually gets there in one. The four parts are not extra work — they are work you would do anyway, spread across a longer conversation instead of paid upfront.
Key takeaways
- Name the file, the current behaviour, and the expected behaviour. Missing any of the three means the AI guesses.
- Saying what must NOT change is as useful as saying what should.
- A prompt that would not brief a human will not brief a model either.
- If the reply is wrong twice in a row, the prompt is the problem, not the model.
- Leaving a part out rarely errors loudly. It just costs you the follow-up messages you didn't budget for.
Quick check
Answer these to unlock the next chapter — 3 of 4 to pass. You can retake it anytime.
Answer every question to check.
Make a free account to read on
Every chapter is free — an account is how your progress, XP, and streak follow you from your laptop to your phone, and how you show up on the leaderboard. No payment, no trial.