Workflow Pelajar v3

Workflow Vibe Coding — Lengkap

8 langkah dari idea ke dokumentasi. Dengan kaedah "Prompt Helper", Architecture, dan "Documentation Discipline" — golden rule Vibe Coding.

8
Langkah
0
Selesai
0
Checklist

📑 Isi Kandungan

  1. IDEA + FIKIR DULU — 5 Soalan Wajib
  2. BRAINSTORM — Perbincangan 2 Hala
  3. PROMPT HELPER — The Two-AI Pattern
  4. PROMPT / EXECUTE — C+I+C
  5. REVIEW — Semak Output AI
  6. ITERATE — Refine Sehingga Puas
  7. SHIP — Deploy ke Internet
  8. 📝 DOCUMENTATION — Golden Rule
  9. 🏗️ Architecture & Ekosistem
  10. ✅ Checklist Interaktif
  11. 🧭 Navigasi
Langkah 1
💡
IDEA + FIKIR DULU
5 soalan wajib SEBELUM buka AI
▼
Langkah 2
🧠
BRAINSTORM
Perbincangan 2 hala dengan AI. AI tanya balik.
Claude Code
▼
Langkah 3 Kaedah Anda
🤖
PROMPT HELPER
AI Helper tulis prompt penuh → beri pada AI Coder
AI HelperAI Coder
▼
Langkah 4
✍️
PROMPT / EXECUTE
Context + Instruction + Constraint. Execute.
Claude CodeCodex
▼
Langkah 5
🔍
REVIEW
Baca, test, semak output. Jangan terima bulat-bulat.
▼
Langkah 6
🔄
ITERATE
Refine → Prompt lagi → Semak → Ulang (3-5x)
▼
Langkah 7
🚀
SHIP
Deploy ke internet. Kongsi. Raikan!
▼
Langkah 8 Golden Rule
📝
DOCUMENTATION
Minta AI tulis/update documentation PROJEK. WAJIB.
AI Writer
1
IDEA + FIKIR DULU

📋 Apa Ini?

Sebelum buka AI, anda WAJIB fikir dulu. Ini langkah paling penting yang selalu di-skip oleh beginner. Jangan terus prompt — luangkan 10-15 minit untuk fikir.

🎯 Kenapa Penting?

  • Prompt yang baik datang dari pemikiran yang jelas
  • AI hanya boleh jawab apa yang anda tanya — kalau tak fikir, prompt kabur
  • 5 soalan ini memaksa anda definisikan projek dengan tepat
  • Jimat masa: 15 minit fikir = jimat 2 jam iterate

🛠️ Cara Buat

Tulis jawapan untuk 5 soalan ini — jangan dalam kepala sahaja. Tulis dalam notepad, kertas, atau Google Docs.

1
Siapa pengguna sasaran?
Spesifik. Umur, minat, masalah harian. Contoh: "Pelajar universiti 20-25 tahun yang nak cari freelance gig." BUKAN: "semua orang".
2
Apa masalah yang diselesaikan?
Fokus pada PROBLEM, bukan feature. Contoh: "Pelajar tak tahu mana nak cari kerja freelance yang sesuai." BUKAN: "saya nak buat job portal."
3
Apa hasil yang dijangka — macam mana tahu "selesai"?
Definisikan "selesai" dengan kriteria spesifik. Contoh: "Pengguna boleh search, apply, dan track status permohonan."
4
Apa constraints?
Masa, bajet, skill, tools yang tersedia. Contoh: "HTML + CSS + Supabase sahaja. Tiada React. 2 minggu. Free hosting."
5
Apa inspirasi? 2-3 contoh serupa.
Cari 2-3 apps/sites yang serupa dengan visi anda. Ini bantu AI faham estetik dan functionality yang anda nak.

✅ Hasil Langkah Ini

Selepas Langkah 1, anda ada dokumen ringkas (separuh halaman) yang menjelaskan projek anda dengan jelas. Ini jadi rujukan untuk Langkah 2.

