Learning Timeline
Key Insights
Kelebihan Plan Mode
Plan Mode membolehkan anda melihat 'blueprint' aplikasi sebelum kod ditulis. Ini adalah masa terbaik untuk mengesan kesilapan reka bentuk atau teknikal bagi mengelakkan pembaziran masa semasa proses coding.
Kenapa Claude Code Mengambil Masa?
Berbeza dengan AI generator biasa, Claude Code mengambil masa lebih lama kerana ia melakukan 'self-testing'. Ia akan menjalankan aplikasi, mengambil screenshot, dan membetulkan ralat sendiri sebelum menyerahkan hasil akhir kepada anda.
Kepentingan Konteks
Semakin banyak konteks dan detail yang anda berikan dalam prompt asal, semakin tepat dan komprehensif hasil dashboard yang akan dibina oleh Claude Code.
Prompts
Seed Prompt untuk Menjana Prompt Teknikal
Target:
Claude Chat (Sonnet)
Create a prompt for claude code for a dashboard where I could compare the top 20 AI tools. Include technical details and design details.
Step by Step
Cara Menggunakan Plan Mode Claude Code untuk Bina Dashboard
- Buka Claude Chat dan pastikan anda menggunakan model Claude 3.5 Sonnet untuk kualiti prompt terbaik.
- Taip arahan dalam Claude Chat untuk meminta AI menjana prompt teknikal yang lengkap bagi pembinaan dashboard perbandingan 20 AI tools.
- Salin (Copy) keseluruhan prompt teknikal yang dihasilkan oleh Claude Chat tersebut.
- Buka interface Claude Code pada komputer anda.
- Pilih pilihan untuk memulakan projek baru ('Create a new project').
- Pilih folder simpanan yang berbeza atau cipta folder baru ('Choose a different folder and create a new one') untuk mengelakkan percampuran fail.
- Tampal (Paste) prompt teknikal yang telah disalin tadi ke dalam input Claude Code.
- Perhatikan paparan 'Plan Mode' yang muncul. Baca pelan tindakan yang disediakan dalam bentuk bahasa mudah dan aspek teknikal.
- Semak butiran reka bentuk seperti skema warna atau struktur fail dalam pelan tersebut. Jika ada yang tidak menepati citarasa, masukkan arahan 'Revision' di sini.
- Jika pelan sudah memuaskan, taip atau pilih 'Approve this plan' untuk memulakan proses pengkodan (coding) secara automatik.
- Biarkan Claude Code bekerja. AI akan menulis kod, melakukan testing, dan mengambil screenshot secara kendiri untuk memastikan aplikasi berfungsi.
- Setelah selesai, semak struktur fail dalam folder projek untuk memastikan semua komponen (HTML, CSS, JS, dll.) telah dicipta.
- Uji dashboard yang telah siap untuk melihat responsiviti pada paparan desktop dan mobile.
