Kelas Premium Vibe Coding
01 / 20
Tajuk Utama

Kita Explore
AI Power vs AI Biasa

Daripada sekadar guna AI dalam browser kepada workflow sebenar: IDE, CLI, terminal, GitHub dan Cloudflare.

“Kelas premium ini bukan tentang tool paling mahal. Ini tentang workflow paling jelas.”
Tekan ← → untuk bergerak antara slide
AI Biasa vs AI Power
02 / 20
Perbezaan Asas

AI biasa jawab soalan. AI power bantu siapkan kerja.

Bezanya bukan pada nama tool sahaja. Bezanya pada cara kita susun kerja dengan AI.

AI Biasa

  • ×Guna dalam browser sahaja
  • ×Copy-paste manual
  • ×Banyak idea, susah siap
  • ×AI sebagai chatbot

AI Power

  • Guna dalam IDE, CLI, terminal
  • AI bantu debug dan edit code
  • Fokus hasil projek
  • AI sebagai CTO dan Builder
FOMO AI
03 / 20
Benar / Racun / Jiwa Kacau

FOMO AI buat kita nampak sibuk, tapi projek tak siap.

Tool baru muncul setiap minggu. Kalau semua mahu kejar, fokus akan pecah.

“Jangan kejar tool. Kejar workflow.”

Tanda FOMO AI

  • ×Banyak tengok video, kurang bina projek
  • ×Install banyak tool tapi jarang guna
  • ×Banding diri dengan orang advanced
  • ×Takut mula sebab rasa setup belum cukup canggih
03
Pace Masing-Masing
04 / 20
Belajar Ikut Rentak Sendiri

Slow tak apa. Yang bahaya ialah lompat-lompat tanpa hasil.

Ada pelajar terus faham terminal. Ada yang perlu mula dengan browser dulu. Dua-dua normal.

Beginner

Browser AI + VSCode + SFA asas.

Intermediate

VSCode terminal + GitHub + deploy.

Advanced

AI IDE / CLI agent + workflow projek.

Privacy / Local

Explore local AI ikut kemampuan machine.

Kemampuan Masing-Masing
05 / 20
Bajet AI Tidak Sama

Subscription mahal bantu limit, tapi tidak ganti cara fikir.

SetupWorkflow Cadangan
Free planBrowser AI + VSCode + GitHub + Cloudflare
Paid AIAI CTO untuk plan, review, debugging lebih selesa
AI IDE / CLIAI Builder bantu edit folder projek dan run workflow
Machine kuatEksperimen local AI, model lokal, kerja offline tertentu
Machine Masing-Masing
06 / 20
Jangan Bebankan Laptop

Pilih workflow ikut machine, bukan ikut hype.

Laptop biasa pun boleh bina dan deploy projek. Tidak perlu tunggu setup sempurna.

“Jangan sampai tool yang kita install lebih berat daripada projek yang kita bina.”

Padanan Machine

  • 1Laptop biasa: Browser AI + VSCode
  • 2Laptop sederhana: VSCode + terminal + GitHub
  • 3Laptop kuat: AI IDE + CLI + local AI
  • 4Internet perlahan: fokus SFA ringan dulu
Idea & Projek Tersendiri
07 / 20
Projek Bermula Dari Masalah

Projek terbaik bukan paling kompleks. Projek terbaik menyelesaikan masalah sebenar.

Pelajar boleh bina projek berbeza, tetapi workflow kelas tetap sama.

Landing Page

Bisnes, kelas, produk, personal brand.

Calculator

Simpanan, quotation, harga, bajet.

Dashboard

Ringkasan data dan visual status.

WhatsApp Lead

Form ringkas terus hantar mesej.

3 Tiers Workflow
08 / 20
Signature Workflow

Owner Projek → AI CTO → AI Builder

Kita tidak serah semua pada AI. Kita susun peranan supaya AI bekerja ikut arah yang betul.

Owner Projek

Manusia tentukan masalah, target user, hasil akhir, dan keputusan utama.

AI CTO

AI bantu susun strategi, MVP, struktur app, risiko, dan checklist.

AI Builder

AI bantu bina code, debug, refactor, polish UI, dan siapkan deploy.

Flow Kerja Kelas
09 / 20
Dari Idea Sampai Live

Satu workflow. Banyak jenis projek.

1IdeaMasalah sebenar
2Owner BriefScope jelas
3AI CTOPlan MVP
4AI BuilderBina SFA
5DeployGitHub + Cloudflare
“Kita tidak terus lompat ke coding. Kita mula dengan brief, plan, build, test, dan deploy.”
Browser / IDE / CLI / Desktop
10 / 20
Setiap Tool Ada Peranan

Jangan guna semua tool untuk semua benda.

Browser AI

Idea, copywriting, plan, review code kecil.

IDE AI

Baca folder projek, edit file, refactor, debug.

CLI AI

Command, Git, setup, error terminal.

Desktop / Local AI

Eksperimen lokal, privacy workflow, offline support.

