Cara Membuat CRM dengan AI

CRM sederhana lebih mudah dibuat dengan benar jika Anda tidak mencoba memodelkan semua proses penjualan sekaligus. Mulailah dari minimal yang memungkinkan tim melacak hubungan dan langkah berikutnya.

Untuk versi pertama, tentukan:

• Pengguna: hanya Anda, atau tim internal kecil
• Data inti: kontak, perusahaan, deal
• Aksi: buat, edit, cari, filter, tambah catatan
• Tampilan: dashboard, kontak, perusahaan, deal, detail kontak

Tulis apa yang harus dilakukan setiap layar.

Set awal layar yang praktis seperti ini:

• Dashboard: total kontak, deal terbuka, deal yang akan selesai bulan ini
• Kontak: tabel dengan nama, perusahaan, email, telepon, status, tanggal follow-up berikutnya
• Perusahaan: daftar perusahaan dengan industri dan pemilik
• Deal: daftar ala pipeline atau tabel sederhana dengan tahapan dan nilai
• Detail record: catatan, aktivitas terbaru, perusahaan atau deal terkait

Tentukan juga apa yang tidak perlu ada di versi satu. Contoh yang umum adalah sinkronisasi email, sinkronisasi kalender, izin peran, alat impor, dan laporan selain beberapa kartu ringkasan.

AI bisa menulis draft antarmuka yang cukup baik, tetapi aplikasi akan lebih mudah disempurnakan jika struktur datanya jelas sejak awal.

Untuk CRM ringan, jaga skemanya tetap sederhana:

• contacts: id, first_name, last_name, email, phone, company_id, status, next_follow_up, notes
• companies: id, name, industry, website, owner, notes
• deals: id, name, company_id, contact_id, stage, value, expected_close_date, notes

Jika CRM akan digunakan oleh lebih dari satu orang, tambahkan login dan pikirkan field kepemilikan seperti created_by atau assigned_to.

Jika CRM hanya untuk penggunaan internal dan tidak mengenakan biaya ke pelanggan, Anda kemungkinan besar tidak membutuhkan pembayaran. Stripe hanya relevan jika CRM itu sendiri memerlukan akses berbayar, invoice, atau alur checkout.

Ini juga saatnya memilih web atau mobile terlebih dahulu. Sebagian besar pekerjaan CRM lebih mudah ditinjau di desktop, jadi website adalah titik awal yang masuk akal. Di Moremade, website dihasilkan sebagai kode React + Tailwind yang nyata.

Prompt pertama harus menjelaskan produk, layar utama, gaya, dan perilaku. Buat cukup spesifik agar aplikasi yang dihasilkan punya struktur, tetapi jangan terlalu detail sampai Anda menghabiskan waktu lebih lama menulis prompt daripada menguji hasilnya.

Prompt awal yang baik menyebutkan:

• jenis aplikasi
• siapa yang menggunakannya
• entitas utama
• layar-layar yang dibutuhkan
• field yang ditampilkan
• gaya visual
• apakah menggunakan mock data dulu atau langsung terhubung ke data nyata

Contoh prompt pertama:

Build a simple internal CRM web app for a small sales team. Use a clean, professional layout with a left sidebar and top search bar. Create screens for Dashboard, Contacts, Companies, Deals, and a Contact Detail view. Use mock data first. Contacts should include name, company, email, phone, status, and next follow-up date. Companies should include name, industry, website, and owner. Deals should include name, company, contact, stage, value, and expected close date. Add forms to create and edit records, plus search and filter controls. Use React and Tailwind with a practical business UI.

Di Moremade, Anda menjelaskan aplikasi dalam bahasa alami, agen AI menulis source code, dan Anda bisa langsung meninjau preview live.

Versi pertama biasanya masih draf, bukan bentuk final. Kebiasaan yang berguna adalah mengubah satu area pada satu waktu: layout, kolom tabel, form, navigasi, atau detail record.

Moremade menyediakan live preview, visual inspector untuk menunjuk elemen dan mengubahnya, serta code view. Itu memudahkan Anda memperketat UI tanpa menulis ulang brief secara keseluruhan.

Gunakan prompt lanjutan yang singkat dan spesifik. Contohnya:

• "Ubah layar Contacts menjadi layout tabel yang lebih padat dengan kolom sortable untuk name, company, status, dan next follow-up date. Pertahankan aksi baris untuk edit dan view."
• "Tambahkan detail drawer saat mengklik baris kontak. Tampilkan notes, perusahaan terkait, deal terkait, dan timeline aktivitas terbaru menggunakan mock entries."
• "Buat halaman Deals menjadi kanban board dengan kolom Lead, Qualified, Proposal, Negotiation, dan Won. Pertahankan toggle tabel untuk pengguna yang lebih suka tampilan daftar."

