Project Brief

What this is

The project brief is the learner's build plan.

It captures the stack, features, sections, and build steps before coding starts.

Stack means the tools used to build the project.

For a beginner, think:

stack = frontend + styling + deployment + optional backend

Why it matters

A vague plan creates a messy build later.

The project brief keeps the tutor, learner, and AI assistant aligned on the same target.

What to do

After refining the idea with AI, ask for a final brief:

Create a final project brief based on our conversation.

Include:
- stack
- features (max 3)
- sections
- build steps

Keep it beginner-friendly and simple.

Popular stacks among vibe coders:

• Next.js + Tailwind CSS + Vercel.
• React + Tailwind CSS + Vercel.
• HTML + CSS + JavaScript + Netlify.
• Next.js + Supabase + Vercel.
• React + Firebase + Vercel.
• Astro + Tailwind CSS + Netlify.

Save or copy the output as:

project-brief.md

Before coding, check that the brief answers:

1. What are we building?
2. What stack are we using?
3. What are the max 3 features?
4. What sections will the website have?
5. What is the first build step?

Common mistakes

• Treating the brief as optional.
• Letting AI add too many features.
• Starting setup before the learner understands the plan.
• Keeping a plan that sounds impressive but is hard to build.