Vibe coding adalah pendekatan membuat aplikasi dengan bantuan AI coding assistant. Kita menjelaskan fitur dan kebutuhan aplikasi menggunakan bahasa natural, kemudian AI membantu membuat kode, memperbaiki error, melakukan refactoring, dan mengembangkan fitur.

Salah satu tool yang banyak digunakan untuk workflow ini adalah Cursor AI.

Dalam tutorial ini, kita akan membahas cara menggunakan Cursor untuk membangun aplikasi SaaS (Software as a Service) dari tahap ide sampai aplikasi siap digunakan.

Catatan: Vibe coding bukan berarti programmer tidak perlu memahami kode. AI dapat membantu menulis kode, tetapi developer tetap perlu memahami struktur aplikasi, database, keamanan, testing, dan deployment.

Apa Itu Vibe Coding?

Vibe coding adalah metode pengembangan software dengan memberikan instruksi kepada AI menggunakan bahasa natural.

Contohnya, daripada menulis seluruh kode secara manual, kita dapat memberikan instruksi seperti:

Buatkan halaman login menggunakan Laravel Blade. User dapat login menggunakan email dan password. Gunakan validasi Laravel dan tampilkan pesan error jika login gagal.

AI kemudian dapat membuat struktur kode yang diperlukan.

Workflow sederhananya:

Ide → Prompt → AI membuat kode → Test → Perbaiki error → Review → Deploy

Pendekatan ini sangat berguna untuk membuat MVP, prototype, internal tools, dashboard, dan SaaS sederhana.

Apa Itu Cursor AI?

Cursor adalah code editor berbasis AI yang dirancang untuk membantu developer menulis dan memahami kode.

Cursor dapat digunakan untuk:

• Membuat kode baru

• Menjelaskan kode

• Mencari penyebab error

• Refactoring

• Membuat fitur baru

• Membaca struktur project

• Membuat dan memperbaiki file

• Membantu membuat database migration

• Membuat API

• Membuat unit test

• Membantu dokumentasi

Kelebihan utama Cursor dalam pengembangan SaaS adalah AI dapat bekerja dengan konteks project, bukan hanya satu potongan kode.

Apa yang Akan Kita Buat?

Sebagai contoh, kita akan membuat SaaS sederhana bernama TaskFlow.

TaskFlow merupakan aplikasi manajemen tugas untuk bisnis kecil.

Fitur MVP:

• Registrasi user

• Login

• Dashboard

• Workspace

• Project

• Task

• Status task

• Member

• Role user

• Subscription

• Billing

• Profile

• API

• Admin dashboard

Struktur sederhananya:

User
 └── Workspace
      ├── Members
      ├── Projects
      │    └── Tasks
      └── Subscription

Dengan struktur tersebut, project sudah memiliki fondasi yang cukup untuk dikembangkan menjadi SaaS.

1. Tentukan Ide SaaS Sebelum Membuka Cursor

Kesalahan yang sering terjadi saat menggunakan AI adalah langsung meminta:

Buatkan aplikasi SaaS untuk saya.

Prompt seperti ini terlalu luas.

AI membutuhkan requirement yang lebih jelas.

Sebelum mulai coding, tentukan minimal:

Target pengguna

Contoh:

TaskFlow ditujukan untuk UMKM dan tim kecil yang membutuhkan aplikasi manajemen pekerjaan.

Masalah yang diselesaikan

Contoh:

Banyak tim kecil masih menggunakan WhatsApp untuk membagi tugas sehingga status pekerjaan sulit dipantau.

Fitur utama

Contoh:

• Workspace

• Project

• Task

• Member

• Role

• Dashboard

• Subscription

Model bisnis

Contoh:

Free
Rp0/bulan

Pro
Rp99.000/bulan

Business
Rp299.000/bulan

Dengan requirement tersebut, AI mempunyai konteks yang jauh lebih jelas.