2
BRAINSTORM DENGAN AI

📋 Apa Ini?

Buka sesi Claude Code (atau Codex). Jelaskan projek anda. Minta AI tanya soalan balik — ini kunci. Perbincangan 2 hala, bukan 1 hala.

🎯 Kenapa Perbincangan 2 Hala?

  • AI yang tanya balik akan faham projek lebih mendalam
  • Anda dipaksa fikir aspek yang mungkin terlepas pandang
  • Hasil brainstorm lebih kaya — AI bantu expand idea anda
  • Ini asas untuk Prompt Helper (Langkah 3)

🛠️ Cara Buat

Prompt untuk mulakan sesi brainstorm:

Saya nak bina [projek ringkas]. Sebelum awak bagi sebarang cadangan, tanya saya 5-10 soalan untuk faham keperluan penuh. Tanya satu persatu. Selepas saya jawab semua, baru kita bincangkan: 1. Features WAJIB vs NICE-TO-HAVE 2. Design direction (style, warna, font) 3. Tech stack yang sesuai 4. Struktur halaman / komponen

📊 Apa Yang Perlu Dibincangkan

  1. Features: Apa yang WAJIB ada? Apa yang boleh tambah kemudian?
  2. Design: Style apa? Warna? Font? Rujuk 2-3 contoh inspirasi.
  3. Tech stack: HTML sahaja? Perlu database? Auth?
  4. Struktur: Berapa halaman? Macam mana navigasi?
  5. Data: Apa data yang perlu disimpan? (jika guna database)
💡 Kunci: Pastikan AI tanya balik. Kalau AI terus jawab tanpa tanya, prompt sekali lagi: "Sebelum jawab, tanya saya soalan dulu untuk faham keperluan penuh."

✅ Hasil Langkah Ini

Selepas Langkah 2, AI dah faham sepenuhnya projek anda. Semua features, design, tech stack, dan struktur dah dibincangkan. Anda ready untuk Langkah 3.

3
PROMPT HELPER Kaedah Anda

📋 Apa Ini?

Ini adalah teknik paling power dalam Vibe Coding. Selepas AI faham projek anda (Langkah 2), minta AI yang sama tulis satu prompt lengkap untuk diberi pada AI Coder yang lain.

🤖 The "Two-AI" Pattern

🧠

AI HELPER

Peranan: Perancang & Penulis Prompt

Bincang dengan anda
Tanya soalan balik
Faham konteks penuh
TULIS prompt untuk AI Coder

⟹
⚡

AI CODER

Peranan: Pelaksana / Executor

Terima prompt dari AI Helper
Tak perlu fikir konteks
Execute — BINA kod
Fokus: output berkualiti

🎯 Kenapa Guna Pattern Ini?

  • Pemisahan tanggungjawab: AI Helper fokus pada "apa" dan "kenapa". AI Coder fokus pada "bagaimana".
  • Prompt lebih berkualiti: AI Helper yang dah faham konteks penuh boleh tulis prompt yang JAUH lebih baik daripada anda tulis sendiri.
  • Jimat masa: Tak perlu taip prompt panjang — AI Helper taipkan untuk anda.
  • Konsisten: Prompt ada Context + Instruction + Constraint lengkap, setiap kali.

🛠️ Cara Buat — 3 Langkah

Langkah A: Minta AI Helper tulis Prompt Penuh

Selepas perbincangan Langkah 2 cukup, minta AI tulis prompt.

"Sekarang, berdasarkan perbincangan kita, tulis SATU prompt lengkap untuk diberi pada AI Coder. Prompt mesti ada: 1. CONTEXT — latar belakang projek, audien, tech stack, inspirasi 2. INSTRUCTION — apa nak dibina, step-by-step, spesifik 3. CONSTRAINT — format, style, warna, had, dos & don'ts 4. OUTPUT — struktur fail yang dijangka, komponen yang perlu ada Tulis prompt ini dalam satu code block yang boleh saya copy-paste terus."
Langkah B: Semak prompt

