Giving Good Instructions

By the end of this lesson, you will be able to write prompts that increase the odds of a strong first draft — and when the first try is not perfect, iterate quickly with precise follow-up instructions.

Mental model: the delegation brief

Imagine you are handing a task to a new team member on their first day. They are skilled at their job, but they know nothing about your project, your preferences, or your context. The better your brief, the closer their first attempt will be to what you need.

That is exactly the relationship between you and the AI. The AI is highly capable, but it only knows what you tell it in the moment. A good instruction is a good delegation brief: it gives context, names specifics, sets constraints, and describes what success looks like.

The instruction spectrum

All prompts fall somewhere on a spectrum:

Vague                                              Precise
"make it better" <-------------------------------> "change heading font-size
                                                     to 2.5rem, color
                                                     to #e4e4e7, and
                                                     add 24px bottom
                                                     margin"

Neither extreme is always right. The sweet spot depends on the task:

• Scaffolding a new project — moderate specificity (describe features and style, let AI choose implementation)
• Fixing a specific bug — high specificity (describe exact behavior and expected behavior)
• Exploring ideas — lower specificity (“try a different layout for the hero section”)

The five elements of a great prompt

1. Context

Tell the AI what already exists and what you are working on.

Without context:

Add a button.

With context:

On the product detail page, add an "Add to Cart" button below the
price. It should match the style of the existing "Buy Now" button
in the hero section.

2. Specificity

Name exact things. Colors, sizes, behaviors, text content.

Vague:

Make the header look better.

Specific:

Update the header:
- Increase height to 64px
- Add a subtle bottom border (1px solid #1e1e2a)
- Make the logo 32px square
- Center navigation links vertically
- Add a hover state: text turns #a855f7 on hover

3. Examples

Show what you mean with examples, references, or comparisons.

Style the pricing cards similar to Stripe's pricing page:
clean, minimal, with a highlighted "popular" option.
The popular card should have a purple border and a "Most Popular"
badge at the top.

4. Constraints

State what you DO NOT want, or limits on the solution.

Add form validation to the signup form.
- Do NOT use any external validation libraries
- All validation should be client-side
- Show error messages below each field, not as alerts
- Don't disable the submit button -- let users click and
  show all errors at once

5. Expected outcome

Describe what “success” looks like — what you will see when it works.

When I submit an invalid form, I should see red error messages
below each field that has a problem. When I fix the errors and
resubmit, the messages should disappear and the form should
submit successfully.

Worked example: a complete five-element prompt

Here is a real prompt that uses all five elements, along with the AI conversation flow:

Your prompt to the AI:

Context: I have a React task management app with a sidebar
listing projects and a main area showing tasks.

Request: Add a drag-and-drop feature to reorder tasks within
a project.

Specifics:
- Use a lightweight drag-and-drop library (not react-beautiful-dnd,
  it's deprecated)
- Show a grab handle on the left side of each task row
- While dragging, the task should have a subtle shadow and slight
  scale increase
- Other tasks should smoothly animate to make space
- Save the new order to localStorage

Constraints:
- Don't change the existing task data structure
- Keep the existing click-to-edit functionality working

Expected: When I grab a task by its handle and drag it above or
below other tasks, the list reorders smoothly. The new order
persists when I refresh the page.

AI builds it. You test it. Two issues:

Follow-up prompt 1:

The drag handle appears but it's hard to see against the dark
background. Change the handle icon to a lighter gray (#9ca3af)
and increase its size to 20px. Also, the shadow while dragging
is too strong -- reduce it to a subtle shadow.

Follow-up prompt 2:

The reordering works but the new order doesn't persist after
refresh. Check that the localStorage save is being called after
each drag-and-drop operation, not just on page unload.

Three prompts total — initial build plus two focused refinements — and the feature is complete.

Iteration: the real skill

Even with perfect prompts, you will iterate. Here is how to iterate well:

Be specific about what is wrong

Bad: “This doesn’t look right.” Good: “The cards are too close together — add 16px gap. And the text color is too dark to read on the background.”

Reference the existing code

Bad: “Fix the bug.” Good: “The handleSubmit function doesn’t prevent the default form behavior, so the page refreshes on submit. Add e.preventDefault() at the beginning.”

Request one tightly related change at a time

Bad: “Fix the layout, change the colors, add animations, and make it responsive.” Good: “Fix the layout — cards should be in a 3-column grid on desktop.” Then after that works: “Now update the card colors to match the design system.”

It is fine to bundle two closely related changes (like adjusting an icon’s color and size in the same prompt), but avoid mixing unrelated changes. If the AI gets one thing wrong, you want to know which change caused the problem.

Describe the before and after

Bad: “The search doesn’t work.” Good: “When I type ‘react’ in the search bar, nothing happens. I expect the product list to filter to only show products with ‘react’ in the title.”

Common prompt patterns

Here are four patterns you will use repeatedly. Save these and adapt them. For any prompt, you can use this general template as a starting point:

Context: [what exists, what you're working on]
Task: [what you want done]
Specifics: [exact details, names, sizes, colors]
Constraints: [what NOT to do, limits on the solution]
Expected outcome: [what you'll see when it works]

Not every prompt needs all five sections — use what fits the task. Here are the four most common patterns:

“Add [feature] to [location]”

Add a dark mode toggle to the top-right corner of the navigation bar.
When clicked, it should switch between dark (#09090b background) and
light (#ffffff background) themes. Save the preference to localStorage.

“Fix [bug]”

The mobile menu doesn't close when I click a navigation link.
After navigating to a new page, the hamburger menu stays open.
It should close automatically when any nav link is clicked.

“Refactor [thing]”

The handleFormSubmit function is 80 lines long and handles
validation, API call, and UI updates. Break it into three
separate functions: validateForm, submitToAPI, and updateUI.
Keep the same behavior.

“Make [thing] responsive”

The pricing grid looks great on desktop but breaks on mobile.
On screens below 768px, change from 3 columns to 1 column.
Stack the cards vertically with 16px gap.

Practice: spot the five elements

Read this prompt and identify which of the five elements (Context, Specificity, Examples, Constraints, Expected Outcome) it includes:

Context: I have a React weather app with a search bar and a current-conditions card.

Request: Add a 5-day forecast section below the current conditions.

Specifics:
- Show day name, high/low temperature, and a weather icon for each day
- Use a horizontal scrollable row on mobile, a grid on desktop

Constraints:
- Use the existing OpenWeather API key already in the .env file
- Do not change the current-conditions card layout

Expected: Below the current weather, I see five cards showing the next five days
with temperatures and icons. On mobile I can swipe sideways through them.

Answer: This prompt has all five: Context (React weather app, existing components), Specificity (day name, high/low, icon, layout details), Examples (implicitly through the visual description), Constraints (use existing API key, do not change existing card), and Expected Outcome (the visual description of what success looks like). You do not need all five every time, but including more of them gets you closer on the first try.

Key takeaways

• Great prompts have five elements: context, specificity, examples, constraints, and expected outcome. You do not need all five every time, but the more you include, the better the result.
• Match precision to the task. Be vague when exploring, moderate when scaffolding, precise when fixing bugs.
• Iterate with the before-and-after pattern. Describe what you see now, then describe what you expect to see. This gives the AI clear diagnostic information.
• One change at a time when iterating. Multiple changes in one follow-up prompt risk compounding errors.
• Build a prompt library. Save prompts that work. Adapt them for new projects. Your library grows more valuable over time.