Cara Menulis Prompt GPT Image untuk Mockup UI
Cara membuat prompt GPT Image 2 untuk dashboard, layar aplikasi, dan mockup perangkat dengan tata letak yang bisa diprediksi dan label yang mudah dibaca.
Prompt GPT Image yang baik untuk mockup UI menyebutkan produk, layar beserta komponen utamanya, perangkat atau bingkai tempat layar itu tampil, gaya visual, dan teks persis yang harus terbaca. Tulis komponen sesuai urutan baca dan buat teks di layar tetap singkat, karena model jauh lebih andal merender beberapa label besar dibanding paragraf teks antarmuka.
Deskripsikan layar seperti wireframe
Mulailah dari fungsi layar dan isinya, sesuai urutan pengguna membacanya: navigasi, header, konten utama, panel sekunder, dan tombol aksi. Model menyusun komponen dengan lebih terprediksi bila komponen itu disebutkan satu per satu daripada hanya disiratkan lewat kata gaya seperti dashboard modern.
- Sebutkan produk dan layarnya: “dashboard analitik untuk aplikasi penagihan SaaS” atau “layar onboarding untuk aplikasi meditasi”.
- Sebutkan area secara berurutan: navigasi sidebar, bilah atas dengan kolom pencarian, tiga kartu KPI, grafik garis, dan tabel transaksi terbaru.
- Nyatakan kepadatannya: jarak antarelemen yang lega, ukuran kartu yang seragam, perataan yang rapi.
Pilih bingkai: layar datar, perangkat, atau adegan
Tentukan apakah Anda butuh tangkapan antarmuka datar untuk studi kasus, mockup perangkat untuk landing page, atau adegan berupa foto untuk pemasaran. Masing-masing butuh susunan kata yang berbeda.
- Datar: “tangkapan layar UI datar, tanpa bingkai perangkat, 16:9”.
- Perangkat: “di laptop tipis dengan sudut sedikit miring, layar menghadap kamera, pantulan lembut”.
- Adegan: “laptop di atas meja kayu dalam cahaya siang alami, depth of field dangkal”; antarmukanya akan tampak lebih kecil dan kurang terbaca.
Buat teks antarmuka singkat dan persis
Keterbacaan teks adalah titik gagal yang paling sering muncul pada UI yang dihasilkan AI. Beri tanda kutip hanya pada beberapa label penting dan biarkan sisanya tersirat sebagai baris placeholder.
- Kutip judul dan tombol secara persis: “Pendapatan”, “Upgrade paket”.
- Minta baris teks placeholder untuk body copy.
- Hindari tabel panjang berisi data asli; sebagai gantinya, minta lima baris contoh transaksi.
Tentukan sistem visual
Kata gaya seperti glassmorphism memang membantu, tetapi sistem visual singkat memberi hasil yang lebih konsisten di beberapa layar.
- Warna: latar belakang, permukaan, aksen utama, dan warna status.
- Tipografi: satu keluarga font sans-serif, hierarki ketebalan yang jelas, dan kontras ukuran antara judul dan label.
- Komponen: radius sudut, bayangan, border, dan gaya ikon.
Daftar periksa prompt
- Produk, tujuan layar, dan audiens sudah disebutkan.
- Komponen ditulis sesuai urutan baca.
- Bingkai sudah dipilih: tangkapan datar, perangkat, atau adegan.
- Hanya teks singkat dalam tanda kutip yang perlu terbaca.
- Warna, tipografi, dan gaya komponen sudah ditentukan.
- Rasio aspek sesuai target: 16:9 untuk desktop, 9:16 untuk ponsel.
Pertanyaan umum
Bisakah GPT Image 2 menghasilkan desain UI yang siap pakai?
GPT Image 2 menghasilkan konsep visual dan mockup yang meyakinkan untuk presentasi, landing page, dan moodboard. Anggap hasilnya sebagai referensi visual, bukan desain produksi, karena jarak antarelemen, ikon, dan teks kecilnya belum cukup presisi untuk diserahkan sebagai spesifikasi.
Bagaimana cara mendapatkan teks yang terbaca di mockup UI?
Batasi teks yang harus terbaca pada beberapa label dalam tanda kutip, buat ukurannya besar, dan deskripsikan sisanya sebagai baris placeholder. Kata-kata pendek dengan font sans-serif yang bersih paling andal hasilnya.
Bagaimana cara menjaga beberapa layar tetap konsisten?
Gunakan ulang paragraf sistem visual yang sama di setiap prompt dan ubah hanya deskripsi layarnya. Layar yang dibuat dari satu template akan lebih mirip satu sama lain dibanding layar yang dideskripsikan dari nol.
Template prompt terkait
Gunakan panduan ini dengan prompt sungguhan
Jelajahi template prompt dari kategori pustaka yang sesuai, lalu adaptasikan strukturnya ke alur kerja gambar Anda sendiri.