Learning Timeline
Key Insights
Kelebihan Fleksibiliti Bolt.new
Bolt lebih fleksibel berbanding V0 dan Lovable kerana ia menyediakan akses terus kepada Terminal dan File Tree. Ini membolehkan anda memasang library tambahan (seperti Lucide Icons atau Framer Motion) dan menguruskan state management dengan lebih bebas seperti dalam VS Code sebenar.
Tip Penggunaan V0 untuk UI
V0 sangat berkuasa untuk fasa 'copy-and-paste' komponen. Jika anda hanya perlukan design 'Feed Card' LinkedIn yang cantik tanpa mahu memikirkan struktur fail projek, gunakan V0 untuk hasil visual yang paling kemas (polished).
Had Penjanaan AI
Walaupun AI boleh menjana UI yang hampir sempurna, fungsi 'Login' atau 'Database' biasanya memerlukan konfigurasi manual API key atau Supabase dalam Lovable/Bolt untuk berfungsi sepenuhnya.
Prompts
LinkedIn Clone Generation Prompt
Target:
Bolt / V0 / Lovable
Create a modern LinkedIn clone using React and Tailwind CSS. Include a sticky navigation bar with search and icons, a left sidebar for user profile summary, a main feed area for posts with 'Like', 'Comment', and 'Share' functionality, and a right sidebar for 'Add to your feed' suggestions. Ensure the layout is responsive and matches the LinkedIn professional blue and white theme.
Step by Step
Membina Prototaip LinkedIn dengan Bolt.new
- Layari laman web Bolt.new di pelayar web anda.
- Cari kotak input teks utama yang tertera 'What do you want to build?'.
- Masukkan prompt terperinci untuk klon LinkedIn (rujuk Prompt Card).
- Tekan butang 'Enter' atau klik ikon 'Arrow' untuk memulakan proses penjanaan.
- Perhatikan panel kiri (File Explorer) di mana AI akan mula mencipta struktur fail seperti 'src/components' dan 'src/pages'.
- Lihat panel 'Terminal' di bahagian bawah untuk memantau proses instalasi dependencies secara automatik.
- Setelah selesai, klik tab 'Preview' di bahagian kanan untuk berinteraksi dengan UI LinkedIn yang telah siap.
- Untuk membuat perubahan, taip arahan tambahan dalam chatbox di sebelah kiri (contoh: 'Tukarkan butang Like kepada warna biru').
Membina Komponen UI LinkedIn dengan V0.dev
- Buka laman web v0.dev.
- Taip prompt yang memfokuskan kepada visual LinkedIn pada ruangan chat.
- Klik butang 'Generate' dan tunggu AI memberikan tiga variasi reka bentuk yang berbeza.
- Pilih salah satu variasi (v1, v2, atau v3) yang paling menepati citarasa anda.
- Klik pada mana-mana elemen UI dalam preview untuk melihat kod spesifik bagi elemen tersebut.
- Klik butang 'Copy Code' di bahagian atas kanan untuk menyalin kod React/Tailwind ke dalam projek anda.
Membina Aplikasi Web LinkedIn dengan Lovable
- Akses dashboard Lovable.dev (dahulunya GPT Engineer).
- Klik butang 'New Project' dan namakan projek anda sebagai 'LinkedIn Clone'.
- Masukkan prompt deskriptif ke dalam kotak input yang disediakan.
- Klik 'Create' dan tunggu AI membina keseluruhan scaffold aplikasi.
- Klik pada tab 'Web Preview' untuk melihat hasil live aplikasi yang boleh berfungsi.
- Gunakan fitur 'Edit' untuk menambah logik atau mengubah gaya visual secara interaktif melalui chat.
