AI Web Building #05 — Build Website dengan AI Developer

Artikel 5 dari 8 · Tahap Development

Saatnya Mengubah Website Brief Menjadi Website Sungguhan

Kita telah melewati beberapa tahapan penting: menentukan ide, melakukan riset, berdiskusi, dan menyusun Website Brief.

Sekarang, kita akan menggunakan AI untuk membantu membuat website berdasarkan dokumen tersebut.

Pada materi ini, kita akan menggunakan Google AI Studio sebagai contoh AI Developer.

Google AI Studio memiliki Build mode yang memungkinkan pengguna membuat aplikasi web melalui instruksi bahasa alami, menghasilkan kode, dan melihat hasilnya melalui live preview.

Kamu juga dapat menggunakan AI coding tools lainnya dengan menyesuaikan langkah-langkahnya.

1. Buka Google AI Studio

Platform: Google AI Studio
Fokus: AI development workspace & live prototyping

1. Buka Google AI Studio menggunakan akun Google kamu.
2. Masuk ke Build mode dan mulai proyek baru.
3. Pastikan kamu memilih platform web jika tersedia pemilihan platform.

Pada tahap ini, kita belum perlu memikirkan hosting atau domain. Fokus terlebih dahulu pada pembuatan website.

2. Siapkan Seluruh Dokumen dan Aset

Sebelum memberikan instruksi kepada AI Developer, pastikan kamu sudah menyiapkan:

• WEBSITE_BRIEF.md (dokumen brief lengkap dari materi #04).
• Screenshot referensi desain yang diinginkan.
• Logo dan gambar yang memang akan digunakan.
• Data atau konten yang sudah tersedia.

[!TIP] Jika belum memiliki gambar asli, gunakan placeholder untuk sementara (misalnya Unsplash atau SVG placeholder). Jangan membuat foto, testimoni, harga, atau informasi bisnis palsu lalu menampilkannya seolah-olah nyata. Untuk website demo, gunakan konten fiktif yang diberi label secara jelas.

3. Berikan Instruksi Awal yang Terstruktur

Kesalahan yang paling sering dilakukan pemula adalah memberikan instruksi terlalu pendek, seperti:

"Buatkan website berdasarkan brief ini."

AI memang bisa langsung bekerja, tetapi kita akan memiliki lebih banyak kendali jika instruksinya menjelaskan prioritas dan batasan teknis secara rinci.

Salin dan gunakan template master prompt berikut:

Kamu adalah senior frontend developer dan UI/UX engineer.

Tugasmu membangun website berdasarkan dokumen WEBSITE_BRIEF.md yang saya berikan.

PRIORITAS:
1. Ikuti tujuan, sitemap, dan fitur yang tercantum dalam brief.
2. Buat desain modern, profesional, dan responsive.
3. Gunakan komponen reusable dan struktur kode yang rapi.
4. Pastikan navigasi dan interaksi berfungsi.
5. Buat loading, empty, success, dan error states jika dibutuhkan.
6. Gunakan data demo yang jelas jika data asli belum tersedia.
7. Jangan mengarang informasi bisnis, testimoni, harga, atau identitas.
8. Jangan mengklaim fitur backend berfungsi jika belum diimplementasikan.

WORKFLOW:
- Baca seluruh brief.
- Identifikasi kebutuhan dan dependency.
- Tentukan pendekatan teknis.
- Implementasikan website secara bertahap.
- Jalankan pemeriksaan error setelah perubahan.

Mulai dengan merangkum pemahamanmu terhadap brief dan rencana implementasi.

Jika ada persyaratan penting yang belum jelas, tanyakan terlebih dahulu.

Langkah eksekusi:

1. Tempelkan prompt di atas bersama isi WEBSITE_BRIEF.md.
2. Baca rencana implementasi yang diberikan AI.
3. Jika rencana sudah sesuai dan masuk akal, beri lampu hijau untuk melanjutkan proses pembangunan.

4. Bangun Website Secara Bertahap

Meskipun AI sanggup menghasilkan banyak halaman sekaligus, proses pengembangan tetap perlu dikontrol. Untuk proyek sederhana, satu instruksi lengkap mungkin cukup. Namun, untuk proyek yang lebih kompleks, pecah pekerjaan menjadi beberapa tahapan:

Development Roadmap

Dengan pendekatan bertahap ini:

• Masalah atau bug akan jauh lebih mudah diidentifikasi dan diisolasi.
• Kamu bisa mengevaluasi setiap halaman sebelum AI beralih ke fitur berikutnya.

5. Periksa Hasil Melalui Live Preview

Setelah AI menghasilkan kode, segera buka Live Preview.

[!IMPORTANT] Jangan hanya melihat screenshot atau mempercayai laporan teks dari AI! Coba klik menu navigasi, tombol, fitur pencarian, dan input formulir secara langsung.

Perhatikan apakah tampilannya sesuai dengan brief. Jika suatu bagian belum pas, berikan instruksi spesifik dan fokus:

"Pada halaman Home, hero section masih terlalu tinggi ketika dibuka melalui HP. Tolong perbaiki spacing, ukuran heading, dan posisi tombol CTA. Pertahankan desain desktop yang sudah sesuai."

Instruksi spesifik seperti ini menghasilkan perbaikan yang presisi dibandingkan hanya mengatakan "Desainnya jelek, tolong benerin."

6. Pahami Batasan Fitur yang Dihasilkan AI

Website yang terlihat lengkap secara visual belum tentu memiliki seluruh fungsi backend yang sebenarnya:

• Autentikasi / Login: AI mungkin membuat UI form login yang cantik, tetapi belum tentu terhubung dengan session atau auth server sesungguhnya.
• Formulir Booking: Formulir mungkin menampilkan pesan "Janji temu berhasil dikirim!", padahal datanya hanya tersimpan di state memori browser (belum masuk ke database nyata).

Untuk proyek latihan atau portofolio awal, simulasi interaktif seperti ini sah-sah saja selama diberi label status yang jelas (misal: Demo / Mockup Data). Namun untuk website komersial nyata, seluruh pipeline database, API, dan keamanannya wajib diimplementasikan secara utuh.

7. Simpan Progres Proyek

Setelah website mulai terbentuk dan berjalan stabil, biasakan menyimpan progres secara berkala:

1. Version History: Jika tool AI menyediakan riwayat versi (undo/checkpoint), manfaatkan sebelum meminta perubahan besar.
2. Ekspor Kode: Unduh file ZIP proyek ke komputer lokal kamu.
3. Sinkronisasi GitHub: Google AI Studio dan AI builder modern mendukung ekspor ZIP dan sinkronisasi dua arah dengan GitHub. (Kita akan mendalami GitHub secara detail pada materi #07).

Hasil Akhir Materi #05

Website versi awal sudah berhasil dibangun, dapat dibuka dan diuji melalui live preview, serta memiliki struktur navigasi, halaman internal, dan fitur utama sesuai dengan arahan Website Brief.

Kesimpulan

Membangun website menggunakan AI bukan berarti kita hanya melempar satu prompt lalu pasrah menerima hasilnya tanpa pengawasan. Peran kita tetap krusial sebagai arsitek yang mengarahkan pekerjaan, menetapkan batasan, dan memvalidasi mutu hasil.

Gunakan AI untuk melipatgandakan kecepatan development, tetapi kendalikan kualitasnya melalui brief dan evaluasi bertahap.

Pada materi berikutnya, kita akan melakukan review menyeluruh, pengujian responsif, dan revisi agar website benar-benar siap dan layak dipublikasikan!