Learning Timeline
Key Insights
Kelebihan Konteks Visual (Multimodal)
AI lebih mudah memahami masalah UI yang spesifik apabila diberikan screenshot berbanding penerangan teks sahaja. Ini mengurangkan ralat 'hallucination' di mana AI mungkin tersalah anggap elemen mana yang anda maksudkan.
Tip Pemilihan Elemen
Walaupun anda boleh menggunakan 'Visual Edits tool' untuk memilih elemen, menggabungkan pemilihan elemen (selecting element) dengan lampiran screenshot adalah cara paling tepat untuk memastikan AI mengedit kod pada komponen yang betul.
Prompts
Arahan Membetulkan Visual Map
Target:
AI Coding Assistant (V0/Cursor/Claude)
The map only partially loads sometimes. I want you to add the night-day overlay to this element and fix the loading issue.
Step by Step
Cara Memberi Konteks Visual kepada AI untuk Membetulkan UI
- Kenalpasti elemen UI atau pepijat (bug) visual yang perlu dibetulkan pada dashboard aplikasi.
- Gunakan pintasan papan kekunci 'Command + Shift + 4' (untuk Mac) untuk mengambil screenshot pada bahagian yang bermasalah.
- Klik pada ruangan input chat dalam tools pembangunan AI (seperti V0 atau cursor).
- Tekan 'Command + V' untuk melakukan 'Paste' gambar screenshot tadi terus ke dalam chat.
- Klik butang 'Select Element' (ikon penunjuk) jika tersedia untuk memilih komponen spesifik yang ingin diubah secara visual.
- Taipkan arahan (prompt) yang menjelaskan perubahan yang dimahukan, contohnya menambah 'night/day overlay'.
- Pastikan imej telah dimuat naik sepenuhnya (Add image) sebelum menekan 'Enter' atau klik 'Send' untuk menjana kod pembetulan.