Baca prompt yang AI Helper tulis. Ada Context? Instruction? Constraint? Output? Kalau ada yang kurang, minta AI Helper tambah.

Langkah C: Hantar ke AI Coder

Buka sesi BARU (Claude Code atau Codex). Copy-paste prompt. Execute.

[Buka Claude Code sesi BARU — atau Codex] [Paste prompt dari AI Helper] [Execute] [Dapatkan kod]
💡 Bila guna Prompt Helper? Projek besar (>1 halaman, ada database, auth) → WAJIB guna. Projek simple (1 landing page) → boleh skip ke Langkah 4.
💡 Boleh guna tool BERBEZA: Contoh — AI Helper guna Claude Code (kuat reasoning), AI Coder guna Codex (kuat execute).

✅ Hasil Langkah Ini

Anda ada satu prompt lengkap dan berkualiti tinggi yang sedia untuk dihantar ke AI Coder. Simpan prompt ini — boleh guna semula untuk projek lain.

4
PROMPT / EXECUTE

📋 Apa Ini?

Hantar prompt ke AI Coder dan dapatkan kod. Jika guna Prompt Helper (Langkah 3) — copy-paste prompt. Jika tak — tulis sendiri guna formula C + I + C.

🎯 Anatomi Prompt: C + I + C

CONTEXT — latar belakang, audien, tech stack, inspirasi INSTRUCTION — apa nak AI buat, spesifik, step-by-step CONSTRAINT — format, style, warna, dos & don'ts, had

🛠️ Contoh Prompt Tanpa Prompt Helper

