How to Write a Good Coding Prompt

Relax. We'll talk through this in plain words — no textbook voice.

What you'll walk away with

Understand how to write a good coding prompt, without the intimidation
Get hands-on and try it yourself
Learn to spot and dodge the easy mistakes, with a smile

Build a coding prompt that includes a Goal, Context, Constraints, and Output format.

Take a moment to think about it this way

A good coding prompt has four parts. Goal — what should happen. Context — which stack, which file, which pattern to follow. Constraints — libraries not to use, APIs not to break, accessibility requirements. Output — which file to change, what to explain back. A bare "write it for me" leaves the AI guessing. The more it has to guess, the more you'll have to fix.

Let's connect this to everyday life

Bad prompt: "build a navbar." Good prompt: "Next.js App Router, Tailwind, hamburger menu on mobile, Tutorials/Search links on desktop, 44px touch targets, only edit the existing Header.tsx, don't add any new library. When you're done, explain what you changed in 3 sentences." Written this way, the AI is far less likely to open the wrong file or break the design system.

Write the Goal as an outcome
State the files and stack
Spell out exactly what not to do

Let's try it hands-on, together

text

Goal: Add a lesson complete checkbox that persists in localStorage.
Context: React client component, key = tutorialSlug/lessonSlug.
Constraints: no new dependencies, 44px target, no cookies.
Output: edit LessonCompleteToggle.tsx only + say how to test it.

You should see

Be able to write a reusable coding prompt template.

5-minute try-it

Write a prompt for a feature you're building, covering Goal / Context / Constraints / Output. Compare it side by side with a weak version.

One quick warning

Never treat AI output as the final, correct answer. Read through code, secrets, and user data yourself, test it, and only then put it to use.

Easy traps

Using unmeasurable phrases like "make it nice"
Asking the AI to build something new instead of naming the existing file to edit

Now try it yourself

Write a prompt for a feature you're building, covering Goal / Context / Constraints / Output. Compare it side by side with a weak version.

You'll know it worked when: Be able to write a reusable coding prompt template.