Saya Mencoba 5 Alat Vibe Coding sebagai Non-Coder. Inilah Pengalaman Jujur Saya.
Pernahkah Anda memiliki ide aplikasi yang brilian, hanya untuk teringat bahwa Anda tidak tahu apa-apa tentang coding? Itu sudah menjadi kenyataan saya selama bertahun-tahun. Sebagai penulis konten, saya penuh dengan ide, tetapi sisi teknis untuk mewujudkannya selalu terasa di luar jangkauan.
Semua itu berubah ketika saya menemukan "vibe coding". Ini adalah janji bahwa Anda dapat membangun perangkat lunak hanya dengan menjelaskan apa yang Anda inginkan dalam bahasa Inggris yang sederhana. Kedengarannya seperti mimpi. Bisakah saya benar-benar membangun situs web tanpa menulis satu baris kode pun? Saya harus mencari tahu.
Saya memilih lima alat vibe coding yang paling banyak dibicarakan dan mengujinya. Tantangan saya sederhana: membangun situs web portofolio pribadi dengan gaya kreatif yang sangat spesifik. Saya tidak tertarik pada template generik; saya ingin melihat apakah alat AI ini benar-benar dapat memahami dan mengeksekusi visi kreatif.
Ini adalah kisah eksperimen saya. Ini bukan penyelaman teknis yang mendalam, tetapi catatan jujur dari seorang non-coder yang hanya ingin melihat apakah keajaibannya nyata. Inilah yang terjadi.
Prompt Persis yang Saya Gunakan untuk Setiap Alat
Untuk membuat pengujian ini adil, saya menggunakan prompt yang sama persis untuk kelima alat tersebut:
"Bangunkan saya situs web portofolio pribadi untuk seorang penulis konten. Sertakan halaman beranda dengan bio saya, halaman yang menampilkan contoh tulisan saya, dan formulir kontak. Untuk desainnya, saya ingin gaya pop art / abstrak yang terasa playful dan kreatif. Gunakan warna-warna berani dan cerah tetapi pastikan teksnya masih mudah dibaca. Tambahkan sudut membulat, tipografi yang playful, dan animasi hover yang halus. Tampilannya harus menyenangkan dan energik, bukan membosankan atau korporat."
Mengapa prompt ini? Ini menguji baik fungsionalitas (beberapa halaman, formulir kontak) maupun interpretasi desain (gaya spesifik, warna, animasi). Hal ini memungkinkan saya membandingkan seberapa baik setiap alat mengikuti arahan kreatif.
Apa yang Saya Uji
Elemen Desain | Apa yang Saya Cari |
Gaya Pop Art / Abstrak | Desain yang playful, kreatif, dan energik, bukan template korporat yang membosankan. |
Warna Berani dan Cerah | Palet warna yang terasa menyenangkan dan hidup. |
Keterbacaan Teks | Teks yang mudah dibaca meskipun warnanya berani. |
Sudut Membulat | Tepi yang lembut dan membulat pada elemen seperti tombol dan kontainer. |
Tipografi Playful | Font yang menyenangkan dan kreatif yang sesuai dengan keseluruhan vibe. |
Animasi Hover | Animasi halus saat hover di atas elemen interaktif. |
Beberapa Halaman | Halaman beranda, halaman contoh tulisan, dan halaman kontak. |
Formulir Kontak | Formulir kontak fungsional untuk menerima pesan. |
Putusan Cepat: Peringkat Saya Sekilas
Peringkat | Alat | Keramahan untuk Non-Coder | Akurasi Desain | Putusan Saya |
1 | Lovable | ★★★★★ | ★★★★☆ | Terbaik untuk pemula sejati |
2 | Replit | ★★★★☆ | ★★★☆☆ | All-rounder yang hebat |
3 | Bolt | ★★★★☆ | ★★★☆☆ | Cepat namun tidak konsisten |
4 | Cursor | ★☆☆☆☆ | ☆☆☆☆☆ | Powerful tapi menakutkan untuk non-coder |
5 | Manus | ★★★★★ | ★★★★★ | Akurasi desain terbaik |
#1 Lovable: Yang Benar-Benar Terasa Seperti Sihir
Lovable adalah pembuat aplikasi bertenaga AI yang memungkinkan Anda membuat aplikasi web hanya dengan mendeskripsikan apa yang Anda inginkan. Ini dikenal menghasilkan desain yang indah dan rapi dengan upaya minimal.
Menggunakan Alat dan Menavigasinya
Sejak awal, saya merasa lega dengan Lovable. Antarmukanya bersih dan sangat sederhana, dengan kotak prompt yang menunggu ide saya. Tidak ada tombol membingungkan atau jargon teknis, yang membuatnya terasa mengundang alih-alih menakutkan. Saya menghargai opsi untuk memilih tema warna, tetapi saya tetap menggunakan prompt mentah saya untuk melihat apa yang dapat dilakukan AI sendiri. Bahkan ada opsi dikte suara, yang merupakan tambahan yang penuh perhatian untuk aksesibilitas.
Hasilnya
Hasilnya benar-benar mengesankan. Meskipun bukan replika pop-art yang sempurna, Lovable jelas menangkap suasana berwarna-warni dan menyenangkan yang saya tuju. Ini menyertakan sudut yang membulat dan mencoba tipografi yang menyenangkan, meskipun font untuk judulnya bisa lebih bervariasi, tetapi mungkin dipilih demi kejelasan. Animasi hover pada tombol cukup standar, gerakan kecil saat kursor Anda berada di atasnya, tetapi sekali lagi, tidak ada yang istimewa. Semua halaman yang saya minta ada di sana, dan tata letaknya intuitif. Rasanya seperti situs web yang nyata dan berfungsi, bukan hanya gambar statis. Saya memang memperhatikan beberapa keanehan kecil. Misalnya, logo merek yang dibuatnya hanya dapat diklik pada satu sisi, dan beberapa elemen mirip tombol yang memiliki efek hover, sebenarnya bukan tombol yang dapat diklik, yang sedikit membingungkan. Namun, ini terasa seperti masalah kecil yang kemungkinan dapat diperbaiki dengan prompt lanjutan.
Aplikasi web yang dibuat oleh Lovable:
Seberapa Baik Performanya?
Desain: Berhasil menangkap nuansa warna-warni dan menyenangkan dengan indah, meskipun lebih condong ke 'playful' daripada 'pop-art'. Estetika keseluruhannya rapi dan profesional.
Mengikuti Instruksi: Mengikuti sebagian besar instruksi saya dengan baik, membuat semua halaman yang diperlukan dan menyertakan elemen seperti sudut membulat dan tipografi yang playful. Gaya 'pop-art' yang spesifik hanya terpenuhi sebagian.
Kegunaan: Sangat baik. Antarmukanya sangat intuitif dan sempurna untuk pemula.
Harga: Lovable menawarkan paket gratis dengan kredit harian, dan paket berbayar mulai dari $25/bulan untuk penggunaan lebih banyak.
Putusan Saya sebagai Non-Coder
Tingkat Kesulitan: Seperti memesan pizza yang dibuat sesuai pesanan. Anda memberi tahu apa yang Anda inginkan, dan mereka membuatnya untuk Anda.
Apakah Saya Akan Menggunakannya Lagi? Tentu saja. Jika Anda seorang non-coder yang mencari situs web yang indah dan fungsional tanpa kurva pembelajaran yang curam, Lovable adalah titik awal yang luar biasa. Untuk alat gratis, hasilnya menakjubkan.
#2 Replit: Platform All-in-One yang Melakukan Segalanya
Replit adalah lingkungan pengembangan berbasis browser dengan Agent AI yang dapat merencanakan dan membangun seluruh aplikasi. Ia menangani segalanya mulai dari coding hingga hosting di satu tempat.
Menggunakan Alat dan Menavigasinya
Antarmuka Replit sedikit lebih kompleks dibandingkan Lovable. Sebagai lingkungan pengembangan penuh, ia memiliki banyak tombol dan opsi yang asing bagi saya. Namun, Agent AI menjadi pemandu yang membantu. Ia menyajikan opsi untuk membangun, menguji, atau melakukan iterasi, dan saya dapat memilih antara mode "fast" untuk perubahan cepat atau mode "autonomous" untuk pengalaman Agent penuh. Saya memilih mode autonomous untuk melihat potensi penuhnya.
Hasilnya
Situs web yang dihasilkan Replit cukup lumayan. Berwarna-warni dan memiliki sudut membulat yang saya minta, tetapi tidak sepenuhnya menangkap nuansa pop-art atau abstrak. Tata letaknya terasa sedikit aneh, dengan banner bawah yang aneh dan jarak yang janggal. Secara pribadi, font-nya tidak cocok untuk saya. Menurut saya tampilannya kurang bagus, tapi itu mungkin masalah preferensi pribadi. Judul utama di halaman pertama, "I turn coffee into copy," juga sedikit membingungkan. Animasinya standar dan tidak terlalu istimewa, meskipun memberikan sedikit dinamisme secara keseluruhan. Sayangnya, masalah utama saya adalah beberapa gambar di halaman writing samples rusak, muncul sebagai ikon kosong. Secara keseluruhan, halaman web yang relatif fungsional tetapi tidak terlihat estetis terbaik.
Aplikasi web yang dibangun oleh Replit:
Seberapa Baik Performanya?
Desain: Desainnya berwarna-warni tetapi melewatkan gaya pop-art yang spesifik. Tata letak dan beberapa teks yang dihasilkan terasa agak acak. Pilihan font dipertanyakan di seluruh halaman.
Mengikuti Instruksi: Ia membuat halaman dan animasi yang diminta, tetapi interpretasi desainnya meleset, dan gagal menghasilkan semua gambar.
Kegunaan: Agent AI cukup membantu, tetapi keseluruhan lingkungannya bisa terasa membingungkan bagi non-coder.
Harga: Replit memiliki paket pemula gratis, dengan paket berbayar seperti paket Core seharga $20/bulan.
Penilaian Saya sebagai Non-Coder
Tingkat Kesulitan: Seperti mencoba merakit furnitur IKEA hanya dengan setengah instruksi. Anda mungkin bisa mencari tahu, tetapi mungkin akan menjadi pengalaman yang membuat frustrasi.
Apakah Saya Akan Menggunakannya Lagi? Mungkin tidak. Meskipun kuat, terasa lebih cocok untuk mereka yang memiliki latar belakang coding. Pengalamannya sedikit terlalu teknis untuk selera saya.
#3 Bolt: Pembangun Tercepat di Lingkungan
Bolt.new dikenal karena kecepatannya, menghasilkan prototipe yang berfungsi dalam hitungan detik. Ini populer untuk eksperimen cepat dan iterasi cepat.
Menggunakan Alat dan Menavigasinya
Antarmuka Bolt bersih dan langsung ke intinya, dengan kotak prompt tepat di tengah. Ia juga memiliki opsi untuk melampirkan file, memilih database, dan bahkan mengimpor dari GitHub atau Figma, yang tampak kuat. Saya suka bahwa ia menampilkan rencana saat sedang menghasilkan, jadi saya dapat melihat proses berpikirnya. Saya menggunakan agent default, yaitu Sonnet 4.5 dari Claude.
Hasilnya
Hasil akhirnya… berwarna-warni. Ia memiliki tepi membulat yang saya inginkan, tetapi tidak benar-benar mengikuti permintaan gaya pop-art atau abstrak saya dengan baik, malah memilih warna-warna yang lebih ceria dan pastel. Tipografinya cukup standar dan membosankan, tidak benar-benar ceria, kecuali pada upaya pada kata 'Word Wizard'. Bio yang dihasilkannya secara mengejutkan cukup substansial, yang merupakan sentuhan yang bagus, terutama jika dibandingkan dengan bio yang dihasilkan oleh alat lainnya. Semua halaman yang saya minta ada di sana, dan semuanya tampak berjalan lancar. Namun, animasinya generik dan minimal, tidak menambahkan sesuatu yang istimewa pada pengalamannya. Saya juga mendapati diri saya berharap ada beberapa tautan antar halaman untuk memudahkan navigasi.
Webapp yang dibuat oleh Bolt:
Seberapa Baik Kinerjanya?
Desain: Desainnya lebih ceria dan pastel daripada gaya pop-art yang diminta. Itu menyenangkan tetapi bukan yang saya minta.
Mengikuti Instruksi: Tool ini berhasil membuat halaman dan bio yang baik, tetapi gagal memenuhi ekspektasi pada gaya desain dan animasi.
Kegunaan: Sangat lugas dan mudah digunakan.
Kecepatan: Sangat cepat, dengan versi pertama siap dalam waktu kurang dari 2 menit.
Harga: Bolt memiliki paket gratis dengan batas tokens harian, dan paket berbayar mulai dari $25/bulan.
Putusan Saya Sebagai Non-Coder
Tingkat Kesulitan: Seperti menggunakan microwave. Cepat dan mudah, tetapi Anda tidak akan mendapatkan hidangan ala chef.
Akankah Saya Menggunakannya Lagi? Mungkin, jika saya membutuhkan website yang cepat dan sederhana serta tidak terlalu peduli dengan desain spesifik. Tool ini bagus untuk prototyping cepat, tetapi siapkan diri untuk melakukan beberapa penyesuaian manual agar desainnya pas.
#4 Cursor: Favorit Developer (Tapi Bagaimana dengan Non-Coder?)
Cursor adalah editor kode bertenaga AI yang dibangun di atas VS Code. Tool ini disukai oleh para developer karena fiturnya yang kuat, tetapi apakah dapat diakses oleh seseorang yang belum pernah membuat kode?
Menggunakan Tool dan Menavigasinya
Kesan pertama saya terhadap Cursor adalah… intimidasi. Antarmukanya berupa editor kode yang bersih dan minimalis, yang bagus jika Anda seorang developer, tetapi cukup menakutkan jika bukan. Tidak ada tombol atau petunjuk yang ramah, hanya layar kosong dan kursor yang berkedip. Setelah menelusuri, saya menyadari bahwa saya perlu menghubungkan akun GitHub saya untuk memulai.
Hasilnya
Di sinilah perjalanan saya dengan Cursor berakhir dengan sangat disayangkan. Setelah menghubungkan akun GitHub dan memasukkan prompt saya, saya disambut dengan paywall. Dikatakan bahwa saya memerlukan paket berbayar untuk menggunakan Agent AI. Saya memutuskan untuk berinvestasi $20 untuk paket Pro, berharap yang terbaik. Tetapi bahkan setelah membayar, saya disambut dengan serangkaian pesan error tentang tidak memiliki "repository." Saya mencoba membuatnya di GitHub, tetapi antarmukanya semua berupa kode, dan saya tidak tahu apa yang saya lakukan. Setelah satu jam frustrasi dan $20 melayang, saya harus menyerah. Saya bahkan tidak pernah melihat website. Saya tidak yakin bahwa halaman ini seharusnya dikategorikan sebagai tool vibe coding sejak awal.
Seberapa Baik Performanya?
Desain: T/A
Mengikuti Instruksi: T/A
Kegunaan: Sangat buruk untuk non-coder. Seluruh pengalaman dirancang untuk developer.
Kecepatan: T/A
Harga: Paket Pro berharga $20/bulan, tetapi saya tidak bisa mendapatkan nilai apa pun darinya.
Putusan Saya sebagai Non-Coder
Tingkat Kesulitan: Seperti mencoba menerbangkan helikopter tanpa pelatihan. Anda akan jatuh dan terbakar.
Apakah Saya Akan Menggunakannya Lagi? Tidak akan pernah. Ini mungkin alat yang ampuh untuk developer, tetapi bukan untuk orang yang ingin membangun situs web tanpa pengetahuan coding apa pun. Ini adalah satu jam dan $20 yang terbuang sia-sia!
#5 Manus: Asisten AI yang Melakukan Lebih dari Sekadar Coding
Menggunakan Alat dan Menavigasinya
Hasilnya
Sayangnya, versi gratis benar-benar gagal, menghasilkan error 404. Saya bahkan tidak bisa melihat situs web yang seharusnya dibangun.
Kecewa, saya memutuskan untuk mencoba versi berbayar "Max", dan saya sangat senang melakukannya. Hasilnya, dalam satu kata, menakjubkan. Dari semua alat yang saya uji, Manus adalah satu-satunya yang benar-benar menangkap nuansa pop-art, abstrak, dan playful yang saya inginkan. Warnanya tepat, animasinya kreatif dan disengaja, dan desain keseluruhannya sempurna. Contoh hebat dari ini adalah pendekatannya terhadap sudut-sudut bulat. Prompt saya meminta untuk 'menambahkan' sudut bulat, dan meskipun saya mengharapkan semuanya menjadi bulat, Manus memberikan campuran sudut bulat dan tajam. Ini adalah kejutan yang menyenangkan yang membuat desain terasa lebih dinamis dan kurang satu dimensi, menunjukkan bahwa ia mengantisipasi kebutuhan saya daripada hanya mengikuti prompt secara harfiah. Ia bahkan mengkustomisasi kursor untuk mengubah warna saat melayang di atas elemen yang berbeda, detail kecil lain yang membuat perbedaan besar dan menunjukkan pemahaman nyata tentang brief kreatif. Meskipun hasil ini hanya berasal dari paket berbayar, setelah menghitung kredit yang digunakan untuk membuat halaman web ini, jumlahnya kurang dari satu dolar!
Seberapa Baik Performanya?
Desain: Menakjubkan. Ini adalah satu-satunya alat yang benar-benar cocok dengan prompt saya dan memberikan desain yang benar-benar kreatif dan halus.
Mengikuti Instruksi: Sangat baik. Ia mengikuti semua instruksi, mulai dari struktur halaman hingga gaya desain dan animasi tertentu.
Kegunaan: Antarmukanya sederhana dan mudah digunakan. Hambatan utama adalah kegagalan versi gratis.
Harga: Manus memiliki paket gratis, tetapi untuk pembuatan web yang kompleks, paket berbayar (mulai dari $20/bulan) diperlukan untuk hasil yang baik.
Vonis Saya sebagai Non-Coder
Tingkat Kesulitan: Seperti mempekerjakan asisten pribadi. Anda memberi tahu mereka apa yang Anda inginkan, dan mereka mengurus semuanya untuk Anda.
Akankah Saya Menggunakannya Lagi? Tanpa ragu. Meskipun versi gratis mengecewakan, 
versi berbayar memberikan hasil yang jauh melampaui alat lainnya sehingga investasinya sepadan. Ini adalah satu-satunya alat yang benar-benar mewujudkan visi saya.
Berdampingan: Membandingkan Semua 5 Output
Alat | Elemen Desain Terbaik | Elemen Desain Terburuk | Skor Keseluruhan |
Lovable | Nuansa keseluruhan yang menyenangkan dan ceria. | Desain yang sedikit generik dan tidak sepenuhnya mengadopsi gaya pop-art. | 4/5 |
Replit | Animasi yang lucu dan penuh warna. | Gambar yang rusak dan tata letak yang aneh. | 3/5 |
Bolt | Bio yang substansial dan ditulis dengan baik. | Animasi yang minimal dan tidak inspiratif. | 3/5 |
Cursor | T/A | Tidak ada output karena tidak ada pengetahuan coding. | 0/5 |
Manus | Desain pop-art yang menakjubkan dan dieksekusi dengan sempurna. | Fakta bahwa versi gratisnya tidak berfungsi. | 5/5 |
Apa yang Saya Pelajari Dari Menguji Semua 5 Alat
Setelah menghabiskan berjam-jam dengan kelima alat vibe coding ini, saya mendapatkan beberapa wawasan penting. Pertama, "vibe coding" bukanlah solusi satu ukuran untuk semua. Setiap alat memiliki kepribadiannya sendiri dan dibangun untuk jenis pengguna yang berbeda. Beberapa, seperti Lovable, sempurna untuk pemula sejati yang menginginkan situs web yang indah dengan kerepotan minimal. Yang lain, seperti Replit dan Bolt, menawarkan lebih banyak kekuatan tetapi membutuhkan sedikit lebih banyak kesabaran. Dan kemudian ada Cursor, yang jelas berada di liga tersendiri, dibangun untuk para pengembang.
Kedua, saya belajar bahwa Anda sering mendapatkan apa yang Anda bayar. Meskipun alat-alat gratis cukup mengesankan, semuanya memiliki keterbatasan. Untuk mendapatkan situs web berkualitas tinggi yang benar-benar khusus dan sesuai dengan visi kreatif tertentu, berinvestasi dalam paket berbayar dapat membuat perbedaan besar. Pengalaman saya dengan Manus adalah contoh sempurna dari hal ini. Versi gratisnya buntu, tetapi versi berbayarnya adalah sebuah kemenangan.
Akhirnya, saya menyadari bahwa AI adalah mitra yang kuat untuk non-coder, tetapi bukan pembaca pikiran. Anda tetap harus memiliki visi yang jelas tentang apa yang ingin Anda buat dan mampu mengkomunikasikan visi itu secara efektif. Semakin spesifik dan terperinci prompt Anda, semakin baik hasilnya.
Rekomendasi Saya
Jika Anda Adalah... | Mulailah Dengan... | Mengapa |
Pemula sepenuhnya yang menginginkan hasil cepat dan indah | Lovable | Paling mudah digunakan dan menghasilkan situs web menakjubkan dengan upaya minimal. |
Seseorang yang sangat peduli pada desain dan bersedia membayar untuk kualitas | Manus | Ini satu-satunya alat yang benar-benar menangkap visi desain saya dan membuat situs web yang akan saya banggakan. |
Bersedia belajar sedikit untuk mendapatkan kekuatan dan fleksibilitas lebih | Replit atau Bolt | Mereka menawarkan lebih banyak kontrol dan opsi kustomisasi, tetapi tidak seramah Lovable bagi pemula. |
Seseorang yang membutuhkan konten + perencanaan + pembangunan | Manus | Ini adalah asisten AI all-in-one yang dapat menangani seluruh proyek dari awal hingga akhir. |
Pemikiran Akhir
Perjalanan saya ke dunia vibe coding adalah sebuah roller coaster. Ada momen-momen ajaib murni, seperti ketika saya melihat visi saya menjadi kenyataan dengan Manus, dan momen-momen frustrasi murni, seperti pengalaman saya dengan Cursor. Namun pada akhirnya, saya sangat senang telah melakukannya. Saya belajar bahwa membangun situs web tidak semenakutkan yang saya kira, dan bahwa AI dapat menjadi mitra kreatif yang kuat bagi non-coder. Jadi jika Anda seorang non-coder dengan ide aplikasi, jangan takut mencoba vibe coding. Anda mungkin akan terkejut dengan apa yang dapat Anda ciptakan.
Pertanyaan yang Sering Diajukan
Apakah saya benar-benar dapat membangun aplikasi tanpa pengalaman coding?
Ya, tentu saja bisa! Alat seperti Lovable dan Manus memungkinkan siapa saja membangun situs web yang indah dan fungsional tanpa menulis satu baris kode pun. Bersiaplah untuk bereksperimen dengan berbagai prompt dan bersabarlah dengan prosesnya.
Alat mana yang memberikan hasil dengan tampilan terbaik?
Bagi saya, Manus adalah pemenang yang jelas dalam hal desain. Ini adalah satu-satunya alat yang benar-benar menangkap nuansa pop-art, abstrak, dan playful yang saya inginkan. Lovable berada di posisi kedua, dengan desain yang menyenangkan dan berwarna-warni yang sempurna untuk portofolio pribadi.
Alat mana yang paling baik mengikuti instruksi desain saya?
Manus, jauh sekali. Ini adalah satu-satunya alat yang tampaknya memahami nuansa dari prompt saya dan menerjemahkannya menjadi desain yang indah dan kreatif.
Apakah saya pernah harus melihat kode?
Dengan Lovable, Replit, dan Bolt, saya tidak pernah harus melihat satu baris kode pun. Dengan Cursor, saya langsung dilemparkan ke dalam editor kode dan tidak tahu harus berbuat apa. Dengan Manus, saya tidak perlu melihat kode, tetapi saya bisa melakukannya jika saya mau.
Apakah saya akan merekomendasikan vibe coding kepada non-coder lainnya?
Tentu saja! Ini adalah cara yang menyenangkan dan memberdayakan untuk mewujudkan ide-ide Anda. Pastikan saja Anda memilih alat yang tepat untuk kebutuhan Anda dan bersabarlah dengan prosesnya. Tidak selalu sempurna pada percobaan pertama, tetapi dengan sedikit eksperimen, Anda dapat menciptakan sesuatu yang benar-benar menakjubkan.
