Learning Timeline
Key Insights
Kelebihan Latihan Claude
Claude sangat mahir dalam animasi kerana ia dilatih menggunakan dokumentasi rasmi Apple yang sangat lengkap. Ini membolehkannya menjana kod SwiftUI dan Metal yang tepat walaupun untuk arahan yang ringkas.
Tips 'Vibe Coding' untuk Animasi
Kunci utama untuk berjaya adalah kebolehan anda menghuraikan (break down) imaginasi anda ke dalam plain English yang mudah. Jangan risau tentang teknikal, fokus pada bagaimana perasaan atau rupa pergerakan tersebut.
Pentingnya Mikro-interaksi
Animasi kecil seperti butang yang melantun (bounce) atau berubah bentuk (rotate) memberikan 'premium feel' kepada app anda dan membuatkan pengguna berasa lebih seronok menggunakan produk tersebut.
Prompts
Prompt Animasi Butang Dikte (Dictation)
Target:
Claude Code
Can you make a black background come from the microphone icon and can you rotate the send button into the check mark?
Prompt Sticker Holografik
Target:
Claude Code
Can you recreate a kind of holographic sticker where I can move my finger around and I can drag along the sticker?
Step by Step
Cara Menjana Mikro-interaksi iOS Menggunakan Claude Code
- Buka interface Claude Code atau tools pembangunan AI pilihan anda (seperti CreateAnything, Lovable, atau v0).
- Kenal pasti elemen UI yang ingin dianimasikan (contohnya: butang mikrofon atau sticker).
- Huraikan aksi pencetus (trigger) dalam plain English, seperti 'Apabila ikon ini diklik' atau 'Apabila jari meleret di atas sticker'.
- Jelaskan perubahan visual secara spesifik: nyatakan warna (contoh: 'background turns black'), arah gerakan (contoh: 'expands from the microphone'), dan rotasi (contoh: 'rotate the send button into the check mark').
- Untuk kesan visual yang sangat kompleks seperti kesan holografik, minta Claude Code menggunakan framework 'Swift Metal'.
- Semak kod yang dijana dan lakukan 'fine-tuning' dengan meminta pelarasan pada kelajuan animasi atau kesan tambahan seperti 'bounce effect' pada modal.
- Copy dan paste kod ke dalam projek Xcode anda untuk melihat hasil interaksi tersebut.
