Vibe Coding dengan Claude: Claude Chat, Claude Code, dan Membangun dari Claude

Vibe coding dengan Claude bisa dilakukan dengan tiga cara. Chat Claude membangun aplikasi satu halaman kecil langsung di percakapan. Claude Code adalah agen yang mengedit proyek nyata di mesinmu atau di cloud, untuk orang yang nyaman dengan codebase. Dan Claude plus pembuat aplikasi lewat MCP memungkinkanmu membangun, melihat pratinjau, dan mempublikasikan aplikasi full-stack dengan database tanpa keluar dari percakapan Claude. Mana yang cocok bergantung pada apa yang kamu bangun dan seberapa banyak pengaturan yang ingin kamu pegang sendiri.

Panduan ini membahas ketiganya, dengan prompt dan batasan masing-masing. Untuk gagasan di balik semuanya, lihat apa itu vibe coding.

Opsi 1: Chat Claude untuk alat kecil

Di aplikasi Claude biasa kamu bisa meminta sesuatu yang interaktif dan Claude menulisnya sebagai kode yang berjalan tepat di samping percakapan: kalkulator, latihan flashcard, game kecil, diagram dari data yang kamu tempel. Kamu mengubahnya dengan membalas.

Prompt yang baik di sini berdiri sendiri:

Buat alat interaktif tempat aku menempel daftar pengeluaran (satu per baris, "jumlah, kategori") dan ia menampilkan diagram lingkaran per kategori serta total. Sertakan daftar contoh agar langsung berfungsi.

Hebat untuk: alat satu halaman cepat yang kamu pakai sendiri atau bagikan sebagai tautan, dan belajar, karena kamu bisa meminta Claude menjelaskan setiap bagian.

Di mana berhenti: alat ini berjalan di dalam lingkungan Claude. Tidak ada database persisten milikmu sendiri, tidak ada akun pengguna, tidak ada domain kustom, dan tidak ada tempat menjalankan server. Saat sebuah ide melampaui satu halaman, kamu butuh salah satu dari dua opsi berikutnya.

Opsi 2: Claude Code untuk codebase nyata

Claude Code adalah agen coding dari Anthropic. Ia bekerja di terminalmu, di editor seperti VS Code dan JetBrains, di aplikasi desktop, dan di web. Kamu memberinya tugas dengan bahasa sehari-hari, lalu ia membaca proyekmu, mengedit file, menjalankan perintah dan tes, dan menunjukkan apa yang berubah. Saat tulisan ini dibuat, ia termasuk dalam paket berbayar Claude dan tersedia lewat API; cek situs Anthropic untuk paket terkini.

Sesi vibe coding yang umum terlihat seperti ini:

Tambahkan halaman /bookings yang mencantumkan booking pengguna saat ini, yang terbaru di atas, dengan tombol batal yang dinonaktifkan kurang dari dua jam sebelum kelas. Pakai helper auth yang ada. Jalankan tes setelah selesai.

Hebat untuk: developer dan founder teknis yang sudah punya proyek, menginginkan kendali penuh atas stack, dan senang menjalankan serta men-deploy sendiri. Ia kuat dalam perubahan multi-file dan mengikuti konvensi yang sudah ada di codebase.

Di mana butuh lebih banyak usaha: kamu butuh setup pengembangan, dan Claude Code tidak meng-host apa pun. Database, secret, deployment, dan domain kamu yang mengaturnya. Untuk perbandingan dengan alat developer lain, lihat Cursor vs Windsurf vs Claude Code.

Kebiasaan yang berhasil dengan Claude Code

• Minta rencana sebelum perubahan besar. "Uraikan langkah dan file yang akan kamu sentuh, lalu tunggu."
• Simpan file catatan proyek. Claude Code membaca file memori proyek (CLAUDE.md) untuk konvensi, jadi kamu tidak mengulanginya.
• Tinjau diff-nya. Bahkan saat vibe coding, lihat sekilas perubahan di area sensitif: autentikasi, pembayaran, apa pun dengan data pengguna.
• Commit sering. Commit kecil memudahkan membatalkan langkah yang salah.

Opsi 3: Bangun dan publikasikan dari Claude dengan Mythex

