First Visible Build

Apa ini

First Visible Build ialah perubahan pertama yang pelajar boleh nampak dalam browser.

Build satu section atau satu page sahaja.

Kenapa penting

Progress yang nampak bagi confidence, tapi progress yang terlalu banyak sembunyikan learning.

Satu visible section cukup untuk pelajar compare brief, code, dan browser result.

Apa nak buat

Pilih benda pertama yang perlu nampak daripada project brief.

Target pertama yang sesuai:

• homepage hero
• menu section ringkas
• profile/about section
• service list
• contact section tanpa backend

Pilih satu target daripada build order dalam project-brief.md. Guna design-spec.md untuk guide look and feel pertama.

Guna prompt ini dalam IDE:

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

Use them as the source of truth.

CURRENT STATE:
Localhost works at http://localhost:3000

TASK:
Build ONLY the first visible section:
[name one section]

Rules:
- keep it beginner-friendly
- match the project brief
- follow the design spec for layout, colors, and component style
- do not build other sections
- 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 every file changed

Selepas AI ubah files, refresh localhost dan inspect page.

Compare browser result dengan dua file:

• Adakah section ini match goal dalam project-brief.md?
• Adakah ia ikut mood, colors, layout, dan component style dalam design-spec.md?
• Adakah ia readable di mobile?
• Adakah ia masih satu section sahaja?

Kemudian tanya:

Explain what changed in beginner-friendly terms.

For each file:
- what changed
- why it changed
- what I should look at in the browser

Mistake biasa

• Minta full website dalam satu prompt.
• Terima code tanpa buka browser.
• Skip explanation.
• Biarkan AI tambah login, database, atau animation terlalu awal.
• Ignore design spec dan terima section yang nampak generic.