Bina UI Laman Web Moden dengan ChatGPT 5.2 Canvas Mode | Alpha | PandaiTech

Bina UI Laman Web Moden dengan ChatGPT 5.2 Canvas Mode

Gunakan prompt terperinci dalam Canvas Mode untuk membina laman web dengan fungsi komplek seperti membandingkan alatan AI. Belajar dari proses ini untuk faham potensi dan hadnya.

Learning Timeline
Key Insights

Had bagi 'One-Shot Prompt'

Untuk tugasan yang kompleks seperti membina sebuah 'web app', satu 'prompt' tunggal (one-shot) mungkin tidak akan menghasilkan aplikasi yang sempurna. Anda mungkin perlu menggunakan beberapa 'prompt' susulan untuk membetulkan 'bug' dan menambahbaik fungsi.

Kelebihan Visual vs. Kelemahan Fungsi

ChatGPT 5.2 menunjukkan peningkatan besar dari segi visual (UI moden, kesan 'transparent', mod cerah/gelap berfungsi). Walau bagaimanapun, fungsi teras yang dijana mungkin kurang stabil atau 'broken' berbanding model sebelumnya (cth: 5.1) apabila menggunakan 'prompt' tunggal.

Penjanaan Kod Lebih Kompleks

Model AI yang lebih baru seperti ChatGPT 5.2 berpotensi menjana kod yang jauh lebih panjang dan kompleks (cth: 1,800+ baris berbanding 300 baris oleh model lama) untuk tugasan yang sama. Ini menunjukkan keupayaannya untuk membina struktur yang lebih rumit.
Prompts

Prompt untuk Laman Web Perbandingan Alatan AI

Target: ChatGPT
Create a modern looking website using the canvas mode. The website should allow users to compare different AI tools, similar to the concept on Futuripedia. Key requirements: - A clean, modern UI with both a light mode and a dark mode that works correctly. - A functional filtering system to sort through AI tools. - When a user clicks on a tool, a pop-up modal with a transparent effect should display its details. - Users must be able to select two or more tools for comparison. - The comparison view must display the selected tools side-by-side in a clear, easy-to-read table. - Ensure the app is fully functional and not broken on the first generation.
Step by Step

Jana Laman Web Menggunakan Prompt dalam Canvas Mode

  1. Buka antaramuka ChatGPT 5.2.
  2. Cari dan aktifkan 'Canvas Mode'. Ini akan membolehkan anda melihat pratonton visual kod yang dijana secara langsung.
  3. Masukkan 'prompt' anda yang sangat terperinci ke dalam kotak input teks.
  4. Hantar 'prompt' tersebut untuk memulakan proses penjanaan laman web.
  5. Perhatikan 'Canvas Mode' memaparkan laman web yang dijana secara visual.

Uji Kefungsian Perbandingan pada Laman Web yang Dijana

  1. Pada laman web yang terhasil, klik pada salah satu kad alatan AI yang tersedia.
  2. Satu tetingkap 'pop-up' dengan butiran alatan akan muncul.
  3. Klik butang 'Select to compare' untuk alatan pertama (cth: ChatGPT).
  4. Klik butang 'Add a chat GPT to compare'. (Nota: Langkah ini mungkin menunjukkan 'bug' atau aliran kerja yang janggal).
  5. Pilih alatan AI kedua dari senarai utama untuk dibuat perbandingan (cth: Claude).
  6. Klik 'Select to compare' pada alatan kedua tersebut.
  7. Akhir sekali, cari dan klik butang 'Compare' untuk melihat jadual perbandingan.
  8. Sahkan sama ada jadual perbandingan antara dua alatan tersebut berjaya dipaparkan.

More from Coding & Pembangunan Aplikasi AI

View All