Project Brief

What this is

The project brief is the file you saved at the end of the planning step.

It lives in your project folder as project-brief.md and tells you — and your AI agent — exactly what you are building.

Why it matters

Every prompt you send to the AI agent during the build should be grounded in this file.

Without it, the AI agent has no context. It will make assumptions, add things you did not ask for, and produce code that drifts from your original idea.

What to do

Check the file exists

Open your project folder. You should see project-brief.md at the root level, next to your other project files.

If it does not exist, go back to How to Plan and complete Step 5.

Check the file contains the right sections

Open project-brief.md. It should have all of these:

✓ Goal — one clear sentence
✓ Audience — who the website is for
✓ Stack — the tools and why they are enough
✓ Pages — 3 pages or fewer, each with a purpose
✓ Features — max 3 features
✓ Non-goals — what you are not building yet
✓ Build order — numbered steps
✓ Success check — how you know version 1 is good enough

If any section is missing or vague, go back to ChatGPT and ask it to fill in the gap.

Read it once before continuing

Read the brief from top to bottom. Ask yourself:

• Does this match what I actually want to build?
• Is the stack something I can work with today?
• Are the features genuinely achievable in one session?
• Is the build order logical?

If something feels off, fix it now. It is much easier to change the plan here than to change it mid-build.

Example of a good project brief

# Project Brief

## Goal
Help customers quickly decide what to order and how to visit the cafe.

## Audience
Nearby customers using their phone before or during a visit.

## Stack
Next.js + Tailwind CSS + Vercel. This is enough because the site is mostly static pages with simple styling and no login.

## Pages
- Home — short intro, best photo, opening hours, and main call-to-action
- Menu — drinks and food grouped clearly with prices
- Contact — address, Waze link, phone number, and social link

## Features (max 3)
1. Display menu with prices
2. Show contact details and map link
3. Responsive layout for mobile

## Non-goals
- No online ordering
- No payment
- No customer login

## Build order
1. Scaffold Next.js project
2. Create the basic layout and navigation
3. Build the Home page
4. Build the Menu page
5. Build the Contact page
6. Apply styling from `design-spec.md`
7. Test on localhost and mobile width
8. Push to GitHub and deploy to Vercel

## Success check
Someone can open the site on mobile, find the menu, check opening hours, and tap the Waze link in under one minute.

Common mistakes

• Not saving the brief as a file — keeping it only in the ChatGPT window means you lose it.
• Having a brief that is too vague — "build a nice website" is not a brief.
• Skipping the read-through — small mismatches here become big problems later.
• Putting the file in the wrong folder — it must be in the project root, not in a subfolder.