Bina Visualisasi Data Beranimasi dengan Claude Opus 4.7 Artifacts | Alpha | PandaiTech

Bina Visualisasi Data Beranimasi dengan Claude Opus 4.7 Artifacts

Cara prompt Claude untuk hasilkan carta data beranimasi ala dokumentari (sinematik). Kalau ada error pada fungsi UI seperti butang play, anda cuma perlu beri prompt susulan yang ringkas untuk baiki kod tersebut.

Learning Timeline
Key Insights

Cara Atasi Ralat Butang Play

Jangan panik jika butang 'Play' pada Artifact tidak berfungsi pada cubaan pertama. Ini adalah ralat biasa dalam penjanaan kod AI. Anda hanya perlu beritahu Claude secara spesifik bahagian mana yang tidak berfungsi (contoh: 'The timeline is not advancing'), dan AI akan mengemas kini kod tersebut secara automatik.

Kelebihan Artifacts yang Boleh Dikongsi

Visualisasi yang dihasilkan bukan sekadar gambar atau video statik, tetapi fail kod interaktif. Anda boleh 'Save' sebagai Artifact dan gunakannya sebagai bahan pembentangan yang boleh dikongsi melalui URL unik.
Prompts

Prompt Visualisasi Data Sinematik

Target: Claude 3.5 Sonnet / Opus
Build a cinematic data visualization covering 1822 present time and show me world population CO2 life expectancy and global GDP per capita and render it in an animated style sort of like a Pixar documentary.

Prompt Susulan Baiki Bug UI

Target: Claude 3.5 Sonnet / Opus
The player does not work. Please fix it so the years change when I press play.
Step by Step

Cara Membina Visualisasi Data Beranimasi dengan Claude Artifacts

  1. Buka Claude.ai dan pastikan anda menggunakan model yang menyokong feature Artifacts (seperti Claude 3.5 Sonnet atau Claude 3 Opus).
  2. Masukkan prompt utama untuk meminta Claude membina visualisasi data sinematik yang merangkumi data tahun 1822 hingga sekarang.
  3. Tunggu sehingga panel 'Artifacts' muncul di sebelah kanan skrin yang memaparkan UI visualisasi yang sedang dibina.
  4. Klik butang 'Play' pada visualisasi tersebut untuk melihat animasi data berjalan.
  5. Jika butang 'Play' tidak menggerakkan tahun secara automatik, cuba gerakkan (scrub) slider pada timeline secara manual untuk menyemak sama ada data dipaparkan dengan betul.
  6. Jika terdapat ralat pada fungsi UI (seperti butang play tidak berfungsi), masukkan prompt susulan yang ringkas di dalam chat box untuk meminta Claude membaiki kod tersebut.
  7. Setelah visualisasi berfungsi dengan sempurna, klik butang 'Download' (ikon fail) di bahagian bawah Artifact untuk menyimpan fail kod tersebut.
  8. Klik butang 'Publish' di bahagian bawah Artifact jika anda ingin menjana pautan (link) untuk dikongsi kepada orang lain.

More from Coding & Pembangunan Aplikasi AI

View All