Learning Timeline
Key Insights
Lari dari Design Tipikal 'Tailwind'
Kebanyakan dashboard SaaS AI biasanya nampak serupa dengan gaya Tailwind CSS yang flat. Dengan menggunakan rujukan produk fizikal (seperti audio gear), Gemini 3.0 boleh menghasilkan UI yang lebih 'elevated' dan unik dengan bayangan dan tekstur yang nampak nyata.
Kepentingan PRD dalam Prompting
Jangan hanya beri arahan design. Masukkan 'Product Requirements Doc' (PRD) ke dalam prompt supaya AI tahu fungsi sebenar setiap butang dan carta yang perlu ada, bukan sekadar cantik di luaran sahaja.
Interaktiviti Hasil Generasi
Kod yang dihasilkan oleh Gemini dalam Google AI Studio selalunya bersifat interaktif. Anda boleh cuba klik pada butang atau tarik (drag) elemen untuk melihat sejauh mana fungsi UI tersebut berfungsi secara 'live'.
Prompts
Prompt Design Dashboard Estetik Fizikal
Target:
Google AI Studio / Gemini 3.0
I'm building a software that is a analytics meets AI app for restaurants. I want it to be designed in a similar vibe [referencing uploaded image]. Use the design language, knobs, and tactile buttons. Make it look like an 'AI analyst chef OS'.
Step by Step
Cara Bina Dashboard SaaS dengan Vibe 'Physical Product' di Google AI Studio
- Buka Google AI Studio dan navigasi ke bahagian 'Build'.
- Cari ruangan 'Describe your idea' atau kotak input prompt utama.
- Klik ikon lampiran atau 'Add Image' untuk memuat naik gambar rujukan produk fizikal (contoh: gambar alat muzik Teenage Engineering yang mempunyai butang dan tombol unik).
- Masukkan prompt yang menerangkan fungsi aplikasi SaaS anda (contoh: AI analytics untuk restoran).
- Nyatakan secara spesifik dalam prompt supaya AI mengikut 'vibe' dan bahasa reka bentuk (design language) daripada gambar rujukan tersebut, termasuk penggunaan elemen seperti knobs dan butang fizikal.
- Jika anda mahukan hasil yang lebih terperinci, sediakan Product Requirements Doc (PRD) yang menyenaraikan ciri-ciri produk secara spesifik.
- Copy dan paste isi kandungan PRD tersebut ke dalam ruangan prompt selepas deskripsi design.
- Klik butang 'Run' atau 'Generate' untuk menghasilkan UI dashboard.
- Setelah UI dihasilkan, uji elemen interaktif seperti butang atau fungsi drag-and-drop pada komponen dashboard tersebut.