2. Buat Project Laravel

Untuk contoh ini kita menggunakan Laravel.

Buat project baru:

composer create-project laravel/laravel taskflow

Masuk ke directory:

cd taskflow

Kemudian jalankan:

php artisan serve

Buka:

http://127.0.0.1:8000

Setelah project berjalan, buka folder tersebut menggunakan Cursor.

3. Buat File Instruksi untuk AI

Salah satu cara membuat hasil dari AI lebih konsisten adalah memberikan aturan project.

Misalnya buat file:

AGENTS.md

atau file instruksi yang sesuai dengan workflow Cursor yang digunakan.

Contohnya:

# Project Instructions

Project: TaskFlow SaaS

Stack:
- Laravel
- PHP
- MySQL
- Blade
- Tailwind CSS

Rules:
- Follow Laravel conventions.
- Use migrations for database changes.
- Use Form Request for validation.
- Use Policies for authorization.
- Do not put business logic directly inside controllers.
- Use service classes for complex business logic.
- Use Eloquent relationships.
- Write maintainable and readable code.
- Do not introduce unnecessary packages.
- Never remove existing functionality without confirmation.
- Before modifying a feature, inspect the existing implementation.
- Security is mandatory.

Tujuan file ini adalah memberikan aturan yang harus diikuti AI selama pengembangan.

4. Jangan Membuat Seluruh SaaS Sekaligus

Ini merupakan salah satu prinsip penting dalam vibe coding.

Jangan memberikan prompt:

Buatkan seluruh aplikasi SaaS TaskFlow lengkap dengan database, dashboard, billing, API, admin, subscription dan deployment.

Hasilnya sering kali terlalu besar dan sulit diperiksa.

Lebih baik pecah menjadi beberapa tahap.

Contohnya:

Phase 1
Authentication

Phase 2
Workspace

Phase 3
Project

Phase 4
Task management

Phase 5
Team member

Phase 6
Subscription

Phase 7
Billing

Phase 8
Admin

Phase 9
API

Phase 10
Security and testing

Dengan cara ini, setiap perubahan lebih mudah diperiksa.

5. Gunakan Prompt yang Spesifik

Contoh prompt untuk membuat authentication:

Implement authentication for this Laravel SaaS application.

Requirements:
- User registration
- Login
- Logout
- Password hashing
- Session authentication
- Validation
- Login rate limiting
- Redirect authenticated users to dashboard
- Redirect guests to login page

Before coding:
1. Inspect the current Laravel project structure.
2. Check whether authentication already exists.
3. Reuse existing components where possible.
4. Do not overwrite unrelated functionality.

After implementation:
- List all files created or modified.
- Explain the database changes.
- Check for obvious security issues.

Prompt seperti ini jauh lebih mudah dikontrol.

6. Minta AI Membuat Database Schema

Sebelum membuat UI, minta AI memahami database.

Contohnya:

Design the database structure for TaskFlow.

Entities:
- users
- workspaces
- workspace_members
- projects
- tasks
- subscriptions
- plans

Requirements:
- One user can belong to multiple workspaces.
- One workspace can have multiple members.
- One workspace can have multiple projects.
- One project can have multiple tasks.
- Tasks belong to users as assignees.
- Workspace members must have roles.
- Add proper foreign keys and indexes.

First explain the proposed relationships.
Do not create migrations yet.

Ini penting karena AI dapat terlebih dahulu memberikan desain sebelum mengubah database.

Setelah struktur disetujui, baru minta:

Now create the Laravel migrations based on the approved database design.

Do not modify unrelated migrations.
Use foreign keys, indexes and appropriate nullable constraints.

7. Gunakan AI untuk Membuat Fitur Secara Bertahap

Misalnya kita ingin membuat Project Management.

Prompt:

Implement project management.

Requirements:
- User can create projects.
- User can edit projects.
- User can archive projects.
- User can view projects inside their w