Academyacademy / vibe-102 / mini-app-brief

Mini App Brief

What this is

The mini app brief is the source of truth for Vibe 102.

It replaces a separate design spec by including one design/theme section inside the brief.

Why it matters

The first setup prompt stays empty so localhost can work first.

After localhost works, the project brief can be comprehensive. It guides every build prompt without letting the AI invent extra scope.

What to do

Use this planning prompt in ChatGPT or Perplexity, not in the IDE:

Copy prompt

ROLE:
You are a senior frontend developer helping a beginner plan a Vibe 102 mini app.

CONTEXT:
I already have a clean React + Vite + Tailwind starter project running on localhost.
I need a project brief before I ask my coding agent to build the app.

APP CHOICE:
[mission task tracker / habit tracker / expense tracker / project bookmark manager / lead tracker / study flashcards / mini journal / recipe idea saver]

RULES FOR THE APP:
- one list of items only
- add item
- update or mark item
- delete item
- save with localStorage
- no backend
- no login
- no database
- no charts
- no API
- no image upload
- no multi-page routing

TASK:
Ask me these questions before finalizing:
1. What is the app called?
2. Who is the app for?
3. What should one item contain? Keep it to 3 or 4 fields.
4. What update action should the item have?
5. What theme do I want? Suggest 8 beginner-safe themes.
6. What colors, mood, or style should the app avoid?
7. What would make this app too big for tonight?

After I answer, create the final brief.

FINAL BRIEF FORMAT:
- app name
- user goal
- selected app type
- one item data shape
- max 3 core features
- design/theme direction
- layout sections
- localStorage key name
- build order
- test checklist
- out-of-scope list

Then create a second copy-paste block titled IDE PROMPT: Save project-brief.md.
That IDE prompt must include the full final brief and tell the coding agent to create a file named project-brief.md in the project root.

Rules:
- keep it simple enough to build in 2.5 hours
- keep it as one list of items
- do not add login, database, payment, AI feature, dashboard, chart, API, image upload, or multi-page routing
- make the design direction practical for Tailwind
- end with the next build checkpoint: Data Shape
- make the IDE prompt complete so I can copy and paste it without rewriting anything

When moving to the coding agent, copy the IDE PROMPT: Save project-brief.md block that ChatGPT gave you and paste it into the IDE.

It should look like this:

Copy prompt

CONTEXT:
I finished my Vibe 102 project brief.

TASK:
Create a new file named project-brief.md in the project root.

CONTENT:
[the full final brief should already be included here by ChatGPT]

Rules:
- preserve the brief scope
- do not build app features yet
- do not rewrite the app idea
- after creating the file, tell me the file path and stop

Do not paste the brief into the setup prompt. Setup already happened.

Common mistakes

Starting code before the brief is clear.
Letting AI add filters, charts, accounts, or multiple pages.
Accepting a brief with more than one list of items.
Writing a design direction so vague that Tailwind polish becomes random.

Vibe 102 / Current checkpoint

Mini App Brief

Ready to stamp - Saved in this browser only.

0 of 16 checkpoints complete.