Lembar Panduan · Lovable AI Development Platform

Bekerja seperti Product Team lengkap di dalam Lovable.

Rangkuman gabungan antara aturan proyek (Project Guiding) yang sudah ditetapkan tim, dan dokumentasi resmi docs.lovable.dev. Geser saklar di bawah untuk memahami dua mode inti yang menjadi fondasi seluruh alur kerja ini.

PLAN
Plan Mode

Berpikir, eksplorasi, dan validasi ide dulu. Tidak ada kode yang diubah. 1 pesan = 1 kredit.

LEMBAR 00

Ringkasan & Prinsip Kerja

Identitas peran yang harus dijalankan Lovable dalam proyek ini, dan aturan global yang berlaku di setiap sesi — sebelum satu baris kode pun ditulis.

Peran gabungan

🧭 Product Manager

Menyusun prioritas & validasi kebutuhan sebelum eksekusi.

🔍 UX Researcher

Riset kompetitor, pengguna, dan pola interaksi.

📈 SEO Specialist

Riset kata kunci, struktur konten, dan optimasi mesin pencari.

🎨 UI/UX Designer

Hierarki visual, keterbacaan, dan sistem desain.

🛠️ Frontend Engineer

Implementasi komponen yang reusable dan konsisten.

🏗️ Technical Architect

Keputusan struktur data, integrasi, dan skalabilitas.

📣 Growth Marketer

Funnel konversi, CTA, dan strategi distribusi konten.

🛡️ Guardian Arsitektur

Menjaga agar fitur lama tidak pernah rusak oleh fitur baru.

Aturan Global (wajib dicek sebelum implementasi)

  • Analisis struktur proyek yang sudah ada
  • Deteksi komponen & kode yang bisa dipakai ulang (reusable)
  • Deteksi design system yang berlaku saat ini
  • Deteksi konfigurasi SEO yang sudah berjalan
  • Deteksi layout responsive di semua breakpoint
  • Deteksi integrasi pihak ketiga yang aktif
  • Deteksi bottleneck performa yang sudah ada
  • Susun rencana implementasi tertulis
  • Tunggu persetujuan sebelum perubahan besar dilakukan
“Jangan pernah merusak fitur yang sudah berjalan. Jangan mengganti arsitektur yang sudah bekerja. Implementasikan fitur satu per satu.” — Global Rules, Project Guiding.
LEMBAR 01

Plan Mode vs Agent Mode

Dua mode ini adalah jantung dari cara kerja Lovable. Aturan proyek menegaskan: selalu utamakan Plan Mode sebelum Agent Mode. Berikut detail resmi dari dokumentasi.

🧠 Plan Mode Berpikir

Mode perencanaan & penalaran. Lovable dapat membaca file, log, dan konteks proyek, lalu mengajukan pertanyaan klarifikasi — tanpa mengubah kode sama sekali.

Kapan dipakai: eksplorasi ide fitur, investigasi bug dengan aman, membandingkan pendekatan, merancang arsitektur/skema database.

Biaya: setiap pesan memotong 1 kredit. Plan tersimpan di .lovable/plan.md setelah disetujui.

⚙️ Agent Mode Eksekusi

Mode eksekusi otonom. Setelah plan disetujui, Lovable langsung mengimplementasikan lintas file, memverifikasi hasil, dan menampilkan file diff.

Kapan dipakai: implementasi fitur yang sudah disepakati, perbaikan bug end-to-end, refactor lintas file dengan guardrail yang jelas.

Biaya: usage-based — tergantung jumlah file, kompleksitas logika, dan pemakaian tools verifikasi.

Pola prompt yang disarankan

Plan Mode

"Investigasi dulu, jangan tulis kode. Berikan 3 opsi cara menyelesaikan [masalah] beserta trade-off-nya."

Agent Mode

"Tambahkan fitur di @src/pages/dashboard. Jangan ubah @src/shared/Layout.tsx atau logika autentikasi."

LEMBAR 02

Alur Kerja 12 Langkah (Agent Workflow)

Klik tiap langkah untuk menandainya sebagai selesai dan memantau progres eksekusi fitur.

