Tutorial Vibe Coding Full-Stack: Dari Figma ke Deploy dengan Bolt.new

Vibe coding adalah pendekatan pengembangan di mana developer menjelaskan intent secara natural language, lalu AI menghasilkan kode fungsional secara real-time. Tools seperti Bolt.new dari StackBlitz membawa konsep ini ke level berikutnya: kamu bisa membangun aplikasi full-stack lengkap dengan database, API, dan UI hanya dari deskripsi teks. Artikel ini menuntunmu dari desain awal di Figma hingga deploy otomatis ke internet dalam waktu kurang dari satu jam.

Apa itu Bolt.new dan Kenapa Vibe Coding Menjadi Relevan?

Bolt.new adalah editor berbasis browser yang mengintegrasikan AI agent langsung ke workspace development. Berbeda dengan Copilot yang menyarankan baris kode, Bolt.new menghasilkan seluruh file proyek, menginstall dependensi, menjalankan server dev, dan bahkan men-deploy ke Vercel atau Netlify. Ini mengubah developer dari penulis kode menjadi product director yang mengarahkan AI.

Prasyarat yang Perlu Disiapkan

Kamu hanya membutuhkan browser modern dan akun StackBlitz gratis. Namun, untuk hasil maksimal, siapkan juga:

• Link Figma public atau file desain yang sudah di-export sebagai gambar referensi.

• Akun Vercel (opsional, untuk custom domain dan deploy permanen).

• Pemahaman dasar React dan TypeScript agar kamu bisa mereview output AI dengan kritis.

Langkah 1: Menyiapkan Desain Referensi di Figma

Sebelum masuk ke Bolt.new, buat wireframe atau mockup sederhana di Figma. Fokus pada tiga hal: struktur halaman, paleta warna, dan alur pengguna. Kamu tidak perlu desain pixel-perfect; Bolt.new cukup pandai menafsirkan screenshot kasar.

Export frame utama sebagai PNG dengan resolusi minimal 1440px lebar. Simpan dengan nama yang deskriptif, misalnya dashboard-v1.png. Nanti, kita akan upload gambar ini ke Bolt.new sebagai referensi visual. Semakin jelas hierarki visual di Figma, semakin akurat hasil generate Bolt.new.

Langkah 2: Inisialisasi Proyek di Bolt.new

Buka bolt.new dan pilih Start a new chat. Di prompt pertama, deskripsikan aplikasi yang ingin dibangun dengan spesifik. Hindari prompt generik seperti buat aplikasi to-do. Sebaliknya, gunakan prompt struktur berikut:

Buat aplikasi manajemen tugas tim dengan fitur:
- Board kanban dengan drag-and-drop (gunakan @dnd-kit)
- Autentikasi username/password sederhana
- Backend API menggunakan Next.js API Routes
- Database SQLite dengan Prisma ORM
- Desain mengikuti referensi visual yang saya upload

Bolt.new akan otomatis membuat folder app/, menginstall prisma, @dnd-kit, dan mengkonfigurasi Tailwind CSS. Proses ini biasanya memakan waktu 30-60 detik. Jika Bolt.new memilih stack yang berbeda dari keinginanmu, koreksi segera dengan prompt: Gunakan Next.js App Router, bukan Pages Router.

Langkah 3: Mengupload Referensi Visual dan Iterasi UI

Klik ikon attachment di chat Bolt.new, lalu upload screenshot Figma yang sudah disiapkan. Berikan instruksi tambahan:

Terapkan layout dan warna dari gambar referensi ini.
Gunakan font Inter untuk heading dan font Roboto untuk body text.
Pastikan sidebar collapsible dan responsive untuk mobile.

Bolt.new akan membaca gambar dan menyesuaikan file tailwind.config.ts serta komponen UI-nya. Jika hasil tidak sesuai ekspektasi, jangan hapus semua. Gunakan prompt korektif spesifik seperti: Ganti warna primary dari blue-600 menjadi slate-800 sesuai referensi. Iterasi visual biasanya membutuhkan 3-5 putaran prompt untuk mencapai hasil yang dapat diterima.

Langkah 4: Menambahkan Logika Backend dan Database

Setelah UI stabil, fokus ke lapisan data. Bolt.new mendukung schema Prisma generation dari deskripsi teks. Promptkan:

Buat schema Prisma untuk model Task dan User.
Task memiliki: id, title, description, status (enum: TODO, IN_PROGRESS, DONE), assigneeId, createdAt.
User memiliki: id, username, passwordHash.
Generate migration dan seed 10 dummy tasks.

Bolt.new akan menjalankan npx prisma migrate dev dan npx prisma db seed di terminal built-in-nya. Kamu bisa memeriksa hasilnya langsung di tab Database yang tersedia di sidebar. Jika terjadi error migrasi, cek apakah file schema.prisma sudah tersimpan dan tidak ada sintaks yang ambigu.

Langkah 5: Deploy ke Vercel dalam Satu Klik

Ketika aplikasi sudah berjalan lancar di preview Bolt.new, deploy ke production dengan prompt:

Deploy aplikasi ini ke Vercel. Gunakan environment variable untuk DATABASE_URL.

Bolt.new akan menghubungkan ke akun Vercel-mu (via OAuth) dan memicu deploy. URL production biasanya tersedia dalam 2-3 menit. Jika ingin custom domain, konfigurasikan melalui dashboard Vercel setelah deploy pertama berhasil. Jangan lupa mengganti DATABASE_URL dari SQLite lokal ke PostgreSQL production jika aplikasi akan menerima traffic nyata.

Menambahkan Integrasi API Eksternal

Aplikasi tanpa integrasi eksternal seringkali terasa statis. Gunakan Bolt.new untuk menambahkan fitur yang memanggil API pihak ketiga. Contohnya, integrasi notifikasi Slack atau webhook:

Tambahkan endpoint API /api/notify yang mengirimkan pesan ke Slack webhook.
Gunakan fetch native di Next.js API Route.
Simpan webhook URL sebagai environment variable.

Bolt.new akan membuat file route baru, menginstall dotenv jika belum ada, dan memastikan secret tidak di-hardcode. Review selalu file .env.example yang dihasilkannya untuk memastikan tidak ada credential yang terekspos.

Anti-Pattern dan Cara Menjaga Kualitas Kode

Vibe coding bukan berarti menerima output AI secara buta. Beberapa praktik yang wajib diterapkan:

• Review setiap file: Bolt.new sering menghasilkan komponen yang over-engineered. Hapus abstraction yang tidak perlu.

• Type safety: Pastikan generated TypeScript tidak menggunakan any secara sembarangan. Tambahkan interface eksplisit untuk model data.

• Security: Jangan pernah menyimpan password plaintext. Pastikan Bolt.new menggunakan bcrypt atau argon2 di file autentikasi.

• Accessibility: Periksa apakah generated UI menggunakan semantic HTML dan ARIA labels yang benar.

Kesimpulan

Dengan alur Figma ke Bolt.new ke Vercel, waktu prototipe full-stack bisa dipangkas dari beberapa hari menjadi beberapa jam. Kunci utamanya adalah prompt engineering yang spesifik dan review kritis terhadap output AI. Vibe coding mempercepat delivery, tetapi kualitas akhir tetap bergantung pada keputusan arsitektur yang kamu ambil sebagai developer.