AI Power Workflow
🚀 Nota pembelajaran beginner

AI Power Workflow Notes for Beginner

Daripada Browser AI ke Projek Live

Jangan kejar tool. Kejar workflow.AI bukan boss. Kita boss.Projek kecil yang live lebih baik daripada sistem besar yang tidak siap.
Lihat WorkflowLihat Peta AlatLihat Jenis HostingLihat Poster

AI Biasa vs AI Power

Perbezaan utama ialah tahap bantuan: daripada jawab soalan kepada bantu menyiapkan projek.

AI Biasa / Browser AI

  • Tanya soalan
  • Minta idea / ayat
  • Minta contoh kod kecil
  • Banyak copy-paste manual
  • Sesuai dalam browser

AI Power

  • Bantu susun workflow
  • Baca folder & fail projek
  • Edit kod dalam IDE
  • Bantu debug & test
  • Bantu sampai projek siap

Workflow Utama

Ikut laluan ringkas ini untuk bergerak daripada idea kepada live link.

Idea Projek
Owner Brief
AI CTO Plan
AI Builder Code
Test dalam IDE / Browser
Push ke GitHub
Deploy ke Cloudflare / Vercel
Share Live Link
Workflow lebih penting daripada tool. Tool boleh berubah, workflow boleh diulang.

Peranan Owner Projek, AI CTO dan AI Builder

👤 Owner Projek

  • Tentukan masalah sebenar
  • Tentukan target user
  • Pilih feature utama sahaja
  • Semak hasil AI
  • Buat keputusan akhir

🧠 AI CTO

  • Semak idea
  • Susun MVP
  • Buang feature tidak perlu
  • Cadang struktur
  • Semak risiko

🛠️ AI Builder

  • Tulis code
  • Debug
  • Refactor
  • Susun UI
  • Bantu deploy

IDE vs CLI

🖥️ IDE

Tempat visual untuk buka folder projek, edit fail dan semak code.

VS CodeAntigravity IDECursorWindsurf

⌨️ CLI

Tempat menaip arahan kepada komputer.

PowerShellTerminalCommand PromptGit Bash

Analogi mudah

  • IDE = bengkel / meja kerja
  • CLI = walkie-talkie / remote control arahan
  • GitHub = stor pelan & rekod version
  • Cloudflare / Vercel = tempat publish projek
IDE tengok & edit. CLI taip & run. GitHub simpan. Cloudflare/Vercel publish.

OpenCode itu apa?

OpenCode bukan IDE utama. OpenCode ialah AI Coding Agent / CLI AI Tool.

Jika IDE ialah bengkel, OpenCode ialah pembantu mekanik AI yang boleh ikut arahan dalam terminal atau IDE.

IDE / Folder Projek→Terminal / PowerShell→OpenCode→Baca fail, debug, cadang fix

Peta Kumpulan Alat

React, Next.js dan Jenis Fail

React

Library JavaScript untuk bina komponen UI yang interaktif.

Next.js

Framework berasaskan React untuk routing, page structure, server rendering dan deployment yang mudah.

Jenis fail

  • .js = JavaScript biasa
  • .jsx = JavaScript + XML/HTML-like syntax untuk React
  • .tsx = TypeScript + JSX
Untuk beginner, tidak wajib mula dengan React/Next.js. Mula dengan single-file index.html dahulu.

Jenis Hosting & Platform

Nota grafik

Galeri Poster

Poster ini merumuskan workflow, peta alat dan jenis hosting.

Klik gambar atau butang untuk buka poster dalam tab baharu.

Swipe untuk lihat poster seterusnya.

Prompt Pack

Prompt ini dikekalkan dalam English supaya mudah disalin ke AI tools. Gunakan butang salin untuk copy.