Prompt Like a Pro
Great prompts are not magic words. They are clear instructions — like a good brief for a human designer. Learn the five parts of a strong prompt, the words web designers use, and how to improve a site one small step at a time.
- 1 Plan
- 2 Prompt
- 3 Review
- 4 Fix
- 5 Iterate
- 6 Publish
In this chapter you will
- Learn the 5 parts of a great prompt: role, context, task, details & constraints, output format.
- Turn vague requests into clear ones — for new sites, changes and bug fixes.
- Use the right web words (hero, padding, footer…) to say exactly what you want.
- Improve a site one change at a time with WHERE + WHAT + HOW.
- Build and check your own prompts with two small tools.
The anatomy of a great prompt
Most great prompts have the same five parts. You don’t always need all five — but the more you give, the less the AI has to guess. Click a color to see what each part does.
Role: You are a friendly web designer who explains things simply. Context: I’m organising a welcome evening for about 40 new Erasmus students at our university. Most of them don’t know anyone yet, and English is their second language. Task: Build a one-page website that invites them and asks them to RSVP. Details and constraints: Include a hero with the title “Erasmus Welcome Night”, the date (Friday 16 October, 19:00), a short schedule and an FAQ. Use a warm, friendly style with deep purple and warm yellow. It must work well on phones. Don’t use external images — use emoji instead. Output format: Give me one complete HTML file with the CSS inside, so I can open it straight away.
👆 Click a part above
Each color is one part of the prompt. Click a button (or the colored text) to highlight that part and see why it matters.
Short version to remember Who should the AI be? What’s the situation? What’s the job? What are the rules? What should the answer look like?
Bad vs good: three everyday situations
You will write three kinds of prompts again and again: asking for a new site, changing a part, and fixing a problem. Here is the difference a clear prompt makes.
Asking for a new site
❌ Vague
Make me a portfolio website.
What happens: The AI invents your name, your work, your style and your colors. You get a generic page and spend an hour changing it.
✅ Clear
You are a web designer. I'm a photography student and I want a one-page portfolio to show 6 of my best photos to possible clients. Sections: hero with my name and the line "Street & portrait photography", a gallery of 6 photo boxes with captions, about me (3 sentences) and a contact button. Style: minimal, lots of white space, black and white with one warm orange accent. It must look good on phones. One HTML file, no external images.
Why it works: Role, purpose (find clients), audience, exact sections, style and limits. The AI has almost nothing left to guess.
Changing a section
❌ Vague
Make it look better.
What happens: “Better” can mean anything. The AI may redesign the whole page — and break parts that were already fine.
✅ Clear
In the schedule section, put each activity on its own row: the time on the left in bold, the activity on the right, and a thin line between rows. Keep everything else exactly the same.
Why it works: It says WHERE (schedule section), WHAT (each activity) and HOW (layout, bold, thin line) — and protects the rest of the page.
Fixing a bug
A bug is a mistake in the code that makes something work in the wrong way — or not at all.
❌ Vague
It doesn’t work. Fix it.
What happens: The AI doesn’t know what doesn’t work. It guesses, changes random things, and may create new bugs.
✅ Clear
When I click the "RSVP" button, nothing happens. I expected a thank-you message to appear under the button. It happens on my phone and on my laptop. Please find the cause, explain it in one simple sentence, then fix only that.
Why it works: What I did → what I expected → what happened. It asks for an explanation (so you learn) and limits the fix. If you see an error message, paste it too — word for word.
“You are a patient teacher for people who have never coded.” Which part of a prompt is this?
Web words cheat sheet
The AI understands you much better when you use the words web designers use. The orange part of each little drawing shows what the word means.
-
Header
The strip at the very top, usually with the site name or logo.
“Make the header dark blue.”
-
Hero
The big first section people see: a large title, one sentence and a main button.
“Add a colorful background to the hero.”
-
Navigation bar
The row of links (also called “nav” or “menu”) that jumps to other parts of the site.
“Add links to Schedule and FAQ in the navigation bar.”
-
Section
One horizontal block of the page with one topic, like “About” or “FAQ”.
“Add a schedule section under the hero.”
-
Card
A small box that groups a picture, a title and a bit of text.
“Show each game on its own card.”
-
Grid
Items placed in rows and columns, like tiles on a wall.
“Put the gallery in a grid, 3 per row.”
-
Column
A vertical strip. Layouts often have 2 or 3 columns side by side.
“Split the about section into 2 columns.”
-
Button
Something you click to do an action, like “Sign up” or “RSVP”.
“Make the RSVP button bigger and orange.”
-
Footer
The strip at the very bottom: contact info, small print, links.
“Put our email address in the footer.”
-
Padding
Space inside a box, between its edge and its content.
“Add more padding inside the cards.”
-
Margin
Space outside a box, between it and the things around it.
“Add more margin between the sections.”
-
Font
The style of the letters — plus their size and how thick (bold) they are.
“Use a rounder, friendlier font for headings.”
-
Hover
What happens when the mouse pointer moves over something.
“Make buttons a bit darker on hover.”
-
Responsive
The layout adapts to the screen: phone, tablet or laptop.
“Make the page responsive.”
-
Breakpoint
The screen width where the layout switches, e.g. from 1 column to 3.
“Below 600px, show the cards in one column.”
-
Icon
A small, simple picture with a meaning, like ✉ for email or ☰ for menu.
“Add a small icon before each FAQ question.”
Don’t know the word? Describe what you see: “the big colored box at the top” works too. Then ask the AI: “What is this part called?” — and you learn a new word. More terms in the Glossary.
Iterate: one change at a time
Your first version will never be perfect — and that’s normal. Professionals improve a page in many small steps. To iterate means to repeat a small cycle: look → ask for one change → check → repeat.
✅ Why one change at a time?
- You can see if it worked.
- If something breaks, you know what caused it.
- It’s easy to undo.
- Small tasks mean fewer AI mistakes.
❌ The “everything at once” trap
Make the header bigger, change all colors to green, add a gallery, fix the menu and make it more modern.
Five changes in one prompt. If the result is wrong — which part failed?
The formula: WHERE + WHAT + HOW
| Where | What | How |
|---|---|---|
| In the FAQ section, | make the questions | bold, with more space between them. |
| On phones, | show the gallery | with one picture per row instead of three. |
| In the footer, | change the text “© 2024” | to “© 2026 Erasmus Welcome Night”. |
Useful words for the HOW:
- a little bigger
- about twice as big
- half the size
- centered
- on the left
- on the same row
- under the title
- more space
- less space
- darker
- lighter
- bold
- rounded corners
Vague words to avoid: better, nicer, cool, “more modern”, “make it pop”, “fix it”. Replace them with what you want to see: bigger, darker, more space, centered, one row.
Five prompt patterns worth knowing
These short phrases work in any AI chat and solve common problems. Text in [square brackets] is a placeholder — replace it with your own words.
🙋 “Ask me 3 questions before you start”
Use it when you’re not sure what your site needs. The AI plans with you.
🎛️ “Give me 3 different options”
Use it when you don’t know what you like yet. Choosing is easier than inventing.
🐣 “Explain it like I’m new to code”
Use it when you get code you don’t understand. You stay in charge of your site.
🔒 “Only change X, keep everything else exactly the same”
Use it when the AI keeps changing things you liked.
🖼️ “Here is an example of the style I want: …”
Use it when you have a style in your head but no name for it. Describe it, or paste a short sample text in the tone you like.
Prompt Builder
Put the five parts together for your own idea. Pick, type, tick — your prompt is assembled below, in the same colors as the anatomy above.
🧩 Prompt Builder
Not sure where to start? and change one part at a time.
Your prompt
0 / 1,500 characters⚠️ This is longer than DigiBot’s limit of 1,500 characters. Shorten the context or details. You can still copy it into other AI chats.
Prompt Doctor
Paste or write any website prompt and get a quick check-up. Does it cover the five things most website prompts need?
A simple helper — not AI. The Prompt Doctor only looks for keywords, like “phone” or “colors”. It doesn’t understand your prompt, and it can be fooled. Use it as a reminder, not as a judge.
🩺 Prompt Doctor Simple keyword helper · not AI
When the AI misunderstands you
It will happen — to everyone, even professionals. Don’t repeat the same prompt louder. Change your approach:
Be more specific
Replace vague words with things you can see.
Not “make it pop” but “make the button orange and 20% bigger”.
Quote the exact text
Copy the words from the page, so the AI finds the right place.
Change the heading “Welcome to our event” to “Welcome, new friends!”
Give an example
Show what you mean: a sample sentence, a color code, a short description.
Write the FAQ answers in this tone: “No worries — just bring yourself!”
Split into smaller steps
Big requests mean more mistakes. Ask for one part, check it, then the next.
First, only add the navigation bar. We’ll do the gallery next.
Ask for the plan first
Before any code, ask what it will change. Correct the plan, then say go.
Before you change anything, tell me in 3 bullet points what you plan to do.
Go back, start fresh
If it gets messy, return to the last version that worked — or open a new chat with your brief and your current code.
Undo the last change. Go back to the version with the blue header.
You asked for a new button color. The AI changed the button — and also your fonts, your layout and your text. What is the best next prompt?
Get your own free AI credit DigiBot can use the class account, but everyone can also create a free Mistral account and an API key (a secret code that connects DigiBot to your account). No credit card is needed. Then you have your own free credit — right now $10 every month — so nobody else can use up your limit, and you can keep building at home after the workshop.
How to get your own key (about 10 minutes) →
Free plans can change — the Mistral console always shows your current credit.
Your turn (5 minutes) Open DigiBot Studio and paste your prompt from Chapter 3 (or build one above). When the first version appears, make three small changes with WHERE + WHAT + HOW — one at a time. Check the result after each one.