Jika kamu suka bekerja di Claude tetapi ingin aplikasi sungguhan di akhirnya — database, login, penyimpanan file, URL publik — kamu bisa menghubungkan Claude ke pembuat aplikasi AI lewat MCP, protokol yang memungkinkan Claude memakai alat yang di-host di tempat lain. (Apa itu MCP menjelaskannya dengan bahasa sederhana.)

Mythex menjalankan server MCP. Setelah terhubung, Claude bisa membuat proyek Mythex, menulis kode di sandbox cloud privat, memulai pratinjau langsung, memasang database dan penyimpanan file, serta mempublikasikan aplikasi. Setiap hasil menyertakan tautan untuk menonton proyek secara langsung di Mythex.

Cara menghubungkan

1. Di Mythex, buka Pengaturan akun dan salin URL MCP: https://mcp.mythex.ai/mcp.
2. Di Claude, buka Settings → Connectors → Add custom connector, tempel URL, dan klik Connect.
3. Halaman Mythex terbuka. Masuk jika perlu dan pilih Allow access. Tidak ada kunci API yang perlu disalin.
4. Kembali di Claude, minta apa yang kamu inginkan.

Siapa pun bisa menghubungkan di paket apa pun; alat sandbox memerlukan Mythex Pro ($25 per bulan). Penggunaan Claude tetap di paket Claude-mu, dan waktu sandbox, pratinjau, dan hosting berasal dari kredit Mythex-mu. Panduan lengkapnya ada di membangun aplikasi Mythex dari Claude, Cursor, atau Codex.

Prompt pertama untuk dicoba

Pakai Mythex, buat proyek baru: CRM sederhana untuk studio desain kecilku. Kontak dengan nama, perusahaan, email, telepon, tahap (lead, aktif, lampau), dan catatan. Tampilan papan menurut tahap tempat aku bisa menyeret kontak antarkolom, dan kotak pencarian. Tambahkan database agar data bertahan, dan login agar hanya aku yang bisa melihatnya. Mulai pratinjau dan kirim tautannya saat sudah berjalan.

Lalu iterasi di percakapan yang sama, satu perubahan dalam satu waktu:

Di proyek Mythex, tambahkan tanggal "tindak lanjut berikutnya" pada kontak dan daftar di layar beranda berisi tindak lanjut yang jatuh tempo minggu ini. Periksa di pratinjau.

Publikasikan CRM dan beri aku URL live-nya.

Hebat untuk: orang yang paling nyaman berpikir di Claude dan ingin hasilnya ter-host, dengan database, tanpa menyiapkan server. Kamu juga bisa berpindah: mulai di Claude dan lanjutkan di chat Mythex, atau sebaliknya, karena itu proyek yang sama.

Mana yang sebaiknya kamu pakai?

Tips prompting yang lebih penting dengan Claude

Claude mengikuti instruksi rinci dengan ketat, yang bisa berarti dua arah.

• Sebut apa yang tidak boleh diubah. "Pertahankan tata letak dan warna; hanya ubah validasi formulir."
• Beri definisi selesai. "Selesai berarti kontak baru tersimpan, muncul di papan, dan bertahan setelah refresh."
• Minta ia memeriksa kerjanya. Di Claude Code itu berarti menjalankan tes; dengan Mythex berarti memeriksa pratinjau langsung atau menjalankan tes browser.
• Minta penjelasan dengan kata-kata biasa saat kamu tidak mengikuti suatu perubahan. Itu cara tercepat memahami apa yang dilakukan aplikasimu.

Contekan prompt vibe coding kami punya 30 prompt yang berfungsi di ketiga setup itu.

Catatan keamanan untuk ketiganya

• Jangan tempel kunci API atau kata sandi asli ke percakapan Claude. Dengan Mythex, secret masuk ke pengaturan secret proyek, dan Claude bisa melihat namanya tetapi tidak nilainya.
• Periksa siapa yang bisa melihat apa sebelum publikasi. "Bisakah pengguna yang login membuka data pengguna lain?" adalah pertanyaan pertama.
• Tinjau kode sensitif. Claude adalah koder yang mumpuni, tetapi vibe coding berarti kamu tidak membaca setiap baris, jadi pilih baris yang penting. Lihat apakah vibe coding aman?.

Jika kamu juga memakai ChatGPT, panduan pendampingnya membahas vibe coding dengan ChatGPT dan Codex. Dan jika ingin melewati semua setup, buka pembuat aplikasi AI dan jelaskan aplikasimu di sana.

Pertanyaan