Chapter 3 · Day 1 · ~8 min

Plan Before You Prompt

AI builds fast, but it cannot read your mind. When your request is vague, it fills every gap with a guess. Five minutes of planning saves an hour of fixing.

  1. 1 Plan
  2. 2 Prompt
  3. 3 Review
  4. 4 Fix
  5. 5 Iterate
  6. 6 Publish

In this chapter you will

Why plan? The AI fills every gap with a guess

Imagine you ask a builder to “make me a house” — and say nothing else. You will get a house. But probably not your house.

AI works the same way. A prompt is the message you type to the AI. Every question your prompt doesn’t answer, the AI answers for you. It usually picks the most common, most average choice.

❌ Vague prompt

Make a website for my event.

MyEventHome · Services · Contact
Welcome to Our Amazing Event! Lorem ipsum dolor sit amet…filler
Learn More
Date: Saturday, 12 Juneguess · Tickets €20guess
Feature 1Feature 2Feature 3
© Company Name
  • A generic title and filler text
  • An invented date and price — or none at all
  • Sections you don’t need (“Services”?)
  • Random colors, maybe not tested on phones

✅ Planned prompt

Build a one-page site for “Erasmus Welcome Night”, a free welcome evening for new international students: Friday 16 October, 19:00, Garden Hall. Sections: hero with an “I’m coming!” button, schedule, FAQ. Warm and friendly, deep purple and warm yellow. Mobile-friendly, no external images.

Erasmus Welcome NightSchedule · FAQ
Welcome, new friends! 👋 Fri 16 Oct · 19:00 · Garden Hall
I’m coming!
19:00 Welcome drinks 19:30 Speed-friending game 20:30 World food buffet
❓ Do I need a ticket? — No, entry is free.
  • Your real title, date and place
  • Exactly the sections you asked for
  • Your colors and your mood
  • Works on phones from the start — fewer fixes later

What is a brief? A brief is a short plan for a project — one page or less. Designers write one before they design anything. You will write yours in a few minutes, below.

The 5 planning questions

Answer these five questions and the AI has almost nothing left to guess. The examples are for the Erasmus Welcome Night — the site you will build in Chapter 5.

  1. 1. Purpose Why?

    Why does this site exist? What should a visitor do after visiting — sign up, visit you, contact you?

    ExampleGet new students to come to the welcome night and RSVP.

  2. 2. Audience Who?

    Who will visit? Think about age, language, what they already know — and if they use a phone or a laptop.

    ExampleNew international students, 18–30, mostly on phones. English is often not their first language.

  3. 3. Content What?

    Which sections (blocks of the page, like “About” or “FAQ”), in which order — and what real text goes in them?

    ExampleHero, about, schedule, FAQ, RSVP button. Real date, time and place.

  4. 4. Look & feel How should it feel?

    What mood? Which colors? Is there a style you like?

    ExampleWarm and friendly. Deep purple with warm yellow.

  5. 5. Must-haves & limits What else?

    What must the site do? What must it not do? Common limits: one page, mobile-friendly (the layout adapts so it is easy to use on a small phone screen) and no external images (pictures loaded from other websites — they can disappear, load slowly or break copyright rules).

    ExampleA countdown and an FAQ that opens and closes. One page, mobile-friendly, no external images.

Build your site brief

Now it’s your turn. Answer the five questions for your own idea — an event, a café, your CV, a club, anything. Your brief and a ready-to-use prompt appear below the form as you type.

🧭 Site Brief Builder

No idea yet? and change it.

Purpose Why?
One or two sentences. Start with a verb: invite, show, sell, explain…
Audience Who?
Age, language, what they already know — and phone or laptop?
Content What?

Pick your sections. 4–6 is plenty for one page. You can change their order in the wireframe further down.

Look & feel How should it feel?

Mood — pick one or two

Colors

The accent color is used for buttons and highlights. Tip: one strong color plus one calm color works well.

Must-haves & limits What else?

Features — optional; each one makes the page a bit more complex

Limits — we recommend all of them

Up to 300 characters. Real facts here mean fewer invented facts later.

Your brief

0 of 5 answered

Your ready prompt

0 / 1,500 characters
Fill in the form — your prompt appears here.
Saved automatically — in this browser only.

Why does the prompt end with “[CHECK]”? We ask the AI to mark every fact it had to invent. Then you can find them fast and replace them with the truth.

Sketch boxes before you build

