Learning Timeline
Key Insights
Kelebihan Model Terbaru (GPT-4o/Canvas)
Model yang lebih maju mampu membuat keputusan reka bentuk yang lebih bijak secara automatik, seperti menambah menu navigasi atau seksyen FAQ yang tidak ada dalam screenshot asal untuk meningkatkan kualiti UI.
Tips Jika Kod Terputus (Broken Code)
Kadangkala AI mungkin tersilap membuang sebahagian kod apabila mengemaskini imej. Jika ini berlaku, minta AI untuk 'rewrite the whole thing' supaya Canvas dapat memaparkan semula keseluruhan website tanpa ralat.
Automasi Carian Imej
Model AI yang lebih canggih mampu mencari pautan imej sendiri terus dari laman web asal jika diberikan konteks, tanpa memerlukan anda menyalin URL secara manual.
Prompts
Prompt Asal Penukaran Kod & Optimasi
Target:
ChatGPT
I want to see if you could actually recreate this. Do some front-end coding. Then, increase this for conversion—I want to see if you can improve things for better conversion. Recreate this in canvas so I don't have to download the code.
Prompt Mengemaskini Imej
Target:
ChatGPT
Go to the website, find that image, and then update this image here on the right.
Step by Step
Langkah Menukar Screenshot ke Kod dengan ChatGPT Canvas
- Buka ChatGPT dan pastikan anda memilih model terbaru (seperti GPT-4o) yang menyokong ciri Canvas.
- Klik ikon 'Paperclip' atau 'Attach' untuk memuat naik gambar screenshot website yang ingin ditukar.
- Taipkan arahan (prompt) untuk meminta AI membina semula kod front-end berdasarkan gambar tersebut dan minta ia dibuka dalam mod Canvas.
- Klik butang 'Run code' di dalam tetingkap Canvas untuk melihat hasil preview visual secara langsung.
- Jika terdapat imej yang tidak muncul atau 'broken', masukkan pautan (URL) imej yang betul dan arahkan AI untuk mengemaskini kod tersebut.
- Gunakan arahan tambahan untuk meminta AI menambah baik elemen UI/UX seperti menu navigasi, butang 'Call to Action' (CTA), atau seksyen FAQ untuk meningkatkan conversion.
- Jika berlaku ralat (error) selepas kemaskini, arahkan AI untuk menulis semula keseluruhan kod (rewrite) bagi memastikan struktur kod lengkap dan berfungsi semula.
