Vibe 101 Prompt Sheet

Based on our conversation, create a project brief I can save.

Make it feel like a clear mini project brief, not a long business document.

Use this format:

# Project Brief

## Goal
[one clear sentence explaining what the website should help people do]

## Audience
[who the website is for]

## Stack
[tools and why this stack is enough for a beginner]

## Pages
[3 pages or fewer, with one short purpose for each page]

## Features (max 3)
[only the core features needed for this first version]

## Non-goals
[things we are intentionally not building yet]

## Build order
[numbered steps from setup to deploy]

## Success check
[how I will know the first version is good enough]

Keep it short enough for a beginner to read in under 2 minutes.

I am building a website. Here is my project brief:

[paste your project-brief.md content here]

Help me turn this into a better visual direction before you write the final design spec.

First, ask me 3-5 short questions about the audience, feeling, colors or styles I like, and anything the site should avoid.

After I answer, suggest 2-3 simple improvements that would make the site feel less generic.

Then create the final design spec with these sections:
- Mood
- Audience feel
- Colors
- Typography feel
- Layout direction
- Component style
- Images or icons

Keep it short enough for a beginner to use. Do not create a full brand book.

We are starting the project foundation for my Vibe 101 website.

Before writing code, read these files:
- project-brief.md
- design-spec.md

Use them as the source of truth.

Task:
Create or inspect the project foundation only.

Do only these things:
1. Confirm the stack from the project brief
2. Confirm the folder structure
3. Create only the starter files needed to run the project
4. Add the basic layout direction from the design spec
5. Tell me which file we will edit first

Do NOT build all features yet.
Do NOT add login, database, payment, or backend features.
Do NOT make the design fancy yet.
Explain the files in beginner-friendly language.

Read project-brief.md and design-spec.md before writing any code.
Use them as your reference for what to build and how it should look.

Current state:
Localhost works at http://localhost:3000

Task:
Build only this section:
[one section from the project brief build order]

Rules:
- keep it beginner-friendly
- match the project brief
- follow the design spec for layout, colors, and component style
- do not build extra features
- do not add login, database, payment, or backend features
- do not add advanced animations
- ask me first if either file is missing or unclear
- explain which files changed

Explain what you just changed in beginner-friendly terms.

Tell me:
- which files changed
- what each file does
- what I should test now

Read project-brief.md and design-spec.md first.

This is my error:
[paste the real error]

What I expected:
[what should happen]

What I tried:
[what you already tried, if anything]

Fix only this problem first.
Do not add new features.
Explain the cause and the changed files.

Improve this section:
[name the section]

Use project-brief.md and design-spec.md as the reference.

Improve only:
- spacing
- readability
- mobile layout
- button or card clarity
- alignment with the design spec

Do not add new features.

Help me push my local project to GitHub step by step.

Important:
- Do not ask for my password, token, or private key.
- Use the integrated terminal in my IDE.
- Check the current folder first.
- Explain each command before I run it.

My GitHub repository URL is:
[paste repository URL]

Before pushing, check:
1. I am in the correct project folder
2. package.json exists
3. node_modules is not being committed
4. git status is safe to review

Then guide me through:
1. git init if needed
2. git add
3. git commit
4. adding the remote repository
5. pushing to GitHub
6. checking the files online

Help me deploy this GitHub project with Vercel step by step.

Important:
- I will do browser login, GitHub access approval, repository selection, and the Deploy button manually.
- Do not ask for tokens, passwords, private keys, or environment secrets.

Before deployment, help me check:
1. localhost worked before I pushed
2. the latest code is pushed to GitHub
3. package.json is visible in the GitHub repository

Then guide me through the manual Vercel steps:
1. log in with GitHub
2. import the correct repository
3. keep detected framework settings
4. deploy
5. open and test the live URL

If the deployment fails, ask me to paste the exact Vercel build error.