Akademiacademy / vibe-102 / mini-app-brief

Mini App Brief

Apa ini

Mini app brief ialah source of truth untuk Vibe 102.

Ia ganti separate design spec dengan satu design/theme section dalam brief.

Kenapa penting

Setup prompt pertama kekal kosong supaya localhost boleh jalan dahulu.

Selepas localhost jalan, project brief boleh jadi comprehensive. Brief ini guide setiap build prompt tanpa bagi AI tambah scope ikut suka.

Apa nak buat

Guna planning prompt ini dalam ChatGPT atau Perplexity, bukan dalam 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

Apabila pindah ke coding agent, copy block IDE PROMPT: Save project-brief.md yang ChatGPT beri dan paste ke dalam IDE.

Ia patut nampak seperti ini:

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

Jangan paste brief ke setup prompt. Setup sudah berlaku.

Mistake biasa

  • Mula code sebelum brief jelas.
  • Biar AI tambah filter, chart, account, atau multiple pages.
  • Terima brief yang ada lebih daripada satu list item.
  • Tulis design direction terlalu vague sampai Tailwind polish jadi random.

Vibe 102 / Checkpoint sekarang

Mini App Brief

Sedia untuk stamp - Disimpan dalam browser ini sahaja.

0 daripada 16 checkpoints complete

0 daripada 16 checkpoints complete.