[CONTEXT] Saya bina landing page untuk kedai kopi artisan. Target: 20-35 tahun. Guna HTML + CSS sahaja. Inspirasi: Starbucks Reserve website. [INSTRUCTION] Bina landing page lengkap dengan section: 1. Hero — headline, subheadline, CTA "Order Sekarang" 2. Menu — 4 kopi bestseller, nama, harga, deskripsi 3. Lokasi — alamat, waktu operasi, embedded map placeholder 4. Footer — social links, copyright [CONSTRAINT] - Warna: earth tone (coklat #8B4513, krim #FFFDD0, hijau #228B22) - Font: system font stack, clean - Responsive: mobile + desktop - Tiada JavaScript (static sahaja) - Setiap section ada komen Bahasa Melayu

🎯 Pilih Tool

  • Claude Code: Projek kompleks, perlu reasoning, guna MCP/Skills
  • Codex: Projek simple, execute pantas, debug, deploy
  • Kedua-duanya: Guna Claude Code untuk bina, Codex untuk debug/fix

✅ Hasil Langkah Ini

Anda ada kod — fail HTML, CSS, JS yang dijana oleh AI. Simpan dalam folder projek. Buka dalam browser. Ready untuk review.

5
REVIEW

📋 Apa Ini?

JANGAN terima output AI bulat-bulat. Baca, test, semak. Ini skill paling penting dalam Vibe Coding — anda bertanggungjawab atas kod yang dihasilkan.

🎯 Kenapa Review Penting?

  • AI boleh buat silap — syntax error, logic salah, constraint tak ikut
  • Output AI adalah "draf pertama" — bukan produk siap
  • Anda yang tahu apa yang anda nak — AI cuma agak
  • Review = peluang untuk belajar (baca output, faham apa yang AI buat)

🔍 Checklist Review

  1. Baca SEMUA output: Jangan scroll laju. Baca setiap line.
  2. Buka dalam browser: Test — klik button, scroll, check layout
  3. Semak console: F12 → Console. 0 errors?
  4. Semak constraint: Warna betul? Responsif? Format OK?
  5. Semak logic: Form submit? Link berfungsi? Data keluar?
  6. Tanya diri: "Apa yang tak kena? Apa yang boleh lebih baik?"
💡 Tip: Tulis senarai isu dalam notepad. Spesifik — "font terlalu kecil pada mobile (12px)" BUKAN "design tak cantik".
6
ITERATE

📋 Apa Ini?

Dapatan review → refine prompt → dapatkan output baru → review lagi → ulang sehingga puas hati. Ini jantung Vibe Coding.

🔄 The Iteration Loop

PROMPT → dapat output → SEMAK → tak puas hati?
✦ REFINE PROMPT ✦
→ dapat output baru → SEMAK LAGI
→ OK? → SIMPAN & LANJUT

🎯 Cara Iterate dengan Betul

  1. Kenal pasti isu SPESIFIK: "Mobile nav hamburger menu tak berfungsi pada saiz 375px"
  2. Refine prompt: Tambah constraint spesifik tentang isu tersebut
  3. Kembali ke Prompt Helper (Langkah 3) ATAU terus Prompt (Langkah 4)
  4. Bandingkan: Versi 1 vs Versi 2 — ada improvement?
  5. Ulang sehingga berpuas hati
⚠️ Jangan stuck! Kalau dah 5+ iterasi tak puas hati:
(1) Ubah pendekatan radikal — mungkin design approach yang salah
(2) Tanya AI: "Kenapa output tak seperti dijangka? Apa salah prompt saya?"
(3) Rehat sekejap — fresh eyes nampak benda yang tired eyes tak nampak
7
SHIP — Deploy ke Internet

📋 Apa Ini?

Projek dah siap — deploy ke internet supaya boleh diakses oleh SEMUA orang. Dapatkan URL live.

🛠️ Cara Deploy

  1. Final test: Setiap button, link, form — klik, test, sahkan
  2. Responsive check: Buka di phone, tablet, desktop
  3. Console check: F12 → 0 errors
  4. Deploy: Guna Cloudflare Pages (free) atau Codex deploy
  5. Dapatkan URL: Share dengan dunia!

🎉 Raikan!

Anda baru sahaja membina dan deploy aplikasi — sebagai seorang ZERO coding experience. Ini pencapaian BESAR. Raikan, share, bangga!

💡 Ingat: "Perfect is the enemy of shipped." Jangan tunggu sempurna. Ship dulu, refine kemudian.
8
📝 DOCUMENTATION — Golden Rule WAJIB

📋 Apa Ini?

Selepas deploy, WAJIB minta AI tulis/update documentation projek. Ini adalah golden rule paling penting dalam Vibe Coding.

🟠 Golden Rule: "Sentiasa Minta AI Buat Documentation"

Setiap kali selesai kerja — sebelum tutup laptop — minta AI generate/update documentation untuk projek anda.

🧠 Ingatan luaran: Bila sambung minggu depan, baca documentation — terus ingat apa yang dah buat.
👥 Onboarding: Sesiapa yang nak bantu/sambung kerja boleh baca documentation dan faham dalam 10 minit.
🐛 Issue tracking: Bila ada bug, documentation bantu kenal pasti punca — "bahagian mana yang berubah?"
📈 Progress tracking: Documentation jadi rekod kemajuan projek dari mula ke akhir.
🤖 AI onboarding: Bila guna AI untuk sambung kerja, bagi AI baca documentation — output lebih tepat.
💼 Portfolio: Documentation buktikan anda faham projek — bukan sekadar "suruh AI buat".

🛠️ Jenis Documentation Yang Perlu

README.mdOverview projek, goal, cara start, cara deploy
ARCHITECTURE.mdSystem design, tech decisions, data flow, navigation map
FRONTEND.mdStruktur fail, CSS system, components, JS patterns
DEPLOYMENT.mdCara deploy, environment, backup, troubleshooting
DEVELOPMENT.mdCara sambung develop, conventions, testing
DATABASE.mdTable structures, relationships, RLS policies (jika ada DB)

🛠️ Cara Minta AI Tulis Documentation

"Saya baru selesai [apa yang dibuat]. Tolong update documentation untuk projek ini: 1. README.md — overview, struktur, golden rules 2. ARCHITECTURE.md — system design & data flow 3. FRONTEND.md — struktur fail & CSS patterns (jika ada UI) 4. DEVELOPMENT.md — cara sambung kerja Update semua yang BERUBAH sejak documentation terakhir. Kalau belum ada, cipta baru."
💡 Kunci: Ambil masa 2 minit sahaja untuk minta AI tulis documentation. Tapi nilai dia berbulan-bulan bila anda sambung kerja nanti. JANGAN SKIP.

✅ Hasil Langkah Ini

Projek anda ada documentation lengkap. Bila nak sambung kerja — bagi AI baca documentation dulu, terus productive. Ini beza antara projek yang HIDUP dan projek yang MATI ditinggal.

🏗️ Architecture & Ekosistem App

📋 6 Lapisan App — Dari Idea ke Live

Setiap app/website ada 6 lapisan. UX dan UI DULU — baru coding.

🧠
1. UX

Apa pengguna NAK?
Flow, journey, masalah

Sebelum coding
→
🎨
2. UI

Macam mana RUPA?
Warna, layout, tipografi

Sebelum coding
→
📄
3. Frontend

HTML, CSS, JavaScript
Apa yang NAMPAK

Coding
↕ berinteraksi melalui API ↕
⚙️
4. Backend/API

Logic, CRUD, Auth
Apa yang TAK NAMPAK

Supabase
→
🗄️
5. Database

Simpan data
Postgres, RLS

Supabase DB
→
🌍
6. Deployment

Live ke internet
Domain, HTTPS

Cloudflare

📋 Urutan Bina — "Content First"

1
CONTENT
Tulis teks, sediakan imej, tentukan mesej utama
0% Kod
2
STRUCTURE
Susun HTML — headings, sections, nav
20% Kod
3
STYLE
CSS — warna, font, spacing, responsive
50% Kod
4
LOGIC
JavaScript — interactivity, form, dynamic
70% Kod
5
DATA
Database, auth, CRUD, real-time
90% Kod
6
SHIP
Deploy, test, go live!
100% Siap

🗺️ Ekosistem Map

🌐 DomainCloudflare / Namecheap
📦 HostingCloudflare Pages
🗄️ DatabaseSupabase Postgres
🔐 AuthenticationSupabase Auth
📁 StorageSupabase Storage / R2
🔒 HTTPS/SSLAuto (Cloudflare)
📊 AnalyticsCloudflare / Plausible
🔍 SEOMeta tags, sitemap
🔄 CI/CDGit + auto deploy
📧 EmailCloudflare / Resend
✅ Checklist Interaktif — 8 Langkah
💡 Langkah 1: IDEA + FIKIR DULU
  • Jawab 5 soalan wajib — TULIS, jangan dalam kepala sahaja
  • Tentukan projek — spesifik, 1-2 ayat
  • Senaraikan 2-3 contoh apps/sites inspirasi
  • Definisikan "selesai" — kriteria projek berjaya
  • Kenal pasti constraints (masa, bajet, skill, tools)
🧠 Langkah 2: BRAINSTORM DENGAN AI
  • Buka sesi Claude Code — jelaskan projek (guna jawapan 5 soalan)
  • Minta AI tanya soalan balik — "Tanya saya 5-10 soalan"
  • Jawab setiap soalan — jangan skip
  • Bincang features — WAJIB vs NICE-TO-HAVE
  • Bincang design — style, warna, font, susunan
  • Bincang tech stack — HTML? Database? Auth?
  • Pastikan AI dah faham SEPENUHNYA sebelum move on
🤖 Langkah 3: PROMPT HELPER
  • Minta AI Helper tulis prompt penuh — "Tulis SATU prompt lengkap untuk AI Coder"
  • Semak prompt — ada Context? Instruction? Constraint? Output?
  • Kalau ada kurang — minta AI Helper tambah
  • Buka sesi BARU (Claude Code atau Codex) — ini AI Coder
  • Copy-paste prompt dari AI Helper ke AI Coder
  • Simpan prompt — boleh guna semula untuk projek lain
✍️ Langkah 4: PROMPT / EXECUTE
  • Hantar prompt ke AI Coder — execute
  • Dapatkan kod — simpan dalam fail
  • Pastikan prompt ada Context + Instruction + Constraint
  • Pilih tool yang sesuai (Claude Code / Codex / Kedua-duanya)
🔍 Langkah 5: REVIEW
  • Baca SEMUA output — jangan skip
  • Buka dalam browser — test, klik, scroll
  • Console browser: 0 errors?
  • Semak constraint: warna, responsive, format — ikut?
  • Tulis senarai isu — spesifik, bukan "tak cantik"
🔄 Langkah 6: ITERATE
  • Kenal pasti isu dari Review
  • Kembali ke Prompt Helper (Langkah 3) ATAU terus Prompt (Langkah 4)
  • Refine prompt — tambah constraint spesifik tentang isu
  • Bandingkan versi 1 vs versi 2 — improvement?
  • Ulang sehingga BERPUAS HATI (3-5 iterasi normal)
🚀 Langkah 7: SHIP
  • Final test: setiap button, link, form
  • Responsive check: phone, tablet, desktop
  • Console: 0 errors
  • Deploy guna Cloudflare Pages atau Codex
  • Dapatkan URL live — SHARE!
📝 Langkah 8: DOCUMENTATION Golden Rule
  • Minta AI tulis/update README.md
  • Minta AI tulis/update ARCHITECTURE.md
  • Minta AI tulis/update FRONTEND.md (jika ada UI)
  • Minta AI tulis/update DEPLOYMENT.md
  • Minta AI tulis/update DEVELOPMENT.md
  • Simpan semua documentation dalam folder docs/
🧠 Workflow yang SAMA untuk SEMUA projek.
Landing page? 8 langkah. Portfolio? 8 langkah. Dashboard? 8 langkah. Full app? 8 langkah.
Yang berubah: kompleksiti dan jumlah iterasi. Workflow tetap sama dari projek pertama ke projek ke-100.
📁 Senarai Fail Projek

📚 Modul Pengajaran (modul/)

modul/index.htmlPortal utama — navigasi semua fasa
modul/workflow-mengajar.htmlWorkflow pengajar — 3 fasa, S.E.D.A.P
modul/workflow-vibe-coding.htmlWorkflow pelajar v3 — 8 langkah lengkap
modul/setup/install-claude-code.htmlPanduan install Claude Code
modul/setup/install-codex.htmlPanduan install Codex
modul/fasa-*/ (8 folder × 4 fail)32 fail — panduan, modul, latihan, rujukan
modul/lampiran/sijil.htmlSijil tamat kelas (boleh edit, print-friendly)
modul/lampiran/prompt-library.html40+ prompt template — boleh search & filter

📖 Dokumen Induk

README.mdOverview, vision, mission, struktur, golden rules
plugin-reference.htmlRujukan MCP Servers & Skills
handbook/index.htmlBuku induk 100 halaman (HTML)
handbook/handbook.docxBuku induk 100 halaman (DOCX)

📋 Documentation (docs/)

docs/ARCHITECTURE.mdSystem design, CSS architecture, navigation map
docs/FRONTEND.mdStruktur fail, CSS system, component library, JS patterns
docs/DEPLOYMENT.mdCara deploy, maintenance, backup, troubleshooting
docs/DEVELOPMENT.mdDevelopment guide, conventions, testing, git workflow
docs/superpowers/specs/Spesifikasi kurikulum (hasil brainstorming)
docs/superpowers/plans/Pelan implementasi (14 task)

🔬 DeepDoc Workspace (vibe-coding-handbook/)

vibe-coding-handbook/DeepDoc internal workspace (14 folder, blueprint, draft, export)
📊 Jumlah: 40+ fail HTML, 5 fail dokumentasi, 2 fail handbook, 1 blueprint spec, 1 pelan implementasi.