TAOP E-LEARNING – https://www.skool.com/the-art-of-prompting-taop-2700/classroom
TAOP – AFFILIATE – https://gigventuremy.onpay.my/affiliate/links
TAOP KELAS CHATGPT DAN CODEX
DAY 1 – AM : https://youtu.be/Ms8TE2YE4WI
DAY 1 – PM : https://youtu.be/gimiFYQjWdA
DAY 2 – AM : https://youtu.be/_WkUugs-itc
DAY 2 – PM : https://youtu.be/eZOVM0ZvfMA
BUAT TEMPAT SIMPAN PROJECT
Buat Folder di C: Namakan cth ChatgptOS (maklumat akan di simpan di dalam folder ni)
Create New Project : Letak nama ChatgptOS (nama bebas)
Pilih Folder : ChatgptOS (folder di C tadi)
prompt : bantu saya setup saya OS folder utk create chatgpt.md, memory.md & about.md
Nanti Chatgpt akan buatkan 3 files tu
BELAJAR CODEX
Betul — sebelum ini saya tertinggal satu demonstrasi penuh: website “Larian Amal Kemerdekaan”, termasuk prompt agen, pembaikan UI, QA dan deployment. Di bawah ialah senarai lengkap arahan yang jelas diberikan kepada AI dalam transkrip. Saya kekalkan maksud dan susunan asal; kapsyen automatik ada sedikit salah ejaan.
A. Website peribadi ala Linktree
1. Prompt mula
Hai, saya baru nak guna Codex dekat ChatGPT apps ni.
Saya nak buat website pertama saya.
Basically saya nak buat website untuk diri saya macam ala-ala Linktree punya website, yang ada nama dan senarai sosial media semua tu.
Boleh tak bantu saya buatkan step by step?2. Minta AI bertanya secara satu-persatu
Gunakan konsep Ask User Question.
Tanya saya satu per satu.3. Butiran yang diberi ketika sesi soal jawab
Nama saya Khairul Iwan Zulkefli, dalam kurungan Coach Khairul.
Saya nak landing page untuk personal branding.
Ada nama, bio pendek, link media sosial, gambar profil dan logo website.
Bila orang buka website, tindakan utama ialah:
- kenal tentang saya;
- hubungi saya; dan
- lihat servis saya.
Pautan pertama WhatsApp.
Pautan kedua Facebook.
Bio ringkas macam style Twitter dan ada emoji.4. Arahan gambar profil AI
Saya akan upload foto, tapi saya nak awak generate gambar AI yang lebih menarik berdasarkan gambar yang saya upload.5. Implement hasil Plan/PRD
Proceed implement.6. Paparkan kemajuan kerja
Boleh tunjuk progress yang sedang dibuat dekat side panel?
Saya nak sambil dia buat itu, saya tengok dekat side panel.7. Tukar foto kepada potret lebih profesional
Ini gambar saya. Boleh tak enhance guna AI supaya nampak lebih profesional?
Lepas itu gantikan dekat placeholder gambar tersebut.
Kekalkan wajah dan bentuk muka saya.
Cuma kemaskan lighting, crop dan latar belakang.8. Audit UI/UX dan feature
Saya nak awak jadi expert dalam full-stack web design.
Tengok balik website yang kita dah buat.
Cadangkan saya lima penambahbaikan untuk UI/UX dan lima penambahbaikan untuk features supaya enhance lagi website saya, jadi world-class dan tak nampak macam AI sangat.9. Utamakan cadangan
Daripada cadangan yang kau bagi ini, yang mana satu top three priority yang kau rasa aku patut buat?10. Implement tiga keutamaan + testing
Buatkan tiga ini, tapi deploy beberapa ejen yang sesuai supaya kerja lebih smooth.
Deploy juga ejen yang boleh terus testing lepas siap masukkan features ataupun penambahbaikan ini.
Deploy satu ejen yang test secara live.
Gunakan ejen-ejen yang berbeza.11. Betulkan susun atur desktop
Pastikan kalau version dekat desktop, layout dia tidak macam mobile.
Saya nak [bahagian tools/semakan pantas] diletakkan di bahagian tepi kanan supaya nampak lebih penuh dan kemas pada skrin desktop.12. Ringankan imej untuk prestasi
Tukar gambar asal kepada 40 KB supaya website lebih ringan untuk load.B. Website “Larian Amal Kemerdekaan”
13. Prompt utama untuk bina website
Hari ini saya nak buat satu projek baru.
Saya nak buat satu website untuk Larian Amal Kemerdekaan.
Acara ini dianjurkan bawah G Venture. Hasil kutipan yuran akan disumbangkan kepada rumah anak-anak yatim.
Acara pada 30 Ogos, waktu siang, di Dataran Teruntum, Kuantan.
Ada kategori lelaki dan wanita.
Untuk setiap kategori, ada 5 km fun run, 10 km dan half marathon.
Cadangkan yuran untuk setiap kategori.
Website mesti ada semua maklumat seperti website larian sebenar.
Peserta boleh register.
Yang penting, buat satu dashboard dalam website yang admin boleh akses menggunakan password 123.
Dalam dashboard itu ada semua maklumat peserta yang telah mendaftar.
Kalau tak faham, tanya soalan lagi.14. Minta PRD dahulu
Boleh tak buatkan dulu PRD untuk website ini dan explain sikit PRD itu apa dan kenapa PRD itu penting untuk website?15. Bina dua komponen secara serentak
Proceed untuk bina website ini.
Deploy dua ejen serentak:
- satu ejen bina website untuk maklumat dan pendaftaran;
- satu ejen bina dashboard.
Saya nak nampak dua-dua bergerak serentak.16. Tentukan lokasi preview
Yang buat interface depan atau website utama pakai side panel.
Yang dashboard pakai bottom panel.
Deploy serentak.17. Buka preview secara live
Buka panel side dan panel bawah itu. Saya nak tengok secara live.
Boleh tak tunjukkan yang tengah dibuat untuk dashboard dan interface utama pada panel tersebut?18. Semak pendaftaran → dashboard
Nanti buat satu demo, terus daftarkan dekat website kita.
Lepas itu check sama ada data itu masuk atau tidak dalam dashboard.19. Minta pembaikan besar kerana nampak AI-generated
Aku dah tengok website yang kau buat itu. Memang nampak AI slop, nampak sangat AI generated.
Boleh tak kau improve lagi supaya tak nampak macam AI?
Bayangkan buat gambar belakang hero produk dan sebagainya.
Tolong improve website ini. Tambahkan feature yang lebih gempak, contohnya testimoni atau background parallax.
Aku nak kau jadi world-class web developer.
Tolong improve website ini by 1000%.20. Struktur pasukan agen
Pastikan kau deploy multiple ejen parallel supaya kerja lebih cepat.
Setiap ejen mesti pakar dalam kerja dia.
Kau jadi head of project.
Bagi nama kepada setiap ejen, contohnya Ali atau Abu.
Update saya tentang apa yang setiap ejen dah buat.21. Gaya bahasa agen
Jangan cakap terlalu baku.
Cakap lebih natural dan colloquial Malaysia.
Manglish pun boleh, mix-mix dan tak perlu baku sangat.
Pakai aku-kau.22. Upgrade dashboard serentak
Deploy satu lagi team untuk improve dashboard.
Buat team dashboard dan team website secara serentak.23. Tetapkan agen hanya bercakap apabila dipanggil
Lepas ini aku panggil kau Jarvis.
Bila aku sebut Jarvis baru kau menyaut.
Kalau aku suruh kau senyap, diam dulu.
Nanti aku tanya dah siap belum baru kau respon.24. Minta status dan QA
Jarvis, cuba update semua status budak-budak kita. Mereka berada di mana dah?
Cepatkan proses gabung hasil.
Kalau perlu, hire dua atau tiga staf lain untuk gabungkan.
Tambah dua orang untuk QA cepat:
seorang check website dan seorang check dashboard.
Run final build.25. Semak responsif mobile/desktop
Aku rasa nanti kalau mobile responsif tak berapa jadi sebab aku nampak tak ada hamburger icon.
Cuba check dari segi QC, mobile responsiveness, dan pastikan mobile serta desktop optimize.C. Preview, domain, Netlify, Supabase dan deployment
26. Minta panduan deployment
Sekarang aku nak deploy website ini.
Tolong ajar aku dan advice aku macam mana nak deploy.27. Pilih private preview dahulu
Bagi private preview dulu.28. Cari domain percuma
Setup satu staf untuk cari domain free yang boleh pakai.
Tak kisahlah untuk website larian ini, saya nak yang free.29. Teruskan deployment serentak dengan semakan domain
Staf lain proceed untuk deploy.30. Semak database
Aku nak check database ini, dekat mana?31. Pilih stack sebenar
Jom sambung untuk deployment.
Aku nak deploy pakai Netlify, lepas itu database simpan dekat Supabase.32. Pisahkan tugas Netlify dan Supabase
Assign staf berbeza untuk dua kerja itu.33. Log masuk sendiri
Boleh kau buka, nanti aku login.34. Teruskan selepas log masuk
Proceed.
Gunakan different ejen.
Pastikan buat dengan teliti dan teratur.
Make it fast, tapi diam sahaja. Dah siap baru beritahu aku.35. Cari lima domain murah
Cakap kepada Faris cari lima cadangan domain yang sesuai.
Pastikan domain itu paling murah.
Buat perbandingan harga tahun pertama dan renewal.36. Jangan beli domain dahulu
Tak payah [beli] dulu. Simpan dulu dalam maklumat kita. Nanti next time kita buat.37. Tangguhkan live deployment, kemudian sambung apabila sedia
Untuk Netlify kita hold dulu juga.
Kod dah boleh migrate tapi belum deploy live lagi.
Bila kau ready, kita set environment Supabase, connect source repo, baru deploy.
Buat sekarang. Ada lebih kurang 10 minit lagi sebelum pergi lunch. Boleh tak siapkan?38. Minta jawapan terus tentang Netlify vs Vercel
Netlify ke Vercel, apa jawapannya?
Tak payah suruh staf buat comparison. Kau cerita terus kepada aku apa perbezaannya.39. Teruskan GitHub + Netlify
Proceed buat cepat. Ada lagi sembilan minit.40. Repo private + laluan dashboard
Buat repository private.
Lepas deploy, bagi link website utama.
Untuk dashboard, buat /dashboard.41. Kelulusan GitHub device login
Buka terus halaman approve GitHub.Saya sengaja tidak salin kod device authorization yang disebut dalam video kerana ia ialah kod pengesahan sementara dan tidak patut digunakan semula.
42. Dapatkan link live untuk ujian
Cepat, aku nak dapatkan live link dulu.
Aku nak test lepas itu pergi makan tengah hari.43. Minta agen tulis promosi website
Boleh tak minta Aisyah buatkan sedikit ayat untuk promote website ini?
Buat tiga ayat promosi yang ringkas dan natural untuk launch website larian ini.44. Kekalkan kerja berjalan dan hanya maklumkan bila siap
Tak apa, kau buat dulu.
Kejap lagi bila dah siap, bagi tahu aku sahaja.
Proceed buat kerja.45. Minta penerangan mudah tentang GitHub
Ada orang tanya kenapa nak deploy ke Netlify kena melalui GitHub.
Tolong jawab dalam bahasa yang mudah.Yang tertinggal dalam jawapan saya sebelum ini terutama prompt 13 hingga 45, termasuk seluruh projek larian, arahan agen, QA responsif, private preview, Netlify, Supabase, GitHub, domain dan ayat promosi.
Satu batasan kecil: ini ialah senarai penuh berdasarkan transkrip auto YouTube. Jika ada teks yang ditaip senyap-senyap pada skrin tetapi tidak disebut oleh penceramah, transkrip memang tidak dapat menangkapnya — tetapi semua arahan yang disebut dalam demonstrasi website telah saya masukkan.