Build and run websites with Claude ›

Module 1 of 7 · Free · about 8 minutes

Prompt engineering basics

A good prompt is a short brief: what you want, what Claude needs to know, the limits, an example, and how you will check the result.

The five parts of a good prompt

Five parts go into one brief. You won’t need all five for every small fix.
  • GoalOne sentence that says what “done” looks like.
  • ContextWhat Claude can’t see: your rules, the page, the error.
  • ConstraintsLimits that must hold: size, style, accessibility.
  • ExampleA page or format to follow, so it doesn’t guess.
  • CheckHow you will test the result and what you want back.

A one-line fix may need only a goal and context. A new page needs all five. The rules you repeat every time belong in CLAUDE.md, which is Module 2.

Practise

Before and after

Before

Fix the menu.

After

On phones, the main menu on /about overlaps the logo. Make it wrap under the logo instead. Read CLAUDE.md first. The menu styles are in styles.css. Change only the CSS and keep tap targets at least 44px. Test at 400px and 1280px in light and dark mode, then send me the preview link.

  • Goalnames the page and what is wrong.
  • Contextpoints to the rules and the right file.
  • Constraintskeep the change small and accessible.
  • Checksays how it will be tested and what to send back.

Before

Make a quiz page about traffic signs.

After

Add a 25-question practice quiz on traffic signs to the driving test page. Use the shared test engine and the question format in CLAUDE.md. Each question has one clear right answer and three plausible wrong ones, with no "all of the above". Follow the layout of the existing rules quiz. Run the question checker and fix every error before you open the pull request.

  • Goalgives the size and the place.
  • Constraintsset the quality bar for every question.
  • Examplemeans Claude doesn’t invent a new layout.
  • Checknames the tool that must pass.

Before

Make the home page better.

After

Turn the home page into a dashboard: one heading, one line, a compact action bar, then a grid of tiles. The page must fit 2 to 3 phone screens at 400px wide, footer included. Use the existing colour variables only. Use the tile style already on the US home page. Measure the page height at 400px and tell me the number.

  • “Better” can’t be checked. Goaldescribes the result.
  • Constraintsturn “not too long” into a number.
  • Checkasks for a measurement you can compare.

Build a prompt

Tick the parts you need. Your prompt builds itself below; replace the words in <angle brackets>.

1. Goal: what do you want?
2. Context: what can’t Claude see?
3. Constraints: what must hold?
4. Example: what should it look like?
5. Check: how will you test it?
  • Goal
  • Context
  • Constraints
  • Example
  • Check

Your prompt









Quick quiz

  

    
Question 1 of 5

    
Which prompt gives Claude the clearest goal?

    

    
It names the page, the section and what “done” looks like. The others leave Claude to guess what you want.

  

  

    
Question 2 of 5

    
A page breaks after a change. What is the most useful thing to paste into your prompt?

    

    
The exact error and the address point straight at the cause. Never paste passwords or keys into a prompt.

  

  

    
Question 3 of 5

    
Which line is a constraint?

    

    
A constraint is a limit the result must stay inside. Reading the rules is context, matching a page is an example, and testing is the check.

  

  

    
Question 4 of 5

    
Why point Claude to an existing page as an example?

    

    
An example shows the pattern to follow, so the site stays consistent. You still need a goal that says what the new page is for.

  

  

    
Question 5 of 5

    
Claude replies: “Done, the change is pushed.” What do you do next?

    

    
Checking the preview is your part of the job. Merge only after the automatic checks pass and the page looks right to you.

  








Before you send a prompt




Blank prompt template
Copy it into your notes and fill it in before each request.
Goal: <one sentence that says what "done" looks like>
Context:
- Read CLAUDE.md first and follow it.
- <what Claude can't see: the page, the error, the current text>
Constraints:
- <size, style, accessibility, what must not change>
Example to follow:
- <an existing page, format or sample>
When you are done:
- <how you will check it, and what you want back>






        

          
          Next: Module 2 →
        

        
Independent course by GetReady Academy. It is not made, endorsed or sponsored by Anthropic. Claude and Claude Code are Anthropic’s products and their features change, so check the official Claude Code documentation too. Results depend on your project and your own checks; we don’t promise any outcome or income. Everything on this page runs in your browser and nothing you choose or type is sent.