GitHub
11 / 20
Simpan Code & Portfolio

Kalau projek hanya dalam laptop, ia belum selamat.

GitHub bantu simpan code, track perubahan, backup projek, dan connect ke Cloudflare.

GitHub Digunakan Untuk

  • Simpan code dan files projek
  • Track perubahan melalui commit
  • Backup projek online
  • Bina portfolio public
  • Sumber deploy untuk Cloudflare Pages
Cloudflare
12 / 20
Publish Ke Internet

Matlamat kelas: projek boleh dibuka orang melalui live link.

Cloudflare Pages sesuai untuk publish SFA static dengan plan percuma.

1Connect GitHubPilih repository projek
2Set BuildStatic HTML / no framework
3DeployDapat URL pages.dev
Projek Sesuai
13 / 20
Mulakan Dengan Versi Kecil

Jangan bina sistem besar dulu. Bina versi yang boleh siap.

Business Landing PageLink-in-BioGold CalculatorWhatsApp Lead FormDashboard RingkasQuotation GeneratorInvoice RingkasContent PlannerProduct CatalogEvent PagePersonal Portfolio
“Projek yang siap lebih bernilai daripada idea yang nampak hebat.”
Tips & Trick 1
14 / 20
Prompt Yang Lebih Selamat

Jangan terus suruh AI coding.

Mula dengan AI CTO. Biar AI semak idea dan scope dulu sebelum masuk code.

Act as my AI CTO. Review this project idea first. Simplify it into a realistic MVP. Remove unnecessary features. Create a step-by-step build plan.
“Kalau arahan kita kabur, code AI pun akan kabur.”
Tips & Trick 2
15 / 20
Kawal Scope

Minta MVP sahaja. AI suka tambah benda.

Untuk kelas pertama, fokus Version 1. Jangan campur database, auth, payment, admin panel kalau belum perlu.

Ayat Prompt Berguna

  • Build Version 1 only.
  • Avoid extra features.
  • Keep everything in one index.html.
  • Do not add backend.
  • Make the smallest useful version.
Tips & Trick 3
16 / 20
Debug Tanpa Rosakkan Projek

Debug perlu kecil, tepat, dan terkawal.

Jangan bagi AI rombak semua code hanya sebab satu button tidak berfungsi.

I have this bug: [explain bug] Expected behavior: [what should happen] Actual behavior: [what happens] Please identify the cause first. Then suggest the smallest safe fix. Do not rewrite the whole app.
Tips & Trick 4
17 / 20
Safety & Review

AI boleh bantu, tapi jangan percaya 100%.

Sebelum deploy, semak code, link, data private, console error, dan responsive design.

Jangan Buat

  • ×Commit API key
  • ×Run command pelik
  • ×Upload data pelanggan
  • ×Deploy tanpa test

Buat Ini

  • Commit sebelum ubah besar
  • Minta AI explain plan
  • Guna QA checklist
  • Test di phone
Tips Trainer
18 / 20
Tips Praktikal

Jangan ajar semua benda.
Ajar sampai pelajar boleh buat.

Untuk kelas premium, fokus paling kuat ialah demo, ulang workflow, dan bantu pelajar siapkan hasil kecil yang boleh dibuka online.

“Pelajar tak perlu kagum dengan tool. Pelajar perlu nampak jalan kerja yang boleh mereka ulang sendiri.”

Tips Bawa Kelas

  • Demo satu flow penuh dulu: idea → code → GitHub → Cloudflare.
  • Ulang konsep Owner → AI CTO → AI Builder setiap sesi.
  • Hadkan feature supaya projek cepat siap.
  • Setiap pelajar mesti ada link live, bukan hanya file dalam laptop.
  • Bila error berlaku, jadikan itu bahan belajar debugging.
Penutup Praktikal
19 / 20
Action Selepas Kelas

Ilmu AI hanya jadi kuat bila terus digunakan.

Selepas kelas, pelajar perlu ulang workflow yang sama untuk projek kecil lain. Bukan tukar tool setiap hari.

Komitmen 7 Hari

  • Hari 1: pilih satu idea kecil.
  • Hari 2: tulis Owner Brief.
  • Hari 3: minta AI CTO susun MVP.
  • Hari 4–5: bina dengan AI Builder.
  • Hari 6: push GitHub.
  • Hari 7: deploy Cloudflare dan share link.

Ayat Penutup Trainer

“Kita bukan sedang belajar coding semata-mata. Kita sedang belajar cara bina produk digital dengan bantuan AI, ikut pace dan kemampuan sendiri.”

Penutup
20 / 20
Closing Message

AI bukan boss.
Kita boss.

Manusia tentukan arah. AI CTO susun strategi. AI Builder bantu bina. GitHub simpan code. Cloudflare publish projek.

Ulang Dalam Kelas

  • Jangan kejar tool. Kejar workflow.
  • Jangan bina besar. Bina sampai siap.
  • Owner buat keputusan.

Matlamat Akhir

  • Projek siap
  • Repo GitHub ada
  • Website live di Cloudflare