🤖 Vibe Coding

🤖 Panduan Vibe Coding

Cara menggunakan AI Context untuk coding dengan standar perusahaan

Quick Start

1

Download

Context file sesuai kebutuhan

2

Upload

Ke AI Assistant favorit

3

Prompt

Minta AI bantu coding

4

Code!

Sesuai standar perusahaan

📥 Step 1: Download Context File

Pilih dan download context file sesuai dengan role Anda:

Backend Context

Laravel SOP lengkap

~13KB • Markdown

Frontend Context

React/Vue + Tailwind

~16KB • Markdown

🤖 Step 2: Upload ke AI Assistant

Pilih AI Assistant favorit Anda dan upload context file:

ChatGPT

  1. Buka chat.openai.com
  2. Klik icon attachment (📎) di bagian bawah
  3. Pilih file context yang sudah di-download
  4. Tunggu upload selesai, lalu mulai chat!

Claude

  1. Buka claude.ai
  2. Klik "Add content" atau icon plus (+)
  3. Pilih "Upload file" dan select context file
  4. Mulai conversation dengan Claude!

Cursor AI

  1. Copy isi context file
  2. Paste ke file .cursorrules di project root
  3. Cursor akan otomatis gunakan rules ini
  4. Mulai coding dengan Cmd/Ctrl + K!

💬 Step 3: Prompt dengan Benar

Cara bertanya yang baik agar AI menghasilkan code sesuai standar:

Good Prompts ✅

"Berdasarkan context file, buatkan UserController dengan CRUD lengkap"

"Review code ini apakah sudah sesuai standar di context"

"Generate Model User dengan relationships sesuai SOP"

Bad Prompts ❌

"Buatkan user controller" (tidak reference context)

"Cara bikin API?" (terlalu general)

"Bikin yang bagus aja" (tidak specific)

🎯 Template Prompt yang Efektif:

Saya sudah upload [backend/frontend]-context.md.

Tolong [apa yang ingin dibuat/dilakukan].

Pastikan sesuai dengan standar yang ada di context file.

✨ Step 4: Review & Improve

Setelah AI generate code, lakukan review:

Check naming conventions

Apakah semua nama sesuai dengan kamus penamaan?

Verify architecture

Apakah struktur code mengikuti arsitektur yang benar?

Test functionality

Jalankan code dan pastikan berfungsi dengan baik

Ask AI untuk improvement

Jika ada yang kurang, minta AI untuk refactor

Pro Tip:

Jika AI generate code yang tidak sesuai, explicitly mention rule yang dilanggar: "Ini tidak sesuai dengan aturan [nama aturan] di context file. Tolong perbaiki."

🎬 Contoh Use Cases

1. Generate New Feature

"Tolong buatkan fitur user authentication lengkap dengan register, login, logout, dan forgot password. Include Controller, Service, Request, dan Test."

Result: 4 files, production-ready ✨

2. Code Review

"Review code UserController ini. Apakah sudah sesuai dengan standar PSR-12, SRP, dan penamaan di context file?"

Result: Detailed feedback 📋

3. Refactor Legacy Code

"Code ini masih menggunakan pattern lama. Tolong refactor ke arsitektur Controller-Service yang sesuai context file."

Result: Clean architecture 🏗️

4. Learning & Explanation

"Jelaskan kenapa kita menggunakan Service layer berdasarkan context file. Apa manfaatnya?"

Result: Clear explanation 📚