A wireframe is a quick sketch of a page made only of boxes — no colors, no photos. It shows what goes where. Designers make one before any design work, often with pen and paper in two minutes.

Try it: the boxes below are the sections you ticked in step 3. Move them up and down until the order feels right. The first box after the header is what visitors see first — make it count.

Section order

    ✓ Your ready prompt in the Brief Builder uses this order.

    On a phone, the menu links often fold into a ☰ button, and grids get fewer columns.

    Pen and paper work too. Draw your page as boxes on paper, take a photo, and keep it next to you while you prompt. Some AI chat apps can even read a photo of your sketch.

    Content first: write your real text

    AI is great at layout and style. But it does not know your facts: your date, your prices, your opening hours, your story. If you don’t give them, it invents them — and it sounds very sure.

    ✍️ Before you prompt, write down

    • The page title and one sentence for the hero
    • The facts: date, time, place, prices
    • The button text, e.g. “RSVP now”
    • 3–5 FAQ questions with short answers

    🔎 If the AI writes the text

    That’s fine for a first draft. AI text is often placeholder text: temporary text that only holds the place until the real text is ready. (“Lorem ipsum” is fake Latin filler text.)

    Read every line. Replace every invented fact. Delete fake reviews — or label them clearly as examples.

    Spot the guesses

    An AI wrote this text from a short prompt: “Make a website for our Erasmus Welcome Night.” It sounds great. But how much of it is true?

    AI-written text

    🎉 Welcome to the Erasmus Welcome Night! Join us on Friday 14 October at 20:001 in the Grand Hall, 12 University Street2. Tickets cost just €5 and include a free dinner3. Over 2,000 students have joined our famous parties since 20104. “The best night of my Erasmus year!” — a former student5

    You are the editor. The AI writes a draft, but every fact on your site is your responsibility. Check it before anyone else sees it.

    Example brief: Erasmus Welcome Night

    This is the project you will build in Chapter 5: a one-page site for an evening that welcomes new international students. Its brief is short — but it answers all five questions.

    🎯 Purpose
    Invite new international students to a free welcome evening, so they make friends and RSVP.
    👥 Audience
    New international students, 18–30, mostly on phones. English is often not their first language.
    🧱 Content
    Hero → About → Schedule → FAQ → RSVP button. Real facts: Friday 16 October, 19:00–23:00, Garden Hall, Campus Centre, free entry. A “What to bring” list: student card, a snack from your country.
    🎨 Look & feel
    Warm and friendly. Deep purple (#2b1660) with warm yellow (#ffb703).
    ✅ Must-haves & limits
    Countdown timer and FAQ accordion. One page, mobile-friendly, no external images, easy to read, simple English. The RSVP button only shows a thank-you message — no data is sent anywhere.
    The same brief as a ready prompt
    Build a one-page event website called "Erasmus Welcome Night". PURPOSE: Invite new international students to a free welcome evening, so they make friends and RSVP. AUDIENCE: New international students, 18–30, mostly on phones. English is often not their first language. SECTIONS (in this order): - Hero: big title, one welcoming sentence and a main button - About: 3–4 short sentences: who, what and why - Schedule: times and activities in a clear list - FAQ: 4–5 common questions with short answers - RSVP button: when clicked, show a thank-you message (send no data anywhere) Add a header with the site name and section links, and a small footer. LOOK & FEEL: Friendly. Main color #2b1660 (dark purple), accent color #ffb703 (yellow). MUST-HAVES & LIMITS: - Features: a countdown timer to the event; an FAQ accordion (answers open and close on click) - One HTML file with the CSS and JavaScript inside - Mobile-friendly: works on a 375px-wide phone and on a laptop - No external images, fonts or files: use emoji, CSS or inline SVG - Easy to read: good contrast and clear text sizes - Short, simple English text EXTRA NOTES: Friday 16 October, 19:00–23:00, Garden Hall, Campus Centre. Free entry. Add a "What to bring" list: student card, a snack from your country. Write real, short text for every section (no "lorem ipsum"). Mark any fact you invent with [CHECK].

    Quick check

    Your AI-made café page says “Open every day, 7:00–23:00”. You never told the AI your opening hours. What do you do?

    Your planning checklist

    Tick what you have done. Your ticks are saved in this browser.

    Your turn (3 minutes) Fill in the Brief Builder for a site you really want — for your club, a friend’s café, your CV. Copy the prompt and keep it. In Chapter 4 you’ll make it even sharper, and in Chapter 5 you’ll build with it.