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.
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.