· Prompt Engineering

Bikin Dashboard Interaktif Cepat dengan Claude 3.5 Sonnet Artifacts

1. Situasi Kritis Akibat Halusinasi AI dan Output Menyesatkan

Jam 4 sore di SCBD Jakarta.

Direktur operasional mendadak kirim pesan WhatsApp: “Tolong buatkan ringkasan performa penjualan kuartal ini dalam bentuk dashboard visual yang interaktif untuk meeting direksi jam 5 sore nanti. Datanya ada di CSV mentah 5.000 baris ini.” Jantung langsung berdegup kencang. Kalau saya pakai cara konvensional, buka Excel, bikin pivot table, atur grafik satu-satu, butuh waktu minimal 3 jam. Belum tentu tampilannya enak dilihat untuk level eksekutif.

Panik melanda karena tenggat waktu mepet dan bos tidak mau terima alasan. Awalnya saya coba prompt asal-asalan ke AI: *“Tolong buatkan dashboard dari data ini ya.

”* Hasilnya? AI cuma ngasih blok kode HTML berantakan atau teks panjang lebar yang tidak interaktif. Percuma, tidak bisa langsung diklik atau dipakai presentasi.

How to Use Claude 3.5 Sonnet Artifacts to Build Interactive Dashboard Prototypes Prompt Guide

Setelah trial-error beberapa kali, saya menemukan pola prompt engineering yang tepat dengan memaksimalkan fitur Claude 3.5 Sonnet Artifacts. Fitur ini tidak cuma menjawab lewat teks, tapi merender langsung aplikasi mini (React/HTML/Tailwind CSS) di panel sebelah kanan layar chat secara real-time.

Catatan Arsitek AI: Jangan pernah meminta AI membuat "laporan data" secara umum. Claude 3.5 Sonnet sangat kuat dalam pemrograman frontend jika Anda memintanya bertindak sebagai Senior Frontend Engineer dan langsung memanfaatkan environment Artifacts.

Kenapa Prompt Biasa Gagal Total?

Kesalahan terbesar profesional saat menggunakan AI untuk membuat visualisasi data adalah memberikan instruksi yang terlalu pasif. Contohnya.

*“Analisis data ini dan buat ringkasannya.

”*

AI tidak tahu format visual apa yang Anda inginkan, siapa target pembacanya, dan apakah dashboard itu harus interaktif (bisa filter tanggal, klik tombol, atau sorting tabel). Akibatnya, Anda mendapat teks monoton yang membosankan.

Untuk menjembatani masalah ini, kita butuh struktur prompt berbasis peran (role-playing), batasan teknis yang ketat, dan instruksi eksplisit untuk mengaktifkan fitur Artifacts.

Master Prompt Template: Dashboard Interaktif Instant

Salin template di bawah ini, sesuaikan bagian di dalam kurung siku dengan data Anda, lalu masukkan ke dalam Claude 3.5 Sonnet.

Role: Bertindaklah sebagai Senior Data Analyst dan UI/UX Engineer yang ahli dalam membuat dashboard interaktif tingkat enterprise.

Task: Buatlah sebuah dashboard web interaktif berbasis Single-File HTML menggunakan Tailwind CSS dan Lucide Icons (via CDN) yang ditampilkan di dalam Claude Artifacts. Dashboard ini harus merangkum data berikut secara visual, bersih, dan profesional.

Data Sumber:
[Masukkan atau lampirkan data CSV / ringkasan data Anda di sini]

Persyaratan Tampilan & Fungsionalitas (Pure Titanium Clean Theme):
1. Gunakan skema warna profesional dengan dominasi warna slate (#334155) dan aksen putih/abu-abu bersih.

2. Layout harus responsif (optimal di layar laptop direksi).

3. Sertakan minimal 3 kartu metrik utama (KPI Cards) di bagian atas (Total, Pertumbuhan, Rata-rata).

4. Buat setidaknya 2 grafik visual interaktif (Gunakan Chart.js via CDN untuk visualisasi tren atau pie chart).

5. Tambahkan fitur filter sederhana (misalnya berdasarkan kategori atau rentang waktu) yang membuat elemen UI bergerak dinamis.

Output: 
Langsung render kode lengkap yang siap dijalankan di dalam Artifacts tanpa penjelasan teks yang bertele-tele di luar kode.

Variasi dan Tips Keamanan Data

Untuk memaksimalkan hasil kerja di lingkungan korporat Indonesia yang mengutamakan kecepatan dan keamanan informasi, perhatikan beberapa aturan praktis ini:

  • Anonimisasi Data Sensitif: Jangan pernah memasukkan data mentah yang berisi nama lengkap klien, nomor rekening, atau NIK ke dalam AI publik. Ganti kolom sensitif dengan kode anonim seperti Klien-001, Klien-002.
  • Iterasi Cepat: Jika grafik pertama kurang pas, jangan buat prompt baru dari awal. Cukup balas di chat yang sama.

“Tolong ubah grafik batang di bawah menjadi grafik garis, dan ubah warna aksen utamanya menjadi biru gelap.” Claude akan memperbarui Artifacts seketika.

  • Ekspor Hasil: Begitu Artifacts terbuka di sisi kanan layar, Anda bisa langsung melihat pratinjau, menguji tombol filternya, lalu mengklik tombol “Publish” atau menyalin kodenya untuk disimpan sebagai file .html mandiri yang bisa dibuka di browser apa saja.

Pertanyaan yang Sering Diajukan (FAQ)

  1. Apakah saya memerlukan keahlian koding (HTML/CSS) untuk menggunakan prompt ini? Sama sekali tidak. Claude 3.5 Sonnet akan menulis seluruh kode di belakang layar. Tugas Anda hanyalah memberikan instruksi bisnis yang jelas dan melihat hasilnya jadi secara visual di panel Artifacts.

  2. Kenapa hasil Artifacts saya tidak mau muncul atau hanya berupa teks biasa? Pastikan Anda menggunakan model Claude 3.5 Sonnet (bukan versi lain yang lebih lama) dan pastikan fitur Artifacts di pengaturan akun Claude Anda sudah diaktifkan.

  3. Apakah data saya aman saat diunggah ke Claude untuk pembuatan dashboard? Claude memiliki kebijakan privasi ketat di mana data pengguna gratis maupun berbayar tidak digunakan untuk melatih model publik. Namun, untuk standar perusahaan perbankan atau telekomunikasi di Jakarta, tetap disarankan melakukan masking atau menyamarkan angka nominal besar dan identitas personal sebelum memprosesnya.

A.

Share:
Back to Blog