Akademiacademy / vibe-101 / test-debug-improve

Test, Debug, Improve

Apa ini

Ini checkpoint untuk prove first visible build benar-benar berfungsi.

Loop dia:

Flow

test -> debug -> one learner change -> polish

Kenapa penting

Ship bukan sekadar generate code.

Pelajar perlu nampak masalah, namakan dengan jelas, fix satu benda pada satu masa, dan improve page sebelum simpan ke GitHub.

Apa nak buat

Test page dalam browser:

  1. Refresh localhost.
  2. Click setiap button atau link yang nampak.
  3. Check page pada narrow phone width.
  4. Baca text kuat-kuat dan buang copy yang confusing.
  5. Confirm first section masih ikut project brief.
  6. Confirm first section masih ikut design spec.

Kalau ada benda rosak, guna prompt ini:

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

This is the exact problem:
[what I clicked or tested]

What happened:
[what the browser showed]

Expected:
[what should happen]

Fix only this problem first.
Do not add new features.
Explain the fix after.

Untuk prompt debug tambahan, buka Prompt Lab, buka Browse, dan pilih group Fix.

Kemudian tambah satu small learner change request:

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

TASK:
Make one small improvement:
[spacing / wording / button clarity / card clarity / mobile layout]

Keep the structure simple.
Do not add a new feature.
Keep it aligned with the design spec.

Akhir sekali buat design polish pass:

Copy prompt
Read design-spec.md first.

TASK:
Polish this first section.

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

Keep the design simple and do not change the project goal.
Do not add a new section or feature.

Sebelum pergi ke GitHub, check:

Reference

Localhost works.
The first section matches project-brief.md.
The visual style matches design-spec.md.
Mobile width is readable.
No new feature was added by accident.

Mistake biasa

  • Debug tiga error dalam satu prompt.
  • Anggap page done tanpa test mobile width.
  • Tambah feature baru, bukan improve first section.
  • Simpan ke GitHub masa browser masih rosak.
  • Polish ke arah yang tak ikut design spec yang sudah disimpan.

Vibe 101 / Checkpoint sekarang

Test, Debug, Improve

Sedia untuk stamp - Disimpan dalam browser ini sahaja.

0 daripada 20 checkpoints complete

0 daripada 20 checkpoints complete.