Learning Timeline
Key Insights
Interaktiviti Penuh
Artifacts bukan sekadar paparan visual pegun; ia adalah persekitaran kod yang hidup. Anda boleh menekan button dan menavigasi menu seolah-olah laman web tersebut sudah di-host secara live.
Iterasi Pantas Tanpa Coding
Anda tidak perlu tahu bahasa pengaturcaraan untuk mengubah design. Gunakan bahasa natural di ruangan chat untuk meminta perubahan seperti 'tambah animasi' atau 'tukar skema warna', dan Claude akan mengemas kini kod tersebut secara real-time.
Prompts
Penjanaan Portfolio Asas
Target:
Claude AI
generate a portfolio website for a designer
Penambahbaikan Design (Aesthetic Update)
Target:
Claude AI
make it more aesthetic
Step by Step
Membina Laman Web Portfolio dengan Claude Artifacts
- Buka Claude.ai dan log masuk ke akaun anda.
- Taip arahan penjanaan laman web dalam ruangan chat (rujuk Prompt Card).
- Tekan 'Enter' dan perhatikan tetingkap 'Artifacts' yang muncul secara automatik di sebelah kanan ruangan chat.
- Tunggu Claude selesai menulis kod sehingga paparan bertukar dari kod sumber kepada mod 'Preview'.
- Gunakan kursor untuk berinteraksi dengan elemen laman web dalam tetingkap 'Preview' (klik button, tatal skrin, atau tukar paparan projek).
- Klik tab 'Code' di bahagian atas tetingkap Artifacts jika anda ingin melihat struktur kod yang dijana.
- Klik ikon 'Copy' atau 'Download' di penjuru bawah tetingkap Artifacts untuk menyimpan fail kod ke komputer anda.
- Taip arahan tambahan (follow-up prompt) di ruangan chat sebelah kiri untuk membuat perubahan design (contoh: mengubah estetika).
- Pantau kemas kini kod secara 'real-time' dalam tetingkap Artifacts sehingga versi design yang baru dipaparkan.
