Learning Timeline
Key Insights
Tips Mendapatkan Prompt Berkualiti
Jika anda tidak tahu bagaimana untuk menulis prompt yang teknikal, minta Claude sendiri untuk 'write a detailed prompt for an interactive website based on my basic idea' sebelum anda menjana kod sebenar.
Fungsi Tool Draw & Comment
Gunakan tool 'Draw' untuk memberikan rujukan visual kepada Claude. Ini jauh lebih berkesan daripada hanya menggunakan teks apabila anda ingin meletakkan logo atau mengubah susun atur (layout) yang spesifik.
Potensi Masa Hadapan
Prototaip yang dihasilkan oleh Claude ini boleh dikembangkan menjadi aplikasi sebenar dengan menambah integrasi database untuk fitur seperti 'favorite', 'share', atau 'remix'.
Prompts
Penghasilan Website Interaktif Kompleks
Target:
Claude
Create a highly interactive educational cooking website called 'The Forge'. The UI should include an onboarding flow, an item comparison section, and a 'Forge' feature where users can combine ingredients and click 'Ignite' to see an interaction. Include adjustable UI controls for Bloom Intensity, Ambient Hue, and Animation Speed. Ensure the layout has multiple exploratory tabs.
Step by Step
Proses Menghasilkan Prototaip Website Interaktif
- Buka Claude.ai dan pastikan fitur 'Artifacts' telah diaktifkan dalam akaun anda.
- Mulakan perbualan dengan Claude untuk merangka prompt yang sangat terperinci (spelled out) tentang struktur dan fitur website yang dimahukan.
- Salin prompt terperinci yang dihasilkan oleh Claude dan masukkan semula ke dalam chatbox untuk menjana prototaip visual.
- Setelah preview muncul, uji setiap tab dan elemen interaktif (contohnya fitur perbandingan item atau fungsi 'Forge').
- Gunakan slider kawalan yang disediakan di dalam aplikasi untuk melaraskan 'Bloom Intensity' (kecerahan cahaya) dan 'Ambient Hue' (tona warna).
- Laraskan 'Speed' pada slider untuk mengawal kelajuan animasi atau interaksi pada website.
- Klik pada icon komen di ruangan preview dan pilih bahagian spesifik yang ingin diubah (contoh: teks yang terlindung oleh menu).
- Taip arahan perubahan seperti 'Move everything down' dalam ruangan komen tersebut untuk menghantar prompt kemas kini automatik.
- Gunakan tool 'Draw' untuk menunjuk pada bahagian tertentu atau melukis kotak di mana anda mahu elemen spesifik (seperti logo) diletakkan.