Beberapa pemeriksaan praktis pada tahap ini:

• Apakah label konsisten di semua layar?
• Apakah form create dan edit memakai nama field yang sama?
• Apakah Anda bisa mencari berdasarkan orang dan perusahaan?
• Apakah informasi penting terlihat tanpa membuka setiap record?
• Apakah aplikasinya terasa seperti alat internal, bukan situs marketing?

Jika ada yang salah di satu komponen, minta koreksi yang spesifik untuk bagian itu saja, bukan meminta rebuild total.

Setelah versi mock data terasa pas, hubungkan data nyata. Moremade memiliki connector bawaan untuk Supabase, yang mencakup database, sign-in, dan penyimpanan file.

Untuk sebagian besar CRM, Supabase adalah langkah logis berikutnya karena Anda membutuhkan record yang persisten dan biasanya juga bentuk autentikasi.

Pada tahap ini, minta:

• tabel Supabase untuk contacts, companies, dan deals
• form yang terhubung untuk membuat dan memperbarui record
• halaman daftar yang terhubung untuk mengambil data
• sign-in dasar jika akan dipakai oleh lebih dari satu orang
• relasi record, seperti kontak yang принадlies ke perusahaan

Jaga setup auth pertama tetap sederhana. Email/password sering kali sudah cukup untuk CRM internal.

Tambahkan Stripe hanya jika aplikasi Anda benar-benar membutuhkan pembayaran. CRM internal biasanya tidak. Jika Anda membangun CRM untuk klien atau portal berbayar, Moremade bisa menghubungkan checkout Stripe dengan harga yang Anda tentukan, tetapi itu tidak seharusnya menjadi bagian dari build default kecuali ada kebutuhan yang jelas.

Meskipun pengalaman utamanya di desktop, orang tetap akan membuka CRM di ponsel untuk mengecek nomor, memperbarui deal, atau menambah catatan setelah meeting.

Jalankan beberapa tugas realistis di preview:

• menambahkan kontak baru
• mencari perusahaan
• memperbarui tahapan deal
• mengedit tanggal follow-up berikutnya
• membuka halaman detail record dan menambahkan catatan

Di mobile, fokus pada hal-hal dasar:

• navigasi mudah dijangkau
• tabel tidak menjadi sulit dibaca
• aksi penting terlihat tanpa perlu scroll horizontal jika memungkinkan
• form tetap nyaman digunakan dengan sentuhan
• field tanggal dan dropdown mudah diketuk

Jika mobile sangat penting, minta AI menyesuaikan layout untuk layar kecil. Jika nanti Anda membutuhkan aplikasi mobile khusus, Moremade bisa menghasilkan aplikasi React Native (Expo), tetapi banyak tim sebaiknya memvalidasi CRM sebagai web app terlebih dahulu.

Saat aplikasinya sudah layak dipakai, publish. Moremade bisa publish dalam satu klik ke subdomain gratis yourname.moremade.ai. Pada paket berbayar, Anda bisa menghubungkan custom domain, dan domain juga bisa dibeli di dalam Moremade.

Sebelum publish, periksa:

• judul halaman dan label navigasi
• empty state saat tidak ada kontak atau deal
• error state pada form
• apakah data uji masih terlihat
• apakah sign-in diwajibkan untuk data privat

Kesalahan umum yang perlu dihindari:

• Memulai terlalu besar: tim sering meminta pipeline, laporan, izin, impor, dan otomasi pada percobaan pertama. Bangun inti yang bersih dulu.
• Melewatkan model data: jika kontak dan perusahaan tidak didefinisikan dengan jelas, UI akan cepat menjadi tidak konsisten.
• Menggunakan prompt yang samar: frasa seperti "buat lebih baik" menghasilkan hasil yang lebih lemah dibanding menyebut layar dan perubahan yang tepat.
• Menambahkan pembayaran tanpa alasan: Stripe berguna saat dibutuhkan, tetapi banyak CRM tidak memerlukannya.
• Mempublikasikan mock data tanpa sengaja: ganti ke data Supabase nyata sebelum membagikan aplikasi secara internal.

Anda bisa mengekspor source code lengkap sebagai ZIP kapan saja atau mengirimkannya ke GitHub, jadi Anda tidak terkunci hanya pada hosting aplikasi di dalam Moremade.