01

Riset

Pahami kebutuhan, kompetitor, dan konteks sebelum menyentuh kode.

Tandai
02

Plan Mode

Susun pendekatan, ajukan pertanyaan, dapatkan kejelasan arah.

Tandai
03

Review kode yang sudah ada

Cek komponen, pola, dan struktur folder yang relevan.

Tandai
04

Pecah jadi tugas kecil

Hindari mengerjakan 5 hal sekaligus dalam satu prompt.

Tandai
05

Implementasikan satu fitur

Beralih ke Agent Mode untuk eksekusi terarah.

Tandai
06

Uji (Test)

Jalankan verifikasi per role/pengguna sebelum lanjut.

Tandai
07

Optimasi

Rapikan performa dan kualitas kode hasil implementasi.

Tandai
08

Review SEO

Pastikan metadata, heading, dan schema terpasang.

Tandai
09

Review Mobile

Cek semua breakpoint dari 320px hingga 1920px.

Tandai
10

Review Performa

Ukur Core Web Vitals sebelum dianggap selesai.

Tandai
11

Dokumentasi

Catat keputusan & alasan di Knowledge file proyek.

Tandai
12

Commit

Pin versi stabil agar mudah dikembalikan bila diperlukan.

Tandai
LEMBAR 03

Riset Sebelum Implementasi

Sebelum membangun atau mengubah halaman apa pun, evaluasi tujuh aspek berikut — dan jangan pernah mendesain ulang semuanya sekaligus.

👁️ Kesan pertama

Apa yang dilihat pengguna dalam 3 detik pertama?

🧩 Kejelasan & hierarki visual

Apakah urutan informasi mudah diikuti mata?

📖 Keterbacaan

Kontras, ukuran font, dan jarak antar baris.

🎯 Visibilitas CTA

Apakah tombol aksi utama langsung terlihat?

📱 Pengalaman mobile

Apakah semua elemen nyaman disentuh di layar kecil?

♿ Aksesibilitas

Kontras warna, navigasi keyboard, alt text.

Referensi benchmark SaaS modern

StripeLinearNotionVercel CloudflareFramerSupabaseCursorLovable
LEMBAR 04

Optimasi Landing Page — Diurutkan Berdasarkan Dampak

Perbaikan tidak pernah dilakukan sekaligus. Saring rekomendasi berikut per level dampak, lalu kerjakan section demi section.

Perjelas value proposition di hero section — 1 kalimat, tanpa jargonHero
Pastikan CTA utama terlihat tanpa scroll (above the fold)CTA
Perbaiki Core Web Vitals (LCP & CLS) yang memperlambat first impressionPerforma
Tambahkan trust section: logo klien, jumlah pengguna, sertifikasiTrust
Susun FAQ berbasis pertanyaan riil calon pelangganFAQ
Rapikan navigasi agar tidak lebih dari 5-6 item utamaNavigasi
Tambahkan micro-animation pada hover CTA sekunderAnimasi
Perbarui copy footer dan tautan sosialFooter
Uji ulang urutan testimonialSosial proof
LEMBAR 05

Riset Kata Kunci & Optimasi SEO/GEO/AEO

Setiap halaman yang dibangun lewat Lovable wajib memenuhi checklist ini sebelum dianggap "SEO-ready" — termasuk untuk mesin jawab berbasis AI.

Klaster riset kata kunci

Primary

Kata kunci inti bisnis.

Secondary

Variasi pendukung topik utama.

Long-tail

Frasa panjang, intent spesifik.

Question

Berbasis pertanyaan pengguna.

Transactional

Siap membeli/mendaftar.

Commercial

Membandingkan opsi.

Local

Konteks lokasi (mis. Batam).

Brand

Nama organisasi/produk.

Checklist on-page wajib per halaman

  • SEO Title & Meta Description unik
  • Canonical URL
  • Open Graph & Twitter Card
  • Structured Data (Organization, Article, FAQ, Breadcrumb)
  • Alt text pada semua gambar
  • HTML semantik & hierarki heading yang benar
  • Internal linking & external linking relevan

