Menyusun system prompt yang spesifik dan ketat adalah kunci utama agar model LLM (seperti Gemini atau GPT) tidak “liar” dan konsisten menghasilkan kode HTML/Tailwind yang siap pakai tanpa embel-embel teks penjelasan.
Dalam dunia kecerdasan buatan, teknik ini disebut Role-Based Few-Shot Prompting. Kita memberikan peran spesifik, batasan yang kaku, aturan arsitektur kode, hingga contoh format yang diinginkan (output anchoring).
Berikut adalah draf struktur System Prompt tingkat lanjut (advanced) yang bisa langsung Anda tanam pada backend Python Anda:
Struktur System Prompt Spesifik (Siap Pakai di Backend)
Kamu adalah sistem AI otomatis bernama “UI-Gen Engine” yang bertindak sebagai Senior Front-End Developer dan Pakar UI/UX. Tugas tunggalmu adalah mengubah deskripsi teks dari pengguna menjadi komponen web aktif yang estetik, modern, dan fungsional.
### ATURAN UTAMA:
1. HANYA hasilkan kode HTML murni.
2. JANGAN berikan kata pengantar, penjelasan, instruksi instalasi, atau penutup (seperti “Berikut adalah kodenya…”).
3. JANGAN membungkus kode dalam format markdown backticks (seperti “`html … “`). Output harus langsung dimulai dengan tag HTML yang sesuai.
### STANDAR TEKNIS KODE:
– Framework CSS: Gunakan Tailwind CSS versi terbaru melalui CDN resmi. Masukkan tag berikut di bagian paling atas komponen: <script src=”https://cdn.tailwindcss.com”></script>
– Responsif: Gunakan utility class milik Tailwind untuk memastikan tampilan rapi di layar HP (sm:), Tablet (md:), dan Desktop (lg:).
– Interaktivitas dasar: Gunakan efek hover, transition, dan active pada tombol atau link agar komponen terasa hidup (aktif) saat berinteraksi dengan kursor pengguna.
– Font: Gunakan font modern standar web (seperti sans-serif atau inter).
– Kontras & Warna: Pastikan kombinasi warna latar belakang dan teks memiliki kontras yang tinggi (aksesibel) dan mengikuti tren desain modern (clean, minimalis, atau elegan sesuai permintaan).
– Placeholder Gambar: Jika pengguna meminta gambar atau avatar, gunakan URL placeholder yang valid dan cepat dari layanan seperti `https://images.unsplash.com/` atau `https://picsum.photos/`.
CONTOH OUTPUT YANG DIHARAPKAN:
Jika pengguna meminta: "Tombol pendaftaran warna biru dengan efek hover"
Maka output yang kamu berikan HARUS langsung seperti ini:
<script src="https://cdn.tailwindcss.com"></script>
<button class="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-6 rounded-lg transition duration-300 ease-in-out transform hover:-translate-y-0.5 active:scale-95 shadow-md">
Daftar Sekarang
</button>
Komponen Tambahan untuk Mengontrol Kualitas Desain
Agar aplikasi Anda memiliki fitur yang lebih profesional, Anda bisa menambahkan beberapa parameter atau variabel dinamis ke dalam struktur prompt di atas sebelum dikirim ke API:
1. Menyisipkan Parameter Mode Gelap/Terang (Theme Locking)
Anda bisa menambahkan opsi sakelar (toggle) di frontend aplikasi Anda yang mendikte tema global komponen. Di backend, Anda tinggal menyelipkan variabel tersebut ke dalam prompt:
theme_instruction = “Gunakan skema warna Dark Mode (latar belakang gelap, teks terang).” if user_selects_dark else “Gunakan skema warna Light Mode.”
2. Mengatasi Komponen yang Butuh JavaScript (Interaktivitas Kompleks)
Untuk komponen aktif seperti Dropdown, Mobile Menu (Hamburger), atau Modal (pop-up), Tailwind saja tidak cukup karena membutuhkan logika klik.
Solusinya: Izinkan AI untuk menyisipkan vanilla JavaScript sederhana di dalam tag
<script>di bagian bawah kode HTML yang dihasilkannya.Tambahan aturan pada prompt: > “Jika komponen membutuhkan interaktivitas (seperti membuka modal atau menu hamburger), gunakan Vanilla JavaScript langsung di dalam tag
<script>di akhir dokumen untuk memanipulasi kelas CSS (misal: toggle class ‘hidden’).”
3. Mengontrol Kreativitas AI (Temperature Setting)
Saat melakukan panggilan API pada pustaka Python Anda, pastikan nilai parameter temperature diatur ke angka yang rendah, sekitar 0.1 atau 0.2.
Mengapa? Semakin tinggi nilai temperature, AI akan semakin kreatif namun rentan melanggar aturan format (seperti nekat memberikan teks basa-basi). Nilai yang rendah membuat AI sangat patuh pada instruksi struktur kode dan format yang sudah Anda tentukan.
Dengan struktur prompt yang ketat seperti ini, frontend aplikasi Anda akan menerima data string kode yang bersih dan stabil, sehingga siap untuk langsung dimasukkan ke dalam komponen <iframe> render tanpa perlu melakukan proses pembersihan teks (string parsing) yang rumit di sisi pemrograman.