Learning Timeline
Key Insights
Identiti Visual Kod AI
Jika anda melihat penggunaan warna gradient 'Classic Blue' dan 'Purple' dalam aplikasi yang dijana, kebiasaannya itu adalah petanda aplikasi tersebut dibina menggunakan bantuan AI (AI-coded vibe).
Teknik Iterative Prompting
Jangan cuba masukkan semua feature dalam satu prompt jika ia terlalu kompleks. Mulakan dengan fungsi asas (MVP), kemudian minta AI tambah feature baru secara berperingkat seperti tab 'Templates' untuk hasil yang lebih stabil.
Prompts
Asas UI Builder Prompt
Target:
Kimi K2.5
Build a drag and drop UI builder like Figma. Include snap to grid and alignment guides. Include an export option to HTML.
Penambahan Template Prompt
Target:
Kimi K2.5
Add some pre-built templates including a login form, dashboard, pricing cards, and a landing hero page. Add a new 'Templates' tab to access these.
Step by Step
Proses Membina UI Builder dengan Kimi K2.5
- Buka tool AI Kimi K2.5 dan sediakan ruang input prompt.
- Masukkan prompt utama untuk membina struktur asas 'drag and drop' UI builder yang menyokong fungsi 'snap to grid' dan 'alignment guides'.
- Tunggu AI menjana kod dan paparan aplikasi. Uji fungsi 'drag' pada elemen asas seperti 'Image', 'Input', 'Card', dan 'Circle'.
- Gunakan fungsi 'Export' ke HTML yang telah dijana untuk memastikan kod boleh digunakan di luar platform.
- Masukkan prompt tambahan (iterative prompting) untuk menambah ciri 'pre-built templates' bagi meningkatkan fungsionaliti aplikasi.
- Klik pada tab 'Templates' yang baru muncul di bahagian atas navigasi aplikasi.
- Pilih template spesifik seperti 'Login Form', 'Dashboard', 'Pricing Cards', atau 'Landing Hero Page' untuk memuatkan rekaan secara automatik.
- Klik butang 'Download code' untuk memuat turun fail sumber dan buka secara 'Full Screen' untuk melihat hasil akhir rekaan.