Optimasi untuk mesin pencari AI (GEO / AEO / LLM)

Konten dioptimasi agar mudah dikutip oleh Google, Bing, ChatGPT, Claude, Gemini, dan Perplexity — bukan hanya mesin pencari tradisional.

GEO

Generative Engine Optimization — struktur jawaban yang jelas dan bisa dikutip AI.

AEO

Answer Engine Optimization — format Q&A langsung menjawab pertanyaan.

LLM Optimization

Konten terstruktur, ringkas, dan bebas ambiguitas untuk model bahasa.

LEMBAR 06

Integrasi Platform

Berdasarkan dokumentasi resmi, Lovable membagi integrasi menjadi tiga kategori berbeda. Pilih tab untuk melihat detail masing-masing.

Menambahkan kapabilitas ke aplikasi yang sudah publish. Dikonfigurasi sekali di level workspace oleh admin, lalu bisa dipakai lintas proyek.

Lovable CloudLovable AIStripeSupabase SlackHubSpotGoogle MapsShopify TwilioResendSalesforceWordPress.com

Kredensial disimpan aman lewat gateway — tidak pernah terekspos di kode proyek. Batas standar: 1.000 request/menit per konektor per proyek.

Memberi konteks saat proses membangun — hanya dipakai selama sesi chat, tidak pernah ikut ter-deploy ke aplikasi akhir. Bersifat personal per pengguna.

LinearNotionJira & ConfluenceMiro n8nPostHogSanityCustom MCP Server

Cocok untuk menarik data riil (dokumen, tiket, papan diagram) agar aplikasi yang dibangun benar-benar merefleksikan workflow organisasi.

Lovable bisa mengintegrasikan API apa pun, publik maupun privat.

Tanpa autentikasi

Aplikasi memanggil API langsung. Cukup beri tahu Lovable endpoint-nya.

Dengan autentikasi

Lovable mengaktifkan Cloud, menyimpan API key sebagai secret, lalu membuat Edge Function agar kredensial tidak pernah terekspos.

LEMBAR 07

Mobile First Design & Quick Share

Selalu desain dari layar terkecil dulu. Coba tiap breakpoint di bawah ini.

320px

Checklist Mobile

  • Touch target minimal 44x44px
  • Navigasi mudah dijangkau ibu jari
  • Form & tabel dapat discroll horizontal dengan nyaman
  • Skeleton loading & lazy loading gambar aktif
  • Dark mode & safe area (notch) diperhitungkan

Quick Share — kanal wajib didukung

FacebookInstagramThreadsLinkedIn TikTokWhatsAppTelegramX EmailCopy LinkQR Code
LEMBAR 08

Performa & Core Web Vitals

Target ambang batas yang baik ("good") menurut standar Core Web Vitals — selalu prioritaskan optimasi berdampak paling tinggi terlebih dahulu.

LCP
< 2.5s
Largest Contentful Paint
INP
< 200ms
Interaction to Next Paint
CLS
< 0.1
Cumulative Layout Shift
TTFB
< 0.8s
Time to First Byte

Area yang selalu diperiksa

Bundle sizeUnused CSS/JSOptimasi gambar Font loadingCacheCDN
LEMBAR 09

Deliverables Wajib Setiap Tugas

Setiap permintaan fitur — sekecil apa pun — idealnya menghasilkan struktur dokumentasi berikut sebelum dianggap tuntas.

1. Executive Summary

Ringkasan satu paragraf untuk stakeholder non-teknis.

2. Problem Analysis

Akar masalah, bukan sekadar gejala.

3. Riset

Data pendukung keputusan.

4. Rekomendasi

Opsi terurut berdasarkan dampak.

5. Rencana Implementasi

Langkah konkret & urutan kerja.

6. Risk Assessment

Apa yang bisa gagal, dan mitigasinya.

7. Priority Matrix

Dampak vs kompleksitas.

8. Estimasi Kompleksitas

Perkiraan usaha/waktu.

9. Testing Checklist

Skenario uji per peran pengguna.

10. Rollback Strategy

Cara kembali ke versi stabil.

11. Future Improvements

Catatan untuk iterasi berikutnya.

LEMBAR 10

Best Practice Resmi dari Dokumentasi Lovable

Sepuluh praktik ini diambil langsung dari docs.lovable.dev/tips-tricks/best-practice — klik tiap poin untuk membaca detailnya.

1. Gunakan Knowledge File sebagai fondasi+
Knowledge file dikirim di setiap prompt dan membantu AI memahami konteks penuh proyek: visi produk, user journey, fitur kunci, design system, dan perilaku per role. Bisa di-generate otomatis lewat Plan Mode dengan perintah: "Generate knowledge for my project at T=0 based on the features I've already implemented."
2. Prompt yang jelas & spesifik+
Sebutkan halaman spesifik (mis. /dashboard), gunakan bahasa natural, sertakan screenshot untuk bug, beri guardrail eksplisit ("jangan sentuh file X"), dan pecah pekerjaan besar menjadi bagian kecil yang bisa diuji satu per satu.
3. Pakai Plan Mode sesering mungkin+
Sebagian pengguna menghabiskan 60-70% waktu di Plan Mode, dan baru klik "Implement the plan" saat benar-benar yakin. Alihkan ke Plan Mode setelah 2-3 kali percobaan "Try to Fix" gagal.
4. Hati-hati dengan Supabase+
Supabase tidak revert dengan bersih — jika versi dikembalikan, skema database berisiko rusak. Sambungkan Supabase setelah frontend stabil, dan selalu uji fitur yang terhubung database sebelum publish.
5. Manfaatkan Visual Edit+
Gratis dan cepat untuk mengubah teks, warna, font, dan tata letak kecil — tanpa memakai kredit, dan tetap bisa di-undo.
6. Kelola versi lewat GitHub+
Setiap edit adalah commit. Pin versi yang stabil setelah fitur berhasil. Bandingkan versi secara visual saat menemukan bug: "Compare version at T-1 to T-0. What changed?"
7. Gunakan Remix saat mentok+
Remix membuat salinan bersih proyek dari T=0. Berguna saat terjebak loop bug atau ingin melepas Supabase dan mencoba pendekatan baru. Perlu memutus koneksi Supabase terlebih dahulu.
8. Tetap tenang & sabar+
5% terakhir dari sebuah build biasanya paling lambat namun paling penting. Ambil waktu untuk menyusun prompt, cek ulang semuanya, dan pecah pekerjaan menjadi bagian kecil yang bisa diuji.
9. Manfaatkan dokumentasi & komunitas+
docs.lovable.dev berisi walkthrough, template, dan tips SEO. Komunitas Discord tersedia untuk dukungan sesama pengguna.
10. Tips tambahan+
Gunakan dikte suara untuk prompt panjang, cek ulang semua role setelah perubahan besar, simpan versi stabil sebagai fallback, dan buat komponen khusus per role agar logika tidak tercampur ("jangan reuse komponen bersama tanpa scope yang jelas").
LEMBAR 11

Modul Tambahan untuk Stack Astro + Cloudflare + AI

Rekomendasi khusus agar Lovable bekerja penuh seperti Product Team untuk proyek dengan stack Astro Native, Cloudflare, SQLite, media sosial, AI, dan SEO.

🤖 AI Content & GEO

Setiap halaman ramah dikutip ChatGPT, Gemini, Claude, dan Perplexity.

📊 CRO

A/B testing CTA, heatmap, funnel, dan trust signal.

📱 Social Auto Publish

Facebook, Instagram, LinkedIn, TikTok, YouTube, Google Business.

🏷️ Schema.org Automation

JSON-LD dibuat otomatis sesuai tipe halaman.

📈 Analytics & Tracking

GA4, Meta Pixel, LinkedIn Insight, TikTok Pixel, Microsoft Clarity.

♿ WCAG 2.2 & CWV

Pemeriksaan wajib sebelum setiap implementasi disetujui.

Praktik ini selaras dengan rekomendasi resmi Lovable: gunakan Plan Mode untuk perencanaan, pecah pekerjaan menjadi fitur kecil, dan simpan aturan proyek di Knowledge agar hasil tetap konsisten di setiap prompt.