From vague idea to a one-page brief

You met the brief idea in Module 01, Lesson 03: hold the intent, write acceptance checks, avoid vague prompts. This lesson is the full template for your capstone.

A vague idea falls apart when you try to build. A brief turns excitement into decisions: who this is for, what pages exist, what must be true when you are done.

What goes in the brief

Use these sections. You may rename them slightly, but do not skip them without a good reason.

Goal

One or two sentences. What outcome do you want? Examples: "Help visitors understand my pottery hobby and see photos," or "Collect email sign-ups for a future café opening." Avoid words like "amazing" or "professional" alone — say what success looks like (e.g. "a visitor can find opening hours in under 20 seconds").

Audience

Who is this for? Age range, context, and what they already know. "Friends and family" is different from "local customers searching on phones after work." Audience changes tone, reading level, and how many words belong on the home page.

Pages and sections

List each page (or single-page sections if you truly want one long scroll). For a 1–3 page capstone, name them: e.g. index.html, about.html, contact.html. Under each, bullet the main blocks: hero, gallery, quote, footer. If you are not sure yet, write "TBD" in one place only — otherwise the brief drifts.

Tone

Voice matters. Formal, warm, playful, plain, inspirational — pick two adjectives and one anti-example ("not sarcastic," "not salesy"). Tone keeps AI from sounding like a generic brochure unless that is what you want.

Must-haves

Non-negotiable features or facts: working nav links, a real contact method, three project photos, your name in the footer, a specific brand colour. These become acceptance criteria in Lesson 02.

Non-goals

What you are explicitly not building in this version: no blog, no login, no payment, no animation-heavy hero. Non-goals save you from half-built features that break accessibility or your schedule.

Accessibility intent

State that you intend semantic HTML, logical headings, keyboard-friendly navigation, and readable contrast — and that you will run Lighthouse (or similar) on the deployed site as evidence, not as a magic stamp.

Example A — hobby micro-site

Goal: Share my urban beekeeping hobby with curious neighbours; no commercial sales.

Audience: Local adults and teens; some read on phones; mixed technical comfort.

Pages:

• Home: intro, why bees matter, one photo strip.
• Seasons: short notes on what happens spring vs autumn (one screen each, simple).

Tone: Warm, factual, not preachy. Avoid fear-based language about "killer bees."

Must-haves: My name; link to a trusted bee education site; three original photos; responsive layout.

Non-goals: Shop, forum, newsletter signup in v1.

Accessibility intent: One h1 per page; nav in nav; focus visible; contrast checked before deploy.

Example B — dream business landing

Goal: Present a fictional specialty coffee cart brand so portfolio visitors see copywriting and layout skills.

Audience: Hiring managers skimming on desktop; must load fast and read clearly.

Pages: Single landing with sections: hero, menu highlights, location/hours, contact.

Tone: Confident, minimal jargon, Australian English spelling if that is your market.

Must-haves: Clear call-to-action (email or fictional "book" link); consistent colour system; mobile-first layout.

Non-goals: Real payments, real booking system, CMS.

Accessibility intent: Same as above; keyboard path to contact.

Notice how same template, different content — your capstone might sit between these extremes.

How this connects to AI

You will not paste this brief into one giant prompt and hope. You will use sections as building blocks: "Using the Goal and Audience below, draft only the hero for index.html…" The brief makes those slices honest and consistent.

Do this — complete the template (draft)

Copy the headings into a document and fill them for your capstone topic (or a placeholder you can change later).

1. Goal — two sentences max.
2. Audience — one short paragraph.
3. Pages/sections — list 1–3 HTML pages and main blocks each.
4. Tone — two adjectives + one anti-example.
5. Must-haves — at least five bullets.
6. Non-goals — at least three bullets.
7. Accessibility intent — four sentences in your own words.

Stretch — Swap test

Imagine a classmate must build from only your brief, without asking you questions. What is missing? Add one paragraph of assumptions ("I assume images will be provided by me; max five per page") if that helps.

What's next

Next up: Prompt engineering for static sites (without hype)