Learning Timeline
Key Insights
Kelebihan Voice Dictation
Gunakan suara (dictation) untuk memberikan arahan yang sangat granular. Arahan yang mengambil masa 5 minit untuk ditaip boleh diselesaikan dalam beberapa saat melalui suara, membolehkan anda memberi lebih banyak butiran teknikal kepada AI.
Pro Tip: Debugging Animasi
Semasa menjalankan Simulator Xcode, klik menu Debug di bahagian atas dan pilih 'Slow Animations'. Ini akan menjalankan animasi pada kelajuan separuh atau lebih perlahan, memudahkan anda melihat ralat visual atau pergerakan yang tidak lancar.
Cursor Plan Mode vs Claude Code
Cursor 'Plan Mode' lebih berkesan untuk masalah yang sangat kompleks kerana ia akan bertanya soalan pengesahan (seperti 'Adakah butang ini boleh ditekan berulang kali?') sebelum melaksanakan perubahan kod.
Prompts
Initial Animation Structure Prompt
Target:
Claude Code / Cursor
Create a button and when I click it, I want an animation to run to simulate an AI searching for nutrition info and calories. First, I want it to say 'Searching' with a shimmering text animation. After 1 second, I want that to drop down, and the text to say 'Analyzing' and I want that to drop from the top and replace it on one line. Then after that, I want it to say 'Found 10 sources' with three circles to the left of it and list some sources like YouTube and New York. Make sure the text is cut off and contained on one line during the animation.
Animation Refinement Prompt
Target:
Claude Code / Cursor
Make sure the text drops down instead of shooting back up. Increase the time to 2 seconds for each of the animations so they can show properly. Also, make the shimmering effect a little more extreme.
Step by Step
Membina Animasi iOS Kompleks dengan Voice Prompting
- Buka Xcode dan mulakan projek baru yang kosong (Blank Project).
- Buka folder projek tersebut menggunakan editor Cursor atau akses Claude Code melalui terminal.
- Aktifkan fungsi 'Voice Dictation' pada peranti anda untuk mula memberikan arahan secara lisan bagi menjimatkan masa menaip.
- Berikan prompt suara yang sangat terperinci kepada Claude Code: Mulakan dengan arahan untuk membuat butang yang apabila diklik, akan menjalankan animasi simulasi 'AI Searching'.
- Perincikan fasa pertama animasi: Teks 'Searching' dengan kesan 'shimmering'.
- Perincikan fasa kedua: Selepas 1 saat, teks 'Searching' jatuh ke bawah dan digantikan dengan teks 'Analyzing' yang muncul dari atas (drop down) pada baris yang sama.
- Perincikan fasa ketiga: Paparkan 'Found 10 sources' dengan tiga bulatan di sebelah kiri dan senarai sumber seperti 'YouTube' atau 'New York' yang di-hardcode.
- Arahkan Claude Code untuk memastikan teks tidak melimpah keluar dengan menetapkan had 'one line' (cut off) semasa animasi berlaku.
- Tekan Enter untuk membiarkan Claude Code menjana kod SwiftUI secara automatik ke dalam projek Xcode anda.
- Jalankan aplikasi dalam Simulator Xcode untuk melihat hasil kerja AI tersebut.
- Gunakan ciri 'Slow Animations' dalam Simulator untuk memeriksa kualiti pergerakan animasi secara teliti.
- Berikan prompt susulan (follow-up) untuk memperhalusi hasil, seperti meningkatkan durasi setiap animasi kepada 2 saat atau menguatkan kesan 'shimmering'.
- Ulangi proses iterasi (anggaran 10 hingga 20 prompt) sehingga mencapai tahap 'polish' yang diinginkan.
