Giving Good Instructions | LLM CLI Training

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’re 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 DON’T 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’ll 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.

The anatomy of great prompts

Here’s a real prompt that uses all five elements:

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.

This prompt gives the AI everything it needs to succeed on the first try.

💡Copy and adapt

You don’t need to write prompts from scratch every time. Keep a file of prompts that worked well and adapt them for new situations. Over time, you’ll build a library of proven patterns.

Iteration: the real skill

Even with perfect prompts, you’ll iterate. Here’s how to iterate well:

Be specific about what’s 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 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.”

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

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

KNOWLEDGE CHECK

Which prompt will produce the best result?