Selamat datang di modul pertama materi Google Student Ambassador (GSA). Praktik Image-to-Code dengan Google Stitch & Google Apps Script.
💡 Mengapa Topik Ini Sangat Berguna untuk Kuliah & Kerja?
- Paham Alur Bikin Web Cukup dari Browser: Tidak perlu menginstal banyak software coding yang berat atau pusing mengonfigurasi server lokal. Anda memahami alur mengubah referensi desain menjadi website yang langsung aktif hanya melalui browser.
- Banyak Dipakai di Sistem Kampus & Industri: Di lingkungan kampus maupun kantor, banyak sistem perizinan, formulir pengajuan, dan aplikasi pencatatan internal dibuat menggunakan Google Apps Script karena langsung terintegrasi dengan Google Drive & Google Sheets.
- Kelola Data Web Tanpa Harus Jago Backend: Anda dapat membuat formulir web atau sistem pendataan yang hasilnya otomatis tersimpan di tabel Google Spreadsheet—mudah diperiksa dan dikelola tanpa harus menguasai database SQL yang rumit.
🔄 Perbandingan Alur Pembuatan Website
Mari bandingkan alur kerja konvensional yang biasa dilakukan developer dengan alur kerja modern berbasis Generative AI:
| Aspek | Cara Konvensional (Lama & Panjang) | Cara Baru dengan AI (Cepat & Praktis) |
|---|---|---|
| Tahap Awal | Membuat sketsa kasar (wireframe) dari nol di kertas/aplikasi. | Mencari referensi gambar UI nyata dari Pinterest atau Figma. |
| Tahap Desain | Mendesain antarmuka secara manual komponen per komponen di Figma. | Mengunggah gambar referensi ke Google Stitch untuk di-generate otomatis. |
| Tahap Pengkodean | Instal text editor, ekstensi, dan mengetik HTML/Tailwind CSS satu per satu. | Salin (copy) kode Semantic HTML & Tailwind CSS siap pakai dari Stitch. |
| Tahap Hosting | Sewa cloud hosting, beli domain, dan atur DNS/server yang rumit. | Publikasikan (deploy) secara gratis lewat Google Apps Script. |
| Waktu & Efisiensi | Memakan waktu berhari-hari hingga berminggu-minggu. | Selesai dalam hitungan menit, 100% langsung dari browser! |
🎨 Mengenal Google Stitch & Teknologi Multimodal Gemini AI
Apa Itu Google Stitch?
Google Stitch adalah platform desain eksperimental berbasis AI dari Google Labs yang membantu kita mengubah ide dalam bentuk kalimat teks maupun referensi gambar antarmuka menjadi tampilan visual UI sekaligus kode frontend siap pakai berbasis HTML & Tailwind CSS.
Apa Itu Teknologi Multimodal Gemini AI?
Multimodal berarti kecerdasan buatan (AI) yang mampu memahami, mengolah, dan menghubungkan lebih dari satu jenis input secara simultan—tidak hanya teks, melainkan juga visual (gambar, sketsa, foto) dan suara (voice).
Tiga Pilar Cara Kerja di Google Stitch:
- Membaca Visual (*Image-to-Code*): Menganalisis tangkapan layar atau sketsa untuk mengenali struktur tombol, navigasi, kolom, dan elemen teks.
- Menyusun Desain Rapi: Menentukan hierarki visual, kontras warna, margin, dan sistem tipografi yang selaras.
- Menghasilkan Kode Siap Pakai: Mengekstrak rancangan visual menjadi kode clean HTML dengan kelas utilitas Tailwind CSS standar industri.
⚙️ Cara Menggunakan & Dua Mode Model di Google Stitch
Tiga Cara Memulai Desain:
- Ketik Deskripsi (*Text Prompt*): Menuliskan tampilan web yang diinginkan dengan kalimat deskriptif biasa.
- Unggah Gambar (*Image Upload*): Memasukkan contoh gambar UI dari Pinterest, Figma, atau sketsa tangan untuk ditiru strukturnya.
- Revisi Lewat Chat (*Refinement*): Meminta AI mengubah warna, tata letak kartu, atau teks tertentu secara bertahap melalui percakapan chat.
Dua Mode Model AI di Google Stitch:
- Mode Speed: Mengutamakan kecepatan rendering. Sangat cocok untuk mencari ide awal (brainstorming) dan membuat draft tampilan kasar dalam hitungan detik.
- Mode Balance: Mengutamakan ketelitian pemahaman visual. Sangat cocok untuk membaca referensi gambar secara detail, menyusun tata letak yang presisi, dan menghasilkan kode HTML/Tailwind yang rapi untuk produksi.
✍️ Tips Menyusun Prompt agar Hasil Desain Pas
Agar Google Stitch menghasilkan antarmuka yang presisi, gunakan formula 5 elemen dasar berikut:
- TUJUAN: Sebutkan jenis web dan sasaran pengguna (misal: Landing page pendaftaran workshop kampus).
- GAYA TAMPILAN: Tentukan nuansa visual dan palet warna (misal: Modern minimalis, dark mode OLED, aksen biru Google).
- ISI HALAMAN: Rincikan bagian-bagian utama yang wajib hadir (misal: Hero section + CTA, bento grid 3 fitur, form pendaftaran).
- CONTOH GAMBAR (OPSIONAL): Lampirkan tangkapan layar UI referensi untuk ditiru tata letaknya.
- CAMPUR ISTILAH DESAIN UMUM: Gunakan istilah standar UI (Bento grid, sticky navbar, split hero, rounded card, glassmorphism).
📋 Kumpulan Template Prompt Siap Pakai (Sesuai Kebutuhan)
Berikut template prompt praktis sekali pakai yang dirancang khusus untuk berbagai skenario penggunaan di Google Stitch:
1. Duplikasi Gambar Referensi (Ubah Isi Teks Saja Tanpa Merubah Layout & Warna)
Buatkan halaman web berdasarkan referensi gambar UI yang saya unggah. Pertahankan struktur layout, proporsi card, dan skema warnanya persis seperti di gambar. Hanya ubah seluruh konten teksnya untuk [Nama Proyek / Topik Anda]. Ganti judul hero menjadi "[Judul Anda]" dan gunakan Bahasa Indonesia untuk seluruh teks serta tombol CTA.- Apa Bagusnya Pakai Prompt Ini?
AI dilarang keras merombak desain visual yang sudah rapi dari referensi. Tata letak, margin, dan palet warna asli tetap terjaga 100%, hanya topik informasi dan bahasanya yang disesuaikan dengan kebutuhan Anda.
2. Mengubah Variasi Layout Menjadi Bento Grid
Pertahankan skema warna, teks, dan tipografi yang sudah ada. Ubah susunan layout pada bagian [sebutkan bagian, misal: daftar fitur / keuntungan] menjadi tata letak Bento Grid 3 kolom yang modern dengan padding proporsional dan rounded corner halus.- Apa Bagusnya Pakai Prompt Ini?
Sangat ampuh menyulap susunan daftar list biasa yang monoton menjadi format Bento Grid simetris yang menjadi standar tren desain website modern saat ini.
3. Merombak Tema Gaya Visual (Ganti ke Modern Dark Mode)
Redesign halaman ini dengan gaya visual modern minimalis bernuansa Dark Mode OLED (#000000). Gunakan aksen warna [sebutkan warna, misal: biru #4285F4], efek border tipis semi-transparan, serta tipografi sans-serif tegas pada seluruh judul.- Apa Bagusnya Pakai Prompt Ini?
Struktur komponen dan konten tetap utuh, tetapi nuansa visualnya berubah total menjadi lebih mewah, elegan, dan ramah di mata (eye-friendly).
4. Konversi Tampilan Mobile ke Desktop Web
Ubah desain aplikasi mobile ini menjadi layout Desktop Web yang responsif. Pindahkan navigasi tab bawah menjadi top navbar horizontal. Ubah kartu utama di atas menjadi split-layout hero section (teks & tombol di kiri, ilustrasi besar di kanan), dan tata daftar item menjadi grid 3 kolom.- Apa Bagusnya Pakai Prompt Ini?
Memungkinkan Anda menggunakan tangkapan layar dari aplikasi smartphone (seperti UI aplikasi mobile di Pinterest) dan langsung dikonversi oleh Stitch menjadi antarmuka web layar lebar yang proporsional.
🧩 Pembagian Prompt Ringkas per Elemen Desain
Jika Anda ingin menyusun prompt dari nol, berikut panduan instruksi ringkas per elemen beserta fungsi keunggulannya:
1. Kategori: Menentukan Tujuan & Alur Halaman (Goal-Oriented)
Buatkan landing page pendaftaran acara [Nama Acara]. Fokuskan tata letak agar pengunjung langsung tertarik dan mudah mengisi formulir di bagian atas. Gunakan Bahasa Indonesia.- Apa Bagusnya Pakai Prompt Ini?
AI langsung memprioritaskan fungsionalitas utama (conversion rate) tanpa menambahkan elemen dekoratif yang membingungkan alur pendaftaran pengguna.
2. Kategori: Mengatur Gaya Tampilan & Warna (Styling)
Terapkan gaya modern clean minimalist dengan nuansa Dark Mode OLED (#0a0a0a). Gunakan aksen warna biru terang (#38bdf8) dan kartu melengkung halus (rounded-2xl).- Apa Bagusnya Pakai Prompt Ini?
Memberikan arahan kode heksadesimal warna dan radius spesifik, mencegah AI memilih warna acak atau kontras yang buruk pada Tailwind CSS.
3. Kategori: Menyusun Isi & Tata Letak Komponen (Layout & Content)
Susun halaman dengan 3 bagian: Hero section besar dengan CTA "Daftar Sekarang", Bento Grid 3 kolom untuk keuntungan materi, dan Footer sederhana.- Apa Bagusnya Pakai Prompt Ini?
Struktur Bento Grid dan batasan 3 kolom memandu AI menghasilkan susunan kartu yang simetris, rapi, dan tidak terjadi penumpukan teks.
4. Kategori: Memadukan Istilah Desain Standar (Design Terms)
Gunakan sticky floating navbar dengan efek glassmorphism (backdrop blur). Pakai font sans-serif tebal untuk heading dan tombol CTA bergaya pill button.- Apa Bagusnya Pakai Prompt Ini?
Istilah desain standar (floating navbar, glassmorphism, pill button) langsung dipetakan oleh Gemini ke kelas utilitas Tailwind CSS yang tepat (backdrop-blur-md, rounded-full, sticky top-4).
5. Kategori: Prompt Singkat Gabungan (All-in-One Siap Pakai)
Buat landing page workshop teknologi kampus. Tema Modern Dark Mode aksen biru. Komponen: Sticky navbar, Split Hero dengan CTA "Daftar", bento grid 3 fitur, dan form input ringkas.- Apa Bagusnya Pakai Prompt Ini?
Ringkas, padat, dan mencakup kelima elemen formula tips dalam 3 baris instruksi sehingga proses pembuatan kode di Stitch berlangsung cepat dan minim revisi.
🚀 Alur Praktik Langkah demi Langkah
Ketika sesi praktik berlangsung di lab/kelas, berikut urutan kerja praktis yang dilakukan:
- Pilih Referensi UI: Cari inspirasi tampilan web di Pinterest atau Dribbble, lalu tangkap gambarnya (screenshot).
- Buka Google Stitch: Kunjungi
stitch.withgoogle.com, buat proyek baru, lalu pilih model Balance. - Upload & Prompt: Unggah gambar referensi dan masukkan instruksi teks yang sudah disesuaikan dengan topik web Anda.
- Cek & Evaluasi UI: Periksa apakah tampilan sudah memenuhi kebutuhan fungsi dan estetika yang diinginkan. Lakukan revisi teks/warna via chat jika diperlukan.
- Salin Kode HTML: Klik tombol View Code di pojok kanan atas, lalu klik Copy Code untuk mengambil seluruh kode HTML dan kelas Tailwind CSS.
Setelah berhasil menyalin kode HTML dan Tailwind CSS dari Google Stitch, bagaimana cara menayangkannya ke internet secara gratis agar memiliki link publik yang bisa diakses siapa saja?
👉 [Lanjutkan ke Modul 2: Deploy & Hosting Gratis Kode Web di Google Apps Script](/blog/gsa/deploy-google-